diff --git a/.changeset/cruel-papers-film.md b/.changeset/cruel-papers-film.md new file mode 100644 index 00000000000..e6da111a72b --- /dev/null +++ b/.changeset/cruel-papers-film.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +CircleOcticon: Remove component `CircleOcticon` diff --git a/e2e/components/CircleOcticon.test.ts b/e2e/components/CircleOcticon.test.ts deleted file mode 100644 index 6731530fc65..00000000000 --- a/e2e/components/CircleOcticon.test.ts +++ /dev/null @@ -1,36 +0,0 @@ -import {test, expect} from '@playwright/test' -import {visit} from '../test-helpers/storybook' -import {themes} from '../test-helpers/themes' - -const stories = [ - { - title: 'Default', - id: 'deprecated-components-circleocticon--default', - }, - { - title: 'Playground', - id: 'deprecated-components-circleocticon--playground', - }, -] as const - -test.describe('CircleOcticon', () => { - for (const story of stories) { - test.describe(story.title, () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - }, - }) - - // Default state - await expect(page).toHaveScreenshot(`CircleOcticon.${story.title}.${theme}.png`) - }) - }) - } - }) - } -}) diff --git a/packages/react/src/CircleOcticon/CircleOcticon.docs.json b/packages/react/src/CircleOcticon/CircleOcticon.docs.json deleted file mode 100644 index b176822d2f5..00000000000 --- a/packages/react/src/CircleOcticon/CircleOcticon.docs.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "id": "circle_octicon", - "name": "CircleOcticon", - "status": "deprecated", - "a11yReviewed": "2025-01-08", - "stories": [], - "importPath": "@primer/react", - "props": [ - { - "name": "icon", - "type": "Octicon" - }, - { - "name": "size", - "defaultValue": "32", - "type": "number", - "description": "Set the width and height of the icon in pixels." - }, - { - "name": "sx", - "type": "SystemStyleObject", - "deprecated": true - } - ], - "subcomponents": [] -} diff --git a/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx b/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx deleted file mode 100644 index 78e0cd773a5..00000000000 --- a/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import type {Meta, StoryFn} from '@storybook/react-vite' -import CircleOcticon from './CircleOcticon' -import type {CircleOcticonProps} from './CircleOcticon' -import {CheckIcon} from '@primer/octicons-react' -// eslint-disable-next-line import/no-namespace -import * as Icons from '@primer/octicons-react' - -const meta: Meta = { - title: 'Deprecated/Components/CircleOcticon', - component: CircleOcticon, -} -export default meta - -export const Default = () => ( - -) - -type PlaygroundTypes = Omit & {icon: keyof typeof Icons} -export const Playground: StoryFn = ({ - icon: iconName, - 'aria-label': ariaLabel = 'Changes approved', - ...args -}) => - -Playground.args = { - size: 32, - icon: 'CheckIcon', - 'aria-label': undefined, - sx: {backgroundColor: 'success.emphasis', color: 'fg.onEmphasis'}, -} - -Playground.argTypes = { - size: { - controls: { - type: 'number', - }, - }, - icon: { - control: { - type: 'select', - }, - options: Object.keys(Icons), - }, - 'aria-label': { - type: 'string', - }, - sx: { - controls: false, - }, -} diff --git a/packages/react/src/CircleOcticon/CircleOcticon.test.tsx b/packages/react/src/CircleOcticon/CircleOcticon.test.tsx deleted file mode 100644 index f6e59ec1505..00000000000 --- a/packages/react/src/CircleOcticon/CircleOcticon.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import {CheckIcon} from '@primer/octicons-react' -import CircleOcticon from '../CircleOcticon' -import {render as HTMLRender} from '@testing-library/react' -import {describe, expect, it} from 'vitest' - -describe('CircleOcticon', () => { - it('renders a
with the correct size', () => { - const {container} = HTMLRender() - const element = container.firstChild as HTMLElement - const computedStyle = window.getComputedStyle(element) - expect(computedStyle.getPropertyValue('width')).toBe('10px') - expect(computedStyle.getPropertyValue('height')).toBe('10px') - }) - - it('has a default size of 32px', () => { - const {container} = HTMLRender() - const element = container.firstChild as HTMLElement - const computedStyle = window.getComputedStyle(element) - expect(computedStyle.getPropertyValue('width')).toBe('32px') - expect(computedStyle.getPropertyValue('height')).toBe('32px') - }) -}) diff --git a/packages/react/src/CircleOcticon/CircleOcticon.tsx b/packages/react/src/CircleOcticon/CircleOcticon.tsx deleted file mode 100644 index d82a9220976..00000000000 --- a/packages/react/src/CircleOcticon/CircleOcticon.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import type {IconProps} from '@primer/octicons-react' -import type React from 'react' -import type {BoxProps} from '../Box' -import Box from '../Box' - -export type CircleOcticonProps = { - as?: React.ElementType - size?: number - icon: React.ComponentType> -} & BoxProps - -/** - * @deprecated This component is deprecated. Replace component with specific icon imports from `@primer/octicons-react` and customized styling.) - */ -function CircleOcticon(props: CircleOcticonProps) { - const {size = 32, as, icon: IconComponent, bg, 'aria-label': ariaLabel, ...rest} = props - return ( - - - - - - ) -} - -export default CircleOcticon diff --git a/packages/react/src/CircleOcticon/index.ts b/packages/react/src/CircleOcticon/index.ts deleted file mode 100644 index e3e77695425..00000000000 --- a/packages/react/src/CircleOcticon/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {default} from './CircleOcticon' -export type {CircleOcticonProps} from './CircleOcticon' diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap index 2c0c7705df4..c7db44a1990 100644 --- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -53,8 +53,6 @@ exports[`@primer/react > should not update exports without a semver change 1`] = "CircleBadge", "type CircleBadgeIconProps", "type CircleBadgeProps", - "CircleOcticon", - "type CircleOcticonProps", "ConfirmationDialog", "type ConfirmationDialogProps", "CounterLabel", diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 8c77de86d3f..a1e066b265d 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -82,8 +82,6 @@ export type {BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbProps, Breadcrumb export {default as ButtonGroup} from './ButtonGroup' export type {ButtonGroupProps} from './ButtonGroup' export type {CircleBadgeProps, CircleBadgeIconProps} from './CircleBadge' -export {default as CircleOcticon} from './CircleOcticon' -export type {CircleOcticonProps} from './CircleOcticon' export {default as CheckboxGroup} from './CheckboxGroup' export {default as CircleBadge} from './CircleBadge' export {default as CounterLabel} from './CounterLabel' 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 b4c0bcfd038..5d5a48659fd 100644 --- a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -13,7 +13,6 @@ exports[`@primer/styled-react exports 1`] = ` "Checkbox", "CheckboxGroup", "CircleBadge", - "CircleOcticon", "CounterLabel", "Details", "Dialog", diff --git a/packages/styled-react/src/index.ts b/packages/styled-react/src/index.ts index 3f2f0ef90e7..51a650d73b1 100644 --- a/packages/styled-react/src/index.ts +++ b/packages/styled-react/src/index.ts @@ -15,7 +15,6 @@ export { Checkbox, CheckboxGroup, CircleBadge, - CircleOcticon, CounterLabel, Details, Dialog, diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index 82437e82c14..fc80d76ddce 100755 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -339,21 +339,6 @@ const components = new Map([ ], }, ], - [ - 'CircleOcticon', - { - stories: [ - { - id: 'components-circleocticon--default', - name: 'Default', - }, - { - id: 'components-circleocticon--playground', - name: 'Playground', - }, - ], - }, - ], [ 'CircleBadge', {