npm - @zohodesk/components - Versions diffs - 1.6.20 → 1.6.22-exp-1 - Mend

@zohodesk/components 1.6.20 → 1.6.22-exp-1

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 (200) hide show

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

@@ -3,17 +3,17 @@
 exports[`TextBoxIcon component Should be render children 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -23,19 +23,19 @@ exports[`TextBoxIcon component Should be render children 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"
@@ -55,17 +55,17 @@ exports[`TextBoxIcon component Should be render children 1`] = `
 exports[`TextBoxIcon component Should be render htmlId  1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -76,13 +76,13 @@ exports[`TextBoxIcon component Should be render htmlId  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"
@@ -95,17 +95,17 @@ exports[`TextBoxIcon component Should be render htmlId  1`] = `
 exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHover, isDisabled is false  1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container  iconOnHoverStyle flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container iconOnHoverStyle"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -115,13 +115,13 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
       />
     </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"
@@ -134,18 +134,18 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
 exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHover, isDisabled is true  1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    container  iconOnHoverReadonly flex rowdir"
+    class="flex row varClass customContainer border_bottom disabled borderColor_default hasBorder container iconOnHoverReadonly"
     data-selector-id="textBoxIcon"
     data-title=""
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <input
-        class="readonly  container medium  default  effect  borderColor_default  "
+        class="readonly container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -157,13 +157,13 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
       />
     </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"
@@ -176,17 +176,17 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
 exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -196,19 +196,19 @@ exports[`TextBoxIcon component Should be render iconRotated is true 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 rotated shrinkOff"
+          class="noShrink icon rotated"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -228,17 +228,17 @@ exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
 exports[`TextBoxIcon component Should be render id 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -249,13 +249,13 @@ exports[`TextBoxIcon component Should be render id 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"
@@ -268,17 +268,17 @@ exports[`TextBoxIcon component Should be render id 1`] = `
 exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class=" pointer container medium  default  effect  borderColor_default  "
+        class="pointer container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -288,13 +288,13 @@ exports[`TextBoxIcon component Should be render isClickable is true 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"
@@ -307,18 +307,18 @@ exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
 exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom disabled borderColor_default hasBorder container"
     data-selector-id="textBoxIcon"
     data-title=""
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -329,13 +329,13 @@ exports[`TextBoxIcon component Should be render isDisabled is true 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"
@@ -348,17 +348,17 @@ exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
 exports[`TextBoxIcon component Should be render isFocus is true   1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder active container"
     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"
     >
       <input
-        class="  container medium  default  effect focus borderColor_default  "
+        class="container medium default effect focus borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -368,13 +368,13 @@ exports[`TextBoxIcon component Should be render isFocus is true   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"
@@ -387,17 +387,17 @@ exports[`TextBoxIcon component Should be render isFocus is true   1`] = `
 exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom readonly borderColor_default hasBorder container"
     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"
     >
       <input
-        class="readonly  container medium  default    borderColor_default  "
+        class="readonly container medium default borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -408,13 +408,13 @@ exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect
       />
     </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"
@@ -427,17 +427,17 @@ exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect
 exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="readonly  container medium  default  effect  borderColor_default  "
+        class="readonly container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -448,13 +448,13 @@ exports[`TextBoxIcon component Should be render isReadOnly is true 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"
@@ -467,17 +467,17 @@ exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
 exports[`TextBoxIcon component Should be render name 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -488,13 +488,13 @@ exports[`TextBoxIcon component Should be render name 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"
@@ -507,17 +507,17 @@ exports[`TextBoxIcon component Should be render name 1`] = `
 exports[`TextBoxIcon component Should be render needBorder is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer    effect     container   flex rowdir"
+    class="flex row varClass customContainer effect container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -527,13 +527,13 @@ exports[`TextBoxIcon component Should be render needBorder is false 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"
@@ -546,17 +546,17 @@ exports[`TextBoxIcon component Should be render needBorder is false 1`] = `
 exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom readonly borderColor_default hasBorder container"
     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"
     >
       <input
-        class="readonly  container medium  default    borderColor_default  "
+        class="readonly container medium default borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -567,13 +567,13 @@ exports[`TextBoxIcon component Should be render needEffect is false 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"
@@ -586,17 +586,17 @@ exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
 exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -606,13 +606,13 @@ exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 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"
@@ -625,17 +625,17 @@ exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] =
 exports[`TextBoxIcon component Should be render placeholder 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -646,13 +646,13 @@ exports[`TextBoxIcon component Should be render placeholder 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"
@@ -665,17 +665,17 @@ exports[`TextBoxIcon component Should be render placeholder 1`] = `
 exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -685,19 +685,19 @@ exports[`TextBoxIcon component Should be render showClearIcon is true 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"
       >
         <button
-          class="buttonReset icon shrinkOff"
+          class="noShrink buttonReset icon"
           data-id="textBoxIcon_ClearIcon"
           data-selector-id="box"
           data-test-id="textBoxIcon_ClearIcon"
@@ -705,14 +705,14 @@ exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
         >
           <div
             aria-hidden="true"
-            class="flex cover coldir both"
+            class="flex fullSize column alignItems_center justifyContent_center"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-delete    rtl "
+              class="zd_font_icons rtl basic icon-delete"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -729,18 +729,18 @@ exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
 exports[`TextBoxIcon component Should be render title 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom disabled borderColor_default hasBorder container"
     data-selector-id="textBoxIcon"
     data-title="TextBoxIconTitle"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -751,13 +751,13 @@ exports[`TextBoxIcon component Should be render title 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"
@@ -770,17 +770,17 @@ exports[`TextBoxIcon component Should be render title 1`] = `
 exports[`TextBoxIcon component Should be render value is number 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -790,13 +790,13 @@ exports[`TextBoxIcon component Should be render value is number 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"
@@ -809,17 +809,17 @@ exports[`TextBoxIcon component Should be render value is number 1`] = `
 exports[`TextBoxIcon component Should be render value is string and length greater than 1 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -829,19 +829,19 @@ exports[`TextBoxIcon component Should be render value is string and length great
       />
     </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"
       >
         <button
-          class="buttonReset icon shrinkOff"
+          class="noShrink buttonReset icon"
           data-id="textBoxIcon_ClearIcon"
           data-selector-id="box"
           data-test-id="textBoxIcon_ClearIcon"
@@ -849,14 +849,14 @@ exports[`TextBoxIcon component Should be render value is string and length great
         >
           <div
             aria-hidden="true"
-            class="flex cover coldir both"
+            class="flex fullSize column alignItems_center justifyContent_center"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-delete    rtl "
+              class="zd_font_icons rtl basic icon-delete"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"
@@ -873,17 +873,17 @@ exports[`TextBoxIcon component Should be render value is string and length great
 exports[`TextBoxIcon component Should be render value is string and length less than 1 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -893,13 +893,13 @@ exports[`TextBoxIcon component Should be render value is string and length less
       />
     </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"
@@ -912,17 +912,17 @@ exports[`TextBoxIcon component Should be render value is string and length less
 exports[`TextBoxIcon component Should be render with dataSelectorId 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     data-selector-id="textBoxIcon_data_selector_id"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon_data_selector_id"
         data-test-id="textBoxIcon"
@@ -932,13 +932,13 @@ exports[`TextBoxIcon component Should be render with dataSelectorId 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"
@@ -951,17 +951,17 @@ exports[`TextBoxIcon component Should be render with dataSelectorId 1`] = `
 exports[`TextBoxIcon component Should be render with the basic set of default props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -971,13 +971,13 @@ exports[`TextBoxIcon component Should be render with the basic set of default pr
       />
     </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"
@@ -990,17 +990,17 @@ exports[`TextBoxIcon component Should be render with the basic set of default pr
 exports[`TextBoxIcon component Should render Varient - default 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1010,13 +1010,13 @@ exports[`TextBoxIcon component Should render Varient - default 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"
@@ -1029,17 +1029,17 @@ exports[`TextBoxIcon component Should render Varient - default 1`] = `
 exports[`TextBoxIcon component Should render Varient - primary 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  primary  effect  borderColor_default  "
+        class="container medium primary effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1049,13 +1049,13 @@ exports[`TextBoxIcon component Should render Varient - primary 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"
@@ -1068,17 +1068,17 @@ exports[`TextBoxIcon component Should render Varient - primary 1`] = `
 exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  secondary  effect  borderColor_default  "
+        class="container medium secondary effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1088,13 +1088,13 @@ exports[`TextBoxIcon component Should render Varient - secondary 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"
@@ -1107,17 +1107,17 @@ exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
 exports[`TextBoxIcon component Should render borderColor - default 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1127,13 +1127,13 @@ exports[`TextBoxIcon component Should render borderColor - default 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"
@@ -1146,17 +1146,17 @@ exports[`TextBoxIcon component Should render borderColor - default 1`] = `
 exports[`TextBoxIcon component Should render borderColor - error 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_error hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_error hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  undefined  "
+        class="container medium default effect"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1166,13 +1166,13 @@ exports[`TextBoxIcon component Should render borderColor - error 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"
@@ -1185,17 +1185,17 @@ exports[`TextBoxIcon component Should render borderColor - error 1`] = `
 exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_transparent hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_transparent hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_transparent  "
+        class="container medium default effect borderColor_transparent"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1205,13 +1205,13 @@ exports[`TextBoxIcon component Should render borderColor - transparent 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"
@@ -1224,17 +1224,17 @@ exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
 exports[`TextBoxIcon component Should render size  - medium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1244,13 +1244,13 @@ exports[`TextBoxIcon component Should render size  - medium 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"
@@ -1263,17 +1263,17 @@ exports[`TextBoxIcon component Should render size  - medium 1`] = `
 exports[`TextBoxIcon component Should render size  - small 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container small  default  effect  borderColor_default  "
+        class="container small default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1283,13 +1283,13 @@ exports[`TextBoxIcon component Should render size  - small 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"
@@ -1302,17 +1302,17 @@ exports[`TextBoxIcon component Should render size  - small 1`] = `
 exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container xmedium  default  effect  borderColor_default  "
+        class="container xmedium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1322,13 +1322,13 @@ exports[`TextBoxIcon component Should render size  - xmedium 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"
@@ -1341,17 +1341,17 @@ exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
 exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container xsmall  default  effect  borderColor_default  "
+        class="container xsmall default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1361,13 +1361,13 @@ exports[`TextBoxIcon component Should render size  - xsmall 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"
@@ -1380,17 +1380,17 @@ exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
 exports[`TextBoxIcon component Should render type  - number 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1400,13 +1400,13 @@ exports[`TextBoxIcon component Should render type  - number 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"
@@ -1419,17 +1419,17 @@ exports[`TextBoxIcon component Should render type  - number 1`] = `
 exports[`TextBoxIcon component Should render type  - password 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1439,13 +1439,13 @@ exports[`TextBoxIcon component Should render type  - password 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"
@@ -1458,17 +1458,17 @@ exports[`TextBoxIcon component Should render type  - password 1`] = `
 exports[`TextBoxIcon component Should render type  - text 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1478,13 +1478,13 @@ exports[`TextBoxIcon component Should render type  - text 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"
@@ -1497,17 +1497,17 @@ exports[`TextBoxIcon component Should render type  - text 1`] = `
 exports[`TextBoxIcon component rendering the Custom Props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1518,13 +1518,13 @@ exports[`TextBoxIcon component rendering the Custom 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"
@@ -1537,17 +1537,17 @@ exports[`TextBoxIcon component rendering the Custom Props 1`] = `
 exports[`TextBoxIcon component rendering the Custom class 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container customTBoxWrapTextBoxIcon  flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container customTBoxWrapTextBoxIcon"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  customTextBoxTextBoxIcon"
+        class="container medium default effect borderColor_default customTextBoxTextBoxIcon"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1557,13 +1557,13 @@ exports[`TextBoxIcon component rendering the Custom class 1`] = `
       />
     </div>
     <div
-      class="iconContainer customTBoxIconTextBox shrinkOff"
+      class="noShrink iconContainer customTBoxIconTextBox"
       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"
@@ -1576,17 +1576,17 @@ exports[`TextBoxIcon component rendering the Custom class 1`] = `
 exports[`TextBoxIcon component rendering the i18n value 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container"
     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"
     >
       <input
-        class="  container medium  default  effect  borderColor_default  "
+        class="container medium default effect borderColor_default"
         data-id="textBoxIcon"
         data-selector-id="textBoxIcon"
         data-test-id="textBoxIcon"
@@ -1596,19 +1596,19 @@ exports[`TextBoxIcon component rendering the i18n value 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"
       >
         <button
-          class="buttonReset icon shrinkOff"
+          class="noShrink buttonReset icon"
           data-id="textBoxIcon_ClearIcon"
           data-selector-id="box"
           data-test-id="textBoxIcon_ClearIcon"
@@ -1616,14 +1616,14 @@ exports[`TextBoxIcon component rendering the i18n value 1`] = `
         >
           <div
             aria-hidden="true"
-            class="flex cover coldir both"
+            class="flex fullSize column alignItems_center justifyContent_center"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-delete    rtl "
+              class="zd_font_icons rtl basic icon-delete"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"