[Fab] Add z-index (#30842)

Co-authored-by: siriwatknp <[email protected]> Co-authored-by: Michał Dudak <[email protected]>
mui · Mar 10, 2022 · 5d4e9b1 · 5d4e9b1
1 parent fc611e2
commit 5d4e9b1
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 0 deletions.
diff --git a/docs/data/material/customization/z-index/z-index.md b/docs/data/material/customization/z-index/z-index.md
@@ -8,6 +8,7 @@ that has been designed to properly layer drawers, modals, snackbars, tooltips, a
 The `z-index` values start at an arbitrary number, high and specific enough to ideally avoid conflicts:
 
 - mobile stepper: 1000
+- fab: 1050
 - speed dial: 1050
 - app bar: 1100
 - drawer: 1200

diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js
@@ -50,6 +50,7 @@ const FabRoot = styled(ButtonBase, {
     minWidth: 0,
     width: 56,
     height: 56,
+    zIndex: theme.zIndex.fab,
     boxShadow: theme.shadows[6],
     '&:active': {
       boxShadow: theme.shadows[12],

diff --git a/packages/mui-material/src/styles/zIndex.d.ts b/packages/mui-material/src/styles/zIndex.d.ts
@@ -6,6 +6,7 @@ export interface ZIndex {
   modal: number;
   snackbar: number;
   tooltip: number;
+  fab: number;
 }
 
 export type ZIndexOptions = Partial<ZIndex>;

diff --git a/packages/mui-material/src/styles/zIndex.js b/packages/mui-material/src/styles/zIndex.js
@@ -2,6 +2,7 @@
 // like global values in the browser.
 const zIndex = {
   mobileStepper: 1000,
+  fab: 1050,
   speedDial: 1050,
   appBar: 1100,
   drawer: 1200,