diff --git a/.changeset/few-mails-sing.md b/.changeset/few-mails-sing.md new file mode 100644 index 00000000000..121703bbdd3 --- /dev/null +++ b/.changeset/few-mails-sing.md @@ -0,0 +1,5 @@ +--- +"@primer/react": major +--- + +Update AvatarStack component to no longer support sx diff --git a/e2e/components/AvatarStack.test.ts b/e2e/components/AvatarStack.test.ts index 2f587c64756..c66e4bf22d7 100644 --- a/e2e/components/AvatarStack.test.ts +++ b/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', diff --git a/packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx b/packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx index ba45f2391a6..9cb6e1c6073 100644 --- a/packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx @@ -8,20 +8,6 @@ export default { component: AvatarStack, } as Meta -export const SxProp = () => ( - - - - - - -) - export const WithLinkWrappers = () => ( diff --git a/packages/react/src/AvatarStack/AvatarStack.docs.json b/packages/react/src/AvatarStack/AvatarStack.docs.json index aa3527f06df..f9d40605ca8 100644 --- a/packages/react/src/AvatarStack/AvatarStack.docs.json +++ b/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": [] diff --git a/packages/react/src/AvatarStack/AvatarStack.stories.tsx b/packages/react/src/AvatarStack/AvatarStack.stories.tsx index b209c7ea61f..bfb32a7fed0 100644 --- a/packages/react/src/AvatarStack/AvatarStack.stories.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.stories.tsx @@ -58,10 +58,4 @@ Playground.argTypes = { type: 'number', }, }, - sx: { - controls: false, - table: { - disable: true, - }, - }, } diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index 7c1288f5399..6ad04ffb750 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/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(false) const stackContainer = useRef(null) @@ -180,7 +178,6 @@ const AvatarStack = ({ classes.AvatarStack, )} style={{...getResponsiveAvatarSizeStyles(), ...style}} - sx={sxProp} >