StyledOcticon no longer accepts styled system props (#1616)

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/DropdownMenu/DropdownButton.tsx

@@ -9,7 +9,7 @@ export const DropdownButton = React.forwardRef<HTMLElement, React.PropsWithChild
   ({children, ...props}: React.PropsWithChildren<DropdownButtonProps>, ref): JSX.Element => (
     <Button ref={ref} type="button" {...props}>
       {children}
-      <StyledOcticon icon={TriangleDownIcon} ml={1} />
+      <StyledOcticon icon={TriangleDownIcon} sx={{ml: 1}} />
     </Button>
   )
 )

src/StateLabel.tsx

@@ -99,7 +99,7 @@ function StateLabel({children, status, variant: variantProp, ...rest}: StateLabe
   return (
     <StateLabelBase {...rest} variant={variantProp} status={status}>
       {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
-      {status && <StyledOcticon mr={1} {...octiconProps} icon={octiconMap[status] || QuestionIcon} />}
+      {status && <StyledOcticon {...octiconProps} icon={octiconMap[status] || QuestionIcon} sx={{mr: 1}} />}
       {children}
     </StateLabelBase>
   )

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" />
+}