@conveyorhq/arrow-ds 1.30.2 → 1.30.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.30.2",
+  "version": "1.30.3",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {
@@ -56,7 +56,7 @@
     "build:css": "yarn run postcss -c postcss.config.js -o public/css/styles.css src/css/styles.css",
     "build:copy-files": "yarn run build:copy-svg && yarn run build:copy-style-dictionary",
     "build:copy-svg": "copyfiles -u 1 src/**/*.svg public/",
-    "build:copy-style-dictionary": "copyfiles style-dictionary/**/* style-dictionary/tailwind.config.js public/",
+    "build:copy-style-dictionary": "copyfiles style-dictionary/dist/* style-dictionary/tailwind.config.js public/",
     "minify:css": "csso public/css/styles.css --output public/css/styles.min.css --comments none --source-map file",
     "storybook": "yarn run build && start-storybook --docs -p 9002 -c .storybook -s .storybook",
     "build-storybook": "yarn run build && build-storybook --docs -c .storybook -s .storybook -o storybook-static",

package/public/components/Button/Button.js

@@ -69,7 +69,7 @@ exports.Button = react_1.forwardRef(({ as: Component = "button", children, class
     const isDisabled = disabled || isLoading;
     const themeContext = react_1.useContext(contexts_1.ThemeContext);
     const theme = themeProp || themeContext;
-    const buttonClassNames = classnames_1.default(bem_1.bem(cn), bem_1.bem(cn, { m: variant }), bem_1.bem(cn, { m: theme }), block ? ["flex", "w-full"] : "inline-flex", getButtonSizeClasses(size, icon, children), depressed && bem_1.bem(cn, { m: "depressed" }), isDisabled ? ["opacity-50", "pointer-events-none"] : "", className);
+    const buttonClassNames = classnames_1.default(bem_1.bem(cn), bem_1.bem(cn, { m: variant }), bem_1.bem(cn, { m: theme }), block && bem_1.bem(cn, { m: "block" }), getButtonSizeClasses(size, icon, children), depressed && bem_1.bem(cn, { m: "depressed" }), isDisabled && bem_1.bem(cn, { m: "disabled" }), className);
     const iconClassNames = classnames_1.default(bem_1.bem(cn, { e: "icon" }), children && bem_1.bem(cn, { e: "icon", m: iconPosition }), isLoading && bem_1.bem(cn, { e: "icon", m: "invisible" }));
     const iconProps = icon
         ? {
@@ -85,7 +85,7 @@ exports.Button = react_1.forwardRef(({ as: Component = "button", children, class
         type = "button";
     }
     const propsIfLink = Component === Link_1.Link ? { noStyles: true } : {};
-    return (react_1.default.createElement(Component, Object.assign({ type: type, className: buttonClassNames, disabled: disabled, ref: ref }, propsIfLink, rest),
+    return (react_1.default.createElement(Component, Object.assign({ type: type, className: buttonClassNames, disabled: isDisabled, ref: ref }, propsIfLink, rest),
         icon && iconProps && iconPosition === BUTTON_ICON_POSITION.LEFT && (react_1.default.createElement(Icon_1.Icon, Object.assign({}, iconProps))),
         react_1.default.createElement("span", { className: classnames_1.default(bem_1.bem(cn, { e: "content" }), isLoading && bem_1.bem(cn, { e: "content", m: "invisible" })) }, children),
         icon && iconProps && iconPosition === BUTTON_ICON_POSITION.RIGHT && (react_1.default.createElement(Icon_1.Icon, Object.assign({}, iconProps))),

package/public/components/Modal/Modal.js

@@ -28,7 +28,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_focus_lock_1 = __importDefault(require("react-focus-lock"));
 const react_remove_scroll_1 = require("react-remove-scroll");
 const Box_1 = require("../Box");
-const Fixed_1 = require("../Fixed");
 const Flex_1 = require("../Flex");
 const Portal_1 = require("../Portal");
 const Description_1 = require("../Description");
@@ -76,7 +75,7 @@ const ModalFooterMultiStep = ({ steps, currentStep, leftButtonLabel, rightButton
         react_1.default.createElement(Flex_1.Flex, { className: bem_1.bem(cn, { e: "buttonLabels" }) },
             react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "buttonLabel", m: "left" }) }, leftButtonLabel),
             react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "buttonLabel", m: "right" }) }, rightButtonLabel)),
-        react_1.default.createElement(Box_1.Box, { className: "relative" },
+        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "progressDots-container" }) },
             children,
             react_1.default.createElement(Flex_1.Flex, { className: bem_1.bem(cn, { e: "progressDots" }) },
                 react_1.default.createElement(Stack_1.Stack, { spacing: 5 }, [...new Array(steps).keys()].map((dot, index) => (react_1.default.createElement(Box_1.Box, { key: dot, className: classnames_1.default([
@@ -109,7 +108,7 @@ const Modal = (props) => {
         react_1.default.createElement(Portal_1.Portal, null,
             react_1.default.createElement(react_focus_lock_1.default, { autoFocus: autoFocus, returnFocus: true },
                 react_1.default.createElement(react_remove_scroll_1.RemoveScroll, null,
-                    react_1.default.createElement(Fixed_1.Fixed, { className: bem_1.bem(`${cn}Container`) },
+                    react_1.default.createElement(Box_1.Box, { className: bem_1.bem(`${cn}Container`) },
                         react_1.default.createElement(Box_1.Box, Object.assign({ ref: modalElement, className: classnames_1.default([
                                 bem_1.bem(cn),
                                 bem_1.bem(cn, { m: size }),

package/public/css/styles.css

@@ -1815,6 +1815,7 @@ override built-in Image component classes */
 
 .ads-Button {
   position: relative;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   border-width: 1px;
@@ -1851,6 +1852,16 @@ override built-in Image component classes */
   margin: auto;
 }
 
+.ads-Button--block {
+  display: flex;
+  width: 100%;
+}
+
+.ads-Button--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
 /* Button.Group */
 
 .ads-ButtonGroup {
@@ -4440,6 +4451,7 @@ override built-in Image component classes */
 }
 
 .ads-ModalContainer {
+  position: fixed;
   top: 0;
   left: 0;
   z-index: 900;
@@ -4540,11 +4552,11 @@ override built-in Image component classes */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  overflow-y: auto;
 
   max-height: calc(
     var(--modal-max-height) - 60px - 80px
   );
-  overflow-y: auto;
 }
 
 .ads-Modal-body--padded {
@@ -4554,6 +4566,10 @@ override built-in Image component classes */
   padding-bottom: 16px;
 }
 
+.ads-Modal-progressDots-container {
+  position: relative;
+}
+
 .ads-Modal-progressDots {
   pointer-events: none;
   position: absolute;
@@ -7687,10 +7703,6 @@ override built-in Image component classes */
   width: 1px;
 }
 
-.pointer-events-none {
-  pointer-events: none;
-}
-
 .visible {
   visibility: visible;
 }
@@ -8629,10 +8641,6 @@ override built-in Image component classes */
   -moz-osx-font-smoothing: grayscale;
 }
 
-.opacity-50 {
-  opacity: 0.5;
-}
-
 .opacity-40 {
   opacity: 0.4;
 }