diff --git a/.changeset/wild-olives-talk.md b/.changeset/wild-olives-talk.md new file mode 100644 index 00000000000..de4365db78a --- /dev/null +++ b/.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. diff --git a/docs/content/FormGroup.md b/docs/content/FormGroup.md index 716191e0f4f..7b11a796e19 100644 --- a/docs/content/FormGroup.md +++ b/docs/content/FormGroup.md @@ -20,27 +20,19 @@ Adds styles for multiple form elements used together. ``` -## System props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - - -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 | diff --git a/src/FormGroup.tsx b/src/FormGroup.tsx index d9111fafc1c..4ecd657a62a 100644 --- a/src/FormGroup.tsx +++ b/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` +const FormGroup = styled.div` margin: ${get('space.3')} 0; font-weight: ${get('fontWeights.normal')}; - ${COMMON}; ${sx}; ` -const FormGroupLabel = styled.label` +const FormGroupLabel = styled.label` display: block; margin: 0 0 ${get('space.2')}; font-size: ${get('fontSizes.1')}; font-weight: ${get('fontWeights.bold')}; - ${TYPOGRAPHY}; - ${COMMON}; ${sx}; ` diff --git a/src/__tests__/FormGroup.types.test.tsx b/src/__tests__/FormGroup.types.test.tsx new file mode 100644 index 00000000000..5ed40fddaed --- /dev/null +++ b/src/__tests__/FormGroup.types.test.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import FormGroup from '../FormGroup' + +export function shouldAcceptCallWithNoProps() { + return +} + +export function shouldNotAcceptSystemProps() { + // @ts-expect-error system props should not be accepted + return +}