From 1718efb04f3cab0f1cd8de24b1d555e69e1394e4 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 3 Apr 2026 20:44:18 +0000 Subject: [PATCH 1/2] refactor: remove deprecated styled components (ActionMenu, CounterLabel, Overlay) --- .../__snapshots__/exports.test.ts.snap | 3 -- .../__tests__/primer-react.browser.test.tsx | 48 ------------------- .../src/components/ActionMenu.tsx | 28 ----------- .../src/components/CounterLabel.tsx | 10 ---- .../styled-react/src/components/Overlay.tsx | 15 ------ packages/styled-react/src/index.tsx | 30 ------------ 6 files changed, 134 deletions(-) delete mode 100644 packages/styled-react/src/components/ActionMenu.tsx delete mode 100644 packages/styled-react/src/components/CounterLabel.tsx delete mode 100644 packages/styled-react/src/components/Overlay.tsx 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 b820f78df42..baeafab81f5 100644 --- a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -3,13 +3,11 @@ exports[`@primer/styled-react exports 1`] = ` [ "ActionList", - "ActionMenu", "BaseStyles", "Box", "Breadcrumb", "Breadcrumbs", "Button", - "CounterLabel", "Dialog", "Flash", "FormControl", @@ -20,7 +18,6 @@ exports[`@primer/styled-react exports 1`] = ` "Link", "LinkButton", "merge", - "Overlay", "PageHeader", "SegmentedControl", "Spinner", 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 6008918c033..63650a61765 100644 --- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx +++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx @@ -1,14 +1,10 @@ -import {userEvent} from '@testing-library/user-event' import {render, screen} from '@testing-library/react' -import {createRef} from 'react' import {describe, expect, test} from 'vitest' import { ActionList, - ActionMenu, Box, Breadcrumbs, Button, - CounterLabel, Dialog, Flash, FormControl, @@ -18,13 +14,11 @@ import { Label, Link, LinkButton, - Overlay, PageHeader, SegmentedControl, Spinner, Text, TextInput, - ThemeProvider, Timeline, Token, Tooltip, @@ -39,24 +33,6 @@ describe('@primer/react', () => { expect(screen.getByTestId('component')).toHaveAttribute('data-variant', 'inset') }) - test('ActionMenu.Overlay supports `sx` prop', async () => { - const user = userEvent.setup() - render( - - - test - - test - - - , - ) - - await user.click(screen.getByText('test')) - - expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') - }) - test('Box supports `sx` prop', () => { render() expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') @@ -79,11 +55,6 @@ describe('@primer/react', () => { expect(screen.getByTestId('component')).toHaveAttribute('data-size', 'medium') }) - test('CounterLabel supports `sx` prop', () => { - render() - expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') - }) - test('Dialog supports `sx` prop', () => { render( {}} />) expect(window.getComputedStyle(screen.getByRole('dialog')).backgroundColor).toBe('rgb(255, 0, 0)') @@ -178,25 +149,6 @@ describe('@primer/react', () => { expect(screen.getByTestId('component')).toHaveAttribute('icon') }) - test('Overlay supports `sx` prop', () => { - const ref = createRef() - render( - - {}} - onEscape={() => {}} - returnFocusRef={ref} - role="dialog" - /> - , - ) - expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') - expect(screen.getByTestId('component')).toHaveAttribute('role', 'dialog') - }) - test('PageHeader supports `sx` prop', () => { const {container} = render() expect(container.firstElementChild!).toHaveAttribute('role', 'article') diff --git a/packages/styled-react/src/components/ActionMenu.tsx b/packages/styled-react/src/components/ActionMenu.tsx deleted file mode 100644 index 982de42f990..00000000000 --- a/packages/styled-react/src/components/ActionMenu.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import {ActionMenu as PrimerActionMenu, type SlotMarker} from '@primer/react' -import {sx, type SxProp} from '../sx' -import styled from 'styled-components' -import type {ComponentProps} from 'react' - -type ActionMenuOverlayProps = ComponentProps & SxProp - -const ActionMenuOverlay: React.ComponentType & SlotMarker = styled( - PrimerActionMenu.Overlay, -).withConfig({ - shouldForwardProp: prop => (prop as keyof ActionMenuOverlayProps) !== 'sx', -})` - ${sx} -` - -export const ActionMenu: typeof PrimerActionMenu & { - Button: typeof PrimerActionMenu.Button - Anchor: typeof PrimerActionMenu.Anchor - Overlay: typeof ActionMenuOverlay - Divider: typeof PrimerActionMenu.Divider -} = Object.assign(PrimerActionMenu, { - Button: PrimerActionMenu.Button, - Anchor: PrimerActionMenu.Anchor, - Overlay: ActionMenuOverlay, - Divider: PrimerActionMenu.Divider, -}) - -ActionMenuOverlay.__SLOT__ = PrimerActionMenu.Overlay.__SLOT__ diff --git a/packages/styled-react/src/components/CounterLabel.tsx b/packages/styled-react/src/components/CounterLabel.tsx deleted file mode 100644 index ec07906fa56..00000000000 --- a/packages/styled-react/src/components/CounterLabel.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import {CounterLabel as PrimerCounterLabel, type CounterLabelProps as PrimerCounterLabelProps} from '@primer/react' -import {Box} from './Box' -import {forwardRef} from 'react' -import {type SxProp} from '../sx' - -export type CounterLabelProps = PrimerCounterLabelProps & SxProp - -export const CounterLabel = forwardRef(function CounterLabel(props, ref) { - return -}) diff --git a/packages/styled-react/src/components/Overlay.tsx b/packages/styled-react/src/components/Overlay.tsx deleted file mode 100644 index 8dfeb9407f7..00000000000 --- a/packages/styled-react/src/components/Overlay.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import {Overlay as PrimerOverlay, type OverlayProps as PrimerOverlayProps} from '@primer/react' -import styled from 'styled-components' -import {type ForwardRefComponent} from '../polymorphic' -import {sx, type SxProp} from '../sx' - -type OverlayProps = PrimerOverlayProps & SxProp - -const Overlay: ForwardRefComponent<'div', OverlayProps> = styled(PrimerOverlay).withConfig({ - shouldForwardProp: prop => (prop as keyof OverlayProps) !== 'sx', -})` - ${sx} -` - -export {Overlay} -export type {OverlayProps} diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 67d0ad3d6f8..d644482b329 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -127,14 +127,6 @@ export { type ActionListTrailingActionProps, } from './components/ActionList' -export { - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - ActionMenu, -} from './components/ActionMenu' - export { /** * @deprecated Usage of the `sx` prop with this component is no longer @@ -175,20 +167,6 @@ export { type ButtonComponentProps as ButtonProps, } from './components/Button' -export { - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - CounterLabel, - - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - type CounterLabelProps, -} from './components/CounterLabel' - export { /** * @deprecated Usage of the `sx` prop with this component is no longer @@ -303,14 +281,6 @@ export { type LinkButtonProps, } from './components/LinkButton' -export { - /** - * @deprecated Usage of the `sx` prop with this component is no longer - * supported. Use the component from `@primer/react` with CSS Modules instead. - */ - Overlay, -} from './components/Overlay' - export { /** * @deprecated Usage of the `sx` prop with this component is no longer From cc9deef45211f33df856a4bbb6696930c3f6b6bf Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 3 Apr 2026 13:46:02 -0700 Subject: [PATCH 2/2] Remove unused components from styled-react package Remove Overlay, CounterLabel, and ActionMenu from styled-react package --- .changeset/rotten-radios-check.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rotten-radios-check.md diff --git a/.changeset/rotten-radios-check.md b/.changeset/rotten-radios-check.md new file mode 100644 index 00000000000..77864bdfe13 --- /dev/null +++ b/.changeset/rotten-radios-check.md @@ -0,0 +1,5 @@ +--- +"@primer/styled-react": patch +--- + +Remove Overlay, CounterLabel, and ActionMenu from styled-react package