-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Fix layout of Data Views filter chip #60669
Conversation
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Size Change: -1 B (0%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
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.
Thanks for the PR Dave! I hadn't realized how bad the filters look if we have so many values and not enough space. It's not something we have to address in this PR, but we definitely need to do something about it. @WordPress/gutenberg-design
@@ -706,8 +706,8 @@ | |||
border-radius: $grid-unit-20; | |||
border: 1px solid transparent; | |||
cursor: pointer; | |||
padding: 0 $grid-unit-15; | |||
height: $grid-unit-40; | |||
padding: $grid-unit-10 $grid-unit-15; |
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.
I'd love @jameskoster thoughts about the top padding, since it also affects the chip when it's in a single line.
I'd echo Jay's instincts here, we should find ways to avoid the chip wrapping. Whether smaller font sizes, eliding text, etc. A bit of an out there solution that the Google app store employs is to marquee/scroll the text. |
No problem and thanks for the good instincts. No wrapping approach sounds like a good goal. One thing I've encountered with a similar situation I encountered during work on the Link UI - when you try and avoid wrapping and text strings get particularly long the instinct is to truncate the text. That's necessary to avoid overflowing. However there needs to be a means (perceivable to all) for users to access the full text. I'll close this one out. |
What?
Fixes layout of data views filter chip to account for variable lengths of filter text.
Why?
Currently a fixed height is applied to the chip which means that for filters which have a lot of text the UI looks broken as the text butts up against the edge of the chip. Instead there should be a nice spacing between the text and the edge of the chip.
How?
Avoids relying on fixed height and instead requires a min height and uses veritcal padding to ensure spacing around text is maintained at all times.
Testing Instructions
List
layout.trunk
and text does not butt up against edge of the chip.Templates
List
layout.Testing Instructions for Keyboard
Screenshots or screencast
Trunk
This PR