Stack: Add shrink prop to Stack.Item (#6260)

Author: adierkens

.changeset/good-bars-see.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Stack.Item: add support for `shrink` prop

packages/react/src/Stack/Stack.docs.json

@@ -50,6 +50,11 @@
           "type": "boolean | ResponsiveValue<boolean>",
           "description": "Allow item to keep size or expand to fill the available space."
         },
+        {
+          "name": "shrink",
+          "type": "boolean | ResponsiveValue<boolean>",
+          "description": "Allow item to keep size or shrink to fit the available space."
+        },
         {
           "name": "className",
           "type": "string"

packages/react/src/Stack/Stack.features.stories.tsx

@@ -0,0 +1,25 @@
+import type {Meta} from '@storybook/react-vite'
+import {Stack} from '../Stack'
+import {ShieldLockIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Components/Stack/Features',
+  component: Stack,
+} as Meta<typeof Stack>
+
+export const ShrinkingStackItems = () => (
+  <div style={{maxWidth: '200px', padding: 'var(--base-size-8)'}}>
+    <Stack direction="horizontal" gap="condensed">
+      <Stack.Item shrink={false}>
+        <ShieldLockIcon size="small" />
+      </Stack.Item>
+      <Stack.Item>This stack has the leading icon set to prevent shrinking</Stack.Item>
+    </Stack>
+    <Stack direction="horizontal" gap="condensed">
+      <Stack.Item shrink={true}>
+        <ShieldLockIcon size="small" />
+      </Stack.Item>
+      <Stack.Item>This stack item does not have the icon set to prevent shrinking</Stack.Item>
+    </Stack>
+  </div>
+)

packages/react/src/Stack/Stack.module.css

@@ -296,6 +296,11 @@
   flex: 0 1 auto;
   min-inline-size: 0;
 
+  &[data-shrink='false'],
+  &[data-shrink-narrow='false'] {
+    flex-shrink: 0;
+  }
+
   &[data-grow='true'],
   &[data-grow-narrow='true'] {
     flex-grow: 1;
@@ -309,6 +314,14 @@
     &[data-grow-regular='false'] {
       flex-grow: 0;
     }
+
+    &[data-shrink-regular='true'] {
+      flex-shrink: 1;
+    }
+
+    &[data-shrink-regular='false'] {
+      flex-shrink: 0;
+    }
   }
 
   @media (--viewportRange-wide) {
@@ -319,5 +332,13 @@
     &[data-grow-wide='false'] {
       flex-grow: 0;
     }
+
+    &[data-shrink-wide='true'] {
+      flex-shrink: 1;
+    }
+
+    &[data-shrink-wide='false'] {
+      flex-shrink: 0;
+    }
   }
 }

packages/react/src/Stack/Stack.stories.tsx

@@ -1,6 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react-vite'
 import {Stack} from '../Stack'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
+import type {InputType} from '@storybook/csf'
 
 type Story = StoryObj<typeof Stack>
 
@@ -468,58 +469,42 @@ export const Playground: Story = {
   },
 }
 
+function createArgMetaData(category: string): InputType {
+  return {
+    control: {
+      type: 'boolean',
+    },
+    table: {
+      category,
+      defaultValue: {
+        summary: 'true',
+      },
+    },
+  }
+}
+
 export const StackItemPlayground: Story = {
   args: {
     grow: true,
     growNarrow: true,
     growRegular: true,
     growWide: true,
+
+    shrink: true,
+    shrinkNarrow: true,
+    shrinkRegular: true,
+    shrinkWide: true,
   },
   argTypes: {
-    grow: {
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        category: 'Properties',
-        defaultValue: {
-          summary: 'true',
-        },
-      },
-    },
-    growNarrow: {
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        category: 'Narrow properties',
-        defaultValue: {
-          summary: 'true',
-        },
-      },
-    },
-    growRegular: {
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        category: 'Regular properties',
-        defaultValue: {
-          summary: 'true',
-        },
-      },
-    },
-    growWide: {
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        category: 'Wide properties',
-        defaultValue: {
-          summary: 'true',
-        },
-      },
-    },
+    grow: createArgMetaData('Properties'),
+    growNarrow: createArgMetaData('Narrow properties'),
+    growRegular: createArgMetaData('Regular properties'),
+    growWide: createArgMetaData('Wide properties'),
+
+    shrink: createArgMetaData('Properties'),
+    shrinkNarrow: createArgMetaData('Narrow properties'),
+    shrinkRegular: createArgMetaData('Regular properties'),
+    shrinkWide: createArgMetaData('Wide properties'),
   },
   render: args => {
     return (
@@ -530,6 +515,11 @@ export const StackItemPlayground: Story = {
             regular: args.growRegular,
             wide: args.growWide,
           })}
+          shrink={getControlValues(args.shrink, {
+            narrow: args.shrinkNarrow,
+            regular: args.shrinkRegular,
+            wide: args.shrinkWide,
+          })}
         >
           <div
             style={{

packages/react/src/Stack/Stack.tsx

@@ -114,17 +114,25 @@ type StackItemProps<As> = React.PropsWithChildren<{
    * @default false
    */
   grow?: boolean | ResponsiveValue<boolean>
+
+  /**
+   * Allow item to keep size or expand to fill the available space
+   * @default true
+   */
+  shrink?: boolean | ResponsiveValue<boolean>
+
   className?: string
 }>
 
-const StackItem = forwardRef(({as, children, grow, className, ...rest}, forwardedRef) => {
+const StackItem = forwardRef(({as, children, grow, shrink, className, ...rest}, forwardedRef) => {
   return (
     <BoxWithFallback
       as={as}
       ref={forwardedRef}
       {...rest}
       className={clsx(className, classes.StackItem)}
       {...getResponsiveAttributes('grow', grow)}
+      {...getResponsiveAttributes('shrink', shrink)}
     >
       {children}
     </BoxWithFallback>

packages/react/src/Stack/__tests__/StackItem.test.tsx

@@ -46,6 +46,28 @@ describe('StackItem', () => {
     expect(screen.getByTestId('responsive-grow')).toHaveAttribute('data-grow-wide', 'true')
   })
 
+  it('should support the `shrink` prop', () => {
+    render(
+      <Stack>
+        <StackItem data-testid="shrink-true" shrink={true} />
+        <StackItem data-testid="shrink-false" />
+      </Stack>,
+    )
+    expect(screen.getByTestId('shrink-true')).toHaveAttribute('data-shrink', 'true')
+    expect(screen.getByTestId('shrink-false')).not.toHaveAttribute('data-shrink', 'false')
+  })
+
+  it('should support responsive `shrink` values', () => {
+    render(
+      <Stack>
+        <StackItem data-testid="responsive-shrink" shrink={{narrow: true, regular: false, wide: true}} />
+      </Stack>,
+    )
+    expect(screen.getByTestId('responsive-shrink')).toHaveAttribute('data-shrink-narrow', 'true')
+    expect(screen.getByTestId('responsive-shrink')).toHaveAttribute('data-shrink-regular', 'false')
+    expect(screen.getByTestId('responsive-shrink')).toHaveAttribute('data-shrink-wide', 'true')
+  })
+
   it('should render a custom component with the `as` prop', () => {
     const CustomComponent = vi.fn(({children}: React.PropsWithChildren) => {
       return <div data-testid="custom-stack-item">{children}</div>