refactor(Avatar): remove support for sx prop (#6611)

Co-authored-by: Marie Lucca <francinelucca@github.com>

Author: joshblack

.changeset/seven-cameras-act.md

@@ -0,0 +1,6 @@
+---
+'@primer/react': major
+'@primer/styled-react': minor
+---
+
+Update Avatar component to no longer support sx, add sx wrapper to @primer/styled-react

packages/react/src/Avatar/Avatar.stories.tsx

@@ -62,10 +62,4 @@ Playground.argTypes = {
       disable: true,
     },
   },
-  sx: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
 }

packages/react/src/Avatar/Avatar.test.tsx

@@ -1,8 +1,6 @@
 import {describe, expect, it} from 'vitest'
 import {render, screen} from '@testing-library/react'
-import {Avatar} from '..'
-import {ThemeProvider} from '../ThemeProvider'
-import theme from '../theme'
+import Avatar from '../Avatar'
 
 describe('Avatar', () => {
   it('should support `className` on the outermost element', () => {
@@ -31,16 +29,6 @@ describe('Avatar', () => {
     expect(avatar).toHaveAttribute('src', 'primer.png')
   })
 
-  it('respects margin props', () => {
-    render(
-      <ThemeProvider theme={theme}>
-        <Avatar src="primer.png" alt="" sx={{m: 2}} data-testid="avatar" />
-      </ThemeProvider>,
-    )
-    const avatar = screen.getByTestId('avatar')
-    expect(avatar).toHaveStyle(`margin: 8px`)
-  })
-
   it('should support the `style` prop without overriding internal styles', () => {
     render(
       <Avatar

packages/react/src/Avatar/Avatar.tsx

@@ -1,9 +1,7 @@
 import {clsx} from 'clsx'
 import React from 'react'
-import type {SxProp} from '../sx'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {isResponsiveValue} from '../hooks/useResponsiveValue'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 import classes from './Avatar.module.css'
 
 export const DEFAULT_AVATAR_SIZE = 20
@@ -19,11 +17,10 @@ export type AvatarProps = {
   alt?: string
   /** Additional class name. */
   className?: string
-} & SxProp &
-  React.ComponentPropsWithoutRef<'img'>
+} & React.ComponentPropsWithoutRef<'img'>
 
 const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(function Avatar(
-  {alt = '', size = DEFAULT_AVATAR_SIZE, square = false, sx: sxProp, className, style, ...rest},
+  {alt = '', size = DEFAULT_AVATAR_SIZE, square = false, className, style, ...rest},
   ref,
 ) {
   const isResponsive = isResponsiveValue(size)
@@ -38,8 +35,7 @@ const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(function Avatar(
   }
 
   return (
-    <BoxWithFallback
-      as="img"
+    <img
       data-component="Avatar"
       className={clsx(className, classes.Avatar)}
       ref={ref}
@@ -56,7 +52,6 @@ const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(function Avatar(
             }
           : (cssSizeVars as React.CSSProperties)
       }
-      sx={sxProp}
       {...rest}
     />
   )

packages/styled-react/src/components/Avatar.tsx

@@ -0,0 +1,12 @@
+import {type AvatarProps as PrimerAvatarProps, Avatar as PrimerAvatar} from '@primer/react'
+import {forwardRef} from 'react'
+import type {StyledProps} from '../styled-props'
+import {Box} from './Box'
+
+type AvatarProps = PrimerAvatarProps & StyledProps
+const Avatar = forwardRef<HTMLImageElement, AvatarProps>(function Avatar(props, ref) {
+  return <Box as={PrimerAvatar} ref={ref} {...props} />
+})
+
+export {Avatar}
+export type {AvatarProps}

packages/styled-react/src/index.tsx

@@ -1,5 +1,4 @@
 export {ActionList} from '@primer/react'
-export {Avatar} from '@primer/react'
 export {Box, type BoxProps} from './components/Box'
 export {Button} from '@primer/react'
 export {Details} from '@primer/react'
@@ -21,6 +20,7 @@ export {useTheme} from '@primer/react'
 
 export {ActionMenu} from './components/ActionMenu'
 export {Autocomplete, type AutocompleteOverlayProps} from './components/Autocomplete'
+export {Avatar, type AvatarProps} from './components/Avatar'
 export {Breadcrumbs, Breadcrumb, type BreadcrumbsProps, type BreadcrumbsItemProps} from './components/Breadcrumbs'
 export {Checkbox, type CheckboxProps} from './components/Checkbox'
 export {CheckboxGroup, type CheckboxGroupProps} from './components/CheckboxGroup'