Repository: mui/material-ui (TypeScript)
Date: 2021-06-16 15:04:05+00:00
Task type: Bug Fix

Issue:
[Modal] zIndex of the Drawer and Modal components are the same
<!-- Provide a general summary of the issue in the Title above -->

According to the zIndex definitions (https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/zIndex.js), the Drawer's zIndex is less (1200) than a Modal's (1300). However, as we may see in the examples, these indexes are the same (1300).
This happens, because Drawer is used `Modal` Component under the hood.
The problem is becaming understandable when we try to show a Modal over the Drawer. Unfortunately, Modal is shown behind Drawer.

To avoid this, we could pass the `style` prop to the Modal Component to override default Modal's zIndex style.



<img width="1791" alt="React Drawer component - Material-UI 2021-06-03 16-21-24" src="https://user-images.githubusercontent.com/76203853/120651865-e6fe8100-c487-11eb-89cd-aa55ba493731.png">


<!-- Checked checkbox should look like this: [x] -->

- [ ] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯

Drawer overlaps Modal.

## Expected Behavior 🤔

Modal window should overlap Drawer.


Example:

https://codesandbox.io/s/vigorous-bohr-il8ml?file=/src/App.tsx


## Your Environment 🌎

<!--
  Run `npx @material-ui/envinfo` and post the results.
  If you encounter issues with TypeScript please include the used tsconfig.
-->
<details>
  <summary>`npx @material-ui/envinfo`</summary>
  
```
  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.
```
</details>



Issue discussion:

Solution patch:
diff --git a/docs/pages/api-docs/modal.json b/docs/pages/api-docs/modal.json
--- a/docs/pages/api-docs/modal.json
+++ b/docs/pages/api-docs/modal.json
@@ -2,7 +2,10 @@
   "props": {
     "children": { "type": { "name": "custom", "description": "element" }, "required": true },
     "open": { "type": { "name": "bool" }, "required": true },
-    "BackdropComponent": { "type": { "name": "elementType" }, "default": "Backdrop" },
+    "BackdropComponent": {
+      "type": { "name": "elementType" },
+      "default": "styled(Backdrop, {\n  name: 'MuiModal',\n  slot: 'Backdrop',\n  overridesResolver: (props, styles) => {\n    return styles.backdrop;\n  },\n})({\n  zIndex: -1,\n})"
+    },
     "BackdropProps": { "type": { "name": "object" } },
     "classes": { "type": { "name": "object" } },
     "closeAfterTransition": { "type": { "name": "bool" } },
diff --git a/packages/material-ui/src/Drawer/Drawer.js b/packages/material-ui/src/Drawer/Drawer.js
--- a/packages/material-ui/src/Drawer/Drawer.js
+++ b/packages/material-ui/src/Drawer/Drawer.js
@@ -45,7 +45,9 @@ const DrawerRoot = styled(Modal, {
   name: 'MuiDrawer',
   slot: 'Root',
   overridesResolver,
-})({});
+})(({ theme }) => ({
+  zIndex: theme.zIndex.drawer,
+}));
 
 const DrawerDockedRoot = styled('div', {
   shouldForwardProp: rootShouldForwardProp,
diff --git a/packages/material-ui/src/Modal/Modal.d.ts b/packages/material-ui/src/Modal/Modal.d.ts
--- a/packages/material-ui/src/Modal/Modal.d.ts
+++ b/packages/material-ui/src/Modal/Modal.d.ts
@@ -12,7 +12,15 @@ export type ModalTypeMap<D extends React.ElementType = 'div', P = {}> = ExtendMo
   props: P & {
     /**
      * A backdrop component. This prop enables custom backdrop rendering.
-     * @default Backdrop
+     * @default styled(Backdrop, {
+     *   name: 'MuiModal',
+     *   slot: 'Backdrop',
+     *   overridesResolver: (props, styles) => {
+     *     return styles.backdrop;
+     *   },
+     * })({
+     *   zIndex: -1,
+     * })
      */
     BackdropComponent?: React.ElementType<BackdropProps>;
     /**
diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js
--- a/packages/material-ui/src/Modal/Modal.js
+++ b/packages/material-ui/src/Modal/Modal.js
@@ -39,6 +39,16 @@ const ModalRoot = styled('div', {
     }),
 }));
 
+const ModalBackdrop = styled(Backdrop, {
+  name: 'MuiModal',
+  slot: 'Backdrop',
+  overridesResolver: (props, styles) => {
+    return styles.backdrop;
+  },
+})({
+  zIndex: -1,
+});
+
 /**
  * Modal is a lower-level construct that is leveraged by the following components:
  *
@@ -55,7 +65,7 @@ const ModalRoot = styled('div', {
 const Modal = React.forwardRef(function Modal(inProps, ref) {
   const props = useThemeProps({ name: 'MuiModal', props: inProps });
   const {
-    BackdropComponent = Backdrop,
+    BackdropComponent = ModalBackdrop,
     closeAfterTransition = false,
     children,
     components = {},
@@ -127,7 +137,15 @@ Modal.propTypes /* remove-proptypes */ = {
   // ----------------------------------------------------------------------
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
-   * @default Backdrop
+   * @default styled(Backdrop, {
+   *   name: 'MuiModal',
+   *   slot: 'Backdrop',
+   *   overridesResolver: (props, styles) => {
+   *     return styles.backdrop;
+   *   },
+   * })({
+   *   zIndex: -1,
+   * })
    */
   BackdropComponent: PropTypes.elementType,
   /**


Test patch:
diff --git a/packages/material-ui/src/Drawer/Drawer.test.js b/packages/material-ui/src/Drawer/Drawer.test.js
--- a/packages/material-ui/src/Drawer/Drawer.test.js
+++ b/packages/material-ui/src/Drawer/Drawer.test.js
@@ -299,4 +299,20 @@ describe('<Drawer />', () => {
       expect(getAnchor(theme, 'right')).to.equal('left');
     });
   });
+
+  describe('zIndex', () => {
+    it('should set correct zIndex on the root element', () => {
+      const theme = createTheme();
+      mount(
+        <ThemeProvider theme={theme}>
+          <Drawer open>
+            <div />
+          </Drawer>
+        </ThemeProvider>,
+      );
+      expect(screen.getByRole('presentation')).toHaveComputedStyle({
+        zIndex: String(theme.zIndex.drawer),
+      });
+    });
+  });
 });