diff --git a/.changeset/orange-taxis-rhyme.md b/.changeset/orange-taxis-rhyme.md new file mode 100644 index 00000000000..2016c876771 --- /dev/null +++ b/.changeset/orange-taxis-rhyme.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Deprecate CircleBadge component diff --git a/e2e/components/CircleBadge.test.ts b/e2e/components/CircleBadge.test.ts index 2006834cab9..755dcbe24c3 100644 --- a/e2e/components/CircleBadge.test.ts +++ b/e2e/components/CircleBadge.test.ts @@ -5,11 +5,11 @@ import {themes} from '../test-helpers/themes' const stories = [ { title: 'Default', - id: 'components-circlebadge--default', + id: 'deprecated-components-circlebadge--default', }, { title: 'Playground', - id: 'components-circlebadge--playground', + id: 'deprecated-components-circlebadge--playground', }, ] as const diff --git a/packages/react/src/CircleBadge/CircleBadge.docs.json b/packages/react/src/CircleBadge/CircleBadge.docs.json index cde50f29c0a..d7e8a5bf650 100644 --- a/packages/react/src/CircleBadge/CircleBadge.docs.json +++ b/packages/react/src/CircleBadge/CircleBadge.docs.json @@ -1,7 +1,7 @@ { "id": "circle_badge", "name": "CircleBadge", - "status": "alpha", + "status": "deprecated", "a11yReviewed": "2025-01-08", "stories": [], "importPath": "@primer/react", diff --git a/packages/react/src/CircleBadge/CircleBadge.stories.tsx b/packages/react/src/CircleBadge/CircleBadge.stories.tsx index 9fc6faa6ed6..5b7eebc760a 100644 --- a/packages/react/src/CircleBadge/CircleBadge.stories.tsx +++ b/packages/react/src/CircleBadge/CircleBadge.stories.tsx @@ -3,7 +3,7 @@ import CircleBadge from './CircleBadge' import {ZapIcon} from '@primer/octicons-react' const meta: Meta = { - title: 'Components/CircleBadge', + title: 'Deprecated/Components/CircleBadge', component: CircleBadge, } export default meta diff --git a/packages/react/src/CircleBadge/CircleBadge.test.tsx b/packages/react/src/CircleBadge/CircleBadge.test.tsx index cbe2ffc1765..10f7d6f5c3d 100644 --- a/packages/react/src/CircleBadge/CircleBadge.test.tsx +++ b/packages/react/src/CircleBadge/CircleBadge.test.tsx @@ -1,4 +1,4 @@ -import {CircleBadge} from '..' +import CircleBadge from './CircleBadge' import {CheckIcon} from '@primer/octicons-react' import {render as HTMLRender} from '@testing-library/react' import {describe, expect, it} from 'vitest' diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx index 5a64f55b240..7f18237cd5b 100644 --- a/packages/react/src/CircleBadge/CircleBadge.tsx +++ b/packages/react/src/CircleBadge/CircleBadge.tsx @@ -36,7 +36,6 @@ const CircleBadge = styled.div` ${sizeStyles}; ${sx}; ` - const CircleBadgeIcon = styled(Octicon)` height: auto; max-width: 60%; @@ -46,5 +45,11 @@ const CircleBadgeIcon = styled(Octicon)` CircleBadgeIcon.displayName = 'CircleBadge.Icon' export type CircleBadgeProps = ComponentProps + export type CircleBadgeIconProps = ComponentProps + +/** + * @deprecated This component is deprecated. + * Replace component with specific icon imports from `@primer/octicons-react` and customized styling. + */ export default Object.assign(CircleBadge, {Icon: CircleBadgeIcon}) diff --git a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap b/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap index 58b01927bd4..259c6d89fce 100644 --- a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap +++ b/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap @@ -2,19 +2,19 @@ exports[`CircleBadge > respects the inline prop 1`] = `
`; exports[`CircleBadge > respects the variant prop 1`] = `
`; exports[`CircleBadge > uses the size prop to override the variant prop 1`] = `
`;