feat: new z-index design tokens (#982)

Introduces new z-index tokens and adjustments for pre-existing tokens. BREAKING CHANGE: The z-index values for zIndexModal and zIndexDropdownable have increased. Closes D2IQ-92067
d2iq · Jul 27, 2023 · 4c9c6e9 · 4c9c6e9
1 parent f3e5d1b
commit 4c9c6e9
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 19 deletions.
diff --git a/design-guidelines/design-tokens/color.md b/design-guidelines/design-tokens/color.md
@@ -1,7 +1,7 @@
 <!--
 
    Do not edit directly
-   Generated by style-dictionary on Fri Mar 03 2023 15:32:54 GMT-0600 (Central Standard Time)
+   Generated by style-dictionary on Mon Jul 24 2023 15:22:29 GMT-0500 (Central Daylight Time)
 
 -->
 ## All Colors

diff --git a/design-guidelines/design-tokens/font.md b/design-guidelines/design-tokens/font.md
@@ -1,7 +1,7 @@
 <!--
 
    Do not edit directly
-   Generated by style-dictionary on Fri Mar 03 2023 15:32:54 GMT-0600 (Central Standard Time)
+   Generated by style-dictionary on Mon Jul 24 2023 15:22:29 GMT-0500 (Central Daylight Time)
 
 -->
 | Js variable name      | Value                                                                                                                                     |

diff --git a/design-guidelines/design-tokens/layout.md b/design-guidelines/design-tokens/layout.md
@@ -1,7 +1,7 @@
 <!--
 
    Do not edit directly
-   Generated by style-dictionary on Fri Mar 03 2023 15:32:54 GMT-0600 (Central Standard Time)
+   Generated by style-dictionary on Mon Jul 24 2023 15:22:29 GMT-0500 (Central Daylight Time)
 
 -->
 ## Breakpoints
@@ -63,6 +63,9 @@
 | borderRadiusLarge   | 8px   |
 | borderRadiusCircle  | 50%   |
 | textBlockWidth      | 65ch  |
+| zIndexDeep          | -1    |
 | zIndexContent       | 0     |
-| zIndexModal         | 1     |
-| zIndexDropdownable  | 2     |
+| zIndexSticky        | 100   |
+| zIndexOverlay       | 200   |
+| zIndexModal         | 300   |
+| zIndexDropdownable  | 400   |
diff --git a/packages/design-tokens/properties/layout/zIndex.json b/packages/design-tokens/properties/layout/zIndex.json
@@ -1,15 +1,24 @@
 {
-	"layout": {
-        "zIndex": {
-            "content": {
-                "value": "0"
-            },
-            "modal": {
-                "value": "1"
-            },
-            "dropdownable": {
-                "value": "2"
-            }
-        }
+  "layout": {
+    "zIndex": {
+      "deep": {
+        "value": "-1"
+      },
+      "content": {
+        "value": "0"
+      },
+      "sticky": {
+        "value": "100"
+      },
+      "overlay": {
+        "value": "200"
+      },
+      "modal": {
+        "value": "300"
+      },
+      "dropdownable": {
+        "value": "400"
+      }
     }
+  }
 }
diff --git a/packages/dropdownMenu/tests/__snapshots__/DropdownMenu.test.tsx.snap b/packages/dropdownMenu/tests/__snapshots__/DropdownMenu.test.tsx.snap
@@ -82,7 +82,7 @@ exports[`Dropdown renders an open dropdown 1`] = `
   </div>
   <div>
     <div
-      style="z-index: 2; position: absolute; left: 0px; top: 0px;"
+      style="z-index: 400; position: absolute; left: 0px; top: 0px;"
     >
       <div
         aria-labelledby="downshift-1-label"
@@ -165,7 +165,7 @@ exports[`Dropdown renders an open dropdown with multiple sections 1`] = `
   </div>
   <div>
     <div
-      style="z-index: 2; position: absolute; left: 0px; top: 0px;"
+      style="z-index: 400; position: absolute; left: 0px; top: 0px;"
     >
       <div
         aria-labelledby="downshift-3-label"