diff --git a/.changeset/unlucky-snails-pull.md b/.changeset/unlucky-snails-pull.md new file mode 100644 index 00000000000..0219a9e82dc --- /dev/null +++ b/.changeset/unlucky-snails-pull.md @@ -0,0 +1,5 @@ +--- +'@primer/components': major +--- + +CounterLabel no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal. diff --git a/docs/content/CounterLabel.md b/docs/content/CounterLabel.md index 9cb1bb75e76..7ce3c0597ea 100644 --- a/docs/content/CounterLabel.md +++ b/docs/content/CounterLabel.md @@ -15,16 +15,6 @@ Use the CounterLabel component to add a count to navigational elements and butto ``` -## System props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - - -CounterLabel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. - ## Component props | Name | Type | Default | Description | diff --git a/src/CounterLabel.tsx b/src/CounterLabel.tsx index d862a2e1309..6b50aa33227 100644 --- a/src/CounterLabel.tsx +++ b/src/CounterLabel.tsx @@ -1,12 +1,11 @@ import styled from 'styled-components' -import {COMMON, get, SystemCommonProps} from './constants' +import {get} from './constants' import sx, {SxProp} from './sx' import {ComponentProps} from './utils/types' type StyledCounterLabelProps = { scheme?: 'primary' | 'secondary' -} & SystemCommonProps & - SxProp +} & SxProp const colorStyles = ({scheme, ...props}: StyledCounterLabelProps) => { return { @@ -39,7 +38,6 @@ const CounterLabel = styled.span` border-radius: 20px; ${colorStyles}; ${bgStyles}; - ${COMMON}; &:empty { display: none; diff --git a/src/__tests__/CounterLabel.types.test.tsx b/src/__tests__/CounterLabel.types.test.tsx new file mode 100644 index 00000000000..076a29514a4 --- /dev/null +++ b/src/__tests__/CounterLabel.types.test.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import CounterLabel from '../CounterLabel' + +export function shouldAcceptCallWithNoProps() { + return +} + +export function shouldNotAcceptSystemProps() { + // @ts-expect-error system props should not be accepted + return +}