From 8ede15e727a6bb3ead7f2bbea541c9e460c01ec5 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Fri, 15 Aug 2025 13:12:29 -0500 Subject: [PATCH 1/5] refactor(Avatar): remove support for sx prop --- packages/react/src/Avatar/Avatar.stories.tsx | 6 ------ packages/react/src/Avatar/Avatar.test.tsx | 10 ---------- packages/react/src/Avatar/Avatar.tsx | 11 +++-------- packages/styled-react/src/index.ts | 6 ++++++ 4 files changed, 9 insertions(+), 24 deletions(-) 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..49af15dc791 100644 --- a/packages/react/src/Avatar/Avatar.test.tsx +++ b/packages/react/src/Avatar/Avatar.test.tsx @@ -31,16 +31,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/index.ts b/packages/styled-react/src/index.ts index c41a1a9bded..fada440b09f 100644 --- a/packages/styled-react/src/index.ts +++ b/packages/styled-react/src/index.ts @@ -1,3 +1,9 @@ +import {Avatar as PrimerAvatar} from '@primer/react' +import {createStyledComponent} from './utils/createStyledComponent' + +const Avatar = /*#__PURE__*/ createStyledComponent(PrimerAvatar) + +export {Avatar} export { ActionList, ActionMenu, From 81727881e8d037a4bc80847a69b3480b6a6c113f Mon Sep 17 00:00:00 2001 From: Josh Black Date: Fri, 15 Aug 2025 13:13:16 -0500 Subject: [PATCH 2/5] chore: add changeset --- .changeset/seven-cameras-act.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/seven-cameras-act.md 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 From 3c0ddba1b5d30678f6a038ef67765f89da0b773a Mon Sep 17 00:00:00 2001 From: Josh Black Date: Fri, 15 Aug 2025 13:20:34 -0500 Subject: [PATCH 3/5] chore: update exports --- .../src/__tests__/__snapshots__/exports.test.ts.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap index fd2e5a7925a..b7853fcdf58 100644 --- a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -2,6 +2,7 @@ exports[`@primer/styled-react exports 1`] = ` [ + "Avatar", "ActionList", "ActionMenu", "Box", From 59bf3d7c6e5d22fc0c2cc54a7b996645da033b0d Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 21 Aug 2025 11:57:55 -0500 Subject: [PATCH 4/5] chore: fix eslint warnings --- packages/react/src/Avatar/Avatar.test.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react/src/Avatar/Avatar.test.tsx b/packages/react/src/Avatar/Avatar.test.tsx index 49af15dc791..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', () => { From 56d9f19c35f37fb1aad639cc65663569e4e7d50c Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 17 Sep 2025 15:45:11 -0500 Subject: [PATCH 5/5] chore: update snapshots --- .../src/__tests__/__snapshots__/exports.test.ts.snap | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap index c7c20b5ace6..fbb4eb59ca8 100644 --- a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -2,7 +2,6 @@ exports[`@primer/styled-react exports 1`] = ` [ - "Avatar", "ActionList", "ActionMenu", "Autocomplete",