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

* feat(AvatarStack): add style prop

* add test

---------

Co-authored-by: Jon Rohan <yes@jonrohan.codes>

Author: hussam-i-am

.changeset/nervous-planets-kneel.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+feat(AvatarStack): add style prop

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

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')
+  })
 })