Link no longer accepts styled system props

.changeset/fast-fireants-sell.md

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

@@ -16,22 +16,13 @@ In special cases where you'd like a `<button>` styled like a `Link`, use `<Link
 </Link>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Link components get `COMMON` and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
-| Name       | Type    | Default | Description                                                                     |
-| :--------- | :------ | :-----: | :------------------------------------------------------------------------------ |
-| href       | String  |         | URL to be used for the Link                                                     |
-| muted      | Boolean |  false  | Uses a less prominent shade for Link color, and the default link shade on hover |
-| underline  | Boolean |  false  | Adds underline to the Link                                                      |
-| as         | String  |   'a'   | Can be 'a', 'button', 'input', or 'summary'                                     |
-| hoverColor | String  |         | Color used when hovering over link                                              |
+| Name       | Type              | Default | Description                                                                     |
+| :--------- | :---------------- | :-----: | :------------------------------------------------------------------------------ |
+| href       | String            |         | URL to be used for the Link                                                     |
+| muted      | Boolean           |  false  | Uses a less prominent shade for Link color, and the default link shade on hover |
+| underline  | Boolean           |  false  | Adds underline to the Link                                                      |
+| as         | String            |   'a'   | Can be 'a', 'button', 'input', or 'summary'                                     |
+| hoverColor | String            |         | Color used when hovering over link                                              |
+| sx         | SystemStyleObject |   {}    | Style to be applied to the component                                            |

src/Link.tsx

@@ -1,16 +1,14 @@
 import styled from 'styled-components'
 import {system} from 'styled-system'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
 type StyledLinkProps = {
   hoverColor?: string
   muted?: boolean
   underline?: boolean
-} & SystemCommonProps &
-  SxProp &
-  SystemTypographyProps
+} & SxProp
 
 const hoverColor = system({
   hoverColor: {
@@ -37,8 +35,6 @@ const Link = styled.a<StyledLinkProps>`
     border: 0;
     appearance: none;
   }
-  ${TYPOGRAPHY};
-  ${COMMON};
   ${sx};
 `
 

src/__tests__/Link.test.tsx

@@ -28,9 +28,9 @@ describe('Link', () => {
     expect(render(<Link hoverColor="accent.fg" />)).toMatchSnapshot()
   })
 
-  it('respects the "fontStyle" prop', () => {
-    expect(render(<Link fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
-    expect(render(<Link as="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
+  it('respects the "sx" prop', () => {
+    expect(render(<Link sx={{fontStyle: 'italic'}} />)).toHaveStyleRule('font-style', 'italic')
+    expect(render(<Link as="i" sx={{fontStyle: 'normal'}} />)).toHaveStyleRule('font-style', 'normal')
   })
 
   it('applies button styles when rendering a button element', () => {
@@ -41,7 +41,7 @@ describe('Link', () => {
     expect(render(<Link muted />)).toMatchSnapshot()
   })
 
-  it('respectes the "color" prop when "muted" prop is also passed', () => {
-    expect(render(<Link muted color="fg.onEmphasis" />)).toMatchSnapshot()
+  it('respectes the  "sx" prop when "muted" prop is also passed', () => {
+    expect(render(<Link muted sx={{color: 'fg.onEmphasis'}} />)).toMatchSnapshot()
   })
 })

src/__tests__/Link.types.test.tsx

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

src/__tests__/__snapshots__/Link.test.tsx.snap

@@ -103,7 +103,7 @@ exports[`Link renders consistently 1`] = `
 />
 `;
 
-exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] = `
+exports[`Link respectes the  "sx" prop when "muted" prop is also passed 1`] = `
 .c0 {
   color: #57606a;
   -webkit-text-decoration: none;
@@ -136,7 +136,6 @@ exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] =
 
 <a
   className="c0"
-  color="fg.onEmphasis"
   muted={true}
 />
 `;