Move flex-shrink: 0 to BaseVisualContainer. (#1596)

* Move `flex-shrink: 0` to `BaseVisualContainer`. This is to address a bug where in a single-select action menu, if an item wraps, it will become misaligned with other items in the list. * Added changeset * Updated test snapshots
primer · Dec 19, 2021 · c8ac8a2 · c8ac8a2
1 parent 0a053b2
commit c8ac8a2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/.changeset/grumpy-tomatoes-chew.md b/.changeset/grumpy-tomatoes-chew.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Fix alignment of items in ActionList (single-select) if some of the items have wrapping text.
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -275,6 +275,7 @@ const BaseVisualContainer = styled.div<{variant?: ItemProps['variant']; disabled
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-shrink: 0;
 `
 
 const ColoredVisualContainer = styled(BaseVisualContainer)`
@@ -285,7 +286,6 @@ const ColoredVisualContainer = styled(BaseVisualContainer)`
 `
 
 const LeadingVisualContainer = styled(ColoredVisualContainer)`
-  flex-shrink: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;

diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -468,6 +468,9 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .c10 {
@@ -1375,6 +1378,9 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .c6 rect {
@@ -2192,6 +2198,9 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .c10 rect {