From 2773369cfbd4003d7bd87baa6e6a04e6f43f7cdb Mon Sep 17 00:00:00 2001 From: Randall Krauskopf Date: Wed, 9 Oct 2024 14:45:27 -0500 Subject: [PATCH 1/3] add support for className prop in the avatar stack --- .../react/src/AvatarStack/AvatarStack.tsx | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index 24667bbb69c..95e4449b7f9 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -183,10 +183,18 @@ export type AvatarStackProps = { alignRight?: boolean disableExpand?: boolean size?: number | ResponsiveValue + 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, @@ -194,9 +202,13 @@ const AvatarStack = ({children, alignRight, disableExpand, size, sx: sxProp = de 'pc-AvatarStack--three-plus': count > 3, 'pc-AvatarStack--right': alignRight, }) - const bodyClassNames = clsx('pc-AvatarStackBody', { - 'pc-AvatarStack--disableExpand': disableExpand, - }) + const bodyClassNames = clsx( + 'pc-AvatarStackBody', + { + 'pc-AvatarStack--disableExpand': disableExpand, + }, + className, + ) const getAvatarChildSizes = () => { const avatarSizeMap: Record = { From c186ab67a2062b96caf91c17e1bd46f1e26cf793 Mon Sep 17 00:00:00 2001 From: Randall Krauskopf Date: Wed, 9 Oct 2024 15:22:10 -0500 Subject: [PATCH 2/3] add changelog --- .changeset/angry-brooms-knock.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/angry-brooms-knock.md diff --git a/.changeset/angry-brooms-knock.md b/.changeset/angry-brooms-knock.md new file mode 100644 index 00000000000..87df637cb1c --- /dev/null +++ b/.changeset/angry-brooms-knock.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Added className prop to the AvatarStack component From c9dd0e01d125d0dead5754db8130f754dbbadcce Mon Sep 17 00:00:00 2001 From: Randall Krauskopf Date: Wed, 9 Oct 2024 15:42:10 -0500 Subject: [PATCH 3/3] fix className location --- packages/react/src/AvatarStack/AvatarStack.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index 95e4449b7f9..f07615f7214 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -196,19 +196,18 @@ const AvatarStack = ({ 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 bodyClassNames = clsx( - 'pc-AvatarStackBody', + const wrapperClassNames = clsx( { - 'pc-AvatarStack--disableExpand': disableExpand, + '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, + }) const getAvatarChildSizes = () => { const avatarSizeMap: Record = {