Skip to content

CustomSelectControlV2: fix select popover content overflow#62844

Merged
ciampo merged 2 commits intotrunkfrom
fix/custom-select-control-v2-item-content-wrapping
Jun 27, 2024
Merged

CustomSelectControlV2: fix select popover content overflow#62844
ciampo merged 2 commits intotrunkfrom
fix/custom-select-control-v2-item-content-wrapping

Conversation

@ciampo
Copy link
Copy Markdown
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
@github-actions
Copy link
Copy Markdown

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
Copy Markdown
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
@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