From 786eb95c0609bb8fb3710d683096086629b65a1f Mon Sep 17 00:00:00 2001
From: Manuel Carrera <mannycarrera4@users.noreply.github.com>
Date: Tue, 7 Jan 2025 16:24:34 -0700
Subject: [PATCH] fix: Add overflowWrap on MenuItem (#3094)

Fixes: https://github.com/Workday/canvas-kit/issues/3091

[category:Components]

Co-authored-by: manuel.carrera <manuel.carrera@workday.com>
---
 modules/react/menu/lib/MenuItem.tsx                  | 1 +
 modules/react/menu/stories/testingVisual.stories.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/modules/react/menu/lib/MenuItem.tsx b/modules/react/menu/lib/MenuItem.tsx
index 0cf94473dc..75bf236d5d 100644
--- 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
index d66750cc73..1c1b907c32 100644
--- 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 />