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

CustomSelectControlV2: fix select popover content overflow #62844

Merged
merged 2 commits into from
Jun 27, 2024

Conversation

ciampo
Copy link
Contributor

@ciampo ciampo commented Jun 25, 2024

What?

Part of #55023

Set a minimum width for the CustomSelectControl V2's select popover

Why?

To avoid content overflowing or horizontal scrolling inside the popover

How?

  • add min-width: fit-content to the popover wrapper to avoid the content from overflowing
  • set the prop slide={false} on Ariakit's SelectPopover to keep the popover anchored to its trigger while scrolling the page horizontally

Testing Instructions

  1. Apply these changes:
Click to expand
diff --git a/packages/components/src/custom-select-control/stories/index.story.tsx b/packages/components/src/custom-select-control/stories/index.story.tsx
index 8ff9a023c5..e9f21cfa0f 100644
--- a/packages/components/src/custom-select-control/stories/index.story.tsx
+++ b/packages/components/src/custom-select-control/stories/index.story.tsx
@@ -90,7 +90,7 @@ WithLongLabels.args = {
 		},
 		{
 			key: 'reallylonglabel2',
-			name: 'But they can take a long time to type.',
+			name: 'Buttheycantakealongtimetotype.',
 		},
 		{
 			key: 'reallylonglabel3',
  1. Load the CustomSelectControlV2 Legacy "With Long Labels" story
  2. Open the select dropdown and resize the page horizontally — make sure that the popover stops resizing once it reaches its minimum allowed width, and that the popover content never overflows / causes horizontal scroll inside the popover
  3. Load the same "With Long Labels" story, but for the V1 version of the component, and make sure that the behaviour is the same.

Screenshots or screencast

Version screencast
V1
cscv1.-.item.wrapping.mp4
V2, before (trunk)
cscv2.-.item.wrapping.-.before.mp4
V2, after (this PR)
cscv2.-.item.wrapping.-.after.mp4

@ciampo ciampo requested a review from ajitbohra as a code owner June 25, 2024 14:30
@ciampo ciampo self-assigned this Jun 25, 2024
Copy link

github-actions bot commented Jun 25, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@ciampo ciampo added [Type] Bug An existing feature does not function as intended [Package] Components /packages/components labels Jun 25, 2024
@ciampo ciampo changed the title CustomSelectControlV2: add minimum width to select popover CustomSelectControlV2: fix select popover content overflow Jun 25, 2024
@ciampo ciampo requested a review from a team June 25, 2024 14:31
Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

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

Good one 👍

@ciampo ciampo force-pushed the fix/custom-select-control-v2-item-content-wrapping branch from 634913e to d14775f Compare June 27, 2024 07:38
@ciampo ciampo enabled auto-merge (squash) June 27, 2024 07:39
@ciampo ciampo merged commit a8b61cd into trunk Jun 27, 2024
61 checks passed
@ciampo ciampo deleted the fix/custom-select-control-v2-item-content-wrapping branch June 27, 2024 08:13
@github-actions github-actions bot added this to the Gutenberg 18.8 milestone Jun 27, 2024
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
None yet
Development

Successfully merging this pull request may close these issues.

2 participants