Skip to content

CircleBadge: deprecate the CircleBadge component #6706

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Sep 4, 2025
Merged

CircleBadge: deprecate the CircleBadge component #6706

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
9eb5770
Add `CircleBadge` to deprecated exports
TylerJDev Sep 2, 2025
6fb0697
Deprecate the component
TylerJDev Sep 2, 2025
983a648
Fix import
TylerJDev Sep 2, 2025
a7a1a6b
Merge branch 'main' into tylerjdev/deprecate-circle-badge
TylerJDev Sep 2, 2025
f6dbb04
Remove from `styled-react`
TylerJDev Sep 2, 2025
284473d
Merge branch 'main' into tylerjdev/deprecate-circle-badge
TylerJDev Sep 2, 2025
5690393
Add changeset, update tests
TylerJDev Sep 2, 2025
d92d357
Address feedback
TylerJDev Sep 3, 2025
a477a91
Move back to default entrypoint
TylerJDev Sep 4, 2025
90c52d1
Update tests
TylerJDev Sep 4, 2025
388b7f4
Add back to `styled-react`
TylerJDev Sep 4, 2025
76ba319
Update snap tests
TylerJDev Sep 4, 2025
1d6f536
Cleanup
TylerJDev Sep 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/orange-taxis-rhyme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': major
---

Deprecate CircleBadge component
4 changes: 2 additions & 2 deletions e2e/components/CircleBadge.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/CircleBadge/CircleBadge.docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"id": "circle_badge",
"name": "CircleBadge",
"status": "alpha",
"status": "deprecated",
"a11yReviewed": "2025-01-08",
"stories": [],
"importPath": "@primer/react",
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/CircleBadge/CircleBadge.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/CircleBadge/CircleBadge.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
8 changes: 8 additions & 0 deletions packages/react/src/CircleBadge/CircleBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.)
*/
Copy link
Preview

Copilot AI Sep 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's an extra closing parenthesis at the end of the deprecation message. It should end with 'and customized styling.' instead of 'and customized styling.)'.

Copilot uses AI. Check for mistakes.

const CircleBadge = styled.div<StyledCircleBadgeProps>`
display: ${({inline = false}) => (inline ? 'inline-flex' : 'flex')};
align-items: center;
Expand All @@ -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.)
*/
Copy link
Preview

Copilot AI Sep 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's an extra closing parenthesis at the end of the deprecation message. It should end with 'and customized styling.' instead of 'and customized styling.)'.

Copilot uses AI. Check for mistakes.

const CircleBadgeIcon = styled(Octicon)`
height: auto;
max-width: 60%;
Expand Down
6 changes: 3 additions & 3 deletions packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
`;
6 changes: 3 additions & 3 deletions packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions packages/react/src/deprecated/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
2 changes: 0 additions & 2 deletions packages/react/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
1 change: 0 additions & 1 deletion packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ exports[`@primer/styled-react exports 1`] = `
"Button",
"Checkbox",
"CheckboxGroup",
"CircleBadge",
"CounterLabel",
"Details",
"Dialog",
Expand Down
1 change: 0 additions & 1 deletion packages/styled-react/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export {
Button,
Checkbox,
CheckboxGroup,
CircleBadge,
CounterLabel,
Details,
Dialog,
Expand Down
Loading