diff --git a/.changeset/seven-cameras-act.md b/.changeset/seven-cameras-act.md new file mode 100644 index 00000000000..4210c697aa3 --- /dev/null +++ b/.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 diff --git a/packages/react/src/Avatar/Avatar.stories.tsx b/packages/react/src/Avatar/Avatar.stories.tsx index 4738dacd805..0a97a0924d3 100644 --- a/packages/react/src/Avatar/Avatar.stories.tsx +++ b/packages/react/src/Avatar/Avatar.stories.tsx @@ -62,10 +62,4 @@ Playground.argTypes = { disable: true, }, }, - sx: { - controls: false, - table: { - disable: true, - }, - }, } diff --git a/packages/react/src/Avatar/Avatar.test.tsx b/packages/react/src/Avatar/Avatar.test.tsx index 37ce09f89f4..113b656d470 100644 --- a/packages/react/src/Avatar/Avatar.test.tsx +++ b/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( - - - , - ) - const avatar = screen.getByTestId('avatar') - expect(avatar).toHaveStyle(`margin: 8px`) - }) - it('should support the `style` prop without overriding internal styles', () => { render( +} & React.ComponentPropsWithoutRef<'img'> const Avatar = React.forwardRef(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(function Avatar( } return ( - (function Avatar( } : (cssSizeVars as React.CSSProperties) } - sx={sxProp} {...rest} /> ) diff --git a/packages/styled-react/src/components/Avatar.tsx b/packages/styled-react/src/components/Avatar.tsx new file mode 100644 index 00000000000..bad340bf8bf --- /dev/null +++ b/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(function Avatar(props, ref) { + return +}) + +export {Avatar} +export type {AvatarProps} diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index da4ea253af7..5acfa15ef95 100644 --- a/packages/styled-react/src/index.tsx +++ b/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'