Flash no longer accepts styled system props

.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.

docs/content/Flash.md

@@ -26,19 +26,10 @@ Flash components with icons inside of them will automatically set the correct co
 </Flash>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-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 |

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};
 `

src/__tests__/Flash.types.test.tsx

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