From 2a1017d3d0d9ea9cb9f6f426e18192e4cae3b1e8 Mon Sep 17 00:00:00 2001
From: Paul Cramer <paulccramer@gmail.com>
Date: Thu, 30 Jan 2025 16:17:52 -0800
Subject: [PATCH] Add z index const

---
 src/internal/components/primitives/Dialog.tsx      |  4 +++-
 .../components/primitives/DropdownMenu.tsx         |  9 ++++++++-
 src/internal/components/primitives/Popover.tsx     |  9 ++++++++-
 src/styles/constants.ts                            | 14 +++++++-------
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/internal/components/primitives/Dialog.tsx b/src/internal/components/primitives/Dialog.tsx
index 477639383e2..2cd984bcd38 100644
--- a/src/internal/components/primitives/Dialog.tsx
+++ b/src/internal/components/primitives/Dialog.tsx
@@ -1,4 +1,5 @@
 import { useTheme } from '@/internal/hooks/useTheme';
+import { zIndex } from '@/styles/constants';
 import { cn } from '@/styles/theme';
 import type React from 'react';
 import { useRef } from 'react';
@@ -43,7 +44,8 @@ export function Dialog({
     <div
       className={cn(
         componentTheme,
-        'fixed inset-0 z-50 flex items-center justify-center',
+        zIndex.modal,
+        'fixed inset-0 flex items-center justify-center',
         'bg-black/50 transition-opacity duration-200',
         'fade-in animate-in duration-200',
       )}
diff --git a/src/internal/components/primitives/DropdownMenu.tsx b/src/internal/components/primitives/DropdownMenu.tsx
index 4bcf81b6212..605066c4573 100644
--- a/src/internal/components/primitives/DropdownMenu.tsx
+++ b/src/internal/components/primitives/DropdownMenu.tsx
@@ -1,5 +1,6 @@
 import { useTheme } from '@/internal/hooks/useTheme';
 import { getHorizontalPosition } from '@/internal/utils/getHorizontalPosition';
+import { zIndex } from '@/styles/constants';
 import { cn } from '@/styles/theme';
 import type React from 'react';
 import { useCallback, useEffect, useRef } from 'react';
@@ -84,7 +85,13 @@ export function DropdownMenu({
   }
 
   const dropdownMenu = (
-    <div className={cn(componentTheme, 'pointer-events-none fixed z-50')}>
+    <div
+      className={cn(
+        componentTheme,
+        zIndex.dropdown,
+        'pointer-events-none fixed',
+      )}
+    >
       <FocusTrap active={isOpen}>
         <DismissableLayer onDismiss={onClose} triggerRef={trigger}>
           <div
diff --git a/src/internal/components/primitives/Popover.tsx b/src/internal/components/primitives/Popover.tsx
index f3815ba138d..adb3f9167d5 100644
--- a/src/internal/components/primitives/Popover.tsx
+++ b/src/internal/components/primitives/Popover.tsx
@@ -1,4 +1,5 @@
 import { useTheme } from '@/internal/hooks/useTheme';
+import { zIndex } from '@/styles/constants';
 import { cn } from '@/styles/theme';
 import type React from 'react';
 import { useCallback, useEffect, useRef } from 'react';
@@ -169,7 +170,13 @@ export function Popover({
   }
 
   const popover = (
-    <div className={cn(componentTheme, 'pointer-events-none fixed z-50')}>
+    <div
+      className={cn(
+        componentTheme,
+        zIndex.dropdown,
+        'pointer-events-none fixed',
+      )}
+    >
       <FocusTrap active={isOpen}>
         <DismissableLayer onDismiss={onClose} triggerRef={trigger}>
           <div
diff --git a/src/styles/constants.ts b/src/styles/constants.ts
index a7d2e93854a..ea88bb3e2d1 100644
--- a/src/styles/constants.ts
+++ b/src/styles/constants.ts
@@ -1,8 +1,8 @@
 export const zIndex = {
-  base: 0,
-  navigation: 1,
-  dropdown: 10,
-  tooltip: 20,
-  modal: 40,
-  notification: 50,
-};
+  base: 'z-0',
+  navigation: 'z-1',
+  dropdown: 'z-10',
+  tooltip: 'z-20',
+  modal: 'z-40',
+  notification: 'z-50',
+} as const;