Add word-break to ActionList

.changeset/pretty-pandas-serve.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: Add `word-break` to ActionList items

packages/react/src/ActionList/ActionList.features.stories.tsx

@@ -528,6 +528,15 @@ export const TextWrapAndTruncation = () => (
           <ArrowLeftIcon />
         </ActionList.TrailingVisual>
       </ActionList.Item>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <ArrowRightIcon />
+        </ActionList.LeadingVisual>
+        SomethingSomething/SomethingElse.Some.Thing.Lalala.la
+        <ActionList.TrailingVisual>
+          <ArrowLeftIcon />
+        </ActionList.TrailingVisual>
+      </ActionList.Item>
     </ActionList>
   </Box>
 )

packages/react/src/ActionList/Item.tsx

@@ -322,6 +322,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
                       flexGrow: slots.inlineDescription ? 0 : 1,
                       fontWeight: slots.inlineDescription || slots.blockDescription || active ? 'bold' : 'normal',
                       marginBlockEnd: slots.blockDescription ? '4px' : undefined,
+                      wordBreak: 'break-word',
                     }}
                   >
                     {childrenWithoutSlots}

packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap

@@ -22,6 +22,7 @@ exports[`NavList renders a simple list 1`] = `
   -ms-flex-positive: 1;
   flex-grow: 1;
   font-weight: 600;
+  word-break: break-word;
 }
 
 .c8 {
@@ -30,6 +31,7 @@ exports[`NavList renders a simple list 1`] = `
   -ms-flex-positive: 1;
   flex-grow: 1;
   font-weight: 400;
+  word-break: break-word;
 }
 
 .c0 {
@@ -447,6 +449,7 @@ exports[`NavList renders with groups 1`] = `
   -ms-flex-positive: 1;
   flex-grow: 1;
   font-weight: 600;
+  word-break: break-word;
 }
 
 .c12 {
@@ -455,6 +458,7 @@ exports[`NavList renders with groups 1`] = `
   -ms-flex-positive: 1;
   flex-grow: 1;
   font-weight: 400;
+  word-break: break-word;
 }
 
 .c3 {
@@ -893,6 +897,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   -ms-flex-positive: 1;
   flex-grow: 1;
   font-weight: 400;
+  word-break: break-word;
 }
 
 .c8 {
@@ -916,6 +921,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   -ms-flex-positive: 1;
   flex-grow: 1;
   font-weight: 600;
+  word-break: break-word;
 }
 
 .c10 {
@@ -1385,6 +1391,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   -ms-flex-positive: 1;
   flex-grow: 1;
   font-weight: 600;
+  word-break: break-word;
 }
 
 .c9 {

packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap

@@ -622,6 +622,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   -ms-flex-positive: 1;
   flex-grow: 1;
   font-weight: 400;
+  word-break: break-word;
 }
 
 .c9 {
@@ -1426,6 +1427,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   -ms-flex-positive: 1;
   flex-grow: 1;
   font-weight: 400;
+  word-break: break-word;
 }
 
 .c0 {
@@ -2132,6 +2134,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   -ms-flex-positive: 1;
   flex-grow: 1;
   font-weight: 400;
+  word-break: break-word;
 }
 
 .c9 {
@@ -2937,6 +2940,7 @@ exports[`snapshots renders a single select input 1`] = `
   -ms-flex-positive: 1;
   flex-grow: 1;
   font-weight: 400;
+  word-break: break-word;
 }
 
 .c0 {
@@ -3403,6 +3407,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
   -ms-flex-positive: 1;
   flex-grow: 1;
   font-weight: 400;
+  word-break: break-word;
 }
 
 .c0 {