@chakra-ui/button - npm Package Compare versions

Comparing version 2.0.12 to 2.0.13

dist/index.cjs.js

@@ -204,2 +204,22 @@ "use strict";
 var import_react6 = require("react");
+var attachedStyles = {
+  horizontal: {
+    "> *:first-of-type:not(:last-of-type)": { borderEndRadius: 0 },
+    "> *:not(:first-of-type):not(:last-of-type)": { borderRadius: 0 },
+    "> *:not(:first-of-type):last-of-type": { borderStartRadius: 0 }
+  },
+  vertical: {
+    "> *:first-of-type:not(:last-of-type)": { borderBottomRadius: 0 },
+    "> *:not(:first-of-type):not(:last-of-type)": { borderRadius: 0 },
+    "> *:not(:first-of-type):last-of-type": { borderTopRadius: 0 }
+  }
+};
+var gapStyles = {
+  horizontal: (spacing) => ({
+    "& > *:not(style) ~ *:not(style)": { marginStart: spacing }
+  }),
+  vertical: (spacing) => ({
+    "& > *:not(style) ~ *:not(style)": { marginTop: spacing }
+  })
+};
 var ButtonGroup = (0, import_system4.forwardRef)(function ButtonGroup2(props, ref) {
@@ -214,2 +234,3 @@ const {
     isDisabled,
+    orientation = "horizontal",
     ...rest
@@ -220,17 +241,6 @@ } = props;
   let groupStyles = {
-    display: "inline-flex"
+    display: "inline-flex",
+    ...isAttached ? attachedStyles[orientation] : gapStyles[orientation](spacing)
   };
-  if (isAttached) {
-    groupStyles = {
-      ...groupStyles,
-      "> *:first-of-type:not(:last-of-type)": { borderEndRadius: 0 },
-      "> *:not(:first-of-type):not(:last-of-type)": { borderRadius: 0 },
-      "> *:not(:first-of-type):last-of-type": { borderStartRadius: 0 }
-    };
-  } else {
-    groupStyles = {
-      ...groupStyles,
-      "& > *:not(style) ~ *:not(style)": { marginStart: spacing }
-    };
-  }
+  const isVertical = orientation === "vertical";
   return /* @__PURE__ */ import_react.default.createElement(ButtonGroupProvider, {
@@ -244,2 +254,4 @@ value: context
     "data-attached": isAttached ? "" : void 0,
+    "data-orientation": orientation,
+    flexDir: isVertical ? "column" : void 0,
     ...rest
@@ -246,0 +258,0 @@ }));

dist/index.esm.js

@@ -179,2 +179,22 @@ // ../../../react-shim.js
 import { useMemo as useMemo3 } from "react";
+var attachedStyles = {
+  horizontal: {
+    "> *:first-of-type:not(:last-of-type)": { borderEndRadius: 0 },
+    "> *:not(:first-of-type):not(:last-of-type)": { borderRadius: 0 },
+    "> *:not(:first-of-type):last-of-type": { borderStartRadius: 0 }
+  },
+  vertical: {
+    "> *:first-of-type:not(:last-of-type)": { borderBottomRadius: 0 },
+    "> *:not(:first-of-type):not(:last-of-type)": { borderRadius: 0 },
+    "> *:not(:first-of-type):last-of-type": { borderTopRadius: 0 }
+  }
+};
+var gapStyles = {
+  horizontal: (spacing) => ({
+    "& > *:not(style) ~ *:not(style)": { marginStart: spacing }
+  }),
+  vertical: (spacing) => ({
+    "& > *:not(style) ~ *:not(style)": { marginTop: spacing }
+  })
+};
 var ButtonGroup = forwardRef2(function ButtonGroup2(props, ref) {
@@ -189,2 +209,3 @@ const {
     isDisabled,
+    orientation = "horizontal",
     ...rest
@@ -195,17 +216,6 @@ } = props;
   let groupStyles = {
-    display: "inline-flex"
+    display: "inline-flex",
+    ...isAttached ? attachedStyles[orientation] : gapStyles[orientation](spacing)
   };
-  if (isAttached) {
-    groupStyles = {
-      ...groupStyles,
-      "> *:first-of-type:not(:last-of-type)": { borderEndRadius: 0 },
-      "> *:not(:first-of-type):not(:last-of-type)": { borderRadius: 0 },
-      "> *:not(:first-of-type):last-of-type": { borderStartRadius: 0 }
-    };
-  } else {
-    groupStyles = {
-      ...groupStyles,
-      "& > *:not(style) ~ *:not(style)": { marginStart: spacing }
-    };
-  }
+  const isVertical = orientation === "vertical";
   return /* @__PURE__ */ React.createElement(ButtonGroupProvider, {
@@ -219,2 +229,4 @@ value: context
     "data-attached": isAttached ? "" : void 0,
+    "data-orientation": orientation,
+    flexDir: isVertical ? "column" : void 0,
     ...rest
@@ -221,0 +233,0 @@ }));

package.json

 {
   "name": "@chakra-ui/button",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "description": "A React component that is a base button.",
@@ -39,8 +39,2 @@ "keywords": [
   "devDependencies": {
-    "@chakra-ui/utils": "2.0.12",
-    "@chakra-ui/shared-utils": "2.0.3",
-    "@chakra-ui/system": "2.3.2",
-    "@chakra-ui/icons": "2.0.12",
-    "@chakra-ui/theme": "2.2.0",
-    "@chakra-ui/layout": "2.1.10",
     "framer-motion": "^6.2.9",
@@ -50,3 +44,9 @@ "react-icons": "^4.2.0",
     "react": "^18.0.0",
-    "clean-package": "2.1.1"
+    "clean-package": "2.1.1",
+    "@chakra-ui/utils": "2.0.12",
+    "@chakra-ui/shared-utils": "2.0.3",
+    "@chakra-ui/system": "2.3.4",
+    "@chakra-ui/icons": "2.0.13",
+    "@chakra-ui/theme": "2.2.2",
+    "@chakra-ui/layout": "2.1.11"
   },
@@ -53,0 +53,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

26552

increased by4.17%

Lines of code

642

increased by3.88%

No dependency changes