From 6b61f17b9d0f7e3993723d07e663756eeb392402 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Wed, 12 Nov 2025 08:37:57 +0100 Subject: [PATCH 1/5] CounterLabel: Deprecated scheme prop in favor of variant prop --- .changeset/busy-masks-kiss.md | 5 +++++ .../CounterLabel/CounterLabel.features.stories.tsx | 2 +- .../react/src/CounterLabel/CounterLabel.module.css | 4 ++-- .../src/CounterLabel/CounterLabel.stories.tsx | 2 +- .../react/src/CounterLabel/CounterLabel.test.tsx | 14 +++++++++++++- packages/react/src/CounterLabel/CounterLabel.tsx | 9 +++++++-- 6 files changed, 29 insertions(+), 7 deletions(-) create mode 100644 .changeset/busy-masks-kiss.md diff --git a/.changeset/busy-masks-kiss.md b/.changeset/busy-masks-kiss.md new file mode 100644 index 00000000000..910334aaf4e --- /dev/null +++ b/.changeset/busy-masks-kiss.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +CounterLabel: Deprecated scheme prop in favor of variant prop diff --git a/packages/react/src/CounterLabel/CounterLabel.features.stories.tsx b/packages/react/src/CounterLabel/CounterLabel.features.stories.tsx index 5fceeb7ab61..471cb8b4877 100644 --- a/packages/react/src/CounterLabel/CounterLabel.features.stories.tsx +++ b/packages/react/src/CounterLabel/CounterLabel.features.stories.tsx @@ -6,6 +6,6 @@ export default { component: CounterLabel, } as Meta -export const PrimaryTheme: StoryFn = () => 12 +export const PrimaryTheme: StoryFn = () => 12 export const SecondaryTheme: StoryFn = () => 12 diff --git a/packages/react/src/CounterLabel/CounterLabel.module.css b/packages/react/src/CounterLabel/CounterLabel.module.css index 3b99e57d909..2c34d567a1f 100644 --- a/packages/react/src/CounterLabel/CounterLabel.module.css +++ b/packages/react/src/CounterLabel/CounterLabel.module.css @@ -9,12 +9,12 @@ /* stylelint-disable-next-line primer/borders */ border-radius: 20px; - &:where([data-scheme='primary']) { + &:where([data-variant='primary']) { color: var(--fgColor-onEmphasis); background-color: var(--bgColor-neutral-emphasis); } - &:where([data-scheme='secondary']) { + &:where([data-variant='secondary']) { color: var(--fgColor-default); background-color: var(--bgColor-neutral-muted); } diff --git a/packages/react/src/CounterLabel/CounterLabel.stories.tsx b/packages/react/src/CounterLabel/CounterLabel.stories.tsx index e58a39109f5..97a8dfa199f 100644 --- a/packages/react/src/CounterLabel/CounterLabel.stories.tsx +++ b/packages/react/src/CounterLabel/CounterLabel.stories.tsx @@ -11,7 +11,7 @@ export const Default: StoryFn = () => 12 = { render: args => 12, args: { - scheme: 'primary', + variant: 'primary', }, argTypes: { scheme: { diff --git a/packages/react/src/CounterLabel/CounterLabel.test.tsx b/packages/react/src/CounterLabel/CounterLabel.test.tsx index 227deb0c44d..92f276da79f 100644 --- a/packages/react/src/CounterLabel/CounterLabel.test.tsx +++ b/packages/react/src/CounterLabel/CounterLabel.test.tsx @@ -23,13 +23,25 @@ describe('CounterLabel', () => { expect(container.firstChild).toHaveAttribute('aria-hidden', 'true') }) + it('respects the primary "variant" prop', () => { + const {container} = HTMLRender(1234) + expect(container.firstChild).toBeInTheDocument() + expect(container.firstChild).toHaveTextContent('1234') + }) + + it('respects the secondary "variant" prop', () => { + const {container} = HTMLRender(1234) + expect(container.firstChild).toBeInTheDocument() + expect(container.firstChild).toHaveTextContent('1234') + }) + it('respects the primary "scheme" prop', () => { const {container} = HTMLRender(1234) expect(container.firstChild).toBeInTheDocument() expect(container.firstChild).toHaveTextContent('1234') }) - it('renders with secondary scheme when no "scheme" prop is provided', () => { + it('renders with secondary variant when no "scheme" or "variant" prop is provided', () => { const {container} = HTMLRender(1234) expect(container.firstChild).toBeInTheDocument() expect(container.firstChild).toHaveTextContent('1234') diff --git a/packages/react/src/CounterLabel/CounterLabel.tsx b/packages/react/src/CounterLabel/CounterLabel.tsx index 2f5101ace46..eb7dd56b8bc 100644 --- a/packages/react/src/CounterLabel/CounterLabel.tsx +++ b/packages/react/src/CounterLabel/CounterLabel.tsx @@ -7,18 +7,23 @@ import classes from './CounterLabel.module.css' export type CounterLabelProps = React.PropsWithChildren< HTMLAttributes & { + /** @deprecated use variant instead */ scheme?: 'primary' | 'secondary' + variant?: 'primary' | 'secondary' className?: string } > const CounterLabel = forwardRef( - ({scheme = 'secondary', className, children, ...rest}, forwardedRef) => { + ({variant, scheme, className, children, ...rest}, forwardedRef) => { const label =  ({children}) + + const inferredVariant = variant ? variant : scheme ? scheme : 'secondary' + const counterProps = { ref: forwardedRef, ['aria-hidden']: 'true' as const, - ['data-scheme']: scheme, + ['data-variant']: inferredVariant, ...rest, } From e3ca6ecf0be387827607769f7ccea748a552fdca Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Wed, 12 Nov 2025 08:57:57 +0100 Subject: [PATCH 2/5] improve storybook --- .../react/src/CounterLabel/CounterLabel.features.stories.tsx | 2 +- packages/react/src/CounterLabel/CounterLabel.figma.tsx | 2 +- packages/react/src/CounterLabel/CounterLabel.stories.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/CounterLabel/CounterLabel.features.stories.tsx b/packages/react/src/CounterLabel/CounterLabel.features.stories.tsx index 471cb8b4877..8bbd685db87 100644 --- a/packages/react/src/CounterLabel/CounterLabel.features.stories.tsx +++ b/packages/react/src/CounterLabel/CounterLabel.features.stories.tsx @@ -8,4 +8,4 @@ export default { export const PrimaryTheme: StoryFn = () => 12 -export const SecondaryTheme: StoryFn = () => 12 +export const SecondaryTheme: StoryFn = () => 12 diff --git a/packages/react/src/CounterLabel/CounterLabel.figma.tsx b/packages/react/src/CounterLabel/CounterLabel.figma.tsx index ca0617d14ce..bbbc60e62c7 100644 --- a/packages/react/src/CounterLabel/CounterLabel.figma.tsx +++ b/packages/react/src/CounterLabel/CounterLabel.figma.tsx @@ -12,6 +12,6 @@ figma.connect( }), count: figma.textContent('text'), }, - example: ({variant, count}) => {count}, + example: ({variant, count}) => {count}, }, ) diff --git a/packages/react/src/CounterLabel/CounterLabel.stories.tsx b/packages/react/src/CounterLabel/CounterLabel.stories.tsx index 97a8dfa199f..da6e749f33e 100644 --- a/packages/react/src/CounterLabel/CounterLabel.stories.tsx +++ b/packages/react/src/CounterLabel/CounterLabel.stories.tsx @@ -14,8 +14,8 @@ export const Playground: StoryObj = { variant: 'primary', }, argTypes: { - scheme: { - control: 'select', + variant: { + control: 'radio', options: ['primary', 'secondary'], }, }, From c0f4642e3346ce4f7c3f87dfd6a6dd679f7df358 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Thu, 13 Nov 2025 09:09:44 +0100 Subject: [PATCH 3/5] Update .changeset/busy-masks-kiss.md Co-authored-by: Siddharth Kshetrapal --- .changeset/busy-masks-kiss.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/busy-masks-kiss.md b/.changeset/busy-masks-kiss.md index 910334aaf4e..720d9091c98 100644 --- a/.changeset/busy-masks-kiss.md +++ b/.changeset/busy-masks-kiss.md @@ -2,4 +2,4 @@ '@primer/react': minor --- -CounterLabel: Deprecated scheme prop in favor of variant prop +CounterLabel: Add variant prop and deprecate scheme prop From 6e544c8359dd48760f4d062a59f3cc12e004bef0 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Thu, 13 Nov 2025 09:10:00 +0100 Subject: [PATCH 4/5] Update packages/react/src/CounterLabel/CounterLabel.tsx Co-authored-by: Siddharth Kshetrapal --- packages/react/src/CounterLabel/CounterLabel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/CounterLabel/CounterLabel.tsx b/packages/react/src/CounterLabel/CounterLabel.tsx index eb7dd56b8bc..36edb110401 100644 --- a/packages/react/src/CounterLabel/CounterLabel.tsx +++ b/packages/react/src/CounterLabel/CounterLabel.tsx @@ -18,7 +18,7 @@ const CounterLabel = forwardRef( ({variant, scheme, className, children, ...rest}, forwardedRef) => { const label =  ({children}) - const inferredVariant = variant ? variant : scheme ? scheme : 'secondary' + const inferredVariant = variant || scheme || 'secondary' const counterProps = { ref: forwardedRef, From 0517d2c3e5dac0f8cfed3bbab03f18c7d5fc23b1 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Thu, 13 Nov 2025 09:20:24 +0100 Subject: [PATCH 5/5] updated and added some tests --- .../src/CounterLabel/CounterLabel.test.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/react/src/CounterLabel/CounterLabel.test.tsx b/packages/react/src/CounterLabel/CounterLabel.test.tsx index 92f276da79f..fa6a3ca91de 100644 --- a/packages/react/src/CounterLabel/CounterLabel.test.tsx +++ b/packages/react/src/CounterLabel/CounterLabel.test.tsx @@ -26,25 +26,35 @@ describe('CounterLabel', () => { it('respects the primary "variant" prop', () => { const {container} = HTMLRender(1234) expect(container.firstChild).toBeInTheDocument() - expect(container.firstChild).toHaveTextContent('1234') + expect(container.firstChild).toHaveAttribute('data-variant', 'primary') }) it('respects the secondary "variant" prop', () => { const {container} = HTMLRender(1234) expect(container.firstChild).toBeInTheDocument() - expect(container.firstChild).toHaveTextContent('1234') + expect(container.firstChild).toHaveAttribute('data-variant', 'secondary') }) it('respects the primary "scheme" prop', () => { const {container} = HTMLRender(1234) expect(container.firstChild).toBeInTheDocument() - expect(container.firstChild).toHaveTextContent('1234') + expect(container.firstChild).toHaveAttribute('data-variant', 'primary') }) it('renders with secondary variant when no "scheme" or "variant" prop is provided', () => { const {container} = HTMLRender(1234) expect(container.firstChild).toBeInTheDocument() - expect(container.firstChild).toHaveTextContent('1234') + expect(container.firstChild).toHaveAttribute('data-variant', 'secondary') + }) + + it('prefer variant over "scheme" prop', () => { + const {container} = HTMLRender( + + 1234 + , + ) + expect(container.firstChild).toBeInTheDocument() + expect(container.firstChild).toHaveAttribute('data-variant', 'primary') }) it('should render visually hidden span correctly for screen readers', () => {