diff --git a/.changeset/pretty-pandas-serve.md b/.changeset/pretty-pandas-serve.md new file mode 100644 index 00000000000..12b689da307 --- /dev/null +++ b/.changeset/pretty-pandas-serve.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Bug fix: Add `word-break` to ActionList items diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-colorblind-linux.png index bfd551ed2ea..907aada231c 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-dimmed-linux.png index a2dfe458762..b429f1981f7 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-high-contrast-linux.png index 40ba75a7e86..124f27f54f0 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-linux.png index bfd551ed2ea..907aada231c 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-tritanopia-linux.png index bfd551ed2ea..907aada231c 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-colorblind-linux.png index eca1feb3806..b71dc1491e3 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-high-contrast-linux.png index 1131cccae0c..dcba1c523e0 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-linux.png index 62cac07dde7..b71dc1491e3 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-tritanopia-linux.png index eca1feb3806..b71dc1491e3 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-tritanopia-linux.png differ diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx index d5f52083392..a8cf67067d1 100644 --- a/packages/react/src/ActionList/ActionList.features.stories.tsx +++ b/packages/react/src/ActionList/ActionList.features.stories.tsx @@ -528,6 +528,15 @@ export const TextWrapAndTruncation = () => ( + + + + + SomethingSomething/SomethingElse.Some.Thing.Lalala.la + + + + ) diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index e7e14055d3e..f75a6e5d826 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -322,6 +322,7 @@ export const Item = React.forwardRef( flexGrow: slots.inlineDescription ? 0 : 1, fontWeight: slots.inlineDescription || slots.blockDescription || active ? 'bold' : 'normal', marginBlockEnd: slots.blockDescription ? '4px' : undefined, + wordBreak: 'break-word', }} > {childrenWithoutSlots} diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap index cf649f8693e..dd18407f2ec 100644 --- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/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 { diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 2cfb98c9dff..b8b62001e1f 100644 --- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/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 {