Skip to content

Commit 2a3c473

Browse files
feat(AvatarStack): Add support for className prop (#5097)
* add support for className prop in the avatar stack * add changelog * fix className location
1 parent be58fff commit 2a3c473

File tree

2 files changed

+23
-7
lines changed

2 files changed

+23
-7
lines changed

.changeset/angry-brooms-knock.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': minor
3+
---
4+
5+
Added className prop to the AvatarStack component

packages/react/src/AvatarStack/AvatarStack.tsx

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -183,17 +183,28 @@ export type AvatarStackProps = {
183183
alignRight?: boolean
184184
disableExpand?: boolean
185185
size?: number | ResponsiveValue<number>
186+
className?: string
186187
children: React.ReactNode
187188
} & SxProp
188189

189-
const AvatarStack = ({children, alignRight, disableExpand, size, sx: sxProp = defaultSxProp}: AvatarStackProps) => {
190+
const AvatarStack = ({
191+
children,
192+
alignRight,
193+
disableExpand,
194+
size,
195+
className,
196+
sx: sxProp = defaultSxProp,
197+
}: AvatarStackProps) => {
190198
const count = React.Children.count(children)
191-
const wrapperClassNames = clsx({
192-
'pc-AvatarStack--two': count === 2,
193-
'pc-AvatarStack--three': count === 3,
194-
'pc-AvatarStack--three-plus': count > 3,
195-
'pc-AvatarStack--right': alignRight,
196-
})
199+
const wrapperClassNames = clsx(
200+
{
201+
'pc-AvatarStack--two': count === 2,
202+
'pc-AvatarStack--three': count === 3,
203+
'pc-AvatarStack--three-plus': count > 3,
204+
'pc-AvatarStack--right': alignRight,
205+
},
206+
className,
207+
)
197208
const bodyClassNames = clsx('pc-AvatarStackBody', {
198209
'pc-AvatarStack--disableExpand': disableExpand,
199210
})

0 commit comments

Comments
 (0)