Remove support for sx from AvatarStack component (#6652)

Co-authored-by: Pavithra Kodmad <[email protected]>

Author: llastflowers

.changeset/few-mails-sing.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Update AvatarStack component to no longer support sx

e2e/components/AvatarStack.test.ts

@@ -39,10 +39,6 @@ const stories: Array<{title: string; id: string}> = [
     title: 'Custom Size On Children Responsive',
     id: 'components-avatarstack-features--custom-size-on-children-responsive',
   },
-  {
-    title: 'SX Prop',
-    id: 'components-avatarstack-dev--sx-prop',
-  },
   {
     title: 'With Link Wrappers',
     id: 'components-avatarstack-dev--with-link-wrappers',

packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx

@@ -8,20 +8,6 @@ export default {
   component: AvatarStack,
 } as Meta<typeof AvatarStack>
 
-export const SxProp = () => (
-  <AvatarStack
-    alignRight
-    sx={{
-      backgroundColor: 'red',
-    }}
-  >
-    <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
-    <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
-    <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
-    <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
-  </AvatarStack>
-)
-
 export const WithLinkWrappers = () => (
   <AvatarStack>
     <Link aria-label="Primer is assigned" href="#" className="pc-AvatarItem" data-hovercard-url="/primer">

packages/react/src/AvatarStack/AvatarStack.docs.json

@@ -63,11 +63,6 @@
       "type": "string",
       "description": "Class name for custom styling.",
       "defaultValue": ""
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []

packages/react/src/AvatarStack/AvatarStack.stories.tsx

@@ -58,10 +58,4 @@ Playground.argTypes = {
       type: 'number',
     },
   },
-  sx: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
 }

packages/react/src/AvatarStack/AvatarStack.tsx

@@ -1,6 +1,5 @@
 import {clsx} from 'clsx'
 import React, {useEffect, useRef, useState} from 'react'
-import type {SxProp} from '../sx'
 import type {AvatarProps} from '../Avatar/Avatar'
 import {DEFAULT_AVATAR_SIZE} from '../Avatar/Avatar'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
@@ -30,7 +29,7 @@ export type AvatarStackProps = {
   className?: string
   children: React.ReactNode
   style?: React.CSSProperties
-} & SxProp
+}
 
 const AvatarStackBody = ({
   disableExpand,
@@ -69,7 +68,6 @@ const AvatarStack = ({
   size,
   className,
   style,
-  sx: sxProp,
 }: AvatarStackProps) => {
   const [hasInteractiveChildren, setHasInteractiveChildren] = useState<boolean | undefined>(false)
   const stackContainer = useRef<HTMLDivElement>(null)
@@ -180,7 +178,6 @@ const AvatarStack = ({
         classes.AvatarStack,
       )}
       style={{...getResponsiveAvatarSizeStyles(), ...style}}
-      sx={sxProp}
     >
       <AvatarStackBody
         disableExpand={disableExpand}