-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Improve appearance of controls in the Global Styles Typography panel #43304
Conversation
8672ddc
to
5d70ea6
Compare
Size Change: -50 B (0%) Total Size: 1.24 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.
Very clean, thank you!
Rename Select heading level label to Heading level and make it uppercase
I'm a bit conflicted about this one, because although it does "look nicer" it now becomes absolutely indistinguishable from a normal radio
😂 I wonder if we should instead hide the visual label completely? No biggie though, hopefully we can fully address this part before the next release.
That's a fair point, it does make the "visual hierarchy" less clear |
- Rename 'Select heading level' to 'Heading level' and make uppercase - Reduce Heading level bottom margin - Reduce margin between Font size label and input - Use Grid so that controls within the panel are evenly spaced - Make Line height and Appearance appear next to each other
5ba3773
to
e3c0afe
Compare
Yeah it's not great. I like the suggestion in #34345 (comment) of designing a secondary variation for
Good idea! I think that definitely works a little better. |
What?
Quick pass at fixing the low hanging fruit in #34345 (comment). (There's lots more to do in future PRs!)
Grid
so that controls within the panel are evenly spacedWhy?
So that the Typography panel in Global Styles looks closer to what was designed in Figma. See #34345 (comment).
How?
Nothing too fancy, really. Using built-in components like
HStack
andGrid
does most of the work for us.I updated Heading level to look nicer but it's worth noting that this component will be swapped out for a
TabPanel
, see #34345 (comment).Testing Instructions
Screenshots or screencast