From f628bb1319da3a7bfc5a656d9f15f982d8d0333a Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Thu, 11 Sep 2025 10:00:06 -0400 Subject: [PATCH 1/5] Remove `sx` --- packages/react/src/ProgressBar/ProgressBar.tsx | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx index c0b0975f8a7..4f6f9a117ee 100644 --- a/packages/react/src/ProgressBar/ProgressBar.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.tsx @@ -1,8 +1,6 @@ import React, {forwardRef} from 'react' -import type {SxProp} from '../sx' import {clsx} from 'clsx' import classes from './ProgressBar.module.css' -import {BoxWithFallback} from '../internal/components/BoxWithFallback' type ProgressProp = { className?: string @@ -14,13 +12,12 @@ type StyledProgressContainerProps = { inline?: boolean barSize?: 'small' | 'default' | 'large' animated?: boolean -} & SxProp +} export type ProgressBarItemProps = React.HTMLAttributes & { 'aria-label'?: string className?: string -} & ProgressProp & - SxProp +} & ProgressProp export const Item = forwardRef( ( @@ -56,14 +53,12 @@ export const Item = forwardRef( (bgType && `var(--bgColor-${bgType[0]}-${bgType[1] || 'emphasis'})`) || 'var(--bgColor-success-emphasis)' return ( - @@ -105,8 +100,7 @@ export const ProgressBar = forwardRef( const validChildren = React.Children.toArray(children).length return ( - ( bg={bg} /> )} - + ) }, ) From 4c0245ce1d8ac15ee5079c98b76f186f2305963e Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Thu, 11 Sep 2025 10:02:35 -0400 Subject: [PATCH 2/5] Add changeset --- .changeset/three-vans-join.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/three-vans-join.md diff --git a/.changeset/three-vans-join.md b/.changeset/three-vans-join.md new file mode 100644 index 00000000000..09fc482ae1b --- /dev/null +++ b/.changeset/three-vans-join.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Update ProgressBar to no longer support sx From c4d2df1ed8b43bf405ba9b1aa21e5572cedd924d Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Thu, 11 Sep 2025 10:16:22 -0400 Subject: [PATCH 3/5] Remove `sx` from `styled-react` --- .../src/__tests__/primer-react.browser.test.tsx | 10 ---------- packages/styled-react/src/index.tsx | 1 - 2 files changed, 11 deletions(-) diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx index 7909455e5ae..eb44b392b1b 100644 --- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx +++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx @@ -297,16 +297,6 @@ describe('@primer/react', () => { expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)') }) - test('ProgressBar supports `sx` prop', () => { - const {container} = render() - expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)') - }) - - test('ProgressBar.Item supports `sx` prop', () => { - const {container} = render() - expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)') - }) - test('RadioGroup supports `sx` prop', () => { const {container} = render( diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index bb1405345f0..2d3f5202236 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -93,7 +93,6 @@ export { PageHeader, PageLayout, Popover, - ProgressBar, RadioGroup, RelativeTime, SegmentedControl, From 04a4b8de4182feadadd9996bc53285ca32f1263b Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Thu, 11 Sep 2025 10:24:34 -0400 Subject: [PATCH 4/5] More lint/test fixes --- .../src/__tests__/__snapshots__/exports.test.ts.snap | 1 - .../styled-react/src/__tests__/primer-react.browser.test.tsx | 1 - 2 files changed, 2 deletions(-) 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 e1bf1906e1e..295b0b6ba09 100644 --- a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -29,7 +29,6 @@ exports[`@primer/styled-react exports 1`] = ` "PageHeader", "PageLayout", "Popover", - "ProgressBar", "RadioGroup", "RelativeTime", "SegmentedControl", diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx index eb44b392b1b..975198f187a 100644 --- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx +++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx @@ -28,7 +28,6 @@ import { PageHeader, PageLayout, Popover, - ProgressBar, RadioGroup, RelativeTime, SegmentedControl, From 4988f6e2ecc39ea5016d17a59588f6ff1c75705b Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 15 Sep 2025 15:05:05 -0400 Subject: [PATCH 5/5] Fix merge --- .../src/__tests__/__snapshots__/exports.test.ts.snap | 1 - .../src/__tests__/primer-react.browser.test.tsx | 11 ----------- packages/styled-react/src/index.tsx | 1 - 3 files changed, 13 deletions(-) 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 295b0b6ba09..3cef707a5e0 100644 --- a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -28,7 +28,6 @@ exports[`@primer/styled-react exports 1`] = ` "Overlay", "PageHeader", "PageLayout", - "Popover", "RadioGroup", "RelativeTime", "SegmentedControl", diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx index 44e981f25e1..ab95baeada7 100644 --- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx +++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx @@ -27,7 +27,6 @@ import { Overlay, PageHeader, PageLayout, - Popover, RadioGroup, RelativeTime, SegmentedControl, @@ -286,16 +285,6 @@ describe('@primer/react', () => { expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)') }) - test('Popover supports `sx` prop', () => { - const {container} = render() - expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)') - }) - - test('Popover.Content supports `sx` prop', () => { - const {container} = render() - expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)') - }) - test('RadioGroup supports `sx` prop', () => { const {container} = render( diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 1de728f8ae9..495e7a778f5 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -132,7 +132,6 @@ export { Overlay, PageHeader, PageLayout, - Popover, RadioGroup, RelativeTime, Spinner,