diff --git a/.changeset/busy-masks-kiss.md b/.changeset/busy-masks-kiss.md new file mode 100644 index 00000000000..720d9091c98 --- /dev/null +++ b/.changeset/busy-masks-kiss.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +CounterLabel: Add variant prop and deprecate scheme prop diff --git a/packages/react/src/CounterLabel/CounterLabel.features.stories.tsx b/packages/react/src/CounterLabel/CounterLabel.features.stories.tsx index 5fceeb7ab61..8bbd685db87 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 +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.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..da6e749f33e 100644 --- a/packages/react/src/CounterLabel/CounterLabel.stories.tsx +++ b/packages/react/src/CounterLabel/CounterLabel.stories.tsx @@ -11,11 +11,11 @@ export const Default: StoryFn = () => 12 = { render: args => 12, args: { - scheme: 'primary', + variant: 'primary', }, argTypes: { - scheme: { - control: 'select', + variant: { + control: 'radio', options: ['primary', 'secondary'], }, }, diff --git a/packages/react/src/CounterLabel/CounterLabel.test.tsx b/packages/react/src/CounterLabel/CounterLabel.test.tsx index 227deb0c44d..fa6a3ca91de 100644 --- a/packages/react/src/CounterLabel/CounterLabel.test.tsx +++ b/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(1234) + expect(container.firstChild).toBeInTheDocument() + expect(container.firstChild).toHaveAttribute('data-variant', 'primary') + }) + + it('respects the secondary "variant" prop', () => { + const {container} = HTMLRender(1234) + expect(container.firstChild).toBeInTheDocument() + 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 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') + 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', () => { diff --git a/packages/react/src/CounterLabel/CounterLabel.tsx b/packages/react/src/CounterLabel/CounterLabel.tsx index 2f5101ace46..36edb110401 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 || scheme || 'secondary' + const counterProps = { ref: forwardedRef, ['aria-hidden']: 'true' as const, - ['data-scheme']: scheme, + ['data-variant']: inferredVariant, ...rest, }