Deprecate system props, but don't remove system props (#1336)

* deprecate system props

* failing spec to combine sx props

* combine sx props when there is an existing sx prop in code mod

* respect spreads in system prop codemod

* run tests in codemods and in src

* changeset with codemod documentation

* respect string literal keys

* respect object accessors with spreads

* update documentations in changeset

* update documentations in changeset

* Update deprecation warning

* Update StyledOcticon docs

* Update system prop and sx prop docs

* Update changeset

Co-authored-by: Cole Bemis <colebemis@github.com>

.changeset/tasty-laws-bathe.md

@@ -0,0 +1,26 @@
+---
+'@primer/components': minor
+---
+
+System props are deprecated in all components except `Box`. Move all system props into the [`sx` prop](https://primer.style/components/overriding-styles) instead. Example:
+
+```diff
+- <Button mr={2}>...</Button>
++ <Button sx={{mr: 2}}>...</Button>
+```
+
+There is a codemod available to migrate from system props to the `sx` prop:
+
+- TypeScript example:
+
+  ```shell
+  npx jscodeshift -t node_modules/@primer/components/codemods/removeSystemProps.js
+  --parser=tsx path/to/workspace/src/*.tsx
+  ```
+
+- Babel example:
+
+  ```shell
+  npx jscodeshift -t node_modules/@primer/components/codemods/removeSystemProps.js
+  --parser=babel path/to/workspace/src/*.tsx
+  ```

codemods/__tests__/removeSystemProps.js

@@ -0,0 +1,225 @@
+import {defineInlineTest} from 'jscodeshift/dist/testUtils'
+import removeSystemProps from '../removeSystemProps'
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label mr={1} ml={leftMargin}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label sx={{mr: 1, ml: leftMargin}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  'removeSystemProps'
+)
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Button, StyledOcticon} from '@primer/components'
+import {CheckIcon, ClippyIcon} from '@primer/octicons-react'
+
+const ClipboardCopy = ({value}) => <Button px={2}>
+  {copied ? (
+    <StyledOcticon icon={CheckIcon} color="green.5" />
+  ) : (
+    <StyledOcticon icon={ClippyIcon} color="gray.5" />
+  )}
+</Button>
+
+`.trim(),
+  `
+import {Button, StyledOcticon} from '@primer/components'
+import {CheckIcon, ClippyIcon} from '@primer/octicons-react'
+
+const ClipboardCopy = ({value}) => (
+  <Button sx={{px: 2}}>
+    {copied ? (
+      <StyledOcticon icon={CheckIcon} sx={{color: 'green.5'}} />
+    ) : (
+      <StyledOcticon icon={ClippyIcon} sx={{color: 'gray.5'}} />
+    )}
+  </Button>
+)`.trim(),
+  'removeSystemProps'
+)
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Link} from '@primer/components'
+const siteMetadata = {shortName: 'inline-block'}
+
+const link = <Link
+  display={[
+    // We only hide "Primer" on small viewports if a shortName is defined.
+    siteMetadata.shortName ? 'none' : 'inline-block',
+    null,
+    null,
+    'inline-block',
+  ]}
+  href="https://primer.style"
+  color="blue.4"
+  fontFamily="mono"
+>
+  Primer
+</Link>
+`.trim(),
+  `
+import {Link} from '@primer/components'
+const siteMetadata = {shortName: 'inline-block'}
+
+const link = (
+  <Link
+    href="https://primer.style"
+    sx={{
+      display: [siteMetadata.shortName ? 'none' : 'inline-block', null, null, 'inline-block'],
+      color: 'blue.4',
+      fontFamily: 'mono'
+    }}
+  >
+    Primer
+  </Link>
+)`.trim(),
+  'removeSystemProps'
+)
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label mr={1} ml={leftMargin} sx={{p: 1}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label sx={{p: 1, mr: 1, ml: leftMargin}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  'removeSystemProps'
+)
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label mr={1} ml={leftMargin} sx={{p:3}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label sx={{p: 3, mr: 1, ml: leftMargin}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  'removeSystemProps'
+)
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+const colorProps = {backgroundColor: 'red'}
+const borderProps = {borderColor: 'red'}
+export default () => (
+  <Label mr={1} ml={leftMargin} sx={{...colorProps, ...borderProps, p:3}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+const colorProps = {backgroundColor: 'red'}
+const borderProps = {borderColor: 'red'}
+export default () => (
+  <Label sx={{...colorProps, ...borderProps, p: 3, mr: 1, ml: leftMargin}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  'removeSystemProps'
+)
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label mr={1} sx={{'&:hover': {textDecoration: 'none'}}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label sx={{'&:hover': {textDecoration: 'none'}, mr: 1}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  'removeSystemProps'
+)
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+const colorProps = {dark: {backgroundColor: 'red'}}
+export default () => (
+  <Label mr={1} ml={leftMargin} sx={{...colorProps.dark, p:3}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+const colorProps = {dark: {backgroundColor: 'red'}}
+export default () => (
+  <Label sx={{...colorProps.dark, p: 3, mr: 1, ml: leftMargin}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  'removeSystemProps'
+)