@zohodesk/components 1.0.0-temp-257.1 → 1.0.0-temp-259.2

package/lib/v1/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Label - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
     role="group"
@@ -22,7 +22,7 @@ exports[`Label - Snapshot Render with a11y attributes 1`] = `
 exports[`Label - Snapshot Render with customClass 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default custom-container"
+    class="d-inline-flex d-flex-row d-items-center container default custom-container"
     data-id="flex"
     data-test-id="flex"
   >
@@ -39,7 +39,7 @@ exports[`Label - Snapshot Render with customClass 1`] = `
 exports[`Label - Snapshot Render with customId and testId 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="label-customId"
     data-selector-id="label-customId"
     data-test-id="label-testId"
@@ -57,7 +57,7 @@ exports[`Label - Snapshot Render with customId and testId 1`] = `
 exports[`Label - Snapshot Render with customProps 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center shrink container default"
+    class="d-inline-flex d-flex-row d-items-center d-min-w-0 d-flex-shrink container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -74,7 +74,7 @@ exports[`Label - Snapshot Render with customProps 1`] = `
 exports[`Label - Snapshot Render with default props 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -91,7 +91,7 @@ exports[`Label - Snapshot Render with default props 1`] = `
 exports[`Label - Snapshot Render with fontWeight=regular 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -108,7 +108,7 @@ exports[`Label - Snapshot Render with fontWeight=regular 1`] = `
 exports[`Label - Snapshot Render with fontWeight=semibold 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -125,7 +125,7 @@ exports[`Label - Snapshot Render with fontWeight=semibold 1`] = `
 exports[`Label - Snapshot Render with htmlFor 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -143,7 +143,7 @@ exports[`Label - Snapshot Render with htmlFor 1`] = `
 exports[`Label - Snapshot Render with i18nKeys 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -167,7 +167,7 @@ exports[`Label - Snapshot Render with i18nKeys 1`] = `
 exports[`Label - Snapshot Render with isClipped=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -184,7 +184,7 @@ exports[`Label - Snapshot Render with isClipped=true 1`] = `
 exports[`Label - Snapshot Render with isDisabled=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container disabled"
+    class="d-inline-flex d-flex-row d-items-center container disabled"
     data-id="flex"
     data-test-id="flex"
   >
@@ -201,7 +201,7 @@ exports[`Label - Snapshot Render with isDisabled=true 1`] = `
 exports[`Label - Snapshot Render with isReadOnly=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container readonly default"
+    class="d-inline-flex d-flex-row d-items-center container readonly default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -218,7 +218,7 @@ exports[`Label - Snapshot Render with isReadOnly=true 1`] = `
 exports[`Label - Snapshot Render with isRequired=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -242,7 +242,7 @@ exports[`Label - Snapshot Render with isRequired=true 1`] = `
 exports[`Label - Snapshot Render with isRequired=true isClipped=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -266,7 +266,7 @@ exports[`Label - Snapshot Render with isRequired=true isClipped=true 1`] = `
 exports[`Label - Snapshot Render with layout=block 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center container default"
+    class="d-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -283,7 +283,7 @@ exports[`Label - Snapshot Render with layout=block 1`] = `
 exports[`Label - Snapshot Render with layout=inline 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -300,7 +300,7 @@ exports[`Label - Snapshot Render with layout=inline 1`] = `
 exports[`Label - Snapshot Render with palette=default 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -317,7 +317,7 @@ exports[`Label - Snapshot Render with palette=default 1`] = `
 exports[`Label - Snapshot Render with palette=secondary 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container secondary"
+    class="d-inline-flex d-flex-row d-items-center container secondary"
     data-id="flex"
     data-test-id="flex"
   >
@@ -334,7 +334,7 @@ exports[`Label - Snapshot Render with palette=secondary 1`] = `
 exports[`Label - Snapshot Render with requiredType=asterisk 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -358,7 +358,7 @@ exports[`Label - Snapshot Render with requiredType=asterisk 1`] = `
 exports[`Label - Snapshot Render with requiredType=text 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -382,7 +382,7 @@ exports[`Label - Snapshot Render with requiredType=text 1`] = `
 exports[`Label - Snapshot Render with shouldHighlightRequired=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container required"
+    class="d-inline-flex d-flex-row d-items-center container required"
     data-id="flex"
     data-test-id="flex"
   >
@@ -406,7 +406,7 @@ exports[`Label - Snapshot Render with shouldHighlightRequired=true 1`] = `
 exports[`Label - Snapshot Render with size=medium 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -423,7 +423,7 @@ exports[`Label - Snapshot Render with size=medium 1`] = `
 exports[`Label - Snapshot Render with size=small 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -440,7 +440,7 @@ exports[`Label - Snapshot Render with size=small 1`] = `
 exports[`Label - Snapshot Render with tag attributes 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-custom-attr="true"
     data-id="flex"
     data-test-id="flex"

package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -3,12 +3,12 @@
 exports[`Switch - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium unChecked enabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -46,12 +46,12 @@ exports[`Switch - Snapshot Render with a11y attributes 1`] = `
 exports[`Switch - Snapshot Render with customClass 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium unChecked enabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -89,13 +89,13 @@ exports[`Switch - Snapshot Render with customClass 1`] = `
 exports[`Switch - Snapshot Render with customId and testId 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium unChecked enabled"
     data-id="switch-customId"
     data-selector-id="switch-customId"
     data-test-id="switch-testId"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -133,12 +133,12 @@ exports[`Switch - Snapshot Render with customId and testId 1`] = `
 exports[`Switch - Snapshot Render with default props 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium unChecked enabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -176,12 +176,12 @@ exports[`Switch - Snapshot Render with default props 1`] = `
 exports[`Switch - Snapshot Render with isChecked=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium checked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium checked enabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -220,12 +220,12 @@ exports[`Switch - Snapshot Render with isChecked=true 1`] = `
 exports[`Switch - Snapshot Render with isDisabled=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium checked disabled"
+    class="d-inline-flex d-flex-row d-items-center container medium checked disabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -265,12 +265,12 @@ exports[`Switch - Snapshot Render with isDisabled=true 1`] = `
 exports[`Switch - Snapshot Render with tag attributes 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium unChecked enabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >

package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css

@@ -141,23 +141,23 @@
     background-color: var(--zd-bg-secondary);
 }
 
-.bg-grey-15 {
+.bg-grey-20 {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.hover\:bg-grey-15:hover {
+.hover\:bg-grey-20:hover {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.focus\:bg-grey-15:focus {
+.focus\:bg-grey-20:focus {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.active\:bg-grey-15:active {
+.active\:bg-grey-20:active {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.selected\:bg-grey-15 {
+.selected\:bg-grey-20 {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 

package/lib/v1/helpers/colorHelpers/border/borderColor.module.css

@@ -101,23 +101,23 @@
     border-color: var(--zd-border-tertiary);
 }
 
-.border-grey-15 {
+.border-grey-20 {
     border-color: var(--zd-border-secondary);
 }
 
-.hover\:border-grey-15:hover {
+.hover\:border-grey-20:hover {
     border-color: var(--zd-border-secondary);
 }
 
-.focus\:border-grey-15:focus {
+.focus\:border-grey-20:focus {
     border-color: var(--zd-border-secondary);
 }
 
-.active\:border-grey-15:active {
+.active\:border-grey-20:active {
     border-color: var(--zd-border-secondary);
 }
 
-.selected\:border-grey-15 {
+.selected\:border-grey-20 {
     border-color: var(--zd-border-secondary);
 }