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", "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 = React.PropsWithChildren<{ * @default none */ padding?: Padding + className?: string }> function Stack({ @@ -353,6 +362,7 @@ function Stack({ justify = 'start', padding = 'none', wrap = 'nowrap', + className, ...rest }: StackProps & React.ComponentPropsWithoutRef) { const BaseComponent = as ?? 'div' @@ -361,6 +371,7 @@ function Stack({ = React.PropsWithChildren<{ * @default false */ grow?: boolean | ResponsiveValue + className?: string }> function StackItem({ as, children, grow, + className, ...rest }: StackItemProps & React.ComponentPropsWithoutRef) { const BaseComponent = as ?? 'div' return ( - + {children} )