Remove z-index and stacking contexts from list-items
#3775
Conversation
|
Thanks for the PR! 🎉 We've deployed an automatic preview for this PR - you can see your changes here:
|
|
Visual diff tests failed - pull request #3776 has been opened with the updated goldens. |
bearfriend
changed the title
z-index and stacking contexts from list-items
| @@ -126,9 +114,10 @@ export const ListItemMixin = superclass => class extends composeMixins( | |||
| } | |||
|
|
|||
| [slot="control-container"] { | |||
| pointer-events: none; | |||
There was a problem hiding this comment.
position: relative; (necessary for the absolutely positioned borders below) seems to bump this item out of control of order, so I left it on top but disallowed pointer-events, which seems to work fine.
There was a problem hiding this comment.
No objection to changing this, just calling this out if we run into any issues with it. I don't think this z-index value was causing us any grief. It was just being used for rendering the separators in its ::before/::after pseudo-elements. The element itself is not actually a container for item content, and so would not be setting a stacking context for anything else.
There was a problem hiding this comment.
The problem was that without the parent stacking context, -1 puts it behind the list itself (or whatever it eventually hits) so the borders were no longer visible.
|
Visual diff tests failed - pull request #3777 has been opened with the updated goldens. |
|
🎉 This PR is included in version 2.131.5 🎉 The release is available on: Your semantic-release bot 📦🚀 |
ghost
added
the
* Switch list-item z-index to grid order * Remove fullscreenWithin, dropdownOpen, and tooltipShowing * Fix lint * Remove fullscreen-within listener * Try disabling pointer events * Fix lint
DE52324: Html emoji editor can get cut off by the rubric
US151482: Spike > Update d2l-list item rendering to avoid z-index
Removes all usage of
z-index(and any internal stacking contexts) in list items to allow all descendants, and the list item itself, to stack organically within the document. This means no more special handling is needed to support open dropdowns, tooltips, or other overflowing descendants.CSS
orderachieves essentially the same result asz-index, but it is scoped to the grid items and simply re-orders them instead of continually increasing their priority compared to everything else, so there is no arms race.