StyledOcticon no longer accepts styled system props

Author: jfuchs

.changeset/mean-bananas-explain.md

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

@@ -14,23 +14,14 @@ StyledOcticon renders an [Octicon](https://octicons.github.com) with common syst
 </>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-StyledOcticon components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 StyledOcticon passes all of its props except the common system props down to the [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react#usage), including:
 
-| Name          | Type      |    Default    | Description                                                                                                  |
-| :------------ | :-------- | :-----------: | :----------------------------------------------------------------------------------------------------------- |
-| ariaLabel     | String    |               | Specifies the `aria-label` attribute, which is read verbatim by screen readers                               |
-| icon          | Component |               | [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react) used in the component |
-| size          | Number    |      16       | Sets the uniform `width` and `height` of the SVG element                                                     |
-| verticalAlign | String    | `text-bottom` | Sets the `vertical-align` CSS property                                                                       |
+| Name          | Type              |    Default    | Description                                                                                                  |
+| :------------ | :---------------- | :-----------: | :----------------------------------------------------------------------------------------------------------- |
+| ariaLabel     | String            |               | Specifies the `aria-label` attribute, which is read verbatim by screen readers                               |
+| icon          | Component         |               | [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react) used in the component |
+| size          | Number            |      16       | Sets the uniform `width` and `height` of the SVG element                                                     |
+| verticalAlign | String            | `text-bottom` | Sets the `vertical-align` CSS property                                                                       |
+| sx            | SystemStyleObject |      {}       | Style to be applied to the component                                                                         |

src/StyledOcticon.tsx

@@ -1,7 +1,6 @@
 import {IconProps} from '@primer/octicons-react'
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -11,8 +10,7 @@ function Octicon({icon: IconComponent, ...rest}: OcticonProps) {
   return <IconComponent {...rest} />
 }
 
-const StyledOcticon = styled(Octicon)<SystemCommonProps & SxProp>`
-  ${COMMON}
+const StyledOcticon = styled(Octicon)<SxProp>`
   ${sx}
 `
 

src/__tests__/StyledOcticon.types.test.tsx

@@ -0,0 +1,12 @@
+import {MoonIcon} from '@primer/octicons-react'
+import React from 'react'
+import StyledOcticon from '../StyledOcticon'
+
+export function shouldAcceptCallWithNoProps() {
+  return <StyledOcticon icon={MoonIcon} />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <StyledOcticon backgroundColor="wheat" />
+}