From 11526537ad579dcd4317bf8ced739defec6b066e Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Wed, 3 Nov 2021 13:54:18 -0700
Subject: [PATCH] Link no longer accepts styled system props

---
 .changeset/fast-fireants-sell.md              |  5 ++++
 docs/content/Link.md                          | 25 ++++++-------------
 src/Link.tsx                                  |  8 ++----
 src/__tests__/Link.test.tsx                   | 10 ++++----
 src/__tests__/Link.types.test.tsx             | 11 ++++++++
 .../__snapshots__/Link.test.tsx.snap          |  3 +--
 6 files changed, 32 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/fast-fireants-sell.md
 create mode 100644 src/__tests__/Link.types.test.tsx

diff --git a/.changeset/fast-fireants-sell.md b/.changeset/fast-fireants-sell.md
new file mode 100644
index 00000000000..59f0f25ad4b
--- /dev/null
+++ b/.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.
diff --git a/docs/content/Link.md b/docs/content/Link.md
index 4ec7fc339bb..043472a38c3 100644
--- a/docs/content/Link.md
+++ b/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                                            |
diff --git a/src/Link.tsx b/src/Link.tsx
index a382b445527..c70c14a3380 100644
--- a/src/Link.tsx
+++ b/src/Link.tsx
@@ -1,6 +1,6 @@
 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'
 
@@ -8,9 +8,7 @@ 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};
 `
 
diff --git a/src/__tests__/Link.test.tsx b/src/__tests__/Link.test.tsx
index eedba044c76..6479ef6bec4 100644
--- a/src/__tests__/Link.test.tsx
+++ b/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()
   })
 })
diff --git a/src/__tests__/Link.types.test.tsx b/src/__tests__/Link.types.test.tsx
new file mode 100644
index 00000000000..1fc8a41fdd4
--- /dev/null
+++ b/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" />
+}
diff --git a/src/__tests__/__snapshots__/Link.test.tsx.snap b/src/__tests__/__snapshots__/Link.test.tsx.snap
index e1e15666d1c..55288ca801c 100644
--- a/src/__tests__/__snapshots__/Link.test.tsx.snap
+++ b/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}
 />
 `;