From 00a949700fb3d9f9b441c8efe99e8975268218c6 Mon Sep 17 00:00:00 2001
From: Shelvin <ssingh@easypost.com>
Date: Tue, 12 Nov 2024 10:10:19 -0800
Subject: [PATCH] feat: add z index token for nav to support NexusLayoutHeader
 (#1460)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 📝 Changes

before:


![before](https://github.com/user-attachments/assets/0c932abf-7555-4e36-8aab-aac9bf650495)

after:


![after](https://github.com/user-attachments/assets/55fb2940-ff3b-4560-96db-e014dd6181eb)


## ✅ Checklist

Easy UI has certain UX standards that must be met. In general,
non-trivial changes should meet the following criteria:

- [ ] ~Visuals match Design Specs in Figma~
- [x] Stories accompany any component changes
- [x] Code is in accordance with our style guide
- [x] Design tokens are utilized
- [ ] ~Unit tests accompany any component changes~
- [ ] ~TSDoc is written for any API surface area~
- [ ] ~Specs are up-to-date~
- [x] Console is free from warnings
- [x] No accessibility violations are reported
- [x] Cross-browser check is performed (Chrome, Safari, Firefox)
- [x] Changeset is added

~Strikethrough~ any items that are not applicable to this pull request.
---
 .changeset/wise-avocados-exercise.md                  | 6 ++++++
 easy-ui-react/src/NexusLayout/NexusLayout.module.scss | 1 +
 easy-ui-react/src/NexusLayout/NexusLayout.stories.tsx | 8 +++++++-
 easy-ui-tokens/src/z-index/base.json                  | 7 +++++--
 4 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/wise-avocados-exercise.md

diff --git a/.changeset/wise-avocados-exercise.md b/.changeset/wise-avocados-exercise.md
new file mode 100644
index 000000000..93eea8021
--- /dev/null
+++ b/.changeset/wise-avocados-exercise.md
@@ -0,0 +1,6 @@
+---
+"@easypost/easy-ui-tokens": minor
+"@easypost/easy-ui": minor
+---
+
+feat: adds z-index token for nav to support NexusLayoutHeader
diff --git a/easy-ui-react/src/NexusLayout/NexusLayout.module.scss b/easy-ui-react/src/NexusLayout/NexusLayout.module.scss
index 076f80e50..48004684c 100644
--- a/easy-ui-react/src/NexusLayout/NexusLayout.module.scss
+++ b/easy-ui-react/src/NexusLayout/NexusLayout.module.scss
@@ -21,6 +21,7 @@
 }
 
 .header {
+  z-index: design-token("z-index.nav");
   position: sticky;
   top: 0;
 
diff --git a/easy-ui-react/src/NexusLayout/NexusLayout.stories.tsx b/easy-ui-react/src/NexusLayout/NexusLayout.stories.tsx
index 886cb6a3a..f0059ee14 100644
--- a/easy-ui-react/src/NexusLayout/NexusLayout.stories.tsx
+++ b/easy-ui-react/src/NexusLayout/NexusLayout.stories.tsx
@@ -14,6 +14,7 @@ import { Text } from "../Text";
 import { HorizontalStack } from "../HorizontalStack";
 import { Menu } from "../Menu";
 import { NexusLayout } from "./NexusLayout";
+import { PlaceholderBox } from "../utilities/storybook";
 
 type Story = StoryObj<typeof NexusLayout>;
 
@@ -175,13 +176,18 @@ export const MultipageContent: Story = {
                 </Button>
               </HorizontalStack>
             </NexusLayout.MultipageHeader>
-            <div style={{ height: 400 }}>
+            <div style={{ height: 400, position: "relative" }}>
               <Text variant="body2">
                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque
                 obcaecati iusto neque architecto, quae dolore illo. Saepe ipsum
                 voluptates reprehenderit repellendus deleniti, molestias
                 placeat, consectetur et nihil quisquam, numquam pariatur!
               </Text>
+              <PlaceholderBox
+                style={{ position: "absolute", top: "100px", zIndex: 50 }}
+              >
+                z-index = 50
+              </PlaceholderBox>
             </div>
           </NexusLayout.MultipageContent>
         </NexusLayout.MultipageContainer>
diff --git a/easy-ui-tokens/src/z-index/base.json b/easy-ui-tokens/src/z-index/base.json
index b88964be7..46f53e132 100644
--- a/easy-ui-tokens/src/z-index/base.json
+++ b/easy-ui-tokens/src/z-index/base.json
@@ -3,11 +3,14 @@
     "input_icon": {
       "value": "1"
     },
-    "notification": {
-      "value": "999999"
+    "nav": {
+      "value": "1000"
     },
     "modal": {
       "value": "1300"
+    },
+    "notification": {
+      "value": "999999"
     }
   }
 }