@zohodesk/components 1.0.0-temp-256 → 1.0.0-temp-257.1

package/lib/v1/Button/Button.js

@@ -5,7 +5,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.ButtonPresentational = void 0;
+
+var _cssUtility = require("@dot-system/css-utility");
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -15,24 +17,24 @@ var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
 
 var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
 
-var _Typography = _interopRequireDefault(require("../../Typography/Typography"));
-
 var _renderNode = _interopRequireWildcard(require("@zohodesk/utils/es/renderNode"));
 
-var _propTypes = _interopRequireDefault(require("./props/propTypes"));
-
-var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
-
 var _constants = require("@zohodesk/dotkit/es/utils/constants");
 
 var _constants2 = require("./constants");
 
+var _Typography = _interopRequireDefault(require("../../Typography/Typography"));
+
 var _Loader = _interopRequireDefault(require("../shared/Loader/Loader"));
 
 var _SuccessTick = _interopRequireDefault(require("../shared/SuccessTick/SuccessTick"));
 
 var _cssJSLogic = _interopRequireDefault(require("./css/cssJSLogic"));
 
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -51,17 +53,18 @@ var getTypographySize = function getTypographySize(size) {
   return _constants2.TYPOGRAPHY_SIZE_MAP[size] || '13';
 };
 
-var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
-  var palette = props.palette,
-      bgAppearance = props.bgAppearance,
-      borderAppearance = props.borderAppearance,
+var ButtonPresentational = /*#__PURE__*/(0, _react.forwardRef)(function ButtonPresentational(props, ref) {
+  var isLoading = props.isLoading,
+      isSuccess = props.isSuccess,
+      isDisabled = props.isDisabled,
+      isDisabledState = props.isDisabledState,
+      overlayActive = props.overlayActive,
       variant = props.variant,
-      status = props.status,
+      iconPlacement = props.iconPlacement,
       loaderPlacement = props.loaderPlacement,
       size = props.size,
       iconName = props.iconName,
       iconSize = props.iconSize,
-      iconPlacement = props.iconPlacement,
       renderIcon = props.renderIcon,
       renderBefore = props.renderBefore,
       renderAfter = props.renderAfter,
@@ -69,105 +72,95 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
       renderSuccess = props.renderSuccess,
       children = props.children,
       type = props.type,
-      onClick = props.onClick,
-      isDisabled = props.isDisabled,
       isReadOnly = props.isReadOnly,
       isSelected = props.isSelected,
-      shape = props.shape,
-      paletteShade = props.paletteShade,
-      disabledAppearance = props.disabledAppearance,
       title = props.title,
       customProps = props.customProps,
       customAttributes = props.customAttributes,
       a11yAttributes = props.a11yAttributes,
       customId = props.customId,
-      testId = props.testId;
-  var isLoading = status === _constants2.STATUS.LOADING;
-  var isSuccess = status === _constants2.STATUS.SUCCESS;
-  var isDisabledState = isDisabled || isLoading;
-  var isInteractionDisabled = isDisabledState || isReadOnly;
-  var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
-  var _customProps$text = customProps.text,
-      contentProps = _customProps$text === void 0 ? _constants.DUMMY_OBJECT : _customProps$text,
-      _customProps$icon = customProps.icon,
-      iconProps = _customProps$icon === void 0 ? _constants.DUMMY_OBJECT : _customProps$icon;
-  var iconTagAttributes = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread({}, iconProps.tagAttributes || _constants.DUMMY_OBJECT), {}, {
-      'data-test-id': testId ? "".concat(testId, "_icon") : undefined
-    });
-  }, [iconProps.tagAttributes, testId]);
-  var classes = (0, _react.useMemo)(function () {
-    return (0, _cssJSLogic["default"])({
-      props: props
-    });
-  }, [palette, bgAppearance, borderAppearance, paletteShade, size, variant, status, isDisabled, isReadOnly, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
-  var loaderOverlayClass = classes.loaderOverlayClass,
-      successOverlayClass = classes.successOverlayClass,
-      contentWrapperClass = classes.contentWrapperClass,
-      textClassName = classes.textClassName,
-      buttonClassName = classes.buttonClassName,
-      iconClassName = classes.iconClassName;
-  var showIcon = variant !== _constants2.VARIANT.TEXT && (renderIcon || iconName);
-
-  var _handleClick = function _handleClick(event) {
-    if (isInteractionDisabled) {
-      return;
-    }
+      testId = props.testId,
+      dataSelectorId = props.dataSelectorId,
+      handleClick = props.handleClick,
+      classNames = props.classNames;
+  var loaderOverlayClass = classNames.loaderOverlayClass,
+      successOverlayClass = classNames.successOverlayClass,
+      contentWrapperClass = classNames.contentWrapperClass,
+      textClassName = classNames.textClassName,
+      buttonClassName = classNames.buttonClassName,
+      iconClassName = classNames.iconClassName,
+      loaderClassName = classNames.loaderClassName,
+      successClassName = classNames.successClassName;
+
+  var _ref = customProps || _constants.DUMMY_OBJECT,
+      _ref$text = _ref.text,
+      contentProps = _ref$text === void 0 ? _constants.DUMMY_OBJECT : _ref$text,
+      _ref$icon = _ref.icon,
+      iconProps = _ref$icon === void 0 ? _constants.DUMMY_OBJECT : _ref$icon;
+
+  var _ref2 = customAttributes || _constants.DUMMY_OBJECT,
+      _ref2$button = _ref2.button,
+      buttonAttributes = _ref2$button === void 0 ? _constants.DUMMY_OBJECT : _ref2$button,
+      _ref2$contentWrapper = _ref2.contentWrapper,
+      contentWrapperAttributes = _ref2$contentWrapper === void 0 ? _constants.DUMMY_OBJECT : _ref2$contentWrapper,
+      _ref2$loader = _ref2.loader,
+      loaderAttributes = _ref2$loader === void 0 ? _constants.DUMMY_OBJECT : _ref2$loader,
+      _ref2$success = _ref2.success,
+      successAttributes = _ref2$success === void 0 ? _constants.DUMMY_OBJECT : _ref2$success,
+      _ref2$icon = _ref2.icon,
+      iconAttributes = _ref2$icon === void 0 ? _constants.DUMMY_OBJECT : _ref2$icon,
+      _ref2$text = _ref2.text,
+      textAttributes = _ref2$text === void 0 ? _constants.DUMMY_OBJECT : _ref2$text;
+
+  var iconTagAttributes = _objectSpread(_objectSpread({}, iconAttributes), {}, {
+    'data-test-id': testId ? "".concat(testId, "_icon") : undefined
+  });
 
-    onClick(event);
-  };
+  var showIcon = variant !== _constants2.VARIANT.TEXT && (renderIcon || iconName);
 
   var _renderLoader = function _renderLoader() {
-    if (!isLoading) {
-      return null;
-    }
-
-    if ((0, _renderNode.isRenderable)(renderLoader)) {
-      return (0, _renderNode["default"])(renderLoader, {
-        status: status
-      });
-    }
-
-    var loaderClassName = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY ? loaderOverlayClass : '';
-    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+    if (!isLoading) return null;
+    var isOverlay = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
+    var hasCustomLoader = (0, _renderNode.isRenderable)(renderLoader);
+    if (hasCustomLoader && !isOverlay) return (0, _renderNode["default"])(renderLoader, {
+      status: _constants2.STATUS.LOADING
+    });
+    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
-      $ui_className: loaderClassName,
+      $ui_className: isOverlay ? loaderOverlayClass : '',
       testId: testId ? "".concat(testId, "_loader") : undefined
-    }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null));
+    }, hasCustomLoader ? undefined : loaderAttributes), hasCustomLoader ? (0, _renderNode["default"])(renderLoader, {
+      status: _constants2.STATUS.LOADING
+    }) : /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
+      customClass: loaderClassName
+    }));
   };
 
   var _renderSuccess = function _renderSuccess() {
-    if (!isSuccess) {
-      return null;
-    }
-
-    if ((0, _renderNode.isRenderable)(renderSuccess)) {
-      return (0, _renderNode["default"])(renderSuccess, {
-        status: status
-      });
-    }
-
-    var successClassName = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY ? successOverlayClass : '';
-    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+    if (!isSuccess) return null;
+    var isOverlay = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
+    var hasCustomSuccess = (0, _renderNode.isRenderable)(renderSuccess);
+    if (hasCustomSuccess && !isOverlay) return (0, _renderNode["default"])(renderSuccess, {
+      status: _constants2.STATUS.SUCCESS
+    });
+    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
-      $ui_className: successClassName,
+      $ui_className: isOverlay ? successOverlayClass : '',
       testId: testId ? "".concat(testId, "_success") : undefined
-    }, /*#__PURE__*/_react["default"].createElement(_SuccessTick["default"], null));
+    }, hasCustomSuccess ? undefined : successAttributes), hasCustomSuccess ? (0, _renderNode["default"])(renderSuccess, {
+      status: _constants2.STATUS.SUCCESS
+    }) : /*#__PURE__*/_react["default"].createElement(_SuccessTick["default"], {
+      customClass: successClassName
+    }));
   };
 
   var _renderIconNode = function _renderIconNode() {
-    if (!showIcon) {
-      return null;
-    }
-
-    if ((0, _renderNode.isRenderable)(renderIcon)) {
-      return (0, _renderNode["default"])(renderIcon);
-    }
-
+    if (!showIcon) return null;
+    if ((0, _renderNode.isRenderable)(renderIcon)) return (0, _renderNode["default"])(renderIcon);
     return /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({}, iconProps, {
       iconClass: iconClassName,
       name: iconName,
@@ -177,59 +170,132 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
     }));
   };
 
-  var _renderBeforeNode = function _renderBeforeNode() {
-    if (!(0, _renderNode.isRenderable)(renderBefore)) {
-      return null;
-    }
-
-    return (0, _renderNode["default"])(renderBefore, props);
-  };
-
-  var _renderAfterNode = function _renderAfterNode() {
-    if (!(0, _renderNode.isRenderable)(renderAfter)) {
-      return null;
-    }
-
-    return (0, _renderNode["default"])(renderAfter, props);
-  };
-
   var _renderContent = function _renderContent() {
-    var shouldShowText = variant !== _constants2.VARIANT.ICON && children !== undefined && children !== null;
+    var shouldShowText = variant !== _constants2.VARIANT.ICON && children != null && (typeof children !== 'string' || children.trim() !== '');
     var showLoaderStart = isLoading && loaderPlacement === _constants2.LOADER_PLACEMENT.START;
     var showLoaderAfter = isLoading && loaderPlacement === _constants2.LOADER_PLACEMENT.END;
     var showSuccessStart = isSuccess && loaderPlacement === _constants2.LOADER_PLACEMENT.START;
     var showSuccessAfter = isSuccess && loaderPlacement === _constants2.LOADER_PLACEMENT.END;
-    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
       $ui_displayMode: "flex",
       $ui_direction: "row",
       $flag_shrink: true,
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
       $ui_className: contentWrapperClass
-    }, showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, _renderBeforeNode(), iconPlacement === _constants2.ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({}, contentProps, {
+    }, contentWrapperAttributes), showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, (0, _renderNode.isRenderable)(renderBefore) ? (0, _renderNode["default"])(renderBefore, props) : null, iconPlacement === _constants2.ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? typeof children === 'string' ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({
+      $ui_size: getTypographySize(size)
+    }, contentProps, {
+      tagAttributes: textAttributes,
       $ui_className: textClassName,
-      $ui_size: getTypographySize(size),
       $flag_dotted: variant !== _constants2.VARIANT.ICON
-    }), children) : null, iconPlacement === _constants2.ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, _renderAfterNode(), showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
+    }), children) : children : null, iconPlacement === _constants2.ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, (0, _renderNode.isRenderable)(renderAfter) ? (0, _renderNode["default"])(renderAfter, props) : null, showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
   };
 
-  var containerAttributes = _objectSpread(_objectSpread({}, customAttributes), {}, {
-    'data-id': customId,
-    'data-test-id': testId,
+  var containerAttributes = _objectSpread(_objectSpread({}, buttonAttributes), {}, {
+    'data-id': isDisabled ? "".concat(customId, "_disabled") : customId,
+    'data-test-id': isDisabled ? "".concat(testId, "_disabled") : testId,
+    'data-selector-id': dataSelectorId,
     'data-title': title
   });
 
-  return /*#__PURE__*/_react["default"].createElement("button", _extends({}, containerAttributes, a11yAttributes, {
-    ref: ref,
-    type: type,
-    className: buttonClassName,
+  return /*#__PURE__*/_react["default"].createElement("button", _extends({}, containerAttributes, {
     "aria-busy": isLoading,
-    "aria-disabled": isDisabledState,
+    disabled: isDisabledState,
     "aria-readonly": isReadOnly,
-    "aria-pressed": isSelected,
-    onClick: _handleClick
+    "aria-pressed": isSelected
+  }, a11yAttributes, {
+    ref: ref,
+    type: type,
+    className: (0, _cssUtility.cn)(buttonClassName),
+    onClick: handleClick
   }), _renderContent(), overlayActive ? isLoading ? _renderLoader() : _renderSuccess() : null);
 });
+exports.ButtonPresentational = ButtonPresentational;
+ButtonPresentational.displayName = 'ButtonPresentational';
+var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
+  var palette = props.palette,
+      bgAppearance = props.bgAppearance,
+      borderAppearance = props.borderAppearance,
+      variant = props.variant,
+      status = props.status,
+      loaderPlacement = props.loaderPlacement,
+      size = props.size,
+      iconName = props.iconName,
+      iconSize = props.iconSize,
+      iconPlacement = props.iconPlacement,
+      renderIcon = props.renderIcon,
+      renderBefore = props.renderBefore,
+      renderAfter = props.renderAfter,
+      renderLoader = props.renderLoader,
+      renderSuccess = props.renderSuccess,
+      children = props.children,
+      type = props.type,
+      onClick = props.onClick,
+      isDisabled = props.isDisabled,
+      isReadOnly = props.isReadOnly,
+      isSelected = props.isSelected,
+      shape = props.shape,
+      paletteShade = props.paletteShade,
+      disabledAppearance = props.disabledAppearance,
+      title = props.title,
+      customProps = props.customProps,
+      customAttributes = props.customAttributes,
+      a11yAttributes = props.a11yAttributes,
+      customId = props.customId,
+      testId = props.testId,
+      dataSelectorId = props.dataSelectorId;
+  var isLoading = status === _constants2.STATUS.LOADING;
+  var isSuccess = status === _constants2.STATUS.SUCCESS;
+  var isDisabledState = isDisabled || isLoading;
+  var isInteractionDisabled = isDisabledState || isReadOnly;
+  var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
+  var classNames = (0, _react.useMemo)(function () {
+    return (0, _cssJSLogic["default"])({
+      props: props
+    });
+  }, [palette, bgAppearance, borderAppearance, paletteShade, size, variant, status, isDisabled, isReadOnly, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
+
+  var handleClick = function handleClick(event) {
+    if (isInteractionDisabled) return;
+    onClick(event);
+  };
+
+  var essentials = {
+    isLoading: isLoading,
+    isSuccess: isSuccess,
+    isDisabled: isDisabled,
+    isDisabledState: isDisabledState,
+    overlayActive: overlayActive,
+    variant: variant,
+    iconPlacement: iconPlacement,
+    loaderPlacement: loaderPlacement,
+    size: size,
+    iconName: iconName,
+    iconSize: iconSize,
+    renderIcon: renderIcon,
+    renderBefore: renderBefore,
+    renderAfter: renderAfter,
+    renderLoader: renderLoader,
+    renderSuccess: renderSuccess,
+    children: children,
+    type: type,
+    isReadOnly: isReadOnly,
+    isSelected: isSelected,
+    title: title,
+    customProps: customProps,
+    customAttributes: customAttributes,
+    a11yAttributes: a11yAttributes,
+    customId: customId,
+    testId: testId,
+    dataSelectorId: dataSelectorId,
+    handleClick: handleClick
+  };
+  return /*#__PURE__*/_react["default"].createElement(ButtonPresentational, _extends({}, essentials, {
+    classNames: classNames,
+    ref: ref
+  }));
+});
 Button.propTypes = _propTypes["default"];
 Button.defaultProps = _defaultProps["default"];
 Button.displayName = 'Button';

package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Button - Component Should apply a11yAttributes to the button 1`] = `
 <DocumentFragment>
@@ -44,7 +44,7 @@ exports[`Button - Component Should apply customClass to wrapper, text and icon 1
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus  customIconClass  "
+        class="zd_font_icons basic icon-plus customIconClass"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size16);"
@@ -220,7 +220,7 @@ exports[`Button - Component Should render Status of buttons - loading 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="spinner "
+        class="spinner"
         role="img"
         viewBox="0 0 24 24"
       >
@@ -264,7 +264,7 @@ exports[`Button - Component Should render Status of buttons - success 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="tick "
+        class="tick"
         role="img"
         viewBox="0 0 24 24"
       >
@@ -470,7 +470,7 @@ exports[`Button - Component Should render loaderPlacement of buttons - end 1`] =
       >
         <svg
           aria-hidden="true"
-          class="spinner "
+          class="spinner"
           role="img"
           viewBox="0 0 24 24"
         >
@@ -515,7 +515,7 @@ exports[`Button - Component Should render loaderPlacement of buttons - overlay 1
     >
       <svg
         aria-hidden="true"
-        class="spinner "
+        class="spinner"
         role="img"
         viewBox="0 0 24 24"
       >
@@ -559,7 +559,7 @@ exports[`Button - Component Should render loaderPlacement of buttons - start 1`]
       >
         <svg
           aria-hidden="true"
-          class="spinner "
+          class="spinner"
           role="img"
           viewBox="0 0 24 24"
         >
@@ -949,7 +949,7 @@ exports[`Button - Component Should render with iconName and iconSize  1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    "
+        class="zd_font_icons basic icon-plus"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size20);"
@@ -981,7 +981,7 @@ exports[`Button - Component Should render with iconPlacement  1`] = `
       </div>
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    "
+        class="zd_font_icons basic icon-plus"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size16);"

package/lib/v1/Button/css/Button_v1.module.css

@@ -5,13 +5,15 @@
     --local-button-gap: var(--zd_size8);
     --local-button-padding-block: var(--zd_size6);
     --local-button-padding-inline: var(--zd_size15);
-    --local-button-font-size: var(--zd_font_size13);
     --local-loader-size: 16px;
     --local-tick-size: 16px;
     --local-button-height: auto;
     --local-button-width: auto;
-    --local-button-overlay-opacity: 0.48;
-    --local-button-transition-duration: var(--zd_transition3);
+    --local-button-min-width: var(--zd_size90);
+    --local-button-overlay-opacity: 0.4;
+    --local-button-transition-duration: var(--zd_transition2);
+    --local-button-cursor: pointer;
+    --local-button-strike-color: currentColor;
 }
 
 .button {
@@ -19,19 +21,20 @@
     composes: posrel pointer from '../../../common/common.module.css';
     padding-block: var(--local-button-padding-block);
     padding-inline: var(--local-button-padding-inline);
-    font-size: var(--local-button-font-size);
     height: var(--local-button-height);
     width: var(--local-button-width);
+    min-width: var(--local-button-min-width);
     border-radius: var(--local-button-radius);
     border-style: var(--local-button-border-style);
     border-width: var(--local-button-border-width);
     transition-duration: var(--local-button-transition-duration);
     transition-timing-function: ease;
+    cursor: var(--local-button-cursor);
     background-image: none;
 }
 
 .disabledPointer {
-    cursor: not-allowed;
+    --local-button-cursor: not-allowed;
 }
 
 .disabledOpac {
@@ -39,7 +42,8 @@
 }
 
 .loading {
-    cursor: progress;
+    --local-button-cursor: progress;
+    composes: disabledOpac;
 }
 
 .sizeSmall {
@@ -68,6 +72,18 @@
     --local-button-width: 100%;
 }
 
+.variantText {
+    --local-button-min-width: var(--zd_size90);
+}
+
+.variantIcon {
+    --local-button-min-width: var(--zd_size28);
+}
+
+.variantIconWithText {
+    --local-button-min-width: var(--zd_size118);
+}
+
 .shapeRoundedRectangle {
     --local-button-radius: 4px;
 }
@@ -80,9 +96,11 @@
     --local-button-radius: 0;
 }
 
-.loaderOverlay {
+.strike::after,
+.loaderOverlay,
+.successOverlay {
     inset: 0 ;
-    composes: posab from '../../../common/common.module.css';
+    position: absolute;
 }
 
 .contentWrapper {
@@ -98,22 +116,16 @@
 
 .strike::after {
     content: '';
-    position: absolute;
-    inset: 0 ;
     pointer-events: none;
     border-radius: var(--local-button-radius);
 }
 
 [dir=ltr] .strike::after {
-    background-image: repeating-linear-gradient(120deg, currentColor 0 1px, var(--dot_mirror) 1px 8px);
+    background-image: repeating-linear-gradient(120deg, var(--local-button-strike-color) 0 1px, var(--zd-bg-transparent) 1px 8px);
 }
 
 [dir=rtl] .strike::after {
-    background-image: repeating-linear-gradient(-120deg, currentColor 0 1px, var(--dot_mirror) 1px 8px);
+    background-image: repeating-linear-gradient(-120deg, var(--local-button-strike-color) 0 1px, var(--zd-bg-transparent) 1px 8px);
 }
 
-.successOverlay {
-    inset: 0 ;
-    composes: posab from '../../../common/common.module.css';
-}
 

package/lib/v1/Button/css/cssJSLogic.js

@@ -7,7 +7,7 @@ exports["default"] = cssJSLogic;
 
 var _Button_v1Module = _interopRequireDefault(require("./Button_v1.module.css"));
 
-var _compileClassNames4 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
+var _compileClassNames6 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
 
 var _semanticButtonModule = _interopRequireDefault(require("../../../semantic/Button/semanticButton.module.css"));
 
@@ -35,6 +35,7 @@ function cssJSLogic(_ref) {
       borderAppearance = props.borderAppearance,
       paletteShade = props.paletteShade,
       size = props.size,
+      variant = props.variant,
       status = props.status,
       isDisabled = props.isDisabled,
       isReadOnly = props.isReadOnly,
@@ -49,10 +50,14 @@ function cssJSLogic(_ref) {
       _customClass$text = customClass.text,
       textClassCustom = _customClass$text === void 0 ? '' : _customClass$text,
       _customClass$icon = customClass.icon,
-      iconClassCustom = _customClass$icon === void 0 ? '' : _customClass$icon;
+      iconClassCustom = _customClass$icon === void 0 ? '' : _customClass$icon,
+      _customClass$loader = customClass.loader,
+      loaderClassCustom = _customClass$loader === void 0 ? '' : _customClass$loader,
+      _customClass$success = customClass.success,
+      successClassCustom = _customClass$success === void 0 ? '' : _customClass$success;
   var isLoading = status === _constants2.STATUS.LOADING;
   var isSuccess = status === _constants2.STATUS.SUCCESS;
-  var isInteractive = !isDisabled && !isReadOnly;
+  var isInteractive = !isDisabled && !isReadOnly && !isLoading;
   var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
 
   var _getPaletteClasses = (0, _colorHelper["default"])({
@@ -77,16 +82,23 @@ function cssJSLogic(_ref) {
 
   var sizeClass = size ? _Button_v1Module["default"]["size".concat(capitalize(size))] : '';
   var shapeClass = shape ? _Button_v1Module["default"]["shape".concat(capitalize(shape))] : '';
+  var variantClass = variant ? _Button_v1Module["default"]["variant".concat(capitalize(variant))] : '';
   var shouldStrike = disabledAppearance === _constants2.DISABLED_APPEARANCE.STRIKE && isDisabled;
-  var buttonClassName = (0, _compileClassNames4["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, _semanticButtonModule["default"].buttonReset, true), _defineProperty(_compileClassNames, _Button_v1Module["default"].button, true), _defineProperty(_compileClassNames, bg, !!bg), _defineProperty(_compileClassNames, hoverBg, !!hoverBg && isInteractive), _defineProperty(_compileClassNames, focusBg, !!focusBg && isInteractive), _defineProperty(_compileClassNames, activeBg, !!activeBg && isInteractive), _defineProperty(_compileClassNames, text, !!text), _defineProperty(_compileClassNames, hoverText, !!hoverText && isInteractive), _defineProperty(_compileClassNames, focusText, !!focusText && isInteractive), _defineProperty(_compileClassNames, activeText, !!activeText && isInteractive), _defineProperty(_compileClassNames, border, !!border), _defineProperty(_compileClassNames, hoverBorder, !!hoverBorder && isInteractive), _defineProperty(_compileClassNames, focusBorder, !!focusBorder && isInteractive), _defineProperty(_compileClassNames, activeBorder, !!activeBorder && isInteractive), _defineProperty(_compileClassNames, sizeClass, !!sizeClass), _defineProperty(_compileClassNames, shapeClass, !!shapeClass), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledOpac, isReadOnly || isDisabled && disabledAppearance === _constants2.DISABLED_APPEARANCE.DULL), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledPointer, isReadOnly || isDisabled), _defineProperty(_compileClassNames, _Button_v1Module["default"].loading, isLoading), _defineProperty(_compileClassNames, _Button_v1Module["default"].strike, shouldStrike), _defineProperty(_compileClassNames, wrapperClass, !!wrapperClass), _compileClassNames));
-  var textClassName = (0, _compileClassNames4["default"])(_defineProperty({}, textClassCustom, !!textClassCustom));
-  var iconClassName = (0, _compileClassNames4["default"])(_defineProperty({}, iconClassCustom, !!iconClassCustom));
+  var buttonClassName = (0, _compileClassNames6["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, _semanticButtonModule["default"].buttonReset, true), _defineProperty(_compileClassNames, _Button_v1Module["default"].button, true), _defineProperty(_compileClassNames, bg, !!bg), _defineProperty(_compileClassNames, hoverBg, !!hoverBg && isInteractive), _defineProperty(_compileClassNames, focusBg, !!focusBg && isInteractive), _defineProperty(_compileClassNames, activeBg, !!activeBg && isInteractive), _defineProperty(_compileClassNames, text, !!text), _defineProperty(_compileClassNames, hoverText, !!hoverText && isInteractive), _defineProperty(_compileClassNames, focusText, !!focusText && isInteractive), _defineProperty(_compileClassNames, activeText, !!activeText && isInteractive), _defineProperty(_compileClassNames, border, !!border), _defineProperty(_compileClassNames, hoverBorder, !!hoverBorder && isInteractive), _defineProperty(_compileClassNames, focusBorder, !!focusBorder && isInteractive), _defineProperty(_compileClassNames, activeBorder, !!activeBorder && isInteractive), _defineProperty(_compileClassNames, sizeClass, !!sizeClass), _defineProperty(_compileClassNames, shapeClass, !!shapeClass), _defineProperty(_compileClassNames, variantClass, !!variantClass), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledOpac, isReadOnly || isDisabled && disabledAppearance === _constants2.DISABLED_APPEARANCE.DULL), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledPointer, isReadOnly || isDisabled), _defineProperty(_compileClassNames, _Button_v1Module["default"].loading, isLoading), _defineProperty(_compileClassNames, _Button_v1Module["default"].strike, shouldStrike), _defineProperty(_compileClassNames, wrapperClass, !!wrapperClass), _compileClassNames));
+  var textClassName = (0, _compileClassNames6["default"])(_defineProperty({}, textClassCustom, !!textClassCustom));
+  var iconClassName = (0, _compileClassNames6["default"])(_defineProperty({}, iconClassCustom, !!iconClassCustom));
   return {
     buttonClassName: buttonClassName,
     textClassName: textClassName,
+    iconClassName: iconClassName,
     contentWrapperClass: overlayActive ? _Button_v1Module["default"].overlayHidden : _Button_v1Module["default"].contentWrapper,
     loaderOverlayClass: _Button_v1Module["default"].loaderOverlay,
     successOverlayClass: _Button_v1Module["default"].successOverlay,
-    iconClassName: iconClassName
+    loaderClassName: {
+      wrapper: (0, _compileClassNames6["default"])(_defineProperty({}, loaderClassCustom, !!loaderClassCustom))
+    },
+    successClassName: {
+      wrapper: (0, _compileClassNames6["default"])(_defineProperty({}, successClassCustom, !!successClassCustom))
+    }
   };
 }