@zohodesk/components 1.6.20 → 1.6.22-exp-1

package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap

@@ -4,14 +4,14 @@ exports[`ArrowIcon Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon  active    inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon active"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -25,14 +25,14 @@ exports[`ArrowIcon Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   disabled   inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon disabled"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -46,14 +46,14 @@ exports[`ArrowIcon Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon    readonly  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon readonly"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -67,14 +67,14 @@ exports[`ArrowIcon Should be render isRotated is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon rotated     inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon rotated"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -88,7 +88,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-a11y-focus="true"
     data-id="undefined_downIcon"
     data-selector-id="container"
@@ -96,7 +96,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -110,14 +110,14 @@ exports[`ArrowIcon Should be render with customClass 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon     arrowIcon_containerClass inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon arrowIcon_containerClass"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down  arrowIcon_iconClass  "
+      class="zd_font_icons basic icon-down arrowIcon_iconClass"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -131,14 +131,14 @@ exports[`ArrowIcon Should be render with customProps 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="hereIsTestId"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -152,14 +152,14 @@ exports[`ArrowIcon Should be render with dataId 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="ArrowIcon-test-dataId_downIcon"
     data-selector-id="container"
     data-test-id="ArrowIcon-test-dataId_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -181,7 +181,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -189,7 +189,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -203,14 +203,14 @@ exports[`ArrowIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon      inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-down    "
+      class="zd_font_icons basic icon-down"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -13,7 +13,7 @@ exports[`InputFieldLine Should be render hasEffect is false 1`] = `
 exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -23,7 +23,7 @@ exports[`InputFieldLine Should be render hasPadding is true 1`] = `
 exports[`InputFieldLine Should be render isActive is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder active   flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder active"
     data-selector-id="container"
     data-title=""
   />
@@ -33,7 +33,7 @@ exports[`InputFieldLine Should be render isActive is true 1`] = `
 exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom disabled borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -43,7 +43,7 @@ exports[`InputFieldLine Should be render isDisabled is true 1`] = `
 exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -53,7 +53,7 @@ exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
 exports[`InputFieldLine Should be render with title 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title="InputFieldLine Test Title"
   />
@@ -63,7 +63,7 @@ exports[`InputFieldLine Should be render with title 1`] = `
 exports[`InputFieldLine Should render border - all 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_all effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_all effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -73,7 +73,7 @@ exports[`InputFieldLine Should render border - all 1`] = `
 exports[`InputFieldLine Should render border - bottom 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -83,7 +83,7 @@ exports[`InputFieldLine Should render border - bottom 1`] = `
 exports[`InputFieldLine Should render border - none 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer    effect     flex rowdir"
+    class="flex row varClass customContainer effect"
     data-selector-id="container"
     data-title=""
   />
@@ -93,7 +93,7 @@ exports[`InputFieldLine Should render border - none 1`] = `
 exports[`InputFieldLine Should render borderColor - dark 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_dark hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_dark hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -103,7 +103,7 @@ exports[`InputFieldLine Should render borderColor - dark 1`] = `
 exports[`InputFieldLine Should render borderColor - default 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -113,7 +113,7 @@ exports[`InputFieldLine Should render borderColor - default 1`] = `
 exports[`InputFieldLine Should render borderColor - error 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_error hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_error hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -123,7 +123,7 @@ exports[`InputFieldLine Should render borderColor - error 1`] = `
 exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_transparent hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_transparent hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -133,7 +133,7 @@ exports[`InputFieldLine Should render borderColor - transparent 1`] = `
 exports[`InputFieldLine Should render customClass 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder   inputFieldLine-custom-class flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder inputFieldLine-custom-class"
     data-selector-id="container"
     data-title=""
   />
@@ -143,7 +143,7 @@ exports[`InputFieldLine Should render customClass 1`] = `
 exports[`InputFieldLine Should render customProps 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-test="inputFieldLine-test"
     data-title=""
@@ -154,7 +154,7 @@ exports[`InputFieldLine Should render customProps 1`] = `
 exports[`InputFieldLine Should render dataId 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-id="inputFieldLine-test-id"
     data-selector-id="container"
     data-test-id="inputFieldLine-test-id"
@@ -166,7 +166,7 @@ exports[`InputFieldLine Should render dataId 1`] = `
 exports[`InputFieldLine Should render size  - medium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+    class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -176,7 +176,7 @@ exports[`InputFieldLine Should render size  - medium 1`] = `
 exports[`InputFieldLine Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+    class="flex row scroll_vertical varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />
@@ -186,7 +186,7 @@ exports[`InputFieldLine Should render size  - xmedium 1`] = `
 exports[`InputFieldLine rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    flex rowdir"
+    class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
     data-selector-id="container"
     data-title=""
   />

package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -44,7 +44,7 @@ exports[`Button - Component Should apply customClass to wrapper, text and icon 1
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus  customIconClass  "
+        class="zd_font_icons basic icon-plus customIconClass"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size16);"
@@ -220,7 +220,7 @@ exports[`Button - Component Should render Status of buttons - loading 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="spinner "
+        class="spinner"
         role="img"
         viewBox="0 0 24 24"
       >
@@ -264,7 +264,7 @@ exports[`Button - Component Should render Status of buttons - success 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="tick "
+        class="tick"
         role="img"
         viewBox="0 0 24 24"
       >
@@ -470,7 +470,7 @@ exports[`Button - Component Should render loaderPlacement of buttons - end 1`] =
       >
         <svg
           aria-hidden="true"
-          class="spinner "
+          class="spinner"
           role="img"
           viewBox="0 0 24 24"
         >
@@ -515,7 +515,7 @@ exports[`Button - Component Should render loaderPlacement of buttons - overlay 1
     >
       <svg
         aria-hidden="true"
-        class="spinner "
+        class="spinner"
         role="img"
         viewBox="0 0 24 24"
       >
@@ -559,7 +559,7 @@ exports[`Button - Component Should render loaderPlacement of buttons - start 1`]
       >
         <svg
           aria-hidden="true"
-          class="spinner "
+          class="spinner"
           role="img"
           viewBox="0 0 24 24"
         >
@@ -949,7 +949,7 @@ exports[`Button - Component Should render with iconName and iconSize  1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    "
+        class="zd_font_icons basic icon-plus"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size20);"
@@ -981,7 +981,7 @@ exports[`Button - Component Should render with iconPlacement  1`] = `
       </div>
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    "
+        class="zd_font_icons basic icon-plus"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         style="--zd-iconfont-size: var(--zd_font_size16);"

package/es/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap

@@ -4,7 +4,7 @@ exports[`Loader renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="spinner "
+    class="spinner"
     role="img"
     viewBox="0 0 24 24"
   >

package/es/v1/shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap

@@ -4,7 +4,7 @@ exports[`SuccessTick renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="tick "
+    class="tick"
     role="img"
     viewBox="0 0 24 24"
   >

package/lib/AppContainer/AppContainer.module.css

@@ -8,12 +8,18 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
 }
-.container, .container button, .container input, .container textarea ,.container select {
+
+.container,
+.container button,
+.container input,
+.container textarea,
+.container select {
   /* font-family: var(--zd_regular); */
-  font-family: var(--zd-font-family, ''), var(--zd_fallback_font, ZDLato);
+  font-family: var(--zd-font-family), var(--zd_fallback_font, Lato);
 }
+
 .tooltip {
   height: 0 ;
   font-size: 0 ;
   /* contain:strict */
-}
+}

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

@@ -3,7 +3,7 @@
 exports[`AppContainer rendering the Custom props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-container="true"
     data-id="AppContainer"
     data-props="true"
@@ -11,14 +11,14 @@ exports[`AppContainer rendering the Custom props 1`] = `
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-props="true"
     data-selector-id="appContainer_tooltip"
@@ -30,13 +30,13 @@ exports[`AppContainer rendering the Custom props 1`] = `
 exports[`AppContainer rendering the childern as element 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -47,7 +47,7 @@ exports[`AppContainer rendering the childern as element 1`] = `
     </div>
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -58,13 +58,13 @@ exports[`AppContainer rendering the childern as element 1`] = `
 exports[`AppContainer rendering the childern as element in array 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -78,7 +78,7 @@ exports[`AppContainer rendering the childern as element in array 1`] = `
     </div>
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -89,20 +89,20 @@ exports[`AppContainer rendering the childern as element in array 1`] = `
 exports[`AppContainer rendering the customClass 1`] = `
 <DocumentFragment>
   <div
-    class="container AppcontainerClass flex cover coldir"
+    class="flex fullSize column container AppcontainerClass"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -113,20 +113,20 @@ exports[`AppContainer rendering the customClass 1`] = `
 exports[`AppContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -137,13 +137,13 @@ exports[`AppContainer rendering the defult props 1`] = `
 exports[`AppContainer rendering the needTooltip is false 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -155,20 +155,20 @@ exports[`AppContainer rendering the needTooltip is false 1`] = `
 exports[`AppContainer rendering the tooltipClass 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
   </div>
   <div
-    class="container tooltip "
+    class="container tooltip"
     data-id="AppContainer_tooltip"
     data-selector-id="appContainer_tooltip"
     data-test-id="AppContainer_tooltip"
@@ -179,13 +179,13 @@ exports[`AppContainer rendering the tooltipClass 1`] = `
 exports[`AppContainer rendering the tooltipParentClass 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir"
+    class="flex fullSize column container"
     data-id="AppContainer"
     data-selector-id="appContainer"
     data-test-id="AppContainer"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"