Improve appearance of controls in the Global Styles Typography panel #43304
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
noisysocks
added
[Type] Bug
noisysocks
force-pushed
the
fix/typography-panel-styling
branch
from
8672ddc
to
5d70ea6
Compare
|
Size Change: -50 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
mirka
approved these changes
Aug 17, 2022
There was a problem hiding this comment.
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
noisysocks
force-pushed
the
fix/typography-panel-styling
branch
from
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.
|
57 tasks
62 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?
Quick pass at fixing the low hanging fruit in #34345 (comment). (There's lots more to do in future PRs!)
Gridso 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
HStackandGriddoes 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