refactor(Stack): write to single custom property for gap changes (#4589)

* refactor(Stack): write to single custom property for gap changes * chore: add changeset * test: update style test * refactor(Stack): use primitive tokens directly with fallback value * test(Stack): update test with new fallback in custom property --------- Co-authored-by: Josh Black <[email protected]>
primer · May 31, 2024 · d67528c · d67528c
1 parent ac16f4e
commit d67528c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 19 deletions.
diff --git a/.changeset/silent-apricots-fly.md b/.changeset/silent-apricots-fly.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update how gap is set in Stack to work in wide breakpoints
diff --git a/packages/react/src/Stack/Stack.tsx b/packages/react/src/Stack/Stack.tsx
@@ -4,15 +4,11 @@ import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {getResponsiveAttributes} from '../internal/utils/getResponsiveAttributes'
 
 const StyledStack = styled.div`
-  --Stack-gap-whenRegular: var(--stack-gap-normal, 16px);
-  --Stack-gap-whenNarrow: var(--stack-gap-normal, 16px);
-  --Stack-gap-whenWide: var(--Stack-gap-whenRegular);
-
   display: flex;
   flex-flow: column;
   align-items: stretch;
   align-content: flex-start;
-  gap: var(--Stack-gap-whenNarrow);
+  gap: var(--stack-gap, var(--stack-gap-normal, 1rem));
 
   // non-responsive values
 
@@ -48,17 +44,22 @@ const StyledStack = styled.div`
 
   &[data-gap='none'],
   &[data-gap-narrow='none'] {
-    --Stack-gap-whenNarrow: 0;
+    --stack-gap: var(--stack-gap-none, 0);
   }
 
   &[data-gap='condensed'],
   &[data-gap-narrow='condensed'] {
-    --Stack-gap-whenNarrow: var(--stack-gap-condensed, 8px);
+    --stack-gap: var(--stack-gap-condensed, 0.5rem);
   }
 
   &[data-gap='normal'],
   &[data-gap-narrow='normal'] {
-    --Stack-gap-whenNarrow: var(--stack-gap-normal, 16px);
+    --stack-gap: var(--stack-gap-normal, 1rem);
+  }
+
+  &[data-gap='spacious'],
+  &[data-gap-narrow='spacious'] {
+    --stack-gap: var(--stack-gap-spacious, 1.5rem);
   }
 
   &[data-align='start'],
@@ -143,19 +144,19 @@ const StyledStack = styled.div`
     }
 
     &[data-gap-regular='none'] {
-      --Stack-gap-whenRegular: 0;
+      --stack-gap: var(--stack-gap-none, 0);
     }
 
     &[data-gap-regular='condensed'] {
-      --Stack-gap-whenRegular: var(--stack-gap-condensed, 8px);
+      --stack-gap: var(--stack-gap-condensed, 0.5rem);
     }
 
     &[data-gap-regular='normal'] {
-      --Stack-gap-whenRegular: var(--stack-gap-normal, 16px);
+      --stack-gap: var(--stack-gap-normal, 1rem);
     }
 
     &[data-gap-regular='spacious'] {
-      --Stack-gap-whenRegular: var(--stack-gap-spacious, 24px);
+      --stack-gap: var(--stack-gap-spacious, 1.5rem);
     }
 
     &[data-align-regular='start'] {
@@ -205,8 +206,6 @@ const StyledStack = styled.div`
 
   // @custom-media --viewportRange-wide
   @media (min-width: 87.5rem) {
-    gap: var(--Stack-gap-whenWide);
-
     &[data-padding-wide='none'] {
       padding: 0;
     }
@@ -232,19 +231,19 @@ const StyledStack = styled.div`
     }
 
     &[data-gap-wide='none'] {
-      --Stack-gap-whenWide: 0;
+      --stack-gap: var(--stack-gap-none, 0);
     }
 
     &[data-gap-wide='condensed'] {
-      --Stack-gap-whenWide: var(--stack-gap-condensed, 8px);
+      --stack-gap: var(--stack-gap-condensed, 0.5rem);
     }
 
     &[data-gap-wide='normal'] {
-      --Stack-gap-whenWide: var(--stack-gap-normal, 16px);
+      --stack-gap: var(--stack-gap-normal, 1rem);
     }
 
     &[data-gap-wide='spacious'] {
-      --Stack-gap-whenWide: var(--stack-gap-spacious, 24px);
+      --stack-gap: var(--stack-gap-spacious, 1.5rem);
     }
 
     &[data-align-wide='start'] {

diff --git a/packages/react/src/Stack/__tests__/Stack.test.tsx b/packages/react/src/Stack/__tests__/Stack.test.tsx
@@ -98,7 +98,7 @@ describe('Stack', () => {
   describe('gap', () => {
     it('should set the default gap to `normal`', () => {
       render(<Stack data-testid="stack" />)
-      expect(screen.getByTestId('stack')).toHaveStyle('gap: var(--Stack-gap-whenNarrow);')
+      expect(screen.getByTestId('stack')).toHaveStyle('gap: var(--stack-gap,var(--stack-gap-normal,1rem));')
     })
 
     it('should support specifying the stack gap with the `gap` prop', () => {