Global Styles: Upsize typography panel components#42718
Merged
Conversation
mirka
added
the
Global Styles
|
Size Change: +123 B (0%) Total Size: 1.27 MB
ℹ️ View Unchanged
|
mirka
force-pushed
the
upsize-gs-typography
branch
from
33780b2 to
43c710a
Compare
mirka
force-pushed
the
upsize-gs-typography
branch
from
43c710a to
cb1b99a
Compare
aaronrobertshaw
approved these changes
Aug 9, 2022
aaronrobertshaw
left a comment
aaronrobertshaw
left a comment
Contributor
There was a problem hiding this comment.
Thanks for the continued efforts wrangling component heights and panel layouts @mirka 👍
The upsized controls in the Typography panel test well for me. I didn't spot any issues comparing this PR to trunk.
One small question, should the Buttons typography panel's font size control reset button also be upsized?
Inconsistencies in horizontal spacing are pre-existing
Did this mean to say vertical spacing?
Member
Author
We decided to leave it for the time being, but we do need to deal with it at some point. Looking around at the Global Styles UIs, I see a bit of inconsistency since a few controls show their own Reset buttons (ColorPalette, FontSizePicker) even though the rest of the controls simply rely on the "Reset to defaults" in the actions menu. Maybe the right move here is to remove the Reset buttons. (cc @jameskoster @jasmussen)
Yes 🙈 |
Contributor
cc @jasmussen and @jameskoster |
Contributor
|
Thank you for fast work as always.
Am I right in remembering that this is mainly a semantic issue with the segmented control being a radio group under the hood? I ask mainly because I've often seen radio groups enabling or hiding contextual controls in various form fields, such as when you answer "yes" to a question, additional contextual questions appear below. But would that be an incorrect use of radios? Happy to learn here. If yes, I think it might being worth putting on the calendar to explore whether this segmented control could be a visual variation of the actual tabpanel. Its appearance can feel contextual to adjacent controls in a way the current visual for the tabpanel doesn't, which can act more as a separator.
Just to be sure, it's referring to this font size control, correct? Ultimately I would expect the font size control to move towards this appearance across the board: There's still some explorations we can do to improve the ellipsis menu clarity based on all the valid feedback it's gotten, but that doesn't need to block the other. |
Member
Author
Radios switching contextual control views is fine, like in your yes/no example. The radio is actually selecting between a mutually exclusive set of values (yes or no) that is to be persisted. If I choose No, toggle some of the contextual controls, and then switch back to Yes before hitting submit, the contextual values I selected for No are ignored. The problem is when the radio is only being used as a view switcher, not as a value selector. So even setting HTML semantics aside, it actually causes confusion for sighted users if the radio/tabpanel UIs aren't visually differentiated within a design system. Hope that makes sense! |
Member
Author
Yep, that Reset button doesn't appear in the post editor, but appears in Global Styles. |
Contributor
|
This is very helpful, thank you for the patience, yes.
I definitely understand this for pure radio groups. But for the segmented control (speaking in terms of design moreso than engine), I commonly see that applied across mobile apps (mainly iOS) as a tab switcher. I'm unaware of any expectation that this design has to behave like a radiogroup. Just to compare, visually the iOS Segmented Control appears identical to the Tab view. Could we do something similar? |
Member
Author
Yes, I think so! As long as we're mindful of the behavioral difference that they each carry, and we give it sufficient affordance to differentiate between them. In Pablo's mockups, the segmented control was at a thinner, 32px height when used as a tabpanel switcher (#42008). We can pair this 32px segmented control with tabpanel semantics and we're good to go, as I noted in that PR while you were away:
We opted to stick with the existing TabPanel design at that time, but we can change that. |
Contributor
|
Thank you! Something we can look at when we get time. |
This was referenced Aug 15, 2022
57 tasks
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
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.
Part of #41973
What?
Updates the Typography panel in Global Styles to render 40px size controls.
Why?
The Typography panel in Global Styles is a nice isolated section of the UI to start upsizing components to the 40px height.
How?
Set the
sizeprop on all the controls used in this section.Testing Instructions
npm run devInconsistencies in horizontal spacing are pre-existing, and will be addressed separately in conjunction with #39358.
Screenshots or screencast
Global Styles ▸ Typography ▸ Headings:
(☝️ Aside: Here is another place where the segmented control is begging for
tabpanelsemantics 😅)