npm - @zohodesk/dot - Versions diffs - 1.7.13 → 1.7.15 - Mend

@zohodesk/dot 1.7.13 → 1.7.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (929) hide show

package/es/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap CHANGED Viewed

@@ -87,7 +87,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-download    "
+                        class="zd_font_icons basic icon-download   icon_button_center  "
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -111,7 +111,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-cross    "
+                      class="zd_font_icons basic icon-cross   icon_button_center  "
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"
@@ -369,7 +369,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-hideTab  thumpIcon thumpIconActive  "
+            class="zd_font_icons basic icon-hideTab  thumpIcon thumpIconActive icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/es/Drawer/__tests__/__snapshots__/Header.spec.js.snap CHANGED Viewed

@@ -73,7 +73,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title an
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -438,7 +438,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, c
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -539,7 +539,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, i
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -736,7 +736,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, i
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/es/FlipCard/__tests__/__snapshots__/FlipCard.spec.js.snap CHANGED Viewed

@@ -161,7 +161,7 @@ exports[`FlipCard renders correctly with channel: chat and action: outgoing 1`]
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   iconColor  undefined   blue"
+              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   avatar_align_center  iconColor     blue"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -255,7 +255,7 @@ exports[`FlipCard renders correctly with channel: email and action: incoming 1`]
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -525,7 +525,7 @@ exports[`FlipCard renders correctly with className, channel, and action 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -1250,7 +1250,7 @@ exports[`FlipCard renders correctly with iconSize as a number and channel & acti
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -1835,7 +1835,7 @@ exports[`FlipCard renders correctly with palette, channel, and action 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   iconColor  undefined   blue"
+              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   avatar_align_center  iconColor     blue"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -3824,7 +3824,7 @@ exports[`FlipCard renders with icon 1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-ch-email    iconColor  undefined   "
+            class="zd_font_icons basic icon-ch-email    avatar_align_center  iconColor     "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/es/IconButton/IconButton.js CHANGED Viewed

@@ -136,7 +136,7 @@ export default class IconButton extends React.Component {
       isBold: isBold,
       size: iconSize,
       name: iconName,
-      iconClass: iconClass
+      iconClass: `${iconClass} ${style.icon_button_center}`
     }) : null, children ? children : null));
   }

package/es/IconButton/IconButton.module.css CHANGED Viewed

@@ -46,4 +46,7 @@
 .primaryFilled,
 .primaryFilled_active {
   --iconColor: var(--zdt_iconButton_icon_primaryActive);
+}
+.icon_button_center {
+  composes: tcenter from '~@zohodesk/components/lib/common/common.module.css';
 }

package/es/IconButton/__tests__/__snapshots__/IconButton.spec.js.snap CHANGED Viewed

@@ -94,7 +94,7 @@ exports[`IconButton rendering in Icon 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-infoStroke fbold iconClass  "
+      class="zd_font_icons basic icon-infoStroke fbold iconClass icon_button_center  "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/Onboarding/hooks/useOnboardingSlider.js CHANGED Viewed

@@ -18,7 +18,7 @@ const useOnboardingSlider = _ref => {
   }, []);
   const handleSliderNext = useCallback(() => {
     progressRef.current = 0;
-    setCurrentSlide(currentSlide + 1);
+    setCurrentSlide(prev => prev + 1);
     setAutoplay(false);
   }, []);
   const handleMouseEnter = useCallback(() => {

package/es/PlusIcon/__tests__/__snapshots__/PlusIcon.spec.js.snap CHANGED Viewed

@@ -15,7 +15,7 @@ exports[`PlusIcon renders with  size is  - medium 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -41,7 +41,7 @@ exports[`PlusIcon renders with  size is  - small 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -67,7 +67,7 @@ exports[`PlusIcon renders with  size is  - xlarge 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -93,7 +93,7 @@ exports[`PlusIcon renders with  size is  - xmedium 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -119,7 +119,7 @@ exports[`PlusIcon renders with  size is  - xsmall 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -145,7 +145,7 @@ exports[`PlusIcon renders with  size is  - xxsmall 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -171,7 +171,7 @@ exports[`PlusIcon renders with customClass prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -197,7 +197,7 @@ exports[`PlusIcon renders with dataId prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -223,7 +223,7 @@ exports[`PlusIcon renders with default props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -249,7 +249,7 @@ exports[`PlusIcon renders with iconClass prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus   custom-icon-class icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus   custom-icon-class icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -275,7 +275,7 @@ exports[`PlusIcon renders with iconName prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -301,7 +301,7 @@ exports[`PlusIcon renders with iconSize prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -328,7 +328,7 @@ exports[`PlusIcon renders with title prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/es/alert/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap CHANGED Viewed

@@ -770,7 +770,7 @@ exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross    "
+          class="zd_font_icons basic icon-cross   icon_button_center  "
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/es/avatar/AvatarIcon/AvatarIcon.js CHANGED Viewed

@@ -29,7 +29,7 @@ export default class AvatarIcon extends React.Component {
     } = customProps;
     let border = borderOnHover || onClick;
     return /*#__PURE__*/React.createElement(Container, {
-      className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ${AvatarSize(size)} ${style[palette]} ${className}`,
+      className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ${AvatarSize(size)} ${style[palette] ? style[palette] : ''} ${className}`,
       onClick: onClick,
       dataId: dataId,
       "data-title": title,
@@ -41,7 +41,7 @@ export default class AvatarIcon extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: name,
       size: iconSize,
-      iconClass: ` ${iconClass} ${style.iconColor} ${iconColor ? ` ${style[`icon_${iconColor}`]}` : ''} `,
+      iconClass: ` ${iconClass} ${style.avatar_align_center}  ${style.iconColor} ${iconColor ? ` ${style[`icon_${iconColor}`] ? style[`icon_${iconColor}`] : ''}` : ''} `,
       isBold: isIconBold
     }));
   }

package/es/avatar/AvatarIcon/AvatarIcon.module.css CHANGED Viewed

@@ -56,3 +56,6 @@
   --icon_color: var(--zdt_avatarIcon_dark_icon);
 }
+.avatar_align_center {
+  composes: tcenter from '~@zohodesk/components/lib/common/common.module.css';
+}

package/es/avatar/AvatarIcon/__tests__/__snapshots__/AvatarIcon.spec.js.snap CHANGED Viewed

@@ -10,7 +10,7 @@ exports[`AvatarIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-add-ag    iconColor  undefined   "
+      class="zd_font_icons basic icon-add-ag    avatar_align_center  iconColor     "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/lookup/header/Close/__tests__/__snapshots__/Close.spec.js.snap CHANGED Viewed

@@ -12,7 +12,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-cross    "
+      class="zd_font_icons basic icon-cross   icon_button_center  "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/lookup/header/TicketHeader/__tests__/__snapshots__/TicketHeader.spec.js.snap CHANGED Viewed

@@ -46,7 +46,7 @@ exports[`TicketHeader rendering the defult props 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross    "
+          class="zd_font_icons basic icon-cross   icon_button_center  "
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/lib/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap CHANGED Viewed

@@ -87,7 +87,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-download    "
+                        class="zd_font_icons basic icon-download   icon_button_center  "
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -111,7 +111,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-cross    "
+                      class="zd_font_icons basic icon-cross   icon_button_center  "
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"
@@ -369,7 +369,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-hideTab  thumpIcon thumpIconActive  "
+            class="zd_font_icons basic icon-hideTab  thumpIcon thumpIconActive icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/lib/Drawer/__tests__/__snapshots__/Header.spec.js.snap CHANGED Viewed

@@ -73,7 +73,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title an
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -438,7 +438,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, c
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -539,7 +539,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, i
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -736,7 +736,7 @@ exports[`Header Component - Title Prop Combinations renders Header with title, i
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-cross    "
+            class="zd_font_icons basic icon-cross   icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/lib/FlipCard/__tests__/__snapshots__/FlipCard.spec.js.snap CHANGED Viewed

@@ -161,7 +161,7 @@ exports[`FlipCard renders correctly with channel: chat and action: outgoing 1`]
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   iconColor  undefined   blue"
+              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   avatar_align_center  iconColor     blue"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -255,7 +255,7 @@ exports[`FlipCard renders correctly with channel: email and action: incoming 1`]
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -525,7 +525,7 @@ exports[`FlipCard renders correctly with className, channel, and action 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -1250,7 +1250,7 @@ exports[`FlipCard renders correctly with iconSize as a number and channel & acti
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   iconColor  undefined   green"
+              class="zd_font_icons basic icon-chMailIn   iconStyle email_incoming   avatar_align_center  iconColor     green"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -1835,7 +1835,7 @@ exports[`FlipCard renders correctly with palette, channel, and action 1`] = `
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   iconColor  undefined   blue"
+              class="zd_font_icons basic icon-chChatOut   iconStyle chat_outgoing   avatar_align_center  iconColor     blue"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -3824,7 +3824,7 @@ exports[`FlipCard renders with icon 1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-ch-email    iconColor  undefined   "
+            class="zd_font_icons basic icon-ch-email    avatar_align_center  iconColor     "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/lib/IconButton/IconButton.js CHANGED Viewed

@@ -182,7 +182,7 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
         isBold: isBold,
         size: iconSize,
         name: iconName,
-        iconClass: iconClass
+        iconClass: "".concat(iconClass, " ").concat(_IconButtonModule["default"].icon_button_center)
       }) : null, children ? children : null));
     }
   }]);

package/lib/IconButton/IconButton.module.css CHANGED Viewed

@@ -46,4 +46,7 @@
 .primaryFilled,
 .primaryFilled_active {
   --iconColor: var(--zdt_iconButton_icon_primaryActive);
+}
+.icon_button_center {
+  composes: tcenter from '~@zohodesk/components/lib/common/common.module.css';
 }

package/lib/IconButton/__tests__/__snapshots__/IconButton.spec.js.snap CHANGED Viewed

@@ -94,7 +94,7 @@ exports[`IconButton rendering in Icon 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-infoStroke fbold iconClass  "
+      class="zd_font_icons basic icon-infoStroke fbold iconClass icon_button_center  "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/Onboarding/hooks/useOnboardingSlider.js CHANGED Viewed

@@ -45,7 +45,9 @@ var useOnboardingSlider = function useOnboardingSlider(_ref) {
   }, []);
   var handleSliderNext = (0, _react.useCallback)(function () {
     progressRef.current = 0;
-    setCurrentSlide(currentSlide + 1);
+    setCurrentSlide(function (prev) {
+      return prev + 1;
+    });
     setAutoplay(false);
   }, []);
   var handleMouseEnter = (0, _react.useCallback)(function () {

package/lib/PlusIcon/__tests__/__snapshots__/PlusIcon.spec.js.snap CHANGED Viewed

@@ -15,7 +15,7 @@ exports[`PlusIcon renders with  size is  - medium 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -41,7 +41,7 @@ exports[`PlusIcon renders with  size is  - small 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -67,7 +67,7 @@ exports[`PlusIcon renders with  size is  - xlarge 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -93,7 +93,7 @@ exports[`PlusIcon renders with  size is  - xmedium 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -119,7 +119,7 @@ exports[`PlusIcon renders with  size is  - xsmall 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -145,7 +145,7 @@ exports[`PlusIcon renders with  size is  - xxsmall 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -171,7 +171,7 @@ exports[`PlusIcon renders with customClass prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -197,7 +197,7 @@ exports[`PlusIcon renders with dataId prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -223,7 +223,7 @@ exports[`PlusIcon renders with default props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -249,7 +249,7 @@ exports[`PlusIcon renders with iconClass prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus   custom-icon-class icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus   custom-icon-class icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -275,7 +275,7 @@ exports[`PlusIcon renders with iconName prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -301,7 +301,7 @@ exports[`PlusIcon renders with iconSize prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -328,7 +328,7 @@ exports[`PlusIcon renders with title prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/lib/alert/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap CHANGED Viewed

@@ -770,7 +770,7 @@ exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross    "
+          class="zd_font_icons basic icon-cross   icon_button_center  "
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/lib/avatar/AvatarIcon/AvatarIcon.js CHANGED Viewed

@@ -79,7 +79,7 @@ var AvatarIcon = /*#__PURE__*/function (_React$Component) {
           AvatarIconProps = _customProps$AvatarIc === void 0 ? {} : _customProps$AvatarIc;
       var border = borderOnHover || onClick;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-        className: "".concat(_AvatarIconModule["default"].container, " ").concat(borderOnActive ? _AvatarIconModule["default"].borderOnActive : border ? _AvatarIconModule["default"].borderOnHover : '', " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarIconModule["default"][palette], " ").concat(className),
+        className: "".concat(_AvatarIconModule["default"].container, " ").concat(borderOnActive ? _AvatarIconModule["default"].borderOnActive : border ? _AvatarIconModule["default"].borderOnHover : '', " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarIconModule["default"][palette] ? _AvatarIconModule["default"][palette] : '', " ").concat(className),
         onClick: onClick,
         dataId: dataId,
         "data-title": title,
@@ -90,7 +90,7 @@ var AvatarIcon = /*#__PURE__*/function (_React$Component) {
       }, AvatarIconProps), /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: name,
         size: iconSize,
-        iconClass: " ".concat(iconClass, " ").concat(_AvatarIconModule["default"].iconColor, " ").concat(iconColor ? " ".concat(_AvatarIconModule["default"]["icon_".concat(iconColor)]) : '', " "),
+        iconClass: " ".concat(iconClass, " ").concat(_AvatarIconModule["default"].avatar_align_center, "  ").concat(_AvatarIconModule["default"].iconColor, " ").concat(iconColor ? " ".concat(_AvatarIconModule["default"]["icon_".concat(iconColor)] ? _AvatarIconModule["default"]["icon_".concat(iconColor)] : '') : '', " "),
         isBold: isIconBold
       }));
     }