diff --git a/.changeset/mighty-parrots-carry.md b/.changeset/mighty-parrots-carry.md new file mode 100644 index 00000000000..b0f46539559 --- /dev/null +++ b/.changeset/mighty-parrots-carry.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +`StackItem` responsive grow bug fix diff --git a/packages/react/src/Stack/Stack.tsx b/packages/react/src/Stack/Stack.tsx index a9c19f4bba1..9aafa0e11b3 100644 --- a/packages/react/src/Stack/Stack.tsx +++ b/packages/react/src/Stack/Stack.tsx @@ -377,23 +377,31 @@ const StyledStackItem = styled.div` flex: 0 1 auto; min-inline-size: 0; - &[data-grow], - &[data-grow-narrow] { + &[data-grow='true'], + &[data-grow-narrow='true'] { flex-grow: 1; } // @custom-media --veiwportRange-regular @media (min-width: 48rem) { - &[data-grow-regular] { + &[data-grow-regular='true'] { flex-grow: 1; } + + &[data-grow-regular='false'] { + flex-grow: 0; + } } // @custom-media --viewportRange-wide @media (min-width: 87.5rem) { - &[data-grow-wide] { + &[data-grow-wide='true'] { flex-grow: 1; } + + &[data-grow-wide='false'] { + flex-grow: 0; + } } ` @@ -413,7 +421,7 @@ type StackItemProps = React.PropsWithChildren<{ function StackItem({ as, children, - grow = false, + grow, ...rest }: StackItemProps & React.ComponentPropsWithoutRef) { const BaseComponent = as ?? 'div' diff --git a/packages/react/src/Stack/__tests__/StackItem.test.tsx b/packages/react/src/Stack/__tests__/StackItem.test.tsx index a2b13a7feb7..4daa252d46b 100644 --- a/packages/react/src/Stack/__tests__/StackItem.test.tsx +++ b/packages/react/src/Stack/__tests__/StackItem.test.tsx @@ -19,8 +19,8 @@ describe('StackItem', () => { , ) - expect(screen.getByTestId('grow-true')).toHaveAttribute('data-grow', '') - expect(screen.getByTestId('grow-false')).not.toHaveAttribute('data-grow') + expect(screen.getByTestId('grow-true')).toHaveAttribute('data-grow', 'true') + expect(screen.getByTestId('grow-false')).not.toHaveAttribute('data-grow', 'false') }) it('should support responsive `grow` values', () => { @@ -29,9 +29,9 @@ describe('StackItem', () => { , ) - expect(screen.getByTestId('responsive-grow')).toHaveAttribute('data-grow-narrow', '') - expect(screen.getByTestId('responsive-grow')).not.toHaveAttribute('data-grow-regular') - expect(screen.getByTestId('responsive-grow')).toHaveAttribute('data-grow-wide', '') + expect(screen.getByTestId('responsive-grow')).toHaveAttribute('data-grow-narrow', 'true') + expect(screen.getByTestId('responsive-grow')).toHaveAttribute('data-grow-regular', 'false') + expect(screen.getByTestId('responsive-grow')).toHaveAttribute('data-grow-wide', 'true') }) it('should render a custom component with the `as` prop', () => { diff --git a/packages/react/src/internal/utils/__tests__/getResponsiveAttributes.test.ts b/packages/react/src/internal/utils/__tests__/getResponsiveAttributes.test.ts index 768644bb903..95e6888bfc8 100644 --- a/packages/react/src/internal/utils/__tests__/getResponsiveAttributes.test.ts +++ b/packages/react/src/internal/utils/__tests__/getResponsiveAttributes.test.ts @@ -14,7 +14,7 @@ describe('getResponsiveAttributes', () => { test('property with boolean value', () => { expect(getResponsiveAttributes('grow', true)).toMatchObject({ - 'data-grow': '', + 'data-grow': true, }) expect(getResponsiveAttributes('grow', false)).toMatchObject({}) diff --git a/packages/react/src/internal/utils/getResponsiveAttributes.ts b/packages/react/src/internal/utils/getResponsiveAttributes.ts index 9d7955de188..6089dfe913e 100644 --- a/packages/react/src/internal/utils/getResponsiveAttributes.ts +++ b/packages/react/src/internal/utils/getResponsiveAttributes.ts @@ -36,12 +36,5 @@ export function getResponsiveAttributes( } function serialize(property: string, value: T) { - if (typeof value === 'boolean') { - if (value) { - return [property, ''] - } - return [] - } - return [property, value] }