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 {