CircleBadge: deprecate the CircleBadge component (#6706)

Author: TylerJDev

.changeset/orange-taxis-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Deprecate CircleBadge component

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
 

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",

packages/react/src/CircleBadge/CircleBadge.stories.tsx

@@ -3,7 +3,7 @@ import CircleBadge from './CircleBadge'
 import {ZapIcon} from '@primer/octicons-react'
 
 const meta: Meta<typeof CircleBadge> = {
-  title: 'Components/CircleBadge',
+  title: 'Deprecated/Components/CircleBadge',
   component: CircleBadge,
 }
 export default meta

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'

packages/react/src/CircleBadge/CircleBadge.tsx

@@ -36,7 +36,6 @@ const CircleBadge = styled.div<StyledCircleBadgeProps>`
   ${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<typeof CircleBadge>
+
 export type CircleBadgeIconProps = ComponentProps<typeof CircleBadgeIcon>
+
+/**
+ * @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})

packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap

@@ -2,19 +2,19 @@
 
 exports[`CircleBadge > respects the inline prop 1`] = `
 <div
-  class="sc-gsFSXq sZiDv"
+  class="sc-gEvEer lNPvJ"
 />
 `;
 
 exports[`CircleBadge > respects the variant prop 1`] = `
 <div
-  class="sc-gsFSXq bQLtXz"
+  class="sc-gEvEer irZoQl"
 />
 `;
 
 exports[`CircleBadge > uses the size prop to override the variant prop 1`] = `
 <div
-  class="sc-gsFSXq fMmXtr"
+  class="sc-gEvEer ceBMXF"
   size="20"
 />
 `;