From 6005cc570bdf799293b46682cbb76a314ebeea1c Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Tue, 26 Aug 2025 14:26:28 -0400 Subject: [PATCH 1/2] Remove `CircleBadge` --- e2e/components/CircleBadge.test.ts | 36 ------------ .../src/CircleBadge/CircleBadge.docs.json | 58 ------------------- .../src/CircleBadge/CircleBadge.stories.tsx | 51 ---------------- .../src/CircleBadge/CircleBadge.test.tsx | 48 --------------- .../react/src/CircleBadge/CircleBadge.tsx | 50 ---------------- .../CircleBadge/CircleBadge.types.test.tsx | 10 ---- .../__snapshots__/CircleBadge.test.tsx.snap | 20 ------- packages/react/src/CircleBadge/index.ts | 2 - .../__snapshots__/exports.test.ts.snap | 3 - packages/react/src/index.ts | 2 - .../__snapshots__/exports.test.ts.snap | 1 - packages/styled-react/src/index.ts | 1 - script/generate-e2e-tests.js | 15 ----- 13 files changed, 297 deletions(-) delete mode 100644 e2e/components/CircleBadge.test.ts delete mode 100644 packages/react/src/CircleBadge/CircleBadge.docs.json delete mode 100644 packages/react/src/CircleBadge/CircleBadge.stories.tsx delete mode 100644 packages/react/src/CircleBadge/CircleBadge.test.tsx delete mode 100644 packages/react/src/CircleBadge/CircleBadge.tsx delete mode 100644 packages/react/src/CircleBadge/CircleBadge.types.test.tsx delete mode 100644 packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap delete mode 100644 packages/react/src/CircleBadge/index.ts diff --git a/e2e/components/CircleBadge.test.ts b/e2e/components/CircleBadge.test.ts deleted file mode 100644 index 2006834cab9..00000000000 --- a/e2e/components/CircleBadge.test.ts +++ /dev/null @@ -1,36 +0,0 @@ -import {test, expect} from '@playwright/test' -import {visit} from '../test-helpers/storybook' -import {themes} from '../test-helpers/themes' - -const stories = [ - { - title: 'Default', - id: 'components-circlebadge--default', - }, - { - title: 'Playground', - id: 'components-circlebadge--playground', - }, -] as const - -test.describe('CircleBadge', () => { - for (const story of stories) { - test.describe(story.title, () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - }, - }) - - // Default state - await expect(page).toHaveScreenshot(`CircleBadge.${story.title}.${theme}.png`) - }) - }) - } - }) - } -}) diff --git a/packages/react/src/CircleBadge/CircleBadge.docs.json b/packages/react/src/CircleBadge/CircleBadge.docs.json deleted file mode 100644 index cde50f29c0a..00000000000 --- a/packages/react/src/CircleBadge/CircleBadge.docs.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "id": "circle_badge", - "name": "CircleBadge", - "status": "alpha", - "a11yReviewed": "2025-01-08", - "stories": [], - "importPath": "@primer/react", - "props": [ - { - "name": "variant", - "type": "'small' | 'medium' | 'large'", - "defaultValue": "'medium'", - "description": "Creates a smaller or larger badge. Has no effect if the `size` prop is set" - }, - { - "name": "size", - "type": "number", - "defaultValue": "", - "description": "Sets the size of the badge in pixels. Overrides the `variant` prop when set" - }, - { - "name": "inline", - "type": "boolean", - "defaultValue": "false", - "description": "Styles the badge to `display: inline`" - }, - { - "name": "ref", - "type": "React.RefObject" - }, - { - "name": "as", - "type": "React.ElementType", - "defaultValue": "\"div\"" - }, - { - "name": "sx", - "type": "SystemStyleObject", - "deprecated": true - } - ], - "subcomponents": [ - { - "name": "CircleBadge.Icon", - "props": [ - { - "name": "as", - "type": "React.ElementType", - "defaultValue": "Octicon" - } - ], - "passthrough": { - "element": "Octicon", - "url": "/Octicon" - } - } - ] -} diff --git a/packages/react/src/CircleBadge/CircleBadge.stories.tsx b/packages/react/src/CircleBadge/CircleBadge.stories.tsx deleted file mode 100644 index 9fc6faa6ed6..00000000000 --- a/packages/react/src/CircleBadge/CircleBadge.stories.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import type {Meta, StoryFn} from '@storybook/react-vite' -import CircleBadge from './CircleBadge' -import {ZapIcon} from '@primer/octicons-react' - -const meta: Meta = { - title: 'Components/CircleBadge', - component: CircleBadge, -} -export default meta - -export const Default = () => ( - - - -) - -export const Playground: StoryFn = ({'CircleBadge.Icon aria-label': iconAriaLabel, args}) => ( - - - -) - -Playground.args = { - variant: 'medium', - size: null, - inline: false, - as: 'div', - 'CircleBadge.Icon aria-label': undefined, -} - -Playground.argTypes = { - variant: { - control: { - type: 'radio', - }, - options: ['small', 'medium', 'large'], - }, - size: { - control: { - type: 'number', - }, - }, - inline: { - control: { - type: 'boolean', - }, - }, - 'CircleBadge.Icon aria-label': { - type: 'string', - }, -} diff --git a/packages/react/src/CircleBadge/CircleBadge.test.tsx b/packages/react/src/CircleBadge/CircleBadge.test.tsx deleted file mode 100644 index cbe2ffc1765..00000000000 --- a/packages/react/src/CircleBadge/CircleBadge.test.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import {CircleBadge} from '..' -import {CheckIcon} from '@primer/octicons-react' -import {render as HTMLRender} from '@testing-library/react' -import {describe, expect, it} from 'vitest' - -const imgInput = Example - -describe('CircleBadge', () => { - it('respects the inline prop', () => { - const {container} = HTMLRender() - expect(container.firstChild).toMatchSnapshot() - }) - - it('respects the variant prop', () => { - const {container} = HTMLRender() - expect(container.firstChild).toMatchSnapshot() - }) - - it('uses the size prop to override the variant prop', () => { - const {container} = HTMLRender() - expect(container.firstChild).toMatchSnapshot() - }) - - it('applies title', () => { - const {container} = HTMLRender( - - {imgInput} - , - ) - expect(container.firstChild).toHaveAttribute('title', 'primer logo') - }) - - it('preserves child class names', () => { - const {getByRole} = HTMLRender( - - Example - , - ) - expect(getByRole('img')).toHaveClass('primer') - }) - - describe('CircleBadge.Icon', () => { - it('renders an icon', () => { - const {container} = HTMLRender() - expect(container.firstChild).toBeInTheDocument() - }) - }) -}) diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx deleted file mode 100644 index 5a64f55b240..00000000000 --- a/packages/react/src/CircleBadge/CircleBadge.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import styled from 'styled-components' -import {get} from '../constants' -import Octicon from '../Octicon' -import type {SxProp} from '../sx' -import sx from '../sx' -import isNumeric from '../utils/isNumeric' -import type {ComponentProps} from '../utils/types' - -const variantSizes = { - small: 56, - medium: 96, - large: 128, -} - -type StyledCircleBadgeProps = { - inline?: boolean - variant?: keyof typeof variantSizes - size?: number -} & SxProp - -const sizeStyles = ({size, variant = 'medium'}: StyledCircleBadgeProps) => { - const calc = isNumeric(size) ? size : variantSizes[variant] - return { - width: calc, - height: calc, - } -} - -const CircleBadge = styled.div` - display: ${({inline = false}) => (inline ? 'inline-flex' : 'flex')}; - align-items: center; - justify-content: center; - background-color: ${get('colors.canvas.default')}; - border-radius: 50%; - box-shadow: ${get('shadows.shadow.medium')}; - ${sizeStyles}; - ${sx}; -` - -const CircleBadgeIcon = styled(Octicon)` - height: auto; - max-width: 60%; - max-height: 55%; -` - -CircleBadgeIcon.displayName = 'CircleBadge.Icon' - -export type CircleBadgeProps = ComponentProps -export type CircleBadgeIconProps = ComponentProps -export default Object.assign(CircleBadge, {Icon: CircleBadgeIcon}) diff --git a/packages/react/src/CircleBadge/CircleBadge.types.test.tsx b/packages/react/src/CircleBadge/CircleBadge.types.test.tsx deleted file mode 100644 index 4b453044b1a..00000000000 --- a/packages/react/src/CircleBadge/CircleBadge.types.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import CircleBadge from '../CircleBadge' - -export function shouldAcceptCallWithNoProps() { - return -} - -export function shouldNotAcceptSystemProps() { - // @ts-expect-error system props should not be accepted - return -} diff --git a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap b/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap deleted file mode 100644 index 58b01927bd4..00000000000 --- a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap +++ /dev/null @@ -1,20 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -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`] = ` -
-`; diff --git a/packages/react/src/CircleBadge/index.ts b/packages/react/src/CircleBadge/index.ts deleted file mode 100644 index 753cffb95c2..00000000000 --- a/packages/react/src/CircleBadge/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {default} from './CircleBadge' -export type {CircleBadgeProps, CircleBadgeIconProps} from './CircleBadge' diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap index 2c0c7705df4..2c882b9958b 100644 --- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/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", "CircleOcticon", "type CircleOcticonProps", "ConfirmationDialog", diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 8c77de86d3f..3446d9129a0 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -81,11 +81,9 @@ 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 CircleOcticon} from './CircleOcticon' export type {CircleOcticonProps} from './CircleOcticon' 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' diff --git a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap index b4c0bcfd038..e099d4c8fdc 100644 --- a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -12,7 +12,6 @@ exports[`@primer/styled-react exports 1`] = ` "Button", "Checkbox", "CheckboxGroup", - "CircleBadge", "CircleOcticon", "CounterLabel", "Details", diff --git a/packages/styled-react/src/index.ts b/packages/styled-react/src/index.ts index 3f2f0ef90e7..fc2f037359d 100644 --- a/packages/styled-react/src/index.ts +++ b/packages/styled-react/src/index.ts @@ -14,7 +14,6 @@ export { Button, Checkbox, CheckboxGroup, - CircleBadge, CircleOcticon, CounterLabel, Details, diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index 82437e82c14..2c7c2ccc336 100755 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -354,21 +354,6 @@ const components = new Map([ ], }, ], - [ - 'CircleBadge', - { - stories: [ - { - id: 'components-circlebadge--default', - name: 'Default', - }, - { - id: 'components-circlebadge--playground', - name: 'Playground', - }, - ], - }, - ], [ 'CounterLabel', { From 11caf8a3dbc4d9aefde13df161faeaaaa7b0ddd3 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Tue, 26 Aug 2025 14:27:11 -0400 Subject: [PATCH 2/2] Add changeset --- .changeset/pretty-flies-cheer.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/pretty-flies-cheer.md diff --git a/.changeset/pretty-flies-cheer.md b/.changeset/pretty-flies-cheer.md new file mode 100644 index 00000000000..cb440687c66 --- /dev/null +++ b/.changeset/pretty-flies-cheer.md @@ -0,0 +1,6 @@ +--- +'@primer/styled-react': major +'@primer/react': major +--- + +CircleBadge: Remove component `CircleBadge`