Skip to content

Commit

Permalink
add more zIndex
Browse files Browse the repository at this point in the history
  • Loading branch information
siriwatknp committed Feb 20, 2023
1 parent df0ac6e commit b2a858c
Show file tree
Hide file tree
Showing 8 changed files with 27 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-joy/src/Badge/Badge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-joy/src/Menu/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}),
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-joy/src/Select/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}),
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-joy/src/Table/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 6 additions & 0 deletions packages/mui-joy/src/styles/CssVarsProvider.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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)',
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-joy/src/styles/extendTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
12 changes: 12 additions & 0 deletions packages/mui-joy/src/styles/types/zIndex.ts
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit b2a858c

Please sign in to comment.