Remove Overlay, CounterLabel, and ActionMenu from styled-react package (#7728)

Author: jonrohan

.changeset/rotten-radios-check.md

@@ -0,0 +1,5 @@
+---
+"@primer/styled-react": patch
+---
+
+Remove Overlay, CounterLabel, and ActionMenu from styled-react package

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",
   "SegmentedControl",
   "Spinner",
   "sx",

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,12 +14,10 @@ import {
   Label,
   Link,
   LinkButton,
-  Overlay,
   SegmentedControl,
   Spinner,
   Text,
   TextInput,
-  ThemeProvider,
   Timeline,
   Token,
   Tooltip,
@@ -38,24 +32,6 @@ describe('@primer/react', () => {
     expect(screen.getByTestId('component')).toHaveAttribute('data-variant', 'inset')
   })
 
-  test('ActionMenu.Overlay supports `sx` prop', async () => {
-    const user = userEvent.setup()
-    render(
-      <ThemeProvider>
-        <ActionMenu>
-          <ActionMenu.Button>test</ActionMenu.Button>
-          <ActionMenu.Overlay data-testid="component" sx={{background: 'red'}}>
-            test
-          </ActionMenu.Overlay>
-        </ActionMenu>
-      </ThemeProvider>,
-    )
-
-    await user.click(screen.getByText('test'))
-
-    expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
-  })
-
   test('Box supports `sx` prop', () => {
     render(<Box as="div" data-testid="component" sx={{background: 'red'}} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
@@ -78,11 +54,6 @@ describe('@primer/react', () => {
     expect(screen.getByTestId('component')).toHaveAttribute('data-size', 'medium')
   })
 
-  test('CounterLabel supports `sx` prop', () => {
-    render(<CounterLabel data-testid="component" sx={{background: 'red'}} />)
-    expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
-  })
-
   test('Dialog supports `sx` prop', () => {
     render(<Dialog data-testid="component" sx={{background: 'red'}} onClose={() => {}} />)
     expect(window.getComputedStyle(screen.getByRole('dialog')).backgroundColor).toBe('rgb(255, 0, 0)')
@@ -177,25 +148,6 @@ describe('@primer/react', () => {
     expect(screen.getByTestId('component')).toHaveAttribute('icon')
   })
 
-  test('Overlay supports `sx` prop', () => {
-    const ref = createRef<HTMLElement>()
-    render(
-      <ThemeProvider>
-        <Overlay
-          as="div"
-          data-testid="component"
-          sx={{background: 'red'}}
-          onClickOutside={() => {}}
-          onEscape={() => {}}
-          returnFocusRef={ref}
-          role="dialog"
-        />
-      </ThemeProvider>,
-    )
-    expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
-    expect(screen.getByTestId('component')).toHaveAttribute('role', 'dialog')
-  })
-
   test('SegmentedControl supports `sx` prop', () => {
     render(<SegmentedControl data-testid="component" sx={{background: 'red'}} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')

packages/styled-react/src/components/ActionMenu.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