add more zIndex

mui · Feb 20, 2023 · b2a858c · b2a858c
1 parent df0ac6e
commit b2a858c
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 6 deletions.
diff --git a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
@@ -60,7 +60,7 @@ export const StyledAutocompleteListbox = styled(StyledList)<{
     ...(!variantStyle?.backgroundColor && {
       backgroundColor: theme.vars.palette.background.popup,
     }),
-    zIndex: 1200,
+    zIndex: theme.vars.zIndex.popup,
     overflow: 'auto',
     maxHeight: '40vh',
     position: 'relative', // to make sure that the listbox is positioned for grouped options to work.

diff --git a/packages/mui-joy/src/Badge/Badge.tsx b/packages/mui-joy/src/Badge/Badge.tsx
@@ -121,7 +121,7 @@ const BadgeBadge = styled('span', {
     minHeight: 'var(--Badge-minHeight)',
     minWidth: 'var(--Badge-minHeight)',
     borderRadius: 'var(--Badge-radius, var(--Badge-minHeight))',
-    zIndex: 1,
+    zIndex: theme.vars.zIndex.badge,
     backgroundColor: theme.vars.palette.background.surface,
     [ownerState.anchorOrigin!.vertical]: inset[ownerState.anchorOrigin!.vertical],
     [ownerState.anchorOrigin!.horizontal]: inset[ownerState.anchorOrigin!.horizontal],

diff --git a/packages/mui-joy/src/Menu/Menu.tsx b/packages/mui-joy/src/Menu/Menu.tsx
@@ -45,7 +45,7 @@ const MenuRoot = styled(StyledList, {
     ...scopedVariables,
     boxShadow: theme.shadow.md,
     overflow: 'auto',
-    zIndex: 1300, // the same value as Material UI Menu. TODO: revisit the appropriate value later.
+    zIndex: theme.vars.zIndex.popup,
     ...(!variantStyle?.backgroundColor && {
       backgroundColor: theme.vars.palette.background.popup,
     }),

diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx
@@ -242,7 +242,7 @@ const SelectListbox = styled(StyledList, {
     minWidth: 'max-content', // prevent options from shrinking if some of them is wider than the Select's root.
     outline: 0,
     boxShadow: theme.shadow.md,
-    zIndex: 1000,
+    zIndex: theme.vars.zIndex.popup,
     ...(!variantStyle?.backgroundColor && {
       backgroundColor: theme.vars.palette.background.popup,
     }),

diff --git a/packages/mui-joy/src/Table/Table.tsx b/packages/mui-joy/src/Table/Table.tsx
@@ -259,7 +259,7 @@ const TableRoot = styled('table', {
         top: 0,
       },
       [tableSelector.getHeaderCell()]: {
-        zIndex: 10,
+        zIndex: theme.vars.zIndex.table,
       },
       [tableSelector.getHeaderCellOfRow(2)]: {
         // support upto 2 rows for the sticky header

diff --git a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
@@ -470,6 +470,9 @@ describe('[Joy] CssVarsProvider', () => {
         const theme = useTheme();
         return (
           <div>
+            <div data-testid="zIndex-badge">{theme.vars.zIndex.badge}</div>
+            <div data-testid="zIndex-table">{theme.vars.zIndex.table}</div>
+            <div data-testid="zIndex-popup">{theme.vars.zIndex.popup}</div>
             <div data-testid="zIndex-modal">{theme.vars.zIndex.modal}</div>
             <div data-testid="zIndex-tooltip">{theme.vars.zIndex.tooltip}</div>
           </div>
@@ -482,6 +485,9 @@ describe('[Joy] CssVarsProvider', () => {
         </CssVarsProvider>,
       );
 
+      expect(screen.getByTestId('zIndex-badge').textContent).to.equal('var(--joy-zIndex-badge)');
+      expect(screen.getByTestId('zIndex-table').textContent).to.equal('var(--joy-zIndex-table)');
+      expect(screen.getByTestId('zIndex-popup').textContent).to.equal('var(--joy-zIndex-popup)');
       expect(screen.getByTestId('zIndex-modal').textContent).to.equal('var(--joy-zIndex-modal)');
       expect(screen.getByTestId('zIndex-tooltip').textContent).to.equal(
         'var(--joy-zIndex-tooltip)',

diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts
@@ -429,7 +429,10 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
       )} / 0.27), 21px 52.3px 74px -1.2px rgba(${getCssVar('shadowChannel')} / 0.29)`,
     },
     zIndex: {
-      modal: 1200,
+      badge: 1,
+      table: 10,
+      popup: 1000,
+      modal: 1300,
       tooltip: 1500,
     },
     typography: {

diff --git a/packages/mui-joy/src/styles/types/zIndex.ts b/packages/mui-joy/src/styles/types/zIndex.ts
@@ -1,4 +1,16 @@
+/**
+ * From lowest to highest value
+ */
 export interface ZIndex {
+  badge: number;
+  /**
+   * For sticky `th` cells
+   */
+  table: number;
+  /**
+   * Including `Menu`, `Autocomplete`, `Select`
+   */
+  popup: number;
   modal: number;
   tooltip: number;
 }