@zohodesk/components 1.6.22 → 1.6.23-exp-2

package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap

@@ -48,7 +48,7 @@ exports[`TabWrapper rendering the align prop of - horizontal 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons  rtl basic icon-menu   "
+                  class="zd_font_icons rtl basic icon-menu"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"
@@ -133,7 +133,7 @@ exports[`TabWrapper rendering the align prop of - horizontal-reverse 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons  rtl basic icon-menu   "
+                  class="zd_font_icons rtl basic icon-menu"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"
@@ -218,7 +218,7 @@ exports[`TabWrapper rendering the align prop of - vertical 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons  rtl basic icon-menu   "
+                  class="zd_font_icons rtl basic icon-menu"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"
@@ -303,7 +303,7 @@ exports[`TabWrapper rendering the align prop of - vertical-reverse 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons  rtl basic icon-menu   "
+                  class="zd_font_icons rtl basic icon-menu"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"

package/lib/Tag/Tag.js

@@ -25,6 +25,8 @@ var _Button = _interopRequireDefault(require("../semantic/Button/Button"));
 
 var _IdProvider = require("../Provider/IdProvider");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TagModule = _interopRequireDefault(require("./Tag.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -164,7 +166,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
           clearLabel = _a11y$clearLabel === void 0 ? 'Delete' : _a11y$clearLabel;
       var isDarkPalette = palette === 'dark';
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_TagModule["default"].container, " ").concat(needEffect && !isReadOnly ? _TagModule["default"].effect : _TagModule["default"].readonly, " ").concat(active ? "".concat(_TagModule["default"].selected, " ").concat(_TagModule["default"]["active".concat(palette)]) : '', " ").concat(onRemove ? active ? "".concat(_TagModule["default"]["active".concat(size, "Effect")]) : '' : '', "  ").concat(_TagModule["default"][size], " ").concat(rounded ? _TagModule["default"].lgRadius : _TagModule["default"].smRadius, " ").concat(_TagModule["default"][palette], " ").concat(disabled ? _TagModule["default"].disabled : '', " ").concat(onSelectTag ? _TagModule["default"].pointer : '', " ").concat(customTag),
+        className: (0, _cssUtility.cn)("".concat(_TagModule["default"].container, " ").concat(needEffect && !isReadOnly ? _TagModule["default"].effect : _TagModule["default"].readonly, " ").concat(active ? "".concat(_TagModule["default"].selected, " ").concat(_TagModule["default"]["active".concat(palette)]) : '', " ").concat(onRemove ? active ? "".concat(_TagModule["default"]["active".concat(size, "Effect")]) : '' : '', "  ").concat(_TagModule["default"][size], " ").concat(rounded ? _TagModule["default"].lgRadius : _TagModule["default"].smRadius, " ").concat(_TagModule["default"][palette], " ").concat(disabled ? _TagModule["default"].disabled : '', " ").concat(onSelectTag ? _TagModule["default"].pointer : '', " ").concat(customTag)),
         "data-id": active ? "".concat(dataId, "_TagSelected") : "".concat(dataId, "_Tag"),
         "data-test-id": active ? "".concat(dataId, "_TagSelected") : "".concat(dataId, "_Tag"),
         onClick: this.handleSelect,
@@ -174,7 +176,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         "aria-labelledby": getAriaId,
         "data-selector-id": dataSelectorId
       }, customAttributes), (0, _utils.renderNode)(renderLeftChildren), hasAvatar ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TagModule["default"].avatar
+        className: (0, _cssUtility.cn)(_TagModule["default"].avatar)
       }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         palette: isDarkPalette ? 'info' : avatarPalette,
         name: initial,
@@ -183,13 +185,13 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         textPalette: isDarkPalette ? 'white' : '',
         customClass: customAvatar
       }, avatarProps))) : null, iconName ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TagModule["default"].icon, " ").concat(customTagIcon),
+        className: (0, _cssUtility.cn)("".concat(_TagModule["default"].icon, " ").concat(customTagIcon)),
         "aria-hidden": true
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, _extends({
         name: iconName,
         size: iconSize
       }, iconProps))) : null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TagModule["default"].text, " ").concat(textSizes),
+        className: (0, _cssUtility.cn)("".concat(_TagModule["default"].text, " ").concat(textSizes)),
         "aria-hidden": true,
         id: getAriaId
       }, text), onRemove && /*#__PURE__*/_react["default"].createElement(_Button["default"], {