@conveyorhq/arrow-ds 1.92.0 → 1.93.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.92.0",
+  "version": "1.93.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Button/ButtonGroup.js

@@ -1,18 +1,45 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonGroup = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const Box_1 = require("../Box");
 const Flex_1 = require("../Flex");
 const bem_1 = require("../../utilities/bem");
 const types_1 = require("../../types");
 const cn = "ButtonGroup";
 const ButtonGroup = (props) => {
-    const { className, isSegmented = false, isFullWidth = false, justify = types_1.JUSTIFY.START, ...rest } = props;
+    const { children, className, isSegmented = false, isFullWidth = false, justify = types_1.JUSTIFY.START, ...rest } = props;
     const buttonGroupClassName = classnames_1.default(bem_1.bem(cn), isSegmented && bem_1.bem(cn, { m: "isSegmented" }), isFullWidth && bem_1.bem(cn, { m: "isFullWidth" }), `justify-${justify}`, className);
-    return react_1.default.createElement(Flex_1.Flex, Object.assign({ className: buttonGroupClassName }, rest));
+    return (react_1.default.createElement(Flex_1.Flex, Object.assign({ className: buttonGroupClassName }, rest), isSegmented
+        ? react_1.Children.map(children, (child) => {
+            if (react_1.isValidElement(child)) {
+                return react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "button" }) }, child);
+            }
+            return null;
+        })
+        : children));
 };
 exports.ButtonGroup = ButtonGroup;

package/public/css/styles.css

@@ -2006,29 +2006,29 @@ override built-in Image component classes */
 
 .ads-ButtonGroup:not(.ads-ButtonGroup--isSegmented) {
   flex-wrap: wrap;
+  gap: 8px;
 }
 
 .ads-ButtonGroup--isSegmented {
   flex-wrap: nowrap;
 }
 
-.ads-ButtonGroup--isSegmented > .ads-Button:not(:first-of-type) {
+.ads-ButtonGroup--isSegmented
+  > .ads-ButtonGroup-button:not(:first-of-type)
+  .ads-Button {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.ads-ButtonGroup--isSegmented > .ads-Button:not(:last-of-type) {
+.ads-ButtonGroup--isSegmented
+  > .ads-ButtonGroup-button:not(:last-of-type)
+  .ads-Button {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right-width: 0;
 }
 
-.ads-ButtonGroup:not(.ads-ButtonGroup--isSegmented)
-  > .ads-Button:not(:last-of-type) {
-  margin-right: 8px;
-}
-
-.ads-ButtonGroup--isFullWidth > .ads-Button {
+.ads-ButtonGroup--isFullWidth .ads-Button {
   flex: 1 1 auto;
 }
 
@@ -8291,6 +8291,10 @@ override built-in Image component classes */
   width: 100%;
 }
 
+.w-56 {
+  width: 224px;
+}
+
 .w-4 {
   width: 16px;
 }
@@ -8303,10 +8307,6 @@ override built-in Image component classes */
   width: 60px;
 }
 
-.w-56 {
-  width: 224px;
-}
-
 .w-1\/2 {
   width: 50%;
 }
@@ -8735,6 +8735,11 @@ override built-in Image component classes */
   padding-right: 16px;
 }
 
+.py-3 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
 .px-3 {
   padding-left: 12px;
   padding-right: 12px;
@@ -8750,11 +8755,6 @@ override built-in Image component classes */
   padding-right: 32px;
 }
 
-.py-3 {
-  padding-top: 12px;
-  padding-bottom: 12px;
-}
-
 .px-1 {
   padding-left: 4px;
   padding-right: 4px;