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

DropdownMenuV2Ariakit: prevent prefix collapsing if all radios or checkboxes are unselected #56720

Merged
merged 3 commits into from
Dec 8, 2023

Conversation

ciampo
Copy link
Contributor

@ciampo ciampo commented Dec 1, 2023

What?

Improves spacing in radio and checkbox menu items, so that the prefix space doesn't collapse if all items are unchecked

Why?

Currently, the whole menu can "jump" when selecting an item (as reported in #55625 (comment)), which is a poor user experience.

How?

By making sure that the prefix has a minimum width for radio and checkbox menu items

Testing Instructions

  • Open the "With Checkboxes" Storybook example for the DropdownMenuV2Ariakit component
  • Uncheck all checkboxes
  • Make sure that all checkboxes are still showing some empty space as their prefix, and that the menu's width doesn't change
  • To test with radios, manually tweak the "With Radios" storybook example to remove any initial selection

Screenshots or screencast

Before (trunk) After (this PR)
Screenshot 2023-12-01 at 17 46 18 Screenshot 2023-12-01 at 18 09 12

@ciampo ciampo requested a review from ajitbohra as a code owner December 1, 2023 17:09
@ciampo ciampo self-assigned this Dec 1, 2023
@ciampo ciampo requested review from oandregal and a team December 1, 2023 17:09
@ciampo ciampo added [Type] Bug An existing feature does not function as intended [Package] Components /packages/components labels Dec 1, 2023
Copy link
Member

@oandregal oandregal left a comment

Choose a reason for hiding this comment

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

This works nicely, thanks.

@ciampo ciampo force-pushed the fix/dropdown-menu-radio-checkbox-prefix-spacing branch from 2ef1e9b to 0ecfed3 Compare December 8, 2023 13:54
@ciampo ciampo enabled auto-merge (squash) December 8, 2023 13:54
Copy link

github-actions bot commented Dec 8, 2023

Flaky tests detected in 33335e2.
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/7142946584
📝 Reported issues:

@ciampo ciampo force-pushed the fix/dropdown-menu-radio-checkbox-prefix-spacing branch from 0ecfed3 to 33335e2 Compare December 8, 2023 15:06
@ciampo ciampo merged commit 7872195 into trunk Dec 8, 2023
52 checks passed
@ciampo ciampo deleted the fix/dropdown-menu-radio-checkbox-prefix-spacing branch December 8, 2023 15:37
@github-actions github-actions bot added this to the Gutenberg 17.3 milestone Dec 8, 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] Bug An existing feature does not function as intended
Projects
Status: Done 🎉
Development

Successfully merging this pull request may close these issues.

2 participants