diff --git a/.changeset/shaggy-pens-run.md b/.changeset/shaggy-pens-run.md new file mode 100644 index 00000000000..17b6a02ef5b --- /dev/null +++ b/.changeset/shaggy-pens-run.md @@ -0,0 +1,5 @@ +--- +'@primer/components': major +--- + +Flash 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/Flash.md b/docs/content/Flash.md index e4c2484d7e1..144d335d0ea 100644 --- a/docs/content/Flash.md +++ b/docs/content/Flash.md @@ -26,19 +26,10 @@ Flash components with icons inside of them will automatically set the correct co ``` -## System props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - - -Flash 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 | -| :------ | :------ | :-----: | :----------------------------------------------------------------------------------------------------------------------- | -| full | Boolean | | Creates a full width Flash component | -| variant | String | default | Can be one of `default`, `success`, `warning`, or `danger` - sets the background color and border of the Flash component | +| Name | Type | Default | Description | +| :------ | :---------------- | :-----: | :----------------------------------------------------------------------------------------------------------------------- | +| full | Boolean | | Creates a full width Flash component | +| sx | SystemStyleObject | {} | Style to be applied to the component | +| variant | String | default | Can be one of `default`, `success`, `warning`, or `danger` - sets the background color and border of the Flash component | diff --git a/src/Flash.tsx b/src/Flash.tsx index 45191fe78aa..89a7154e543 100644 --- a/src/Flash.tsx +++ b/src/Flash.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components' import {variant} from 'styled-system' -import {COMMON, get, SystemCommonProps} from './constants' +import {get} from './constants' import sx, {SxProp} from './sx' import {ComponentProps} from './utils/types' @@ -45,8 +45,7 @@ const Flash = styled.div< { variant?: 'default' | 'warning' | 'success' | 'danger' full?: boolean - } & SystemCommonProps & - SxProp + } & SxProp >` position: relative; color: ${get('colors.fg.default')}; @@ -64,7 +63,6 @@ const Flash = styled.div< margin-right: ${get('space.2')}; } - ${COMMON}; ${variants}; ${sx}; ` diff --git a/src/__tests__/Flash.types.test.tsx b/src/__tests__/Flash.types.test.tsx new file mode 100644 index 00000000000..fc66023384c --- /dev/null +++ b/src/__tests__/Flash.types.test.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import Flash from '../Flash' + +export function shouldAcceptCallWithNoProps() { + return +} + +export function shouldNotAcceptSystemProps() { + // @ts-expect-error system props should not be accepted + return +}