UX-717 Adds new z-index token, Fix textfield z-indexing with error ou…

…tlines (#1042) * UX-717 Fix textfield z-indexing with error outlines * UX-717 Add new z-index token * UX-717 Update token unit tests
SparkPost · Dec 17, 2021 · 37f3287 · 37f3287
1 parent c47ce83
commit 37f3287
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 5 deletions.
diff --git a/packages/design-tokens/index.d.ts b/packages/design-tokens/index.d.ts
@@ -172,6 +172,7 @@ export type LegacyTokens = {
   zIndex_auto: string;
   zIndex_below: string;
   zIndex_default: string;
+  zIndex_above: string;
   zIndex_overlay: string;
 };
 
@@ -276,6 +277,7 @@ type Tokens = {
   z_index_auto: string;
   z_index_below: string;
   z_index_default: string;
+  z_index_above: string;
   z_index_overlay: string;
   font_family_sans: "'Calibre', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Helvetica, sans-serif";
   font_family_monospace: "'SFMono-Regular', Monaco, Consolas, 'Lucida Console', monospace";

diff --git a/packages/design-tokens/tests/__snapshots__/tokens.test.js.snap b/packages/design-tokens/tests/__snapshots__/tokens.test.js.snap
@@ -186,6 +186,7 @@ Object {
   "spacing_800": "4rem",
   "spacing_850": "6rem",
   "spacing_900": "10rem",
+  "z_index_above": "10",
   "z_index_auto": "auto",
   "z_index_below": "-1",
   "z_index_default": "1",
@@ -1295,6 +1296,17 @@ Array [
     "type": "z-index",
     "value": "1",
   },
+  Object {
+    "category": "z-index",
+    "css": "--z-index-above",
+    "friendly": "Z Index Above",
+    "javascript": "z_index_above",
+    "name": "z-index-above",
+    "scss": "z-index(above)",
+    "system": "above",
+    "type": "z-index",
+    "value": "10",
+  },
   Object {
     "category": "z-index",
     "css": "--z-index-overlay",

diff --git a/packages/design-tokens/tokens/elevation/z-index.json b/packages/design-tokens/tokens/elevation/z-index.json
@@ -3,6 +3,7 @@
     "auto": { "value": "auto" },
     "below": { "value": "-1" },
     "default": { "value": "1" },
+    "above": { "value": "10" },
     "overlay": { "value": "1000" }
   }
 }
diff --git a/packages/matchbox/src/components/Connect/Connect.tsx b/packages/matchbox/src/components/Connect/Connect.tsx
@@ -3,10 +3,13 @@ import { Box } from '../Box';
 import { tokens } from '@sparkpost/design-tokens';
 import styled from 'styled-components';
 
-const FocusHandler = styled(Box)`
+// $zIncrement is here to ensure the middle element appears
+// above side elements until it side elements are focused
+const FocusHandler = styled(Box)<{ $zIncrement: number }>`
+  z-index: ${(props) => tokens.zIndex_default + props.$zIncrement};
   &:focus-within {
     position: relative;
-    z-index: ${tokens.zIndex_default};
+    z-index: ${tokens.zIndex_above};
   }
 `;
 
@@ -20,21 +23,23 @@ function Connect(props: ConnectProps): JSX.Element {
   const { left, right, children } = props;
 
   const leftMarkup = left ? (
-    <FocusHandler flex="0 0 auto" mr="-1px">
+    <FocusHandler flex="0 0 auto" mr="-1px" $zIncrement={0}>
       {left}
     </FocusHandler>
   ) : null;
 
   const rightMarkup = right ? (
-    <FocusHandler flex="0 0 auto" ml="-1px">
+    <FocusHandler flex="0 0 auto" ml="-1px" $zIncrement={0}>
       {right}
     </FocusHandler>
   ) : null;
 
   return (
     <Box display="flex">
       {leftMarkup}
-      <FocusHandler flex="1">{children}</FocusHandler>
+      <FocusHandler flex="1" $zIncrement={1}>
+        {children}
+      </FocusHandler>
       {rightMarkup}
     </Box>
   );

diff --git a/packages/matchbox/src/components/ThemeProvider/theme.ts b/packages/matchbox/src/components/ThemeProvider/theme.ts
@@ -239,6 +239,7 @@ const theme = {
   zIndices: {
     below: tokens.zIndex_below,
     default: tokens.zIndex_default,
+    above: tokens.zIndex_above,
     overlay: tokens.zIndex_overlay,
   },