From c8ac8a2672bbd7e3b8e1dcb1dcf2f96291c424f9 Mon Sep 17 00:00:00 2001
From: Derrick Marcey <dmarcey@github.com>
Date: Tue, 30 Nov 2021 09:08:18 -0500
Subject: [PATCH] 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
---
 .changeset/grumpy-tomatoes-chew.md                     | 5 +++++
 src/ActionList/Item.tsx                                | 2 +-
 src/__tests__/__snapshots__/Autocomplete.test.tsx.snap | 9 +++++++++
 3 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/grumpy-tomatoes-chew.md

diff --git a/.changeset/grumpy-tomatoes-chew.md b/.changeset/grumpy-tomatoes-chew.md
new file mode 100644
index 00000000000..0b366598170
--- /dev/null
+++ 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
index 745f74b5d2a..0033cfecd46 100644
--- 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
index 50dc1652474..aac585b05f5 100644
--- 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 {