CircleBadge: deprecate the CircleBadge component

.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

@@ -26,6 +26,10 @@ const sizeStyles = ({size, variant = 'medium'}: StyledCircleBadgeProps) => {
   }
 }
 
+/**
+ * @deprecated This component is deprecated.
+ * Replace component with specific icon imports from `@primer/octicons-react` and customized styling.
+ */
 const CircleBadge = styled.div<StyledCircleBadgeProps>`
   display: ${({inline = false}) => (inline ? 'inline-flex' : 'flex')};
   align-items: center;
@@ -37,6 +41,10 @@ const CircleBadge = styled.div<StyledCircleBadgeProps>`
   ${sx};
 `
 
+/**
+ * @deprecated This component is deprecated.
+ * Replace component with specific icon imports from `@primer/octicons-react` and customized styling.
+ */
 const CircleBadgeIcon = styled(Octicon)`
   height: auto;
   max-width: 60%;

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"
 />
 `;

packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -50,9 +50,6 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "Checkbox",
   "CheckboxGroup",
   "type CheckboxProps",
-  "CircleBadge",
-  "type CircleBadgeIconProps",
-  "type CircleBadgeProps",
   "ConfirmationDialog",
   "type ConfirmationDialogProps",
   "CounterLabel",
@@ -225,6 +222,9 @@ exports[`@primer/react/deprecated > should not update exports without a semver c
   "type ActionListProps",
   "ActionMenu",
   "type ActionMenuProps",
+  "CircleBadge",
+  "type CircleBadgeIconProps",
+  "type CircleBadgeProps",
   "Dialog",
   "type DialogHeaderProps",
   "type DialogProps",

packages/react/src/deprecated/index.ts

@@ -42,3 +42,7 @@ export type {TabNavProps, TabNavLinkProps} from '../TabNav'
 export {default as Tooltip} from '../Tooltip/Tooltip'
 export type {TooltipProps} from '../Tooltip/Tooltip'
 // end of v37.0.0
+
+// Deprecated in v38.0.0
+export {default as CircleBadge} from '../CircleBadge'
+export type {CircleBadgeProps, CircleBadgeIconProps} from '../CircleBadge'

packages/react/src/index.ts

@@ -81,9 +81,7 @@ export {default as Breadcrumbs, Breadcrumb} from './Breadcrumbs'
 export type {BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbProps, BreadcrumbItemProps} from './Breadcrumbs'
 export {default as ButtonGroup} from './ButtonGroup'
 export type {ButtonGroupProps} from './ButtonGroup'
-export type {CircleBadgeProps, CircleBadgeIconProps} from './CircleBadge'
 export {default as CheckboxGroup} from './CheckboxGroup'
-export {default as CircleBadge} from './CircleBadge'
 export {default as CounterLabel} from './CounterLabel'
 export type {CounterLabelProps} from './CounterLabel'
 export {default as Details} from './Details'

packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -12,7 +12,6 @@ exports[`@primer/styled-react exports 1`] = `
   "Button",
   "Checkbox",
   "CheckboxGroup",
-  "CircleBadge",
   "CounterLabel",
   "Details",
   "Dialog",

packages/styled-react/src/index.ts

@@ -14,7 +14,6 @@ export {
   Button,
   Checkbox,
   CheckboxGroup,
-  CircleBadge,
   CounterLabel,
   Details,
   Dialog,