fix(ListBox): change ListBox z-index higher than modal

[tw15egan]

Refs #2660
Refs #6365

This stems from a conversation on Slack from @carbon-design-system/angular-maintainers and you can see the issue occurring here. This was previously fixed by the Angular team in #2660 but reverted in #6365

Updates ListBox elements z-index values to above Modal, so that a Dropdown rendered outside of the Modal content (to prevent Dropdown causing scrolling inside Modal) will appear above the Modal itself. This should not cause any issues when triggering a Modal when a ListBox element is open, since the menu's all close when the focus is removed. Let me know if I am missing a particular use-case.

Changelog

Changed

• Bumps dropdown value from 6000 to 9100
• Rearranged values in descending order

Testing / Reviewing

z('dropdown') is only used in Dropdown and Listbox components

[netlify]

Deploy preview for carbon-elements ready!

Built with commit b8864ec

https://deploy-preview-8107--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit b8864ec

https://deploy-preview-8107--carbon-components-react.netlify.app

[emyarod]

since this issue has swung back and forth it might be worth specifically targeting components within a modal for a z-index bump rather than re-reverting a global variable (i.e. modal z-index > dropdown z-index but dropdown z-index within a modal > modal?). it looks like this same concern was raised in #2660 as well

[cal-smith]

since this issue has swung back and forth it might be worth specifically targeting components within a modal for a z-index bump rather than re-reverting a global variable (i.e. modal z-index > dropdown z-index but dropdown z-index within a modal > modal?). it looks like this same concern was raised in #2660 as well

I'd be curious why the cleanup reverted the list-box to below the modal in the first place - It seems logical to me that floating menus and lists should occupy the top of the z-index range, with modals and other "windows" sitting somewhere below. As far as I understand menus and dropdowns should close when a modal opens (even just by virtue of it being an outside click), so that shouldn't cause a layering conflict.

This particular issue occurs because of what's required to break out of a modal - the list-box has to be rendered into the body. I'm not sure how you would specifically target the list-box when it's not a sibling of the dropdown, or a child of the modal?

As mentioned in #2660, the whole z-index order probably should be reworked a bit anyway - setting it to 9100 was a minimally breaking hack.

[cal-smith]

Perhaps commenting why the z-indices are what they are in the code would help prevent this from regressing unnecessarily?

[tw15egan]

@cal-smith agreed, z-index's should probably be revisited as a whole, but added a comment for now. I didn't change floating as this can already be achieved by adding data-floating-menu-container to the modal.

@emyarod due to the way the Angular team is rendering Dropdowns (child of body and not modal) this change is needed. Since menus close on loss of focus, there shouldn't be any issues with them rendering on top of, say, a modal when it opens