@zohodesk/components 1.6.22 → 1.6.23-exp-2

package/es/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/es/Tag/Tag.js

@@ -9,6 +9,7 @@ import Avatar from "../Avatar/Avatar";
 import { Container } from "../Layout";
 import Button from "../semantic/Button/Button";
 import { getUniqueId } from "../Provider/IdProvider";
+import { cn } from "@dot-system/css-utility";
 import style from "./Tag.module.css";
 /*
  * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
@@ -108,7 +109,7 @@ export default class Tag extends PureComponent {
     } = a11y;
     let isDarkPalette = palette === 'dark';
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
+      className: cn(`${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`),
       "data-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       "data-test-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       onClick: this.handleSelect,
@@ -118,7 +119,7 @@ export default class Tag extends PureComponent {
       "aria-labelledby": getAriaId,
       "data-selector-id": dataSelectorId
     }, customAttributes), renderNode(renderLeftChildren), hasAvatar ? /*#__PURE__*/React.createElement("div", {
-      className: style.avatar
+      className: cn(style.avatar)
     }, /*#__PURE__*/React.createElement(Avatar, _extends({
       palette: isDarkPalette ? 'info' : avatarPalette,
       name: initial,
@@ -127,13 +128,13 @@ export default class Tag extends PureComponent {
       textPalette: isDarkPalette ? 'white' : '',
       customClass: customAvatar
     }, avatarProps))) : null, iconName ? /*#__PURE__*/React.createElement("div", {
-      className: `${style.icon} ${customTagIcon}`,
+      className: cn(`${style.icon} ${customTagIcon}`),
       "aria-hidden": true
     }, /*#__PURE__*/React.createElement(Icon, _extends({
       name: iconName,
       size: iconSize
     }, iconProps))) : null, /*#__PURE__*/React.createElement("div", {
-      className: `${style.text} ${textSizes}`,
+      className: cn(`${style.text} ${textSizes}`),
       "aria-hidden": true,
       id: getAriaId
     }, text), onRemove && /*#__PURE__*/React.createElement(Button, {