CircleOcticon: Deprecate component (#6542)

TylerJDev · web-flow · commit f4ded585c4f6 · 2025-08-15T15:59:38.000Z
diff --git a/.changeset/cold-teams-buy.md b/.changeset/cold-teams-buy.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+CircleOcticon: Deprecate component
diff --git a/e2e/components/CircleOcticon.test.ts b/e2e/components/CircleOcticon.test.ts
@@ -5,11 +5,11 @@ import {themes} from '../test-helpers/themes'
 const stories = [
   {
     title: 'Default',
-    id: 'components-circleocticon--default',
+    id: 'deprecated-components-circleocticon--default',
   },
   {
     title: 'Playground',
-    id: 'components-circleocticon--playground',
+    id: 'deprecated-components-circleocticon--playground',
   },
 ] as const
 
diff --git a/packages/react/src/CircleOcticon/CircleOcticon.docs.json b/packages/react/src/CircleOcticon/CircleOcticon.docs.json
@@ -1,7 +1,7 @@
 {
   "id": "circle_octicon",
   "name": "CircleOcticon",
-  "status": "alpha",
+  "status": "deprecated",
   "a11yReviewed": "2025-01-08",
   "stories": [],
   "importPath": "@primer/react",
diff --git a/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx b/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx
@@ -6,7 +6,7 @@ import {CheckIcon} from '@primer/octicons-react'
 import * as Icons from '@primer/octicons-react'
 
 const meta: Meta<typeof CircleOcticon> = {
-  title: 'Components/CircleOcticon',
+  title: 'Deprecated/Components/CircleOcticon',
   component: CircleOcticon,
 }
 export default meta
diff --git a/packages/react/src/CircleOcticon/CircleOcticon.tsx b/packages/react/src/CircleOcticon/CircleOcticon.tsx
@@ -9,6 +9,9 @@ export type CircleOcticonProps = {
   icon: React.ComponentType<React.PropsWithChildren<{size?: IconProps['size']}>>
 } & 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 (

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@primer/react': minor
 +---
++
 +CircleOcticon: Deprecate component
Original file line number	Diff line number	Diff line change
`@@ -5,11 +5,11 @@ import {themes} from '../test-helpers/themes'`
`5`	`5`	`const stories = [`
`6`	`6`	`{`
`7`	`7`	`title: 'Default',`
`8`		`- id: 'components-circleocticon--default',`
	`8`	`+ id: 'deprecated-components-circleocticon--default',`
`9`	`9`	`},`
`10`	`10`	`{`
`11`	`11`	`title: 'Playground',`
`12`		`- id: 'components-circleocticon--playground',`
	`12`	`+ id: 'deprecated-components-circleocticon--playground',`
`13`	`13`	`},`
`14`	`14`	`] as const`
`15`	`15`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"id": "circle_octicon",`
`3`	`3`	`"name": "CircleOcticon",`
`4`		`- "status": "alpha",`
	`4`	`+ "status": "deprecated",`
`5`	`5`	`"a11yReviewed": "2025-01-08",`
`6`	`6`	`"stories": [],`
`7`	`7`	`"importPath": "@primer/react",`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import {CheckIcon} from '@primer/octicons-react'`
`6`	`6`	`import * as Icons from '@primer/octicons-react'`
`7`	`7`
`8`	`8`	`const meta: Meta<typeof CircleOcticon> = {`
`9`		`- title: 'Components/CircleOcticon',`
	`9`	`+ title: 'Deprecated/Components/CircleOcticon',`
`10`	`10`	`component: CircleOcticon,`
`11`	`11`	`}`
`12`	`12`	`export default meta`