From 97951ac65ecf28ec2232e082bb6f64e2bfaddbcc Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Thu, 14 Nov 2024 19:37:03 +0530 Subject: [PATCH 1/4] Fix: Use break-word instead of break-all in attribute description Changed break-all to use word-break for better readability. --- packages/components/src/menu/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/menu/styles.ts b/packages/components/src/menu/styles.ts index 3312c8cb2de161..622eff61a240fb 100644 --- a/packages/components/src/menu/styles.ts +++ b/packages/components/src/menu/styles.ts @@ -380,7 +380,7 @@ export const MenuItemHelpText = styled( Truncate )` font-size: ${ font( 'helpText.fontSize' ) }; line-height: 16px; color: ${ LIGHTER_TEXT_COLOR }; - word-break: break-all; + word-break: break-word; [data-active-item]:not( [data-focus-visible] ) *:not( ${ MenuPopoverInnerWrapper } ) From 7c0d42e1dee962c5fca74a1acfc8adf19a832af8 Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Wed, 20 Nov 2024 14:15:07 +0530 Subject: [PATCH 2/4] CSS: Replace deprecated word-break with overflow-wrap Replace deprecated `word-break: break-word` with the modern equivalent `overflow-wrap: anywhere` to handle text wrapping. This change maintains the same text wrapping behavior while using the current standard CSS property. --- packages/components/src/menu/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/menu/styles.ts b/packages/components/src/menu/styles.ts index 622eff61a240fb..0e0752bf24cd10 100644 --- a/packages/components/src/menu/styles.ts +++ b/packages/components/src/menu/styles.ts @@ -380,7 +380,7 @@ export const MenuItemHelpText = styled( Truncate )` font-size: ${ font( 'helpText.fontSize' ) }; line-height: 16px; color: ${ LIGHTER_TEXT_COLOR }; - word-break: break-word; + overflow-wrap: anywhere; [data-active-item]:not( [data-focus-visible] ) *:not( ${ MenuPopoverInnerWrapper } ) From dfef21ac7e2d6f22d602cddcbd96d3290ac64aee Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Wed, 20 Nov 2024 16:36:53 +0530 Subject: [PATCH 3/4] Docs: Add changelog entry for MenuItemHelpText text wrapping fix --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index b23d024a724dd1..42874ca472a72c 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -14,6 +14,7 @@ - `ToggleGroupControl`: Fix active background for `0` value ([#66855](https://github.com/WordPress/gutenberg/pull/66855)). - `SlotFill`: Fix a bug where a stale value of `fillProps` could be used ([#67000](https://github.com/WordPress/gutenberg/pull/67000)). - `ColorPicker`: Add accessible label for copy button ([#67094](https://github.com/WordPress/gutenberg/pull/67094)). +- `MenuItemHelpText`: Fix text wrapping to prevent unintended word breaks by using `overflow-wrap: anywhere` ([#67011](https://github.com/WordPress/gutenberg/pull/67011)). ### Enhancements From f82531583a67f95e048ffeda4548e0e02b90cf35 Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Thu, 21 Nov 2024 13:35:20 +0530 Subject: [PATCH 4/4] Docs: Update changelog entry for Menu.ItemHelpText to internal section --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 42874ca472a72c..deb273a286603c 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -14,7 +14,6 @@ - `ToggleGroupControl`: Fix active background for `0` value ([#66855](https://github.com/WordPress/gutenberg/pull/66855)). - `SlotFill`: Fix a bug where a stale value of `fillProps` could be used ([#67000](https://github.com/WordPress/gutenberg/pull/67000)). - `ColorPicker`: Add accessible label for copy button ([#67094](https://github.com/WordPress/gutenberg/pull/67094)). -- `MenuItemHelpText`: Fix text wrapping to prevent unintended word breaks by using `overflow-wrap: anywhere` ([#67011](https://github.com/WordPress/gutenberg/pull/67011)). ### Enhancements @@ -27,6 +26,7 @@ ### Internal - `SlotFill`: fix dependencies of `Fill` registration effects ([#67071](https://github.com/WordPress/gutenberg/pull/67071)). +- `Menu.ItemHelpText`: Fix text wrapping to prevent unintended word breaks ([#67011](https://github.com/WordPress/gutenberg/pull/67011)). ## 28.12.0 (2024-11-16)