From d67528c6440c55383bdf739786c611d77018f719 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Wed, 22 May 2024 15:20:09 -0500
Subject: [PATCH] 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 <joshblack@users.noreply.github.com>
---
 .changeset/silent-apricots-fly.md             |  5 +++
 packages/react/src/Stack/Stack.tsx            | 35 +++++++++----------
 .../react/src/Stack/__tests__/Stack.test.tsx  |  2 +-
 3 files changed, 23 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/silent-apricots-fly.md

diff --git a/.changeset/silent-apricots-fly.md b/.changeset/silent-apricots-fly.md
new file mode 100644
index 00000000000..e5516655b6e
--- /dev/null
+++ 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
index 273112d3c3a..a9c19f4bba1 100644
--- 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
index d4a361aeca5..e4cca6c27d0 100644
--- 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', () => {