Skip to content
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

ToggleGroupControl: Update large button size to 32px #57338

Merged
merged 4 commits into from Dec 25, 2023

Conversation

mirka
Copy link
Member

@mirka mirka commented Dec 22, 2023

Closes #45532

What?

Updates the size of the ToggleGroupControl buttons in the large size variant to be 32px (used to be 34px).

Also fixes a bug where icon buttons did not have square proportions when size = 'default' && __next40pxDefaultSize = true.

Why?

As requested, to be more cohesive with the overall sizing scheme.

Testing Instructions

In the Storybook stories for ToggleGroupControl, see that the button sizes for size = '__unstable-large' and __next40pxDefaultSize = true are now 32px. Check both the text label buttons and icon buttons.

The overall footprint (height) including the border around the entire button group should remain the same at 40px.

Screenshots or screencast

Bug fix for icon buttons where size = 'default' && __next40pxDefaultSize = true:

Before After
Button doesn't have square proportions Button has square proportions

@mirka mirka added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components labels Dec 22, 2023
@mirka mirka self-assigned this Dec 22, 2023
Comment on lines +50 to +51
const normalizedSize =
__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We usually don't do this kind of preemptive size normalization in other components, but in this specific case it was a lot cleaner this way. Otherwise we'd have to drill the prop down to multiple subcomponents, touching a handful of more files.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. We should be able to clean this up after the migration is over and we remove temporary props and size values

Comment on lines +57 to +65
const styles = {
default: css`
min-height: 36px;
padding: 2px;
`,
'__unstable-large': css`
min-height: 40px;
padding: 3px;
`,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am tempted to simplify this down to a

if ( size === 'default` ) {
  return css`/* ... */`;
}
return css`/* ... */`;

but I'm going to keep this size variant object around because I think we'll be asked to make a 32px compact size variant soon.

Copy link

github-actions bot commented Dec 22, 2023

Flaky tests detected in a803192.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7321454753
📝 Reported issues:

Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

Tests well as per instructions

Comment on lines +50 to +51
const normalizedSize =
__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. We should be able to clean this up after the migration is over and we remove temporary props and size values

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
@mirka mirka enabled auto-merge (squash) December 25, 2023 11:35
@mirka mirka merged commit 583d533 into trunk Dec 25, 2023
54 of 56 checks passed
@mirka mirka deleted the toggle-group-control-size branch December 25, 2023 11:58
@github-actions github-actions bot added this to the Gutenberg 17.4 milestone Dec 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ToggleGroupControl: Tweak button size for large variant
2 participants