From 6874b89026eef5c46fb4d27e1c0fa0f08807a6bc Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Fri, 13 Sep 2024 16:57:33 -0700
Subject: [PATCH] Add missing `wide` CSS + className to Stack (#4957)

* add missing css + classname

* Create fuzzy-jobs-deny.md
---
 .changeset/fuzzy-jobs-deny.md            |  5 +++++
 packages/react/src/Stack/Stack.docs.json |  8 ++++++++
 packages/react/src/Stack/Stack.tsx       | 15 ++++++++++++++-
 3 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fuzzy-jobs-deny.md

diff --git a/.changeset/fuzzy-jobs-deny.md b/.changeset/fuzzy-jobs-deny.md
new file mode 100644
index 00000000000..4a63867dc87
--- /dev/null
+++ b/.changeset/fuzzy-jobs-deny.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add missing `wide` CSS + className to Stack
diff --git a/packages/react/src/Stack/Stack.docs.json b/packages/react/src/Stack/Stack.docs.json
index 386648b99ea..968e1143328 100644
--- a/packages/react/src/Stack/Stack.docs.json
+++ b/packages/react/src/Stack/Stack.docs.json
@@ -35,6 +35,10 @@
       "name": "padding",
       "type": "'none' | 'condensed' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'condensed' | 'normal' | 'spacious'>",
       "description": "Specify the padding of the stack container."
+    },
+    {
+      "name": "className",
+      "type": "string"
     }
   ],
   "subcomponents": [
@@ -45,6 +49,10 @@
           "name": "grow",
           "type": "boolean | ResponsiveValue<boolean>",
           "description": "Allow item to keep size or expand to fill the available space."
+        },
+        {
+          "name": "className",
+          "type": "string"
         }
       ]
     }
diff --git a/packages/react/src/Stack/Stack.tsx b/packages/react/src/Stack/Stack.tsx
index 9aafa0e11b3..6b14b52a3e8 100644
--- a/packages/react/src/Stack/Stack.tsx
+++ b/packages/react/src/Stack/Stack.tsx
@@ -281,6 +281,14 @@ const StyledStack = styled.div`
     &[data-justify-wide='space-evenly'] {
       justify-content: space-evenly;
     }
+
+    &[data-wrap-wide='wrap'] {
+      flex-wrap: wrap;
+    }
+
+    &[data-wrap-wide='nowrap'] {
+      flex-wrap: nowrap;
+    }
   }
 `
 
@@ -342,6 +350,7 @@ type StackProps<As> = React.PropsWithChildren<{
    * @default none
    */
   padding?: Padding
+  className?: string
 }>
 
 function Stack<As extends ElementType>({
@@ -353,6 +362,7 @@ function Stack<As extends ElementType>({
   justify = 'start',
   padding = 'none',
   wrap = 'nowrap',
+  className,
   ...rest
 }: StackProps<As> & React.ComponentPropsWithoutRef<ElementType extends As ? As : 'div'>) {
   const BaseComponent = as ?? 'div'
@@ -361,6 +371,7 @@ function Stack<As extends ElementType>({
     <StyledStack
       {...rest}
       as={BaseComponent}
+      className={className}
       {...getResponsiveAttributes('gap', gap)}
       {...getResponsiveAttributes('direction', direction)}
       {...getResponsiveAttributes('align', align)}
@@ -416,18 +427,20 @@ type StackItemProps<As> = React.PropsWithChildren<{
    * @default false
    */
   grow?: boolean | ResponsiveValue<boolean>
+  className?: string
 }>
 
 function StackItem<As extends ElementType>({
   as,
   children,
   grow,
+  className,
   ...rest
 }: StackItemProps<As> & React.ComponentPropsWithoutRef<ElementType extends As ? As : 'div'>) {
   const BaseComponent = as ?? 'div'
 
   return (
-    <StyledStackItem {...rest} as={BaseComponent} {...getResponsiveAttributes('grow', grow)}>
+    <StyledStackItem {...rest} as={BaseComponent} className={className} {...getResponsiveAttributes('grow', grow)}>
       {children}
     </StyledStackItem>
   )