-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
DropdownMenu V2: add fallback styles for when subgrid is not supported #57327
Conversation
3bae143
to
3cf6d8e
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Works well and looks great! 🚀
f2e2ed3
to
33b5f06
Compare
Flaky tests detected in 33b5f06. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7298991546
|
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
)