Remove min-width on leading visuals + add to Selection in ActionList

.changeset/tiny-fireants-deny.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Remove `min-width` on leading visuals in ActionList

packages/react/src/ActionList/Selection.tsx

@@ -31,7 +31,9 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se
 
   if (selectionVariant === 'single' || listRole === 'menu') {
     return (
-      <LeadingVisualContainer data-component="ActionList.Selection">{selected && <CheckIcon />}</LeadingVisualContainer>
+      <LeadingVisualContainer data-component="ActionList.Selection" sx={{minWidth: '16px'}}>
+        {selected && <CheckIcon />}
+      </LeadingVisualContainer>
     )
   }
 
@@ -61,7 +63,7 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se
   }
 
   return (
-    <LeadingVisualContainer data-component="ActionList.Selection">
+    <LeadingVisualContainer data-component="ActionList.Selection" sx={{minWidth: '16px'}}>
       <Box
         sx={{
           borderColor: selected ? 'accent.fg' : 'neutral.emphasis',

packages/react/src/ActionList/Visuals.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import {AlertIcon} from '@primer/octicons-react'
 import Box from '../Box'
 import Spinner from '../Spinner'
-import {get} from '../constants'
 import type {SxProp} from '../sx'
 import {merge} from '../sx'
 import {ItemContext, TEXT_ROW_HEIGHT, getVariantStyles} from './shared'
@@ -17,7 +16,6 @@ export const LeadingVisualContainer: React.FC<React.PropsWithChildren<VisualProp
       sx={merge(
         {
           height: TEXT_ROW_HEIGHT, // match height of text row
-          minWidth: get('space.3'),
           maxWidth: TEXT_ROW_HEIGHT, // square (same as height)
           display: 'flex',
           justifyContent: 'center',

packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap

@@ -888,7 +888,6 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   </span>,
   .c5 {
   height: 20px;
-  min-width: 16px;
   max-width: 20px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -907,6 +906,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   flex-shrink: 0;
   margin-right: 8px;
   color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  min-width: 16px;
 }
 
 .c6 {
@@ -974,7 +974,6 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 .c9 {
   height: 20px;
-  min-width: 16px;
   max-width: 20px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1839,7 +1838,6 @@ exports[`snapshots renders a multiselect input 1`] = `
   </span>,
   .c4 {
   height: 20px;
-  min-width: 16px;
   max-width: 20px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1858,6 +1856,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   flex-shrink: 0;
   margin-right: 8px;
   color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  min-width: 16px;
 }
 
 .c5 {
@@ -2692,7 +2691,6 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   </span>,
   .c4 {
   height: 20px;
-  min-width: 16px;
   max-width: 20px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2711,6 +2709,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   flex-shrink: 0;
   margin-right: 8px;
   color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  min-width: 16px;
 }
 
 .c5 {
@@ -3705,7 +3704,6 @@ exports[`snapshots renders a single select input 1`] = `
   </span>,
   .c4 {
   height: 20px;
-  min-width: 16px;
   max-width: 20px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3724,6 +3722,7 @@ exports[`snapshots renders a single select input 1`] = `
   flex-shrink: 0;
   margin-right: 8px;
   color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  min-width: 16px;
 }
 
 .c5 {
@@ -4199,7 +4198,6 @@ exports[`snapshots renders with a custom text input component 1`] = `
   />,
   .c4 {
   height: 20px;
-  min-width: 16px;
   max-width: 20px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4218,6 +4216,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
   flex-shrink: 0;
   margin-right: 8px;
   color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
+  min-width: 16px;
 }
 
 .c5 {