fix: Add overflowWrap on MenuItem (#3094)

Fixes: #3091 [category:Components] Co-authored-by: manuel.carrera <manuel.carrera@workday.com>
Workday · Jan 7, 2025 · 786eb95 · 786eb95
1 parent 792c710
commit 786eb95
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 0 deletions.
diff --git a/modules/react/menu/lib/MenuItem.tsx b/modules/react/menu/lib/MenuItem.tsx
@@ -68,6 +68,7 @@ export const menuItemStencil = createStencil({
     transition: 'background-color 80ms, color 80ms',
     backgroundColor: 'inherit',
     minHeight: system.space.x10,
+    overflowWrap: 'anywhere',
     // We want the icon colors to be the same as the text color
     [systemIconStencil.vars.color]: 'currentcolor',
 

diff --git a/modules/react/menu/stories/testingVisual.stories.tsx b/modules/react/menu/stories/testingVisual.stories.tsx
@@ -33,6 +33,7 @@ const AllStatesMenuItem = () => (
         <Menu.Item className="focus hover">Focused & Hovered Item</Menu.Item>
         <Menu.Item aria-disabled={true}>Disabled Item</Menu.Item>
         <Menu.Item>Wrapped Text Item Wrapped Text Item Wrapped Text Item</Menu.Item>
+        <Menu.Item>Superlonglinethatshouldbreakonitsownwithouthavingtodoanythingspecial</Menu.Item>
         <Menu.Divider />
         <Menu.Item>Menu item between dividers</Menu.Item>
         <Menu.Divider />