@zohodesk/components 1.6.20 → 1.6.22-exp-1

package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap

@@ -3,19 +3,19 @@
 exports[`SelectWithAvatar rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper    effect "
+    class="wrapper effect"
     data-id="selectWithAvatar"
     data-selector-id="selectWithAvatar"
     data-test-id="selectWithAvatar"
   >
     <div
-      class="container medium borderColor_default   hasBorder flex cover rowdir vCenter"
+      class="flex fullSize row alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grow basis shrinkOff"
+        class="flexible basis_zero noShrink"
         data-id="selectWithAvatar_textBox"
         data-selector-id="box"
         data-test-id="selectWithAvatar_textBox"
@@ -28,7 +28,7 @@ exports[`SelectWithAvatar rendering the defult props 1`] = `
           aria-owns="1"
           aria-readonly="true"
           autocomplete="off"
-          class=" pointer container medium  default  effect  borderColor_default  "
+          class="pointer container medium default effect borderColor_default"
           data-id="textBox"
           data-selector-id="textBox"
           data-test-id="textBox"

package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`SelectWithIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium  "
+    class="container box_medium"
     data-selector-id="selectWithIcon"
   >
     <div
@@ -12,29 +12,29 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
       data-test-id="selectWithIcon"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="leftIcon  flex cover coldir both"
+          class="flex fullSize column alignItems_center justifyContent_center leftIcon"
           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"
         >
           <div
-            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input iconSelect  flex rowdir"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input iconSelect"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -47,7 +47,7 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
                 aria-owns="1"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container medium  default  effect  borderColor_default  "
+                class="pointer container medium default effect borderColor_default"
                 data-id="selectWithIcon_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="selectWithIcon_textBox"
@@ -59,32 +59,32 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="icon  shrinkOff"
+                  class="noShrink icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="rightPlaceholder inflex both"
+                    class="inlineFlex alignItems_center justifyContent_center rightPlaceholder"
                     data-id="selectWithIcon_downIcon"
                     data-selector-id="container"
                     data-test-id="selectWithIcon_downIcon"
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-down    "
+                      class="zd_font_icons basic icon-down"
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"

package/lib/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap

@@ -11,7 +11,7 @@ exports[`Stencils rendering the customClass 1`] = `
 exports[`Stencils rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium primary "
+    class="container animate rect medium primary"
   />
 </DocumentFragment>
 `;
@@ -19,7 +19,7 @@ exports[`Stencils rendering the defult props 1`] = `
 exports[`Stencils rendering the palette of- dark 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium dark "
+    class="container animate rect medium dark"
   />
 </DocumentFragment>
 `;
@@ -27,7 +27,7 @@ exports[`Stencils rendering the palette of- dark 1`] = `
 exports[`Stencils rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium primary "
+    class="container animate rect medium primary"
   />
 </DocumentFragment>
 `;
@@ -35,7 +35,7 @@ exports[`Stencils rendering the palette of- primary 1`] = `
 exports[`Stencils rendering the palette of- secondary 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium secondary "
+    class="container animate rect medium secondary"
   />
 </DocumentFragment>
 `;
@@ -43,7 +43,7 @@ exports[`Stencils rendering the palette of- secondary 1`] = `
 exports[`Stencils rendering the shape of- circle 1`] = `
 <DocumentFragment>
   <div
-    class="container animate circle size_medium primary "
+    class="container animate circle size_medium primary"
   />
 </DocumentFragment>
 `;
@@ -51,7 +51,7 @@ exports[`Stencils rendering the shape of- circle 1`] = `
 exports[`Stencils rendering the shape of- rect 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium primary "
+    class="container animate rect medium primary"
   />
 </DocumentFragment>
 `;
@@ -59,7 +59,7 @@ exports[`Stencils rendering the shape of- rect 1`] = `
 exports[`Stencils rendering the shape of- square 1`] = `
 <DocumentFragment>
   <div
-    class="container animate square size_medium primary "
+    class="container animate square size_medium primary"
   />
 </DocumentFragment>
 `;
@@ -67,7 +67,7 @@ exports[`Stencils rendering the shape of- square 1`] = `
 exports[`Stencils rendering the size of- default 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect default primary "
+    class="container animate rect default primary"
   />
 </DocumentFragment>
 `;
@@ -75,7 +75,7 @@ exports[`Stencils rendering the size of- default 1`] = `
 exports[`Stencils rendering the size of- large 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect large primary "
+    class="container animate rect large primary"
   />
 </DocumentFragment>
 `;
@@ -83,7 +83,7 @@ exports[`Stencils rendering the size of- large 1`] = `
 exports[`Stencils rendering the size of- medium 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium primary "
+    class="container animate rect medium primary"
   />
 </DocumentFragment>
 `;
@@ -91,7 +91,7 @@ exports[`Stencils rendering the size of- medium 1`] = `
 exports[`Stencils rendering the size of- small 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect small primary "
+    class="container animate rect small primary"
   />
 </DocumentFragment>
 `;
@@ -99,7 +99,7 @@ exports[`Stencils rendering the size of- small 1`] = `
 exports[`Stencils rendering without animation 1`] = `
 <DocumentFragment>
   <div
-    class="container  rect medium primary "
+    class="container rect medium primary"
   />
 </DocumentFragment>
 `;

package/lib/Switch/Switch.js

@@ -104,7 +104,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         isCover: false,
         alignBox: "row",
         isInline: true,
-        className: "".concat(_SwitchModule["default"].container, " ").concat(customSwitchWrap, " ").concat(disabled ? _SwitchModule["default"].disabled : isReadOnly ? _SwitchModule["default"].readonly : _SwitchModule["default"].effect),
+        className: "".concat(_SwitchModule["default"].container, " ").concat(disabled ? _SwitchModule["default"].disabled : isReadOnly ? _SwitchModule["default"].readonly : _SwitchModule["default"].effect, "  ").concat(customSwitchWrap),
         "data-title": disabled ? disableTitle : title,
         "aria-checked": checked,
         role: "switch",