From 60228e180dbce3f6f902013f5c3ca3660a550d40 Mon Sep 17 00:00:00 2001 From: llastflowers Date: Tue, 26 Aug 2025 10:03:45 -0700 Subject: [PATCH 01/19] remove sx support from CircleBadge.tsx --- packages/react/src/CircleBadge/CircleBadge.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx index 5a64f55b240..b1711e70b48 100644 --- a/packages/react/src/CircleBadge/CircleBadge.tsx +++ b/packages/react/src/CircleBadge/CircleBadge.tsx @@ -1,8 +1,6 @@ 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' @@ -16,7 +14,7 @@ type StyledCircleBadgeProps = { inline?: boolean variant?: keyof typeof variantSizes size?: number -} & SxProp +} const sizeStyles = ({size, variant = 'medium'}: StyledCircleBadgeProps) => { const calc = isNumeric(size) ? size : variantSizes[variant] @@ -34,7 +32,6 @@ const CircleBadge = styled.div` border-radius: 50%; box-shadow: ${get('shadows.shadow.medium')}; ${sizeStyles}; - ${sx}; ` const CircleBadgeIcon = styled(Octicon)` From 89f3cff137552aaa0cdd8466ca0eac405203a87e Mon Sep 17 00:00:00 2001 From: llastflowers Date: Tue, 26 Aug 2025 10:32:58 -0700 Subject: [PATCH 02/19] remove sx from docs --- packages/react/src/CircleBadge/CircleBadge.docs.json | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/react/src/CircleBadge/CircleBadge.docs.json b/packages/react/src/CircleBadge/CircleBadge.docs.json index cde50f29c0a..a0b38d53d8d 100644 --- a/packages/react/src/CircleBadge/CircleBadge.docs.json +++ b/packages/react/src/CircleBadge/CircleBadge.docs.json @@ -32,11 +32,6 @@ "name": "as", "type": "React.ElementType", "defaultValue": "\"div\"" - }, - { - "name": "sx", - "type": "SystemStyleObject", - "deprecated": true } ], "subcomponents": [ From 55df6429cf6173e87ea5fd322214d2d88a0b966c Mon Sep 17 00:00:00 2001 From: "Brittany L. Houtz" <55068883+llastflowers@users.noreply.github.com> Date: Tue, 26 Aug 2025 10:36:50 -0700 Subject: [PATCH 03/19] Update CircleBadge to remove sx support --- .changeset/cool-apricots-sneeze.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cool-apricots-sneeze.md diff --git a/.changeset/cool-apricots-sneeze.md b/.changeset/cool-apricots-sneeze.md new file mode 100644 index 00000000000..a175e0860ed --- /dev/null +++ b/.changeset/cool-apricots-sneeze.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Update CircleBadge component to no longer support sx From 8c2577da22a87f5d56acb3ae38bdcf663a246520 Mon Sep 17 00:00:00 2001 From: llastflowers Date: Tue, 26 Aug 2025 12:04:02 -0700 Subject: [PATCH 04/19] update tests to match updated component --- .../src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap b/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap index 58b01927bd4..594ffebe1a4 100644 --- a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap +++ b/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap @@ -2,19 +2,19 @@ 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`] = `
`; From 726baebff78779fe06a65b1a11b71b2b23b4f8b5 Mon Sep 17 00:00:00 2001 From: llastflowers Date: Fri, 5 Sep 2025 09:51:43 -0700 Subject: [PATCH 05/19] tests fix for CI --- .../src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap b/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap index 594ffebe1a4..63918c48a68 100644 --- a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap +++ b/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap @@ -2,19 +2,19 @@ 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`] = `
`; From dd65b9e2f062b336f6084497ddcf17cf9d7524f1 Mon Sep 17 00:00:00 2001 From: llastflowers Date: Mon, 15 Sep 2025 11:44:22 -0700 Subject: [PATCH 06/19] pull in version updates from main and update exports for CircleBadge --- package-lock.json | 14 +++++++------- packages/styled-react/src/index.tsx | 11 +++++++++-- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index cb18c7a123e..19867b7fa03 100644 --- a/package-lock.json +++ b/package-lock.json @@ -75,7 +75,7 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "38.0.0-rc.1", + "@primer/react": "38.0.0-rc.2", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.3", @@ -88,7 +88,7 @@ "name": "example-nextjs", "version": "0.0.0", "dependencies": { - "@primer/react": "38.0.0-rc.1", + "@primer/react": "38.0.0-rc.2", "next": "^15.2.3", "react": "18.3.1", "react-dom": "18.3.1", @@ -104,7 +104,7 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "^19.14.0", - "@primer/react": "38.0.0-rc.1", + "@primer/react": "38.0.0-rc.2", "clsx": "^2.1.1", "next": "^15.2.3", "react": "18.3.1", @@ -26008,7 +26008,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "38.0.0-rc.1", + "version": "38.0.0-rc.2", "license": "MIT", "dependencies": { "@github/mini-throttle": "^2.1.1", @@ -26581,11 +26581,11 @@ }, "packages/styled-react": { "name": "@primer/styled-react", - "version": "1.0.0-rc.1", + "version": "1.0.0-rc.2", "devDependencies": { "@babel/preset-react": "^7.27.1", "@babel/preset-typescript": "^7.27.1", - "@primer/react": "^38.0.0-rc.1", + "@primer/react": "^38.0.0-rc.2", "@rollup/plugin-babel": "^6.0.4", "@types/react": "18.3.11", "@types/react-dom": "18.3.1", @@ -26600,7 +26600,7 @@ "typescript": "^5.9.2" }, "peerDependencies": { - "@primer/react": "38.0.0-rc.1", + "@primer/react": "38.0.0-rc.2", "@types/react": "18.x || 19.x", "@types/react-dom": "18.x || 19.x", "@types/react-is": "18.x || 19.x", diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 6bb625118f4..00bcc7c746d 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -5,6 +5,8 @@ import { Box, type BoxProps, type SxProp, + type CircleBadgeProps as PrimerCircleBadgeProps, + CircleBadge as PrimerCircleBadge, StateLabel as PrimerStateLabel, type StateLabelProps as PrimerStateLabelProps, SubNav as PrimerSubNav, @@ -68,6 +70,12 @@ const SegmentedControl = Object.assign(SegmentedControlImpl, { IconButton: SegmentedControlIconButton, }) +type CircleBadgeProps = PrimerCircleBadgeProps & SxProp + +function CircleBadge(props: CircleBadgeProps) { + return +} + type StateLabelProps = PrimerStateLabelProps & SxProp const StateLabel = forwardRef(function StateLabel(props, ref) { @@ -106,7 +114,7 @@ const Textarea: React.ForwardRefExoticComponent }) -export {Autocomplete, SegmentedControl, Select, StateLabel, SubNav, TextInput, Textarea, ToggleSwitch} +export {Autocomplete, CircleBadge, SegmentedControl, Select, StateLabel, SubNav, TextInput, Textarea, ToggleSwitch} export { ActionList, @@ -116,7 +124,6 @@ export { Button, Checkbox, CheckboxGroup, - CircleBadge, CounterLabel, Details, Dialog, From b271d41d7ca57180d650b894d7ea40ba6a773c9a Mon Sep 17 00:00:00 2001 From: llastflowers Date: Wed, 17 Sep 2025 14:18:44 -0700 Subject: [PATCH 07/19] fix import order --- packages/styled-react/src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 7700bc9e72e..aab0322d23a 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -3,8 +3,8 @@ import { Box, type BoxProps, type SxProp, - type CircleBadgeProps as PrimerCircleBadgeProps, CircleBadge as PrimerCircleBadge, + type CircleBadgeProps as PrimerCircleBadgeProps, StateLabel as PrimerStateLabel, type StateLabelProps as PrimerStateLabelProps, SubNav as PrimerSubNav, From 1704e1a9232e8517427fb6071e8201962e7e3362 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Mon, 22 Sep 2025 21:56:35 -0400 Subject: [PATCH 08/19] convert to css modules --- .../src/CircleBadge/CircleBadge.module.css | 18 +++++++++ .../react/src/CircleBadge/CircleBadge.tsx | 38 +++++++++---------- 2 files changed, 35 insertions(+), 21 deletions(-) create mode 100644 packages/react/src/CircleBadge/CircleBadge.module.css diff --git a/packages/react/src/CircleBadge/CircleBadge.module.css b/packages/react/src/CircleBadge/CircleBadge.module.css new file mode 100644 index 00000000000..602bdce1ddd --- /dev/null +++ b/packages/react/src/CircleBadge/CircleBadge.module.css @@ -0,0 +1,18 @@ +.CircleBadge { + display: flex; + align-items: center; + justify-content: center; + background-color: var(--bgColor-default); + border-radius: 50%; + box-shadow: var(--shadow-resting-medium); + + &:where([data-inline]) { + display: inline-flex; + } +} + +.CircleBadgeIcon { + height: auto; + max-height: 55%; + max-width: 60%; +} \ No newline at end of file diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx index f0a5e72c29b..f8507f5352c 100644 --- a/packages/react/src/CircleBadge/CircleBadge.tsx +++ b/packages/react/src/CircleBadge/CircleBadge.tsx @@ -1,22 +1,24 @@ -import styled from 'styled-components' -import {get} from '../constants' import Octicon from '../Octicon' import isNumeric from '../utils/isNumeric' import type {ComponentProps} from '../utils/types' +import styles from './CircleBadge.module.css' +import type {OcticonProps} from '@primer/octicons-react' + const variantSizes = { small: 56, medium: 96, large: 128, } -type StyledCircleBadgeProps = { +type CircleBadgeProps = { inline?: boolean variant?: keyof typeof variantSizes size?: number -} +} & React.HTMLAttributes -const sizeStyles = ({size, variant = 'medium'}: StyledCircleBadgeProps) => { +const sizeStyles = ({size, variant = 'medium'}: CircleBadgeProps) => { + console.log(size, variant) const calc = isNumeric(size) ? size : variantSizes[variant] return { width: calc, @@ -24,24 +26,18 @@ const sizeStyles = ({size, variant = 'medium'}: StyledCircleBadgeProps) => { } } -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}; -` -const CircleBadgeIcon = styled(Octicon)` - height: auto; - max-width: 60%; - max-height: 55%; -` +const CircleBadge = (props: CircleBadgeProps) => ( +
+) -CircleBadgeIcon.displayName = 'CircleBadge.Icon' +const CircleBadgeIcon = (props: OcticonProps) => -export type CircleBadgeProps = ComponentProps +CircleBadgeIcon.displayName = 'CircleBadge.Icon' export type CircleBadgeIconProps = ComponentProps From 09fa5ac3716a7a4d1b5f11479e75b6309b63cb9f Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Mon, 22 Sep 2025 21:58:33 -0400 Subject: [PATCH 09/19] format --- .../src/CircleBadge/CircleBadge.module.css | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/react/src/CircleBadge/CircleBadge.module.css b/packages/react/src/CircleBadge/CircleBadge.module.css index 602bdce1ddd..ec321f42118 100644 --- a/packages/react/src/CircleBadge/CircleBadge.module.css +++ b/packages/react/src/CircleBadge/CircleBadge.module.css @@ -1,10 +1,10 @@ .CircleBadge { - display: flex; - align-items: center; - justify-content: center; - background-color: var(--bgColor-default); - border-radius: 50%; - box-shadow: var(--shadow-resting-medium); + display: flex; + align-items: center; + justify-content: center; + background-color: var(--bgColor-default); + border-radius: 50%; + box-shadow: var(--shadow-resting-medium); &:where([data-inline]) { display: inline-flex; @@ -12,7 +12,7 @@ } .CircleBadgeIcon { - height: auto; - max-height: 55%; - max-width: 60%; -} \ No newline at end of file + height: auto; + max-height: 55%; + max-width: 60%; +} From e7d7d8cc1feca439736deb9ec6666f41d1c1ea74 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Mon, 22 Sep 2025 21:59:26 -0400 Subject: [PATCH 10/19] remove console.log --- packages/react/src/CircleBadge/CircleBadge.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx index f8507f5352c..891e746b42b 100644 --- a/packages/react/src/CircleBadge/CircleBadge.tsx +++ b/packages/react/src/CircleBadge/CircleBadge.tsx @@ -18,7 +18,6 @@ type CircleBadgeProps = { } & React.HTMLAttributes const sizeStyles = ({size, variant = 'medium'}: CircleBadgeProps) => { - console.log(size, variant) const calc = isNumeric(size) ? size : variantSizes[variant] return { width: calc, From 02da76215046a51d24c54e47cbd94d3ee52b23fa Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Mon, 22 Sep 2025 22:06:40 -0400 Subject: [PATCH 11/19] fix export --- packages/react/src/CircleBadge/CircleBadge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx index 891e746b42b..c239c0613b2 100644 --- a/packages/react/src/CircleBadge/CircleBadge.tsx +++ b/packages/react/src/CircleBadge/CircleBadge.tsx @@ -11,7 +11,7 @@ const variantSizes = { large: 128, } -type CircleBadgeProps = { +export type CircleBadgeProps = { inline?: boolean variant?: keyof typeof variantSizes size?: number From c4ff80907805168fba4f6852e86434815ce7a92c Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Mon, 22 Sep 2025 22:08:04 -0400 Subject: [PATCH 12/19] Create lazy-elephants-shave.md --- .changeset/lazy-elephants-shave.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/lazy-elephants-shave.md diff --git a/.changeset/lazy-elephants-shave.md b/.changeset/lazy-elephants-shave.md new file mode 100644 index 00000000000..b3c181a09aa --- /dev/null +++ b/.changeset/lazy-elephants-shave.md @@ -0,0 +1,6 @@ +--- +"@primer/react": patch +"@primer/styled-react": patch +--- + +Remove support for `sx` from `CircleBadge` component From 7fa6fe0ecea7ba8b6f78437393d31bfbbd572781 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Mon, 22 Sep 2025 22:12:21 -0400 Subject: [PATCH 13/19] fix props --- packages/react/src/CircleBadge/CircleBadge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx index c239c0613b2..ed253937e9f 100644 --- a/packages/react/src/CircleBadge/CircleBadge.tsx +++ b/packages/react/src/CircleBadge/CircleBadge.tsx @@ -3,7 +3,7 @@ import isNumeric from '../utils/isNumeric' import type {ComponentProps} from '../utils/types' import styles from './CircleBadge.module.css' -import type {OcticonProps} from '@primer/octicons-react' +import type {OcticonProps} from '../Octicon' const variantSizes = { small: 56, From 4e618118461cbb3abc91b5e9be137899e0b74c91 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Mon, 22 Sep 2025 22:57:57 -0400 Subject: [PATCH 14/19] type fixes --- .../react/src/CircleBadge/CircleBadge.stories.tsx | 10 +++------- packages/react/src/CircleBadge/CircleBadge.tsx | 11 ++++++----- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/react/src/CircleBadge/CircleBadge.stories.tsx b/packages/react/src/CircleBadge/CircleBadge.stories.tsx index 5b7eebc760a..5ca54543e80 100644 --- a/packages/react/src/CircleBadge/CircleBadge.stories.tsx +++ b/packages/react/src/CircleBadge/CircleBadge.stories.tsx @@ -14,18 +14,17 @@ export const Default = () => ( ) -export const Playground: StoryFn = ({'CircleBadge.Icon aria-label': iconAriaLabel, args}) => ( +export const Playground: StoryFn = args => ( - + ) Playground.args = { variant: 'medium', - size: null, + size: undefined, inline: false, as: 'div', - 'CircleBadge.Icon aria-label': undefined, } Playground.argTypes = { @@ -45,7 +44,4 @@ Playground.argTypes = { type: 'boolean', }, }, - 'CircleBadge.Icon aria-label': { - type: 'string', - }, } diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx index ed253937e9f..28e6720d138 100644 --- a/packages/react/src/CircleBadge/CircleBadge.tsx +++ b/packages/react/src/CircleBadge/CircleBadge.tsx @@ -11,13 +11,14 @@ const variantSizes = { large: 128, } -export type CircleBadgeProps = { +export type CircleBadgeProps = { inline?: boolean variant?: keyof typeof variantSizes size?: number -} & React.HTMLAttributes + as?: As +} & React.ComponentPropsWithRef -const sizeStyles = ({size, variant = 'medium'}: CircleBadgeProps) => { +const sizeStyles = ({size, variant = 'medium'}: CircleBadgeProps) => { const calc = isNumeric(size) ? size : variantSizes[variant] return { width: calc, @@ -25,8 +26,8 @@ const sizeStyles = ({size, variant = 'medium'}: CircleBadgeProps) => { } } -const CircleBadge = (props: CircleBadgeProps) => ( -
({as: Component = 'div', ...props}: CircleBadgeProps) => ( + Date: Tue, 23 Sep 2025 10:14:04 -0400 Subject: [PATCH 15/19] lint fix --- packages/styled-react/src/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 31c090a1c0c..cbc603bb0d8 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -146,11 +146,12 @@ const SegmentedControl = Object.assign(SegmentedControlImpl, { IconButton: SegmentedControlIconButton, }) -type CircleBadgeProps = PrimerCircleBadgeProps & SxProp +type CircleBadgeProps = PrimerCircleBadgeProps & SxProp -function CircleBadge(props: CircleBadgeProps) { +function CircleBadge(props: CircleBadgeProps) { return } + type CheckboxProps = PrimerCheckboxProps & SxProp const Checkbox = forwardRef(function Checkbox(props, ref) { From 4894bcbb129872baebce88bc53eed318d0bbe4f6 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 23 Sep 2025 10:17:28 -0400 Subject: [PATCH 16/19] ignore error --- packages/styled-react/src/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index cbc603bb0d8..e36749273b8 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -149,6 +149,7 @@ const SegmentedControl = Object.assign(SegmentedControlImpl, { type CircleBadgeProps = PrimerCircleBadgeProps & SxProp function CircleBadge(props: CircleBadgeProps) { + // @ts-expect-error the types for Box are not correctly inferred here return } From 0a70abbb40f6001e7efda4a1ca43b197ba9aaa79 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 23 Sep 2025 10:53:47 -0400 Subject: [PATCH 17/19] fix(CircleBadge): update snapshots, add className --- .../react/src/CircleBadge/CircleBadge.tsx | 4 +++- .../__snapshots__/CircleBadge.test.tsx.snap | 12 +++++++++--- .../src/components/CircleBadge.tsx | 19 +++++++++++++++++++ packages/styled-react/src/index.tsx | 9 ++------- 4 files changed, 33 insertions(+), 11 deletions(-) create mode 100644 packages/styled-react/src/components/CircleBadge.tsx diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx index 28e6720d138..0d106c78d50 100644 --- a/packages/react/src/CircleBadge/CircleBadge.tsx +++ b/packages/react/src/CircleBadge/CircleBadge.tsx @@ -4,6 +4,7 @@ import type {ComponentProps} from '../utils/types' import styles from './CircleBadge.module.css' import type {OcticonProps} from '../Octicon' +import {clsx} from 'clsx' const variantSizes = { small: 56, @@ -16,6 +17,7 @@ export type CircleBadgeProps = { variant?: keyof typeof variantSizes size?: number as?: As + className?: string } & React.ComponentPropsWithRef const sizeStyles = ({size, variant = 'medium'}: CircleBadgeProps) => { @@ -29,7 +31,7 @@ const sizeStyles = ({size, variant = 'medium'}: CircleBadgeProps({as: Component = 'div', ...props}: CircleBadgeProps) => ( diff --git a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap b/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap index 63918c48a68..a8175b56391 100644 --- a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap +++ b/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap @@ -2,19 +2,25 @@ 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/styled-react/src/components/CircleBadge.tsx b/packages/styled-react/src/components/CircleBadge.tsx new file mode 100644 index 00000000000..0968b3a5c42 --- /dev/null +++ b/packages/styled-react/src/components/CircleBadge.tsx @@ -0,0 +1,19 @@ +import { + CircleBadge as PrimerCircleBadge, + type CircleBadgeProps as PrimerCircleBadgeProps, + sx, + type SxProp, +} from '@primer/react' +import styled from 'styled-components' +import {type ForwardRefComponent} from '../polymorphic' + +type CircleBadgeProps = PrimerCircleBadgeProps & SxProp + +const CircleBadge: ForwardRefComponent<'div', CircleBadgeProps> = styled(PrimerCircleBadge).withConfig({ + shouldForwardProp: prop => (prop as keyof CircleBadgeProps) !== 'sx', +})` + ${sx} +` + +export {CircleBadge} +export type {CircleBadgeProps} diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index e36749273b8..d6b8e01ccd3 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -58,6 +58,8 @@ import styled from 'styled-components' import {LinkButton, type LinkButtonProps} from './components/LinkButton' +import {CircleBadge} from './components/CircleBadge' + type StyledProps = SxProp & SpaceProps & ColorProps & @@ -146,13 +148,6 @@ const SegmentedControl = Object.assign(SegmentedControlImpl, { IconButton: SegmentedControlIconButton, }) -type CircleBadgeProps = PrimerCircleBadgeProps & SxProp - -function CircleBadge(props: CircleBadgeProps) { - // @ts-expect-error the types for Box are not correctly inferred here - return -} - type CheckboxProps = PrimerCheckboxProps & SxProp const Checkbox = forwardRef(function Checkbox(props, ref) { From ce9144f8c56e320739d1285c287cb01cdf431658 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 23 Sep 2025 10:54:48 -0400 Subject: [PATCH 18/19] remove unused import --- packages/styled-react/src/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index d6b8e01ccd3..c973d0a2736 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -3,8 +3,6 @@ import { Box, type BoxProps, type SxProp, - CircleBadge as PrimerCircleBadge, - type CircleBadgeProps as PrimerCircleBadgeProps, Spinner as PrimerSpinner, type SpinnerProps as PrimerSpinnerProps, RadioGroup as PrimerRadioGroup, From fada74da08622f5a487bbdc806ff6baf93c14553 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 23 Sep 2025 11:44:56 -0400 Subject: [PATCH 19/19] type fixes --- packages/styled-react/src/components/CircleBadge.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/styled-react/src/components/CircleBadge.tsx b/packages/styled-react/src/components/CircleBadge.tsx index 0968b3a5c42..6a58096462d 100644 --- a/packages/styled-react/src/components/CircleBadge.tsx +++ b/packages/styled-react/src/components/CircleBadge.tsx @@ -7,11 +7,13 @@ import { import styled from 'styled-components' import {type ForwardRefComponent} from '../polymorphic' -type CircleBadgeProps = PrimerCircleBadgeProps & SxProp +type CircleBadgeProps = PrimerCircleBadgeProps & SxProp -const CircleBadge: ForwardRefComponent<'div', CircleBadgeProps> = styled(PrimerCircleBadge).withConfig({ - shouldForwardProp: prop => (prop as keyof CircleBadgeProps) !== 'sx', -})` +const CircleBadge: ForwardRefComponent> = styled( + PrimerCircleBadge, +).withConfig({ + shouldForwardProp: prop => (prop as keyof CircleBadgeProps) !== 'sx', +})>` ${sx} `