@zohodesk/dot 1.9.16 → 1.9.17

package/es/FormAction/FormAction.js

@@ -53,11 +53,7 @@ export default class FormAction extends React.Component {
       align: hasCenterChild ? 'around' : hasRightChild && !hasLeftChild ? 'right' : null,
       dataId: customId ? `${customId}_container` : undefined,
       testId: testId ? `${testId}_container` : undefined,
-      className: `
-                        ${`${style.footerParent} ${hasCenterChild ? '' : style[`${paddingLeftSize ? paddingLeftSize : size}Padding`]} ${paddingRightClass}`}
-
-                        ${style[`${size}Footer`]}
-                    `
+      className: `${style.footerParent} ${hasCenterChild ? '' : style[`${paddingLeftSize ? paddingLeftSize : size}Padding`]} ${style[`${size}Footer`]} ${paddingRightClass}`
     }, hasLeftChild ? /*#__PURE__*/React.createElement(Box, {
       flexible: hasRightChild ? true : false,
       shrink: !hasRightChild && hasLeftChild ? true : false,

package/es/FormAction/__tests__/__snapshots__/FormAction.spec.js.snap

@@ -7,16 +7,13 @@ exports[`FormAction Render with Center children 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent  
-
-                        mediumFooter
-                     flex rowdir around"
+      class="flex row justifyContent_spaceAround footerParent mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="shrinkOff"
+        class="noShrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -37,16 +34,13 @@ exports[`FormAction Render with LeftSide children 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent mediumPadding 
-
-                        mediumFooter
-                     flex rowdir"
+      class="flex row footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="shrinkOn"
+        class="shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -67,16 +61,13 @@ exports[`FormAction Render with LeftSide, Center and RightSide children 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent  
-
-                        mediumFooter
-                     flex rowdir around"
+      class="flex row justifyContent_spaceAround footerParent mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grow basis shrinkOff"
+        class="flexible basis_zero noShrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -86,7 +77,7 @@ exports[`FormAction Render with LeftSide, Center and RightSide children 1`] = `
         </button>
       </div>
       <div
-        class="shrinkOff"
+        class="noShrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -96,7 +87,7 @@ exports[`FormAction Render with LeftSide, Center and RightSide children 1`] = `
         </button>
       </div>
       <div
-        class="shrinkOff"
+        class="noShrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -117,16 +108,13 @@ exports[`FormAction Render with RightSide children 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent mediumPadding 
-
-                        mediumFooter
-                     flex rowdir right"
+      class="flex row justifyContent_end footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="shrinkOn"
+        class="shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -149,16 +137,13 @@ exports[`FormAction Render with customId and testId 1`] = `
     data-test-id="form-action-testId"
   >
     <div
-      class="footerParent  
-
-                        mediumFooter
-                     flex rowdir around"
+      class="flex row justifyContent_spaceAround footerParent mediumFooter"
       data-id="form-action-customId_container"
       data-selector-id="container"
       data-test-id="form-action-testId_container"
     >
       <div
-        class="grow basis shrinkOff"
+        class="flexible basis_zero noShrink"
         data-id="form-action-customId_leftElement"
         data-selector-id="box"
         data-test-id="form-action-testId_leftElement"
@@ -168,7 +153,7 @@ exports[`FormAction Render with customId and testId 1`] = `
         </button>
       </div>
       <div
-        class="shrinkOff"
+        class="noShrink"
         data-id="form-action-customId_rightElement"
         data-selector-id="box"
         data-test-id="form-action-testId_rightElement"
@@ -178,7 +163,7 @@ exports[`FormAction Render with customId and testId 1`] = `
         </button>
       </div>
       <div
-        class="shrinkOff"
+        class="noShrink"
         data-id="form-action-customId_centerElement"
         data-selector-id="box"
         data-test-id="form-action-testId_centerElement"
@@ -199,10 +184,7 @@ exports[`FormAction Render with dataSelectorId 1`] = `
     data-selector-id="form-action-dataSelectorId"
   >
     <div
-      class="footerParent mediumPadding 
-
-                        mediumFooter
-                     flex rowdir"
+      class="flex row footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -218,10 +200,7 @@ exports[`FormAction Render with default props 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent mediumPadding 
-
-                        mediumFooter
-                     flex rowdir"
+      class="flex row footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -237,16 +216,13 @@ exports[`FormAction Render with direct child (defaults to left group) 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent mediumPadding 
-
-                        mediumFooter
-                     flex rowdir"
+      class="flex row footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="shrinkOn"
+        class="shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -267,16 +243,13 @@ exports[`FormAction Render with multiple children in Center 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent  
-
-                        mediumFooter
-                     flex rowdir around"
+      class="flex row justifyContent_spaceAround footerParent mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="shrinkOff"
+        class="noShrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -308,16 +281,13 @@ exports[`FormAction Render with multiple children in LeftSide 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent mediumPadding 
-
-                        mediumFooter
-                     flex rowdir"
+      class="flex row footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="shrinkOn"
+        class="shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -349,16 +319,13 @@ exports[`FormAction Render with multiple children in RightSide 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent mediumPadding 
-
-                        mediumFooter
-                     flex rowdir right"
+      class="flex row justifyContent_end footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="shrinkOn"
+        class="shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -390,10 +357,7 @@ exports[`FormAction Render with paddingLeftSize as large 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent largePadding 
-
-                        mediumFooter
-                     flex rowdir"
+      class="flex row footerParent largePadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -409,10 +373,7 @@ exports[`FormAction Render with paddingLeftSize as medium 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent mediumPadding 
-
-                        mediumFooter
-                     flex rowdir"
+      class="flex row footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -428,10 +389,7 @@ exports[`FormAction Render with paddingLeftSize as small 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent smallPadding 
-
-                        mediumFooter
-                     flex rowdir"
+      class="flex row footerParent smallPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -447,10 +405,7 @@ exports[`FormAction Render with paddingLeftSize as xmedium 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent xmediumPadding 
-
-                        mediumFooter
-                     flex rowdir"
+      class="flex row footerParent xmediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -466,10 +421,7 @@ exports[`FormAction Render with paddingLeftSize as xsmall 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent xsmallPadding 
-
-                        mediumFooter
-                     flex rowdir"
+      class="flex row footerParent xsmallPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -485,10 +437,7 @@ exports[`FormAction Render with paddingRightClass 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent mediumPadding customPaddingRight
-
-                        mediumFooter
-                     flex rowdir"
+      class="flex row footerParent mediumPadding mediumFooter customPaddingRight"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -504,10 +453,7 @@ exports[`FormAction Render with size as large 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent largePadding 
-
-                        largeFooter
-                     flex rowdir"
+      class="flex row footerParent largePadding largeFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -523,10 +469,7 @@ exports[`FormAction Render with size as medium 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent mediumPadding 
-
-                        mediumFooter
-                     flex rowdir"
+      class="flex row footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -542,10 +485,7 @@ exports[`FormAction Render with size as small 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="footerParent smallPadding 
-
-                        smallFooter
-                     flex rowdir"
+      class="flex row footerParent smallPadding smallFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"

package/es/FreezeLayer/css/cssJSLogic.js

@@ -12,9 +12,9 @@ export default function cssJSLogic({
   let zIndexClass = `index${zIndex}`;
   let freezeClass = compileClassNames({
     [style.container]: true,
-    [customClass]: !!customClass,
     [style[zIndexClass]]: !!zIndex,
-    [style[palette]]: !isSvgMask && !!palette
+    [style[palette]]: !isSvgMask && !!palette,
+    [customClass]: !!customClass
   });
   return {
     freezeClass

package/es/IconButton/IconButton.js

@@ -119,7 +119,7 @@ export default class IconButton extends React.Component {
       tourId: tourId,
       align: "both",
       isCover: false,
-      className: `${needButtonTag ? btnStyle.buttonReset : ''} ${style[size]} ${style.wrapper} ${className || ''} ${isActive ? style[`${palette}_active`] : style[palette]}`,
+      className: `${needButtonTag ? btnStyle.buttonReset : ''} ${style[size]} ${style.wrapper} ${isActive ? style[`${palette}_active`] : style[palette]} ${className}`,
       dataId: dataId,
       dataSelectorId: dataSelectorId,
       onClick: this.triggerClick,
@@ -137,7 +137,7 @@ export default class IconButton extends React.Component {
       isBold: isBold,
       size: iconSize,
       name: iconName,
-      iconClass: `${iconClass} ${style.icon_button_center}`
+      iconClass: `${style.icon_button_center} ${iconClass}`
     }) : null, children ? children : null));
   }
 

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

@@ -4,7 +4,7 @@ exports[`IconButton Checking the "Children" 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -27,7 +27,7 @@ exports[`IconButton eleRef prop is a function 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -45,7 +45,7 @@ exports[`IconButton rendering ally 1`] = `
     aria-label="ariaLabel"
     aria-labelledby="ariaLabelledby"
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -60,7 +60,7 @@ exports[`IconButton rendering ally 2`] = `
     aria-expanded="false"
     aria-haspopup="false"
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -73,7 +73,7 @@ exports[`IconButton rendering in ClassName 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper IconButtonClass undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper IconButtonClass effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -86,7 +86,7 @@ exports[`IconButton rendering in Icon 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -94,7 +94,7 @@ exports[`IconButton rendering in Icon 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-infoStroke fbold iconClass icon_button_center  "
+      class="zd_font_icons basic icon-infoStroke fbold icon_button_center iconClass"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -108,7 +108,7 @@ exports[`IconButton rendering in dataIsHtml is True 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="true"
     data-selector-id="iconButton"
@@ -121,7 +121,7 @@ exports[`IconButton rendering in isDisabled is True 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover   disabled inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover disabled"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -135,7 +135,7 @@ exports[`IconButton rendering in title 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -149,7 +149,7 @@ exports[`IconButton rendering isNeedEffect is False 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -162,7 +162,7 @@ exports[`IconButton rendering needButtonTag 1`] = `
 <DocumentFragment>
   <div
     aria-pressed="false"
-    class="large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -175,7 +175,7 @@ exports[`IconButton rendering the defult props 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -188,7 +188,7 @@ exports[`IconButton rendering the hovertypes- bg 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border bgHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border bgHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -201,7 +201,7 @@ exports[`IconButton rendering the hovertypes- border 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border borderHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border borderHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -214,7 +214,7 @@ exports[`IconButton rendering the hovertypes- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -227,7 +227,7 @@ exports[`IconButton rendering the isActive true with palette of- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover active hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover active hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -240,7 +240,7 @@ exports[`IconButton rendering the isActive true with palette of- primary 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  primary_active effect primary border defaultHover active hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper primary_active effect primary border defaultHover active hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -253,7 +253,7 @@ exports[`IconButton rendering the isActive true with palette of- primaryFilled 1
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  primaryFilled_active effect primaryFilled border defaultHover active hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper primaryFilled_active effect primaryFilled border defaultHover active hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -266,7 +266,7 @@ exports[`IconButton rendering the palette of- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -279,7 +279,7 @@ exports[`IconButton rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  primary effect primary border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper primary effect primary border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -292,7 +292,7 @@ exports[`IconButton rendering the palette of- primaryFilled 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  primaryFilled effect primaryFilled border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper primaryFilled effect primaryFilled border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -305,7 +305,7 @@ exports[`IconButton rendering the size of- large 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -318,7 +318,7 @@ exports[`IconButton rendering the size of- medium 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset medium wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset medium wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -331,7 +331,7 @@ exports[`IconButton rendering the size of- small 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset small wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset small wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -344,7 +344,7 @@ exports[`IconButton rendering the size of- xlarge 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset xlarge wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset xlarge wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -357,7 +357,7 @@ exports[`IconButton rendering the size of- xsmall 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset xsmall wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset xsmall wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -370,7 +370,7 @@ exports[`IconButton rendering tourId 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"

package/es/Image/Image.js

@@ -24,7 +24,7 @@ export default class Image extends React.Component {
       "data-title": title,
       "data-id": dataId,
       "data-test-id": dataId,
-      className: ` ${className} ${isCover ? style.imgFullSize : style.imgMaxFullSize} `,
+      className: `${isCover ? style.imgFullSize : style.imgMaxFullSize} ${className}`,
       onClick: onClick,
       id: htmlId,
       ref: eleRef,