Consider removing default z-indexes

Is your feature request related to a problem? Please describe. Understanding stacking contexts is an important part of being a front-end developer.

In a component like Modal, z-index won’t help if the parent has a stacking-context.

Describe the solution you’d like

• Remove z-index from components like Modal, but still allow users to set z-index if they wish.
• Document using React Portals as a better alternative to z-index.
• Remove the default values, but leave the key available.

It could also be sensible to have a usePortal hook or withPortal prop shipped alongside components that need to be above other content.

I’m very happy to take on this work if you agree with the direction.

Describe alternatives you’ve considered Users of this library could unset default z-index values in the theme if they wished.

Additional context What I’d like to achieve with this issue is to help front-end developers understand z-indexing better than most do today, and to solve these problems in more robust and scalable ways.

I feel that users will continue to hit issues like #691 if relying heavily on z-indexing within apps.

[segunadebayo]

This is a good point @mrmckeb. Thanks for bringing it up!

It’s definitely essential to reduce the usage of z-index and lean towards the use of Portals and natural stacking context.

We’ve attempted to solve this in the dev-ts branch by using only Portal and we also created a PortalManager which serves as a container for all Portals, this way it’s easier to see or organize the portals.

To help you achieve this goal in Chakra UI. Here’s what I suggest:

• Go through the current implementation of our Portal and PortalManager component
• Go through the modal components (Modal, Popover, Drawer, etc)
• Kindly suggest improvements or even implement them and PR
• Write a guide for managing ZIndex so we can add it to the docs

Let me know if this makes sense. I’m happy to help in any way to achieve this goal.

I think it’s important and worth paying attention to.

Thank you, Brody.

[mrmckeb]

I think we’re in a good place! Happy to close this one off.