CounterLabel: Deprecated scheme prop in favor of variant prop

[lukasoppermann]

Closes https://github.com/github/primer/issues/5274

Changelog

CounterLabel: Deprecated scheme prop in favor of variant prop

New

Changed

Removed

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 0517d2c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

Pull Request Overview

This PR deprecates the scheme prop in favor of the variant prop for the CounterLabel component, aligning with the design system's naming conventions while maintaining backward compatibility.

• The variant prop is introduced as the new API with the same values ('primary' | 'secondary')
• The scheme prop is marked as deprecated with JSDoc annotation
• Fallback logic ensures variant takes precedence over scheme, with 'secondary' as the default

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
CounterLabel.tsx	Added variant prop, deprecated scheme prop, implemented fallback logic with precedence handling, updated data attribute from data-scheme to data-variant
CounterLabel.test.tsx	Added tests for the new variant prop (primary and secondary), updated test description to reflect both props, maintained backward compatibility tests for scheme
CounterLabel.stories.tsx	Updated Playground story to use variant prop instead of scheme in default args
CounterLabel.features.stories.tsx	Updated PrimaryTheme story to use variant prop, kept SecondaryTheme using scheme for backward compatibility demonstration
CounterLabel.module.css	Updated CSS selectors from data-scheme to data-variant for primary and secondary styles
.changeset/busy-masks-kiss.md	Added changeset documenting the deprecation as a minor version change

Comments suppressed due to low confidence (3)

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

• This test should verify that the default data-variant attribute is set to 'secondary'. Add an assertion expect(container.firstChild).toHaveAttribute('data-variant', 'secondary') to validate the default behavior.

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

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

• Missing test case for precedence: when both variant and scheme props are provided, variant should take precedence. Add a test like it('gives precedence to variant over scheme when both are provided', () => { const {container} = HTMLRender(<CounterLabel variant=\"primary\" scheme=\"secondary\">1234</CounterLabel>); expect(container.firstChild).toHaveAttribute('data-variant', 'primary'); }) to verify this critical behavior.

  })

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

• The argTypes should include configuration for the new variant prop in addition to the deprecated scheme prop. This allows Storybook users to interact with the new API. Add a variant entry with the same control configuration to properly document both the new and deprecated props.

  argTypes: {
    scheme: {
      control: 'select',
      options: ['primary', 'secondary'],
    },
  },

[siddharthkp]

Only minor feedback, approving in advance :)

[siddharthkp]

Both of the added tests check for the same thing 🤔

What are we testing here?

[lukasoppermann]

Fixed. I somehow just copied the old tests and didn't get that they don't quite make sense.

[siddharthkp]

Maybe a good idea to add this test as well: "prefers variant prop over deprecated scheme prop"

[lukasoppermann]

Added a test for that.

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/6782

[primer-integration]

🟢 ci completed with status success.

[siddharthkp]

Looks great, ship it