CounterLabel: Deprecated scheme prop in favor of variant prop

.changeset/busy-masks-kiss.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+CounterLabel: Add variant prop and deprecate scheme prop

packages/react/src/CounterLabel/CounterLabel.features.stories.tsx

@@ -6,6 +6,6 @@ export default {
   component: CounterLabel,
 } as Meta<typeof CounterLabel>
 
-export const PrimaryTheme: StoryFn<typeof CounterLabel> = () => <CounterLabel scheme="primary">12</CounterLabel>
+export const PrimaryTheme: StoryFn<typeof CounterLabel> = () => <CounterLabel variant="primary">12</CounterLabel>
 
-export const SecondaryTheme: StoryFn<typeof CounterLabel> = () => <CounterLabel scheme="secondary">12</CounterLabel>
+export const SecondaryTheme: StoryFn<typeof CounterLabel> = () => <CounterLabel variant="secondary">12</CounterLabel>

packages/react/src/CounterLabel/CounterLabel.figma.tsx

@@ -12,6 +12,6 @@ figma.connect(
       }),
       count: figma.textContent('text'),
     },
-    example: ({variant, count}) => <CounterLabel scheme={variant}>{count}</CounterLabel>,
+    example: ({variant, count}) => <CounterLabel variant={variant}>{count}</CounterLabel>,
   },
 )

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);
   }

packages/react/src/CounterLabel/CounterLabel.stories.tsx

@@ -11,11 +11,11 @@ export const Default: StoryFn<typeof CounterLabel> = () => <CounterLabel>12</Cou
 export const Playground: StoryObj<typeof CounterLabel> = {
   render: args => <CounterLabel {...args}>12</CounterLabel>,
   args: {
-    scheme: 'primary',
+    variant: 'primary',
   },
   argTypes: {
-    scheme: {
-      control: 'select',
+    variant: {
+      control: 'radio',
       options: ['primary', 'secondary'],
     },
   },

packages/react/src/CounterLabel/CounterLabel.test.tsx

@@ -23,16 +23,38 @@ describe('CounterLabel', () => {
     expect(container.firstChild).toHaveAttribute('aria-hidden', 'true')
   })
 
+  it('respects the primary "variant" prop', () => {
+    const {container} = HTMLRender(<CounterLabel variant="primary">1234</CounterLabel>)
+    expect(container.firstChild).toBeInTheDocument()
+    expect(container.firstChild).toHaveAttribute('data-variant', 'primary')
+  })
+
+  it('respects the secondary "variant" prop', () => {
+    const {container} = HTMLRender(<CounterLabel variant="secondary">1234</CounterLabel>)
+    expect(container.firstChild).toBeInTheDocument()
+    expect(container.firstChild).toHaveAttribute('data-variant', 'secondary')
+  })
+
   it('respects the primary "scheme" prop', () => {
     const {container} = HTMLRender(<CounterLabel scheme="primary">1234</CounterLabel>)
     expect(container.firstChild).toBeInTheDocument()
-    expect(container.firstChild).toHaveTextContent('1234')
+    expect(container.firstChild).toHaveAttribute('data-variant', 'primary')
   })
 
-  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(<CounterLabel>1234</CounterLabel>)
     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(
+      <CounterLabel scheme="secondary" variant="primary">
+        1234
+      </CounterLabel>,
+    )
+    expect(container.firstChild).toBeInTheDocument()
+    expect(container.firstChild).toHaveAttribute('data-variant', 'primary')
   })
 
   it('should render visually hidden span correctly for screen readers', () => {

packages/react/src/CounterLabel/CounterLabel.tsx

@@ -7,18 +7,23 @@ import classes from './CounterLabel.module.css'
 
 export type CounterLabelProps = React.PropsWithChildren<
   HTMLAttributes<HTMLSpanElement> & {
+    /** @deprecated use variant instead */
     scheme?: 'primary' | 'secondary'
+    variant?: 'primary' | 'secondary'
     className?: string
   }
 >
 
 const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
-  ({scheme = 'secondary', className, children, ...rest}, forwardedRef) => {
+  ({variant, scheme, className, children, ...rest}, forwardedRef) => {
     const label = <VisuallyHidden>&nbsp;({children})</VisuallyHidden>
+
+    const inferredVariant = variant || scheme || 'secondary'
+
     const counterProps = {
       ref: forwardedRef,
       ['aria-hidden']: 'true' as const,
-      ['data-scheme']: scheme,
+      ['data-variant']: inferredVariant,
       ...rest,
     }