@zohodesk/components 1.0.0-temp-252.3 → 1.0.0-temp-252.4

package/es/v1/{Button/_shared → shared}/Loader/Loader.js

@@ -1,17 +1,17 @@
 import React from 'react';
-import style from "./Loader_v1.module.css";
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
+import style from "./Loader_v1.module.css";
 
 const Loader = props => {
   const {
     customClass
   } = props;
   const {
-    customWrapperClass = ''
+    wrapper = ''
   } = customClass;
   return /*#__PURE__*/React.createElement("svg", {
-    className: `${style.spinner} ${customWrapperClass}`,
+    className: `${style.spinner} ${wrapper}`,
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

package/es/v1/{Button/_shared → shared}/Loader/__tests__/Loader.spec.js

@@ -13,7 +13,7 @@ describe('Loader', () => {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Loader, {
       customClass: {
-        customWrapperClass: 'my-custom-class'
+        wrapper: 'my-custom-class'
       }
     }));
     expect(asFragment()).toMatchSnapshot();

package/es/v1/shared/Loader/props/defaultProps.js

@@ -0,0 +1,5 @@
+import { DUMMY_OBJECT } from '@zohodesk/utils/es/constantProps/constant';
+const defaultProps = {
+  customClass: DUMMY_OBJECT
+};
+export default defaultProps;

package/es/v1/{Button/_shared → shared}/Loader/props/propTypes.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 const propTypes = {
   customClass: PropTypes.shape({
-    customWrapperClass: PropTypes.string
+    wrapper: PropTypes.string
   })
 };
 export default propTypes;

package/es/v1/{Button/_shared → shared}/SuccessTick/SuccessTick.js

@@ -1,17 +1,17 @@
 import React from 'react';
-import style from "./SuccessTick_v1.module.css";
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
+import style from "./SuccessTick_v1.module.css";
 
 const SuccessTick = props => {
   const {
     customClass
   } = props;
   const {
-    customWrapperClass = ''
+    wrapper = ''
   } = customClass;
   return /*#__PURE__*/React.createElement("svg", {
-    className: `${style.tick} ${customWrapperClass}`,
+    className: `${style.tick} ${wrapper}`,
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

package/es/v1/{Button/_shared → shared}/SuccessTick/__tests__/SuccessTick.spec.js

@@ -13,7 +13,7 @@ describe('SuccessTick', () => {
       asFragment
     } = render( /*#__PURE__*/React.createElement(SuccessTick, {
       customClass: {
-        customWrapperClass: 'my-custom-class'
+        wrapper: 'my-custom-class'
       }
     }));
     expect(asFragment()).toMatchSnapshot();

package/es/v1/shared/SuccessTick/props/defaultProps.js

@@ -0,0 +1,5 @@
+import { DUMMY_OBJECT } from "@zohodesk/utils/es/constantProps/constant";
+const defaultProps = {
+  customClass: DUMMY_OBJECT
+};
+export default defaultProps;

package/es/v1/{Button/_shared → shared}/SuccessTick/props/propTypes.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 const propTypes = {
   customClass: PropTypes.shape({
-    customWrapperClass: PropTypes.string
+    wrapper: PropTypes.string
   })
 };
 export default propTypes;

package/lib/Select/Select.js

@@ -860,8 +860,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent,
           renderCustomSelectedValue = _this$props11.renderCustomSelectedValue,
           inputFieldLineA11y = _this$props11.inputFieldLineA11y,
-          customClass = _this$props11.customClass,
-          renderCustomDropBoxHeader = _this$props11.renderCustomDropBoxHeader;
+          customClass = _this$props11.customClass;
       var _i18nKeys = i18nKeys,
           TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
           _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -894,9 +893,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       var _customClass$dropBox = customClass.dropBox,
           dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
           _customClass$cardCont = customClass.cardContent,
-          cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont,
-          _customClass$customDr = customClass.customDropBoxHeader,
-          customDropBoxHeaderClass = _customClass$customDr === void 0 ? '' : _customClass$customDr;
+          cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
       var inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
         setAriaId: setAriaId,
         isReadOnly: isReadOnly,
@@ -1068,91 +1065,82 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           isRestrictScroll: isRestrictScroll,
           portalId: dropBoxPortalId,
           customClass: {
-            customDropBox: "".concat(dropBoxClass, " ").concat(renderCustomDropBoxHeader ? _SelectModule["default"].dropBoxWithCustomHeader : '')
+            customDropBox: dropBoxClass
           }
-        }, function () {
-          var dropdownContent = isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-            align: "both",
-            className: _SelectModule["default"].loader
-          }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            flexible: true
-          }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-            onScroll: _this7.handleScroll
-          }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-            className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
-          }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
-            a11y: {
-              ariaControls: setAriaId,
-              ariaAutocomplete: 'list',
-              ariaDescribedby: ariaErrorId
-            },
-            inputRef: _this7.searchInputRef,
-            maxLength: maxLength,
-            onChange: _this7.handleSearch,
-            onKeyDown: _this7.handleKeyDown,
-            placeHolder: searchBoxPlaceHolder,
-            size: searchBoxSize,
-            value: searchStr,
-            onClear: _this7.handleClearSearch,
-            dataId: "".concat(dataId, "_search"),
-            i18nKeys: TextBoxIcon_i18n,
-            autoComplete: autoComplete,
-            customProps: {
-              TextBoxProps: DropdownSearchTextBoxProps
-            },
-            renderCustomClearComponent: renderCustomSearchClearComponent
-          }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
-            shrink: true,
-            customClass: "\n                              ".concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
-            eleRef: _this7.suggestionContainerRef
-          }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
-            key: searchStr.trim(),
-            activeId: selectedId,
-            isVirtualizerEnabled: isVirtualizerEnabled,
-            getVirtualizerPublicMethods: _this7.getVirtualizerPublicMethods,
-            setVirtualizerContainerRefFunction: _this7.setSuggestionsVirtualizerContainerRefFunction,
-            suggestions: suggestions,
-            getRef: _this7.suggestionItemRef,
-            hoverOption: hoverIndex,
-            onClick: _this7.handleChange,
-            onMouseEnter: _this7.handleMouseEnter,
-            dataId: "".concat(dataId, "_Options"),
-            needTick: needTick,
-            needBorder: needListBorder,
-            selectedOptions: [selectedId],
-            className: "".concat(tabletMode ? _SelectModule["default"].responsivelistItemContainer : _SelectModule["default"].listItemContainer),
-            listItemSize: listItemSize,
-            htmlId: setAriaId,
-            a11y: {
-              ariaParentRole: 'listbox',
-              role: 'option'
-            }
-          }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
-            isLoading: isFetchingOptions,
-            options: options,
-            searchString: searchStr,
-            suggestions: suggestions,
-            dataId: dataId,
-            renderCustomEmptyState: renderCustomEmptyState,
-            getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
-            i18nKeys: i18nKeys,
-            htmlId: ariaErrorId
-          }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-            isCover: false,
-            align: "both"
-          }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            flexible: true
-          }, getChildren()));
-          return renderCustomDropBoxHeader ? /*#__PURE__*/_react["default"].createElement("div", {
-            className: _SelectModule["default"].dropBoxListContainer
-          }, /*#__PURE__*/_react["default"].createElement("div", {
-            className: "".concat(customDropBoxHeaderClass, " ").concat(_SelectModule["default"].customDropBoxHeaderContainer)
-          }, (0, _utils.renderNode)(renderCustomDropBoxHeader, {
-            closePopup: _this7.handlePopupClose
-          })), /*#__PURE__*/_react["default"].createElement("div", {
-            className: _SelectModule["default"].dropdownOptions
-          }, dropdownContent)) : dropdownContent;
-        }());
+        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          align: "both",
+          className: _SelectModule["default"].loader
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true
+        }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+          onScroll: _this7.handleScroll
+        }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+          a11y: {
+            ariaControls: setAriaId,
+            ariaAutocomplete: 'list',
+            ariaDescribedby: ariaErrorId
+          },
+          inputRef: _this7.searchInputRef,
+          maxLength: maxLength,
+          onChange: _this7.handleSearch,
+          onKeyDown: _this7.handleKeyDown,
+          placeHolder: searchBoxPlaceHolder,
+          size: searchBoxSize,
+          value: searchStr,
+          onClear: _this7.handleClearSearch,
+          dataId: "".concat(dataId, "_search"),
+          i18nKeys: TextBoxIcon_i18n,
+          autoComplete: autoComplete,
+          customProps: {
+            TextBoxProps: DropdownSearchTextBoxProps
+          },
+          renderCustomClearComponent: renderCustomSearchClearComponent
+        }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+          shrink: true,
+          customClass: "\n                              ".concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
+          eleRef: _this7.suggestionContainerRef
+        }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+          key: searchStr.trim(),
+          activeId: selectedId,
+          isVirtualizerEnabled: isVirtualizerEnabled,
+          getVirtualizerPublicMethods: _this7.getVirtualizerPublicMethods,
+          setVirtualizerContainerRefFunction: _this7.setSuggestionsVirtualizerContainerRefFunction,
+          suggestions: suggestions,
+          getRef: _this7.suggestionItemRef,
+          hoverOption: hoverIndex,
+          onClick: _this7.handleChange,
+          onMouseEnter: _this7.handleMouseEnter,
+          dataId: "".concat(dataId, "_Options"),
+          needTick: needTick,
+          needBorder: needListBorder,
+          selectedOptions: [selectedId],
+          className: "".concat(tabletMode ? _SelectModule["default"].responsivelistItemContainer : _SelectModule["default"].listItemContainer),
+          listItemSize: listItemSize,
+          htmlId: setAriaId,
+          a11y: {
+            ariaParentRole: 'listbox',
+            role: 'option'
+          }
+        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+          isLoading: isFetchingOptions,
+          options: options,
+          searchString: searchStr,
+          suggestions: suggestions,
+          dataId: dataId,
+          renderCustomEmptyState: renderCustomEmptyState,
+          getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
+          i18nKeys: i18nKeys,
+          htmlId: ariaErrorId
+        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          isCover: false,
+          align: "both"
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter({
+          closePopup: _this7.handlePopupClose
+        })) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true
+        }, getChildren())));
       }) : null);
     }
   }]);

package/lib/Select/Select.module.css

@@ -22,12 +22,12 @@
 
 .box_small .emptyState {
   padding-block: var(--zd_size12) ;
-  padding-inline: var(--zd_size6) ;
+  padding-inline:var(--zd_size6) ;
 }
 
 .box_medium .emptyState {
   padding-block: var(--zd_size12) ;
-  padding-inline: var(--zd_size15) ;
+  padding-inline:var(--zd_size15) ;
 }
 
 .hide {
@@ -45,12 +45,12 @@
 
 .small.search {
   padding-block: 0 ;
-  padding-inline: var(--zd_size5) ;
+  padding-inline:var(--zd_size5) ;
 }
 
 .medium.search {
   padding-block: var(--zd_size3) 0 ;
-  padding-inline: var(--zd_size20) ;
+  padding-inline:var(--zd_size20) ;
 }
 
 .title {
@@ -59,17 +59,17 @@
 
 .groupTitle {
   margin-block: var(--zd_size6) ;
-  margin-inline: 0 ;
+  margin-inline:0 ;
 }
 
 .listItemContainer {
   padding-block: var(--zd_size10) ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .responsivelistItemContainer {
   padding-block: var(--zd_size10) 0 ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .readonly {
@@ -111,19 +111,18 @@
 
 .dropBoxList {
   padding-block: var(--zd_size10) ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .responsivedropBoxList {
   padding-block: var(--zd_size10) 0 ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .rotate {
   transform: rotateX(180deg);
 }
-
-.rightPlaceholder {
+.rightPlaceholder{
   height: 100% ;
 }
 
@@ -142,29 +141,3 @@
 .loader {
   padding: var(--zd_size10) ;
 }
-
-.dropBoxWithCustomHeader {
-  border-radius: 7px;
-}
-
-.dropBoxListContainer {
-  width: 100% ;
-  border-radius: 7px;
-  padding: var(--zd_size10) ;
-  border: 1px solid var(--zdt_select_wrapper_container_border);
-    background: var(--zdt_select_wrapper_container_bg);
-  box-shadow: var(--zd_bs_statusdropdown_wrapper_container);
-}
-
-.dropdownOptions {
-  padding-inline: var(--zd_size1) ;
-  padding-block: var(--zd_size1) ;
-  background-color: var(--zdt_select_wrapper_dropdown_bg);
-    border: 1px solid var(--zdt_select_wrapper_container_border);
-  border-radius: 7px;
-}
-
-.customDropBoxHeaderContainer {
-  margin-block-end: var(--zd_size6) ;
-  margin-inline: var(--zd_size1) ;
-}

package/lib/Select/props/defaultProps.js

@@ -50,8 +50,7 @@ var Select_defaultProps = {
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
   inputFieldLineA11y: {},
-  customClass: {},
-  renderCustomDropBoxHeader: null
+  customClass: {}
 };
 exports.Select_defaultProps = Select_defaultProps;
 var GroupSelect_defaultProps = {

package/lib/Select/props/propTypes.js

@@ -123,10 +123,8 @@ var Select_propTypes = {
   inputFieldLineA11y: _propTypes["default"].object,
   customClass: _propTypes["default"].shape({
     dropBox: _propTypes["default"].string,
-    cardContent: _propTypes["default"].string,
-    customDropBoxHeader: _propTypes["default"].string
-  }),
-  renderCustomDropBoxHeader: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node])
+    cardContent: _propTypes["default"].string
+  })
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {

package/lib/v1/Button/Button.js

@@ -27,9 +27,9 @@ var _constants = require("@zohodesk/dotkit/es/utils/constants");
 
 var _constants2 = require("./constants");
 
-var _Loader = _interopRequireDefault(require("./_shared/Loader/Loader"));
+var _Loader = _interopRequireDefault(require("../shared/Loader/Loader"));
 
-var _SuccessTick = _interopRequireDefault(require("./_shared/SuccessTick/SuccessTick"));
+var _SuccessTick = _interopRequireDefault(require("../shared/SuccessTick/SuccessTick"));
 
 var _cssJSLogic = _interopRequireDefault(require("./css/cssJSLogic"));
 
@@ -105,7 +105,8 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
       successOverlayClass = classes.successOverlayClass,
       contentWrapperClass = classes.contentWrapperClass,
       textClassName = classes.textClassName,
-      buttonClassName = classes.buttonClassName;
+      buttonClassName = classes.buttonClassName,
+      iconClassName = classes.iconClassName;
   var showIcon = variant !== _constants2.VARIANT.TEXT && (renderIcon || iconName);
 
   var _handleClick = function _handleClick(event) {
@@ -168,6 +169,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
     }
 
     return /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({}, iconProps, {
+      iconClass: iconClassName,
       name: iconName,
       size: iconSize,
       tagAttributes: iconTagAttributes,

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

@@ -239,11 +239,14 @@ describe('Button - Component', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should apply customClass to wrapper and text', function () {
+  test('Should apply customClass to wrapper, text and icon', function () {
     var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      variant: "iconWithText",
+      iconName: "ZD-plus",
       customClass: {
         wrapper: 'customButtonClass',
-        text: 'customTextClass'
+        text: 'customTextClass',
+        icon: 'customIconClass'
       }
     }, "Button")),
         asFragment = _render25.asFragment;

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

@@ -27,7 +27,7 @@ exports[`Button - Component Should apply a11yAttributes to the button 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should apply customClass to wrapper and text 1`] = `
+exports[`Button - Component Should apply customClass to wrapper, text and icon 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
@@ -42,6 +42,13 @@ exports[`Button - Component Should apply customClass to wrapper and text 1`] = `
       data-id="flex"
       data-test-id="flex"
     >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-plus  customIconClass  "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size16);"
+      />
       <div
         class="dotted size13 customTextClass"
       >

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

@@ -7,7 +7,7 @@ exports["default"] = cssJSLogic;
 
 var _Button_v1Module = _interopRequireDefault(require("./Button_v1.module.css"));
 
-var _compileClassNames3 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
+var _compileClassNames4 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
 
 var _semanticButtonModule = _interopRequireDefault(require("../../../semantic/Button/semanticButton.module.css"));
 
@@ -47,7 +47,9 @@ function cssJSLogic(_ref) {
   var _customClass$wrapper = customClass.wrapper,
       wrapperClass = _customClass$wrapper === void 0 ? '' : _customClass$wrapper,
       _customClass$text = customClass.text,
-      textClassCustom = _customClass$text === void 0 ? '' : _customClass$text;
+      textClassCustom = _customClass$text === void 0 ? '' : _customClass$text,
+      _customClass$icon = customClass.icon,
+      iconClassCustom = _customClass$icon === void 0 ? '' : _customClass$icon;
   var isLoading = status === _constants2.STATUS.LOADING;
   var isSuccess = status === _constants2.STATUS.SUCCESS;
   var isInteractive = !isDisabled && !isReadOnly;
@@ -76,13 +78,15 @@ function cssJSLogic(_ref) {
   var sizeClass = size ? _Button_v1Module["default"]["size".concat(capitalize(size))] : '';
   var shapeClass = shape ? _Button_v1Module["default"]["shape".concat(capitalize(shape))] : '';
   var shouldStrike = disabledAppearance === _constants2.DISABLED_APPEARANCE.STRIKE && isDisabled;
-  var buttonClassName = (0, _compileClassNames3["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, _compileClassNames3["default"])(_defineProperty({}, textClassCustom, !!textClassCustom));
+  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));
   return {
     buttonClassName: buttonClassName,
     textClassName: textClassName,
     contentWrapperClass: overlayActive ? _Button_v1Module["default"].overlayHidden : _Button_v1Module["default"].contentWrapper,
     loaderOverlayClass: _Button_v1Module["default"].loaderOverlay,
-    successOverlayClass: _Button_v1Module["default"].successOverlay
+    successOverlayClass: _Button_v1Module["default"].successOverlay,
+    iconClassName: iconClassName
   };
 }

package/lib/v1/helpers/colorHelpers/colorHelper.js

@@ -132,7 +132,7 @@ var buildPaletteClasses = function buildPaletteClasses(config, _ref4) {
     }) : '',
     text: isSelected ? getTextClass({
       state: 'selected',
-      textTone: baseTextTone
+      textTone: hasBgState ? stateTextTone : baseTextTone
     }) : getTextClass({
       textTone: baseTextTone
     }),
@@ -148,11 +148,14 @@ var buildPaletteClasses = function buildPaletteClasses(config, _ref4) {
       state: 'active',
       textTone: stateTextTone
     }),
-    border: isSelected ? getBorderClass({
+    border: isSelected ? !hasBorderState ? getBorderClass({
+      tone: 'transparent'
+    }) : getBorderClass({
       state: 'selected',
-      tone: tone,
-      isLighter: isLighter
-    }) : hasTransparentBorder ? _borderColorModule["default"]['border-transparent'] : getBorderClass({
+      tone: tone
+    }) : hasTransparentBorder ? getBorderClass({
+      tone: 'transparent'
+    }) : getBorderClass({
       tone: tone,
       isLighter: isLighter
     }),