StateLabel no longer accepts styled system props

.changeset/gentle-tips-hear.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+StateLabel 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/StateLabel.md

@@ -18,19 +18,10 @@ Use StateLabel components to show the status of an issue or pull request.
 </>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-StateLabel 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                                                                                                    |
-| :------ | :----- | :------: | :------------------------------------------------------------------------------------------------------------- |
-| variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel.                       |
-| status  | String |          | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, `draft` or `issueDraft`. |
+| Name    | Type              | Default  | Description                                                                                                    |
+| :------ | :---------------- | :------: | :------------------------------------------------------------------------------------------------------------- |
+| variant | String            | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel.                       |
+| status  | String            |          | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, `draft` or `issueDraft`. |
+| sx      | SystemStyleObject |    {}    | Style to be applied to the component                                                                           |

src/StateLabel.tsx

@@ -9,7 +9,7 @@ import {
 import React from 'react'
 import styled from 'styled-components'
 import {variant} from 'styled-system'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import StyledOcticon from './StyledOcticon'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
@@ -77,8 +77,7 @@ const sizeVariants = variant({
 type StyledStateLabelBaseProps = {
   variant?: 'small' | 'normal'
   status?: keyof typeof octiconMap
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const StateLabelBase = styled.span<StyledStateLabelBaseProps>`
   display: inline-flex;
@@ -90,7 +89,6 @@ const StateLabelBase = styled.span<StyledStateLabelBaseProps>`
   border-radius: ${get('radii.3')};
   ${colorVariants};
   ${sizeVariants};
-  ${COMMON};
   ${sx};
 `
 

src/__tests__/StateLabel.types.test.tsx

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