CounterLabel no longer accepts styled system props (#1557)

Author: jfuchs

.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.

docs/content/CounterLabel.md

@@ -15,16 +15,6 @@ Use the CounterLabel component to add a count to navigational elements and butto
 </>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-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                                                                                                                                                                        |

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<StyledCounterLabelProps>`
   border-radius: 20px;
   ${colorStyles};
   ${bgStyles};
-  ${COMMON};
 
   &:empty {
     display: none;

src/__tests__/CounterLabel.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import CounterLabel from '../CounterLabel'
+
+export function shouldAcceptCallWithNoProps() {
+  return <CounterLabel />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <CounterLabel backgroundColor="whitesmoke" />
+}