StackItem responsive grow bug fix (#4891)

* getting somewhere * allow true/false for object * why null tho? * fix tests * Create mighty-parrots-carry.md
primer · Aug 28, 2024 · ae00350 · ae00350
1 parent e6f7b72
commit ae00350
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 18 deletions.
diff --git a/.changeset/mighty-parrots-carry.md 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
@@ -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<As> = React.PropsWithChildren<{
 function StackItem<As extends ElementType>({
   as,
   children,
-  grow = false,
+  grow,
   ...rest
 }: StackItemProps<As> & React.ComponentPropsWithoutRef<ElementType extends As ? As : 'div'>) {
   const BaseComponent = as ?? 'div'

diff --git a/packages/react/src/Stack/__tests__/StackItem.test.tsx b/packages/react/src/Stack/__tests__/StackItem.test.tsx
@@ -19,8 +19,8 @@ describe('StackItem', () => {
         <StackItem data-testid="grow-false" />
       </Stack>,
     )
-    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', () => {
         <StackItem data-testid="responsive-grow" grow={{narrow: true, regular: false, wide: true}} />
       </Stack>,
     )
-    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
@@ -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
@@ -36,12 +36,5 @@ export function getResponsiveAttributes<T>(
 }
 
 function serialize<T>(property: string, value: T) {
-  if (typeof value === 'boolean') {
-    if (value) {
-      return [property, '']
-    }
-    return []
-  }
-
   return [property, value]
 }