feat(AvatarStack): add style prop (#5608)

* feat(AvatarStack): add style prop * add test --------- Co-authored-by: Jon Rohan <[email protected]>
primer · Jan 28, 2025 · 3a41430 · 3a41430
1 parent 1614755
commit 3a41430
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/.changeset/nervous-planets-kneel.md b/.changeset/nervous-planets-kneel.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+feat(AvatarStack): add style prop
diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx
@@ -208,6 +208,7 @@ export type AvatarStackProps = {
   size?: number | ResponsiveValue<number>
   className?: string
   children: React.ReactNode
+  style?: React.CSSProperties
 } & SxProp
 
 const AvatarStackBody = ({
@@ -254,6 +255,7 @@ const AvatarStack = ({
   disableExpand,
   size,
   className,
+  style,
   sx: sxProp = defaultSxProp,
 }: AvatarStackProps) => {
   const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
@@ -382,7 +384,7 @@ const AvatarStack = ({
       data-align-right={enabled && alignRight ? '' : undefined}
       data-responsive={enabled && (!size || isResponsiveValue(size)) ? '' : undefined}
       className={clsx(wrapperClassNames, {[classes.AvatarStack]: enabled})}
-      style={enabled ? getResponsiveAvatarSizeStyles() : undefined}
+      style={enabled ? {...getResponsiveAvatarSizeStyles(), style} : style}
       sx={avatarStackSx}
     >
       <AvatarStackBody

diff --git a/packages/react/src/__tests__/AvatarStack.test.tsx b/packages/react/src/__tests__/AvatarStack.test.tsx
@@ -93,4 +93,15 @@ describe('Avatar', () => {
     )
     expect(container.querySelector('[tabindex="0"]')).not.toBeInTheDocument()
   })
+
+  it('should support `style` prop on the outermost element', () => {
+    const style = {backgroundColor: 'red'}
+    const {container} = HTMLRender(
+      <AvatarStack style={style}>
+        <img src="https://avatars.githubusercontent.com/primer" alt="" />
+        <img src="https://avatars.githubusercontent.com/github" alt="" />
+      </AvatarStack>,
+    )
+    expect(container.firstChild).toHaveStyle('background-color: red')
+  })
 })