DropdownMenu V2: add fallback styles for when subgrid is not supported #57327
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Add fallback styles to the experimental
DropdownMenu
v2 component for browsers that don't support CSS subgridWhy?
As of today, there are still a few browsers with > 1% usage that don't support CSS subgrid (old safari versions, opera mobile, Samsung internet) that we should still support
How?
Add some fallback styles so that the menu items don't look broken in browsers that don't support CSS subgrid. The main difference is that the auto-indentation is not supported in those browsers.
Note: these are fallback styles that only a very small (and decreasing every day) percentage of folks are going to experience. The goal is to provide a non-broken experience, even if the overall look is not as refined as in modern browsers
Testing Instructions
To test what it's like to use the DropdownMenu component in an environment that doesn't support CSS subgrid:
@supports ( grid-template-columns: subgrid )
queryTest the DropdownMenu V2 Ariakit component both in Storybook and in the editor, on both a browser that doesn't support CSS subgrid and on one that supports it.
trunk
Screenshots or screencast
trunk
)