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 {