[Drawer] Temporary variant use modal z-index

[vaibhavM55]

I was trying to implement a drawer in my application and was following this example https://material-ui.com/components/drawers/#clipped-under-the-app-bar

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

As shown in the example, you should set the z-index of the appbar as theme.zIndex.drawer + 1 and this would cause the appbar to raise over the drawer. But this is not happening when I tried it.

const styles = theme => {
  console.log("z-index: ", theme.zIndex.drawer, theme.zIndex.appBar);
  return {
    appBar: {
      backgroundColor:
        theme.palette.type === "dark" ? grey[800] : theme.palette.primary,
      // zIndex: theme.zIndex.drawer + 1,
      // zIndex: theme.zIndex.drawer + 99,
      // zIndex: theme.zIndex.drawer + 101,
      zIndex: 1301,
    },
  };
};

As you can see, I tried checking if the theme.zIndex.drawer value was passed, which it was. I also, I tried setting the z-index to the hard coded value of 5000 to see if the property is valid and there are no errors in the code. And the appBar was raised above the drawer. But setting it to a hard coded value of 1201 didn't work.

So, I thought of checking the value which makes it work and tried different values. It works when its set to 1301 and doesn't work for anything below. I can't figure out why. I have not set the zIndex of any other component in my app. This is the first time I am trying to change a component's (AppBar) zIndex value.

After I tried to reproduce as asked below in codesandbox, I figured out it was an issue with the temporary drawer as the permanent variant seems to work perfectly.

Expected Behavior 🤔

As shown in the example and also logically, it should work when its set over 1200 which is the z-index of the drawer.

Steps to Reproduce 🕹

Steps:

1. Use the codesandbox example provided by the official website for clipped under the bar drawer example https://codesandbox.io/s/u1rq6
2. Go into the demo.js file
3. Remove the variant = "permanent" prop from the <Drawer> component
4. Add open = {true}

Context 🔦

As described in the docs

Apps focused on productivity that require balance across the screen.

Your Environment 🌎

Tech	Version
Material-UI	core -> 4.11.0
React	16.13.1
Browser	chrome
TypeScript	no
etc.

[oliviertassinari]

The z-index of the temporary drawer is https://github.com/mui-org/material-ui/blob/7a4bd5807959b0069be9b5f40ba80eaae9ace2c8/packages/material-ui/src/styles/zIndex.js#L8

[vaibhavM55]

Thanks for the quick reply. I didn't know temporary drawer was considered as a modal internally as it wasn't mentioned anywhere in the docs. So, as you can see, I did waste a lot of time because of it.

You should definitely mention it in the documentation of the temporary drawer or the clipped under the app bar example.

[oliviertassinari]

@vaibhavM55 You can some of the information from the dev tools.

I think that this issue will do it just fine for the documentation. Thanks for opening it.

[vaibhavM55]

Thanks again, But it would be nice to have it mentioned in the documentation as its not entirely intuitive that the drawer will have different z-index based on the variant types. So, please do consider it.

Also, I assume that the reason temporary drawer has the same z-index as modal, is because its based upon modal. Am I right in my assumption? If so, is it possible that the temporary drawer has less z-index than the modal, like say 1250 ? Since I was just now trying to wrap my head around how I would deal with the appbar and the drawer to get the clipped under effect.

Since, if I now do something like setting the app z-index to zIndex: theme.zIndex.modal + 1, then I would get the effect, but then my appbar would also be above the modals that I would use. So, inorder to get rid of that, I would have to then set the zIndex of all my modals to something like 1350 in the createMuiTheme hook.

[vaibhavM55]

Also, to get around the issue mentioned above of changing the modal z-index and all, I tried setting the z-index on my temporary drawer to 1250 and my appbar to 1251 using the makeStyles hook, but that does not seem to work.

https://codesandbox.io/s/material-demo-forked-3cdnx?file=/demo.js