Skip to content

Commit

Permalink
Add missing wide CSS + className to Stack (#4957)
Browse files Browse the repository at this point in the history
* add missing css + classname

* Create fuzzy-jobs-deny.md
  • Loading branch information
langermank committed Sep 13, 2024
1 parent 4d3b504 commit 6874b89
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/fuzzy-jobs-deny.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Add missing `wide` CSS + className to Stack
8 changes: 8 additions & 0 deletions packages/react/src/Stack/Stack.docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand All @@ -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"
}
]
}
Expand Down
15 changes: 14 additions & 1 deletion packages/react/src/Stack/Stack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
`

Expand Down Expand Up @@ -342,6 +350,7 @@ type StackProps<As> = React.PropsWithChildren<{
* @default none
*/
padding?: Padding
className?: string
}>

function Stack<As extends ElementType>({
Expand All @@ -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'
Expand All @@ -361,6 +371,7 @@ function Stack<As extends ElementType>({
<StyledStack
{...rest}
as={BaseComponent}
className={className}
{...getResponsiveAttributes('gap', gap)}
{...getResponsiveAttributes('direction', direction)}
{...getResponsiveAttributes('align', align)}
Expand Down Expand Up @@ -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>
)
Expand Down

0 comments on commit 6874b89

Please sign in to comment.