LabelGroup no longer accepts styled system props (#1565)

Author: jfuchs

.changeset/eleven-cycles-search.md

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

@@ -9,23 +9,13 @@ The LabelGroup component is used to add commonly used margins and wrapping for g
 ```jsx live
 <LabelGroup>
   <Label>Default label</Label>
-  <Label sx={{color: "fg.onEmphasis", bg: "danger.emphasis"}}>
-    Label with background indicating a closed PR state
-  </Label>
+  <Label sx={{color: 'fg.onEmphasis', bg: 'danger.emphasis'}}>Label with background indicating a closed PR state</Label>
   <Label outline>Default outline label</Label>
 </LabelGroup>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-LabelGroup components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
-LabelGroup does not get any additional props.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |

src/LabelGroup.tsx

@@ -1,10 +1,9 @@
 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'
 
-const LabelGroup = styled.span<SystemCommonProps & SxProp>`
-  ${COMMON}
+const LabelGroup = styled.span<SxProp>`
   & * {
     margin-right: ${get('space.1')};
   }

src/__tests__/LabelGroup.types.test.tsx

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