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

DropdownMenuV2: break menu item help text on multiple lines for better truncation #63916

Merged
merged 2 commits into from
Jul 25, 2024

Conversation

ciampo
Copy link
Contributor

@ciampo ciampo commented Jul 24, 2024

What?

Allow menu item help text in DropdownMenuV2 to break more deliberately to avoid unexpected un-truncated text

Why?

Because otherwise a menu item's help text could not be truncated in case its contents don't break to a new line

How?

By adding word-break: break all

Testing Instructions

Apply the following changes to the component's Storybook example:

diff --git a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
index a2fc476cd8..3ddb269c6d 100644
--- a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
@@ -78,10 +78,11 @@ export const Default: StoryFn< typeof DropdownMenu > = ( props ) => (
 			<DropdownMenuItemHelpText>Help text</DropdownMenuItemHelpText>
 		</DropdownMenuItem>
 		<DropdownMenuItem>
-			<DropdownMenuItemLabel>Label</DropdownMenuItemLabel>
+			<DropdownMenuItemLabel>
+				https://m.media-amazon.com/images/M/MV5BOTI5ZTNkYWQtNDg2Mi00MTBmLTliMGItNTI5YWI5OTZkM2Y2XkEyXkFqcGdeQXVyNzU1NzE3NTg@._V1_QL75_UX500_CR0,47,500,281_.jpg
+			</DropdownMenuItemLabel>
 			<DropdownMenuItemHelpText>
-				The menu item help text is automatically truncated when there
-				are more than two lines of text
+				https://m.media-amazon.com/images/M/MV5BOTI5ZTNkYWQtNDg2Mi00MTBmLTliMGItNTI5YWI5OTZkM2Y2XkEyXkFqcGdeQXVyNzU1NzE3NTg@._V1_QL75_UX500_CR0,47,500,281_.jpg
 			</DropdownMenuItemHelpText>
 		</DropdownMenuItem>
 		<DropdownMenuItem hideOnClick={ false }>
  1. On trunk, notice how the help text would cause the menu to scroll horizontally, since the text can't be correctly truncated
  2. On this PR's branch, notice how the text gets truncated correctly

Screenshots or screencast

Before (trunk) After (this PR)
Screenshot 2024-07-25 at 01 49 42 Screenshot 2024-07-25 at 01 49 22

@ciampo ciampo requested a review from ajitbohra as a code owner July 24, 2024 23:49
@ciampo ciampo self-assigned this Jul 24, 2024
@ciampo ciampo requested a review from a team July 24, 2024 23:50
Copy link

github-actions bot commented Jul 24, 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: tyxla <tyxla@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 Jul 24, 2024
Copy link
Member

@tyxla tyxla left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@tyxla tyxla enabled auto-merge (squash) July 25, 2024 10:12
@tyxla tyxla merged commit 32838e8 into trunk Jul 25, 2024
62 checks passed
@tyxla tyxla deleted the fix/dropdown-menu-v2-truncated-break-word branch July 25, 2024 10:24
@github-actions github-actions bot added this to the Gutenberg 19.0 milestone Jul 25, 2024
@ciampo ciampo mentioned this pull request Aug 20, 2024
53 tasks
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