@conveyorhq/arrow-ds 1.166.0 → 1.167.0

package/package.json

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

package/public/components/Button/Button.d.ts

@@ -6,7 +6,8 @@ export declare enum BUTTON_VARIANT {
     SECONDARY = "secondary",
     UTILITY = "utility",
     DANGER = "danger",
-    MINIMAL = "minimal"
+    MINIMAL = "minimal",
+    PLAIN = "plain"
 }
 export declare enum BUTTON_SIZE {
     SMALL = "small",

package/public/components/Button/Button.js

@@ -42,6 +42,7 @@ var BUTTON_VARIANT;
     BUTTON_VARIANT["UTILITY"] = "utility";
     BUTTON_VARIANT["DANGER"] = "danger";
     BUTTON_VARIANT["MINIMAL"] = "minimal";
+    BUTTON_VARIANT["PLAIN"] = "plain";
 })(BUTTON_VARIANT || (exports.BUTTON_VARIANT = BUTTON_VARIANT = {}));
 var BUTTON_SIZE;
 (function (BUTTON_SIZE) {
@@ -74,7 +75,7 @@ const Button = (0, react_1.forwardRef)(({ as: Component = "button", children, cl
     const themeContext = (0, react_1.useContext)(contexts_1.ThemeContext);
     const theme = themeProp || themeContext;
     const buttonClassNames = (0, classnames_1.default)((0, bem_1.bem)(cn), (0, bem_1.bem)(cn, { m: variant }), (0, bem_1.bem)(cn, { m: theme }), block && (0, bem_1.bem)(cn, { m: "block" }), getButtonSizeClasses(size, icon, children), depressed && (0, bem_1.bem)(cn, { m: "depressed" }), isDisabled && (0, bem_1.bem)(cn, { m: "disabled" }), className);
-    const iconClassNames = (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "icon" }), children && (0, bem_1.bem)(cn, { e: "icon", m: iconPosition }), isLoading && (0, bem_1.bem)(cn, { e: "icon", m: "invisible" }));
+    const iconClassNames = (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "icon" }), isLoading && (0, bem_1.bem)(cn, { e: "icon", m: "invisible" }));
     const iconProps = icon
         ? {
             icon,
@@ -89,9 +90,12 @@ const Button = (0, react_1.forwardRef)(({ as: Component = "button", children, cl
         type = "button";
     }
     const propsIfLink = Component === Link_1.Link ? { noStyles: true } : {};
+    if (variant === BUTTON_VARIANT.PLAIN) {
+        return (react_1.default.createElement(Component, { type: type, className: className, disabled: disabled, ref: ref, ...rest }, children));
+    }
     return (react_1.default.createElement(Component, { type: type, className: buttonClassNames, disabled: isDisabled, ref: ref, ...propsIfLink, ...rest },
         icon && iconProps && iconPosition === BUTTON_ICON_POSITION.LEFT && (react_1.default.createElement(Icon_1.Icon, { ...iconProps })),
-        react_1.default.createElement("span", { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "content" }), isLoading && (0, bem_1.bem)(cn, { e: "content", m: "invisible" })) }, children),
+        children && (react_1.default.createElement("span", { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "content" }), isLoading && (0, bem_1.bem)(cn, { e: "content", m: "invisible" })) }, children)),
         icon && iconProps && iconPosition === BUTTON_ICON_POSITION.RIGHT && (react_1.default.createElement(Icon_1.Icon, { ...iconProps })),
         isLoading && (react_1.default.createElement(Icon_1.Icon, { className: (0, bem_1.bem)(cn, { e: "loader" }), icon: Icon_1.ICON_TYPE.CIRCLE_NOTCH, spin: true }))));
 });

package/public/css/styles.css

@@ -2069,19 +2069,13 @@ override built-in Image component classes */
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  -webkit-column-gap: 8px;
+          column-gap: 8px;
   border-width: 1px;
   font-weight: 500;
   transition-duration: 200ms;
 }
 
-.ads-Button-icon--left {
-  margin-right: 8px;
-}
-
-.ads-Button-icon--right {
-  margin-left: 8px;
-}
-
 .ads-Button-icon--invisible {
   visibility: hidden;
 }