@zohodesk/dot 1.9.16 → 1.9.17

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

@@ -3,7 +3,7 @@
 exports[`AlertHeader renders falls back when neither iconName nor matching iconType is available 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -12,25 +12,25 @@ exports[`AlertHeader renders falls back when neither iconName nor matching iconT
       class="iconContainer"
     />
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
       </div>
@@ -42,7 +42,7 @@ exports[`AlertHeader renders falls back when neither iconName nor matching iconT
 exports[`AlertHeader renders iconName is provided 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -52,32 +52,32 @@ exports[`AlertHeader renders iconName is provided 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus  iconStyle icon_alert text_danger   "
+        class="zd_font_icons basic icon-plus iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
       </div>
@@ -89,7 +89,7 @@ exports[`AlertHeader renders iconName is provided 1`] = `
 exports[`AlertHeader renders iconType and iconSize is fales 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -99,32 +99,32 @@ exports[`AlertHeader renders iconType and iconSize is fales 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
       </div>
@@ -136,7 +136,7 @@ exports[`AlertHeader renders iconType and iconSize is fales 1`] = `
 exports[`AlertHeader renders iconType and iconSize is true 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -146,7 +146,7 @@ exports[`AlertHeader renders iconType and iconSize is true 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle  text_danger   "
+        class="zd_font_icons basic icon-exclamation-thincircle iconStyle text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -154,25 +154,25 @@ exports[`AlertHeader renders iconType and iconSize is true 1`] = `
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
       </div>
@@ -184,7 +184,7 @@ exports[`AlertHeader renders iconType and iconSize is true 1`] = `
 exports[`AlertHeader renders with breakChildren prop 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -194,36 +194,36 @@ exports[`AlertHeader renders with breakChildren prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir wrap vCenter"
+        class="flex fullSize row wrap alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
         <div
-          class="grow basisAuto shrinkOff"
+          class="flexible basis_auto noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -241,7 +241,7 @@ exports[`AlertHeader renders with breakChildren prop 1`] = `
 exports[`AlertHeader renders with children content 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -251,36 +251,36 @@ exports[`AlertHeader renders with children content 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
         <div
-          class="grow basisAuto shrinkOff"
+          class="flexible basis_auto noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -298,7 +298,7 @@ exports[`AlertHeader renders with children content 1`] = `
 exports[`AlertHeader renders with custom iconClass 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -308,32 +308,32 @@ exports[`AlertHeader renders with custom iconClass 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger custom-icon-class  "
+        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger custom-icon-class"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
       </div>
@@ -345,7 +345,7 @@ exports[`AlertHeader renders with custom iconClass 1`] = `
 exports[`AlertHeader renders with dataId prop 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertDataId_alertHeader"
     data-selector-id="container"
     data-test-id="alertDataId_alertHeader"
@@ -355,32 +355,32 @@ exports[`AlertHeader renders with dataId prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
       </div>
@@ -392,7 +392,7 @@ exports[`AlertHeader renders with dataId prop 1`] = `
 exports[`AlertHeader renders with default props 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -402,32 +402,32 @@ exports[`AlertHeader renders with default props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
       </div>
@@ -439,7 +439,7 @@ exports[`AlertHeader renders with default props 1`] = `
 exports[`AlertHeader renders with iconType - alert 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -449,32 +449,32 @@ exports[`AlertHeader renders with iconType - alert 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
       </div>
@@ -486,7 +486,7 @@ exports[`AlertHeader renders with iconType - alert 1`] = `
 exports[`AlertHeader renders with iconType - delete 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -496,32 +496,32 @@ exports[`AlertHeader renders with iconType - delete 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-ic-social_delete-20  iconStyle icon_delete text_danger   "
+        class="zd_font_icons basic icon-ic-social_delete-20 iconStyle icon_delete text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
       </div>
@@ -533,7 +533,7 @@ exports[`AlertHeader renders with iconType - delete 1`] = `
 exports[`AlertHeader renders with iconType - remoteAssist 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -543,32 +543,32 @@ exports[`AlertHeader renders with iconType - remoteAssist 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-task-demo  iconStyle icon_remoteAssist text_danger   "
+        class="zd_font_icons basic icon-task-demo iconStyle icon_remoteAssist text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
       </div>
@@ -580,7 +580,7 @@ exports[`AlertHeader renders with iconType - remoteAssist 1`] = `
 exports[`AlertHeader renders with iconType - splitTicket 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -590,32 +590,32 @@ exports[`AlertHeader renders with iconType - splitTicket 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-split_new  iconStyle icon_splitTicket text_danger   "
+        class="zd_font_icons basic icon-split_new iconStyle icon_splitTicket text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
       </div>
@@ -627,7 +627,7 @@ exports[`AlertHeader renders with iconType - splitTicket 1`] = `
 exports[`AlertHeader renders with iconType - update 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -637,32 +637,32 @@ exports[`AlertHeader renders with iconType - update 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-update  iconStyle icon_update text_danger   "
+        class="zd_font_icons basic icon-update iconStyle icon_update text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
       </div>
@@ -674,31 +674,31 @@ exports[`AlertHeader renders with iconType - update 1`] = `
 exports[`AlertHeader renders with needIcon false 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
       </div>
@@ -710,7 +710,7 @@ exports[`AlertHeader renders with needIcon false 1`] = `
 exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -720,32 +720,32 @@ exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
             data-title="Closable Alert"
           >
             Closable Alert
@@ -754,14 +754,14 @@ exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
       </div>
     </div>
     <div
-      class="shrinkOff"
+      class="noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <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="alertHeader_close"
         data-ishtml="false"
         data-selector-id="iconButton"
@@ -770,7 +770,7 @@ exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross   icon_button_center  "
+          class="zd_font_icons basic icon-cross icon_button_center"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -785,7 +785,7 @@ exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
 exports[`AlertHeader renders with palette - danger 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -795,32 +795,32 @@ exports[`AlertHeader renders with palette - danger 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
           />
         </div>
       </div>
@@ -832,7 +832,7 @@ exports[`AlertHeader renders with palette - danger 1`] = `
 exports[`AlertHeader renders with palette - default 1`] = `
 <DocumentFragment>
   <div
-    class="container default flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container default"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -842,32 +842,32 @@ exports[`AlertHeader renders with palette - default 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_default   "
+        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_default"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title default "
+            class="title default"
           />
         </div>
       </div>
@@ -879,7 +879,7 @@ exports[`AlertHeader renders with palette - default 1`] = `
 exports[`AlertHeader renders with palette - primary 1`] = `
 <DocumentFragment>
   <div
-    class="container primary flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container primary"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -889,32 +889,32 @@ exports[`AlertHeader renders with palette - primary 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_primary   "
+        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_primary"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title primary "
+            class="title primary"
           />
         </div>
       </div>
@@ -926,7 +926,7 @@ exports[`AlertHeader renders with palette - primary 1`] = `
 exports[`AlertHeader renders with title 1`] = `
 <DocumentFragment>
   <div
-    class="container danger flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container danger"
     data-id="alertHeader_alertHeader"
     data-selector-id="container"
     data-test-id="alertHeader_alertHeader"
@@ -936,32 +936,32 @@ exports[`AlertHeader renders with title 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        class="zd_font_icons basic icon-exclamation-thincircle iconStyle icon_alert text_danger"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
       />
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir vCenter"
+        class="flex fullSize row alignItems_center"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="title shrinkOn"
+          class="shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <span
-            class="title danger "
+            class="title danger"
             data-title="Custom Icon Class"
           >
             Custom Icon Class