@zohodesk/dot 1.9.16 → 1.9.17

package/lib/FormAction/FormAction.js

@@ -111,7 +111,7 @@ var FormAction = /*#__PURE__*/function (_React$Component) {
         align: hasCenterChild ? 'around' : hasRightChild && !hasLeftChild ? 'right' : null,
         dataId: customId ? "".concat(customId, "_container") : undefined,
         testId: testId ? "".concat(testId, "_container") : undefined,
-        className: "\n                        ".concat("".concat(_FormActionModule["default"].footerParent, " ").concat(hasCenterChild ? '' : _FormActionModule["default"]["".concat(paddingLeftSize ? paddingLeftSize : size, "Padding")], " ").concat(paddingRightClass), "\n\n                        ", _FormActionModule["default"]["".concat(size, "Footer")], "\n                    ")
+        className: "".concat(_FormActionModule["default"].footerParent, " ").concat(hasCenterChild ? '' : _FormActionModule["default"]["".concat(paddingLeftSize ? paddingLeftSize : size, "Padding")], " ").concat(_FormActionModule["default"]["".concat(size, "Footer")], " ").concat(paddingRightClass)
       }, hasLeftChild ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: hasRightChild ? true : false,
         shrink: !hasRightChild && hasLeftChild ? true : false,

package/lib/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/lib/FreezeLayer/css/cssJSLogic.js

@@ -19,7 +19,7 @@ function cssJSLogic(_ref) {
       isSvgMask = props.isSvgMask,
       customClass = props.customClass;
   var zIndexClass = "index".concat(zIndex);
-  var freezeClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.container, true), _defineProperty(_compileClassNames, customClass, !!customClass), _defineProperty(_compileClassNames, style[zIndexClass], !!zIndex), _defineProperty(_compileClassNames, style[palette], !isSvgMask && !!palette), _compileClassNames));
+  var freezeClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.container, true), _defineProperty(_compileClassNames, style[zIndexClass], !!zIndex), _defineProperty(_compileClassNames, style[palette], !isSvgMask && !!palette), _defineProperty(_compileClassNames, customClass, !!customClass), _compileClassNames));
   return {
     freezeClass: freezeClass
   };

package/lib/IconButton/IconButton.js

@@ -164,7 +164,7 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
         tourId: tourId,
         align: "both",
         isCover: false,
-        className: "".concat(needButtonTag ? _semanticButtonModule["default"].buttonReset : '', " ").concat(_IconButtonModule["default"][size], " ").concat(_IconButtonModule["default"].wrapper, " ").concat(className || '', " ").concat(isActive ? _IconButtonModule["default"]["".concat(palette, "_active")] : _IconButtonModule["default"][palette]),
+        className: "".concat(needButtonTag ? _semanticButtonModule["default"].buttonReset : '', " ").concat(_IconButtonModule["default"][size], " ").concat(_IconButtonModule["default"].wrapper, " ").concat(isActive ? _IconButtonModule["default"]["".concat(palette, "_active")] : _IconButtonModule["default"][palette], " ").concat(className),
         dataId: dataId,
         dataSelectorId: dataSelectorId,
         onClick: this.triggerClick,
@@ -182,7 +182,7 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
         isBold: isBold,
         size: iconSize,
         name: iconName,
-        iconClass: "".concat(iconClass, " ").concat(_IconButtonModule["default"].icon_button_center)
+        iconClass: "".concat(_IconButtonModule["default"].icon_button_center, " ").concat(iconClass)
       }) : null, children ? children : null));
     }
   }]);

package/lib/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/lib/Image/Image.js

@@ -70,7 +70,7 @@ var Image = /*#__PURE__*/function (_React$Component) {
         "data-title": title,
         "data-id": dataId,
         "data-test-id": dataId,
-        className: " ".concat(className, " ").concat(isCover ? _ImageModule["default"].imgFullSize : _ImageModule["default"].imgMaxFullSize, " "),
+        className: "".concat(isCover ? _ImageModule["default"].imgFullSize : _ImageModule["default"].imgMaxFullSize, " ").concat(className),
         onClick: onClick,
         id: htmlId,
         ref: eleRef,