Skip to content

Commit

Permalink
feat(AvatarStack): Add support for className prop (#5097)
Browse files Browse the repository at this point in the history
* add support for className prop in the avatar stack

* add changelog

* fix className location
  • Loading branch information
randall-krauskopf authored Oct 10, 2024
1 parent be58fff commit 2a3c473
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 7 deletions.
5 changes: 5 additions & 0 deletions .changeset/angry-brooms-knock.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': minor
---

Added className prop to the AvatarStack component
25 changes: 18 additions & 7 deletions packages/react/src/AvatarStack/AvatarStack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -183,17 +183,28 @@ export type AvatarStackProps = {
alignRight?: boolean
disableExpand?: boolean
size?: number | ResponsiveValue<number>
className?: string
children: React.ReactNode
} & SxProp

const AvatarStack = ({children, alignRight, disableExpand, size, sx: sxProp = defaultSxProp}: AvatarStackProps) => {
const AvatarStack = ({
children,
alignRight,
disableExpand,
size,
className,
sx: sxProp = defaultSxProp,
}: AvatarStackProps) => {
const count = React.Children.count(children)
const wrapperClassNames = clsx({
'pc-AvatarStack--two': count === 2,
'pc-AvatarStack--three': count === 3,
'pc-AvatarStack--three-plus': count > 3,
'pc-AvatarStack--right': alignRight,
})
const wrapperClassNames = clsx(
{
'pc-AvatarStack--two': count === 2,
'pc-AvatarStack--three': count === 3,
'pc-AvatarStack--three-plus': count > 3,
'pc-AvatarStack--right': alignRight,
},
className,
)
const bodyClassNames = clsx('pc-AvatarStackBody', {
'pc-AvatarStack--disableExpand': disableExpand,
})
Expand Down

0 comments on commit 2a3c473

Please sign in to comment.