FormGroup no longer accepts styled system props (#1562)

Author: jfuchs

.changeset/wild-olives-talk.md

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

@@ -20,27 +20,19 @@ Adds styles for multiple form elements used together.
 </>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-FormGroup components get `COMMON` system props. FormGroup.Label components get `COMMON` and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 ### FormGroup
 
-| Name | Type   | Default | Description                         |
-| :--- | :----- | :-----: | :---------------------------------- |
-| as   | String |  `div`  | Sets the HTML tag for the component |
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| as   | String            |  `div`  | Sets the HTML tag for the component  |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 ### FormGroup.Label
 
-| Name    | Type   | Default | Description                                                                    |
-| :------ | :----- | :-----: | :----------------------------------------------------------------------------- |
-| as      | String | `label` | Sets the HTML tag for the component                                            |
-| htmlFor | String |         | The value of `htmlFor` needs to be the same as the `id` of the input it labels |
+| Name    | Type              | Default | Description                                                                    |
+| :------ | :---------------- | :-----: | :----------------------------------------------------------------------------- |
+| as      | String            | `label` | Sets the HTML tag for the component                                            |
+| htmlFor | String            |         | The value of `htmlFor` needs to be the same as the `id` of the input it labels |
+| sx      | SystemStyleObject |   {}    | Style to be applied to the component                                           |

src/FormGroup.tsx

@@ -1,22 +1,19 @@
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-const FormGroup = styled.div<SystemCommonProps & SxProp>`
+const FormGroup = styled.div<SxProp>`
   margin: ${get('space.3')} 0;
   font-weight: ${get('fontWeights.normal')};
-  ${COMMON};
   ${sx};
 `
 
-const FormGroupLabel = styled.label<SystemTypographyProps & SystemCommonProps & SxProp>`
+const FormGroupLabel = styled.label<SxProp>`
   display: block;
   margin: 0 0 ${get('space.2')};
   font-size: ${get('fontSizes.1')};
   font-weight: ${get('fontWeights.bold')};
-  ${TYPOGRAPHY};
-  ${COMMON};
   ${sx};
 `
 

src/__tests__/FormGroup.types.test.tsx

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