Stack: Add shrink prop to Stack.Item

.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>