Add word-break to ActionList (#4331)

* add word-break * add test for break-word * Create pretty-pandas-serve.md * test(vrt): update snapshots * updates jest snapshots --------- Co-authored-by: langermank <langermank@users.noreply.github.com> Co-authored-by: Mike Perrotti <mperrotti@github.com>
primer · Apr 15, 2024 · 77846c4 · 77846c4
1 parent a215b06
commit 77846c4
Show file tree

Hide file tree

Showing 14 changed files with 27 additions and 0 deletions.
diff --git a/.changeset/pretty-pandas-serve.md b/.changeset/pretty-pandas-serve.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: Add `word-break` to ActionList items
diff --git a/...test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-colorblind-linux.png b/...test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-colorblind-linux.png
diff --git a/...ist.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-dimmed-linux.png b/...ist.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-dimmed-linux.png
diff --git a/...t.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-high-contrast-linux.png b/...t.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-high-contrast-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-linux.png b/...ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-linux.png
diff --git a/...test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-tritanopia-linux.png b/...test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-tritanopia-linux.png
diff --git a/...est.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-colorblind-linux.png b/...est.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-colorblind-linux.png
diff --git a/....ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-high-contrast-linux.png b/....ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-high-contrast-linux.png
diff --git a/...ctionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-linux.png b/...ctionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-linux.png
diff --git a/...est.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-tritanopia-linux.png b/...est.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-tritanopia-linux.png
diff --git 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 = () => (
           <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>
 )

diff --git a/packages/react/src/ActionList/Item.tsx b/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}

diff --git 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
@@ -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 {