From 1820587d3420f86b705b9a3aee703ac93ade8df5 Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Tue, 16 Nov 2021 15:00:31 -0800
Subject: [PATCH] UnderlineNav no longer accepts styled system props (#1579)

---
 .changeset/lucky-hounds-lie.md            |  5 ++++
 docs/content/UnderlineNav.md              | 34 +++++++++--------------
 src/UnderlineNav.tsx                      |  9 ++----
 src/__tests__/UnderlineNav.types.test.tsx | 22 +++++++++++++++
 4 files changed, 43 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/lucky-hounds-lie.md
 create mode 100644 src/__tests__/UnderlineNav.types.test.tsx

diff --git a/.changeset/lucky-hounds-lie.md b/.changeset/lucky-hounds-lie.md
new file mode 100644
index 00000000000..5089a619b25
--- /dev/null
+++ b/.changeset/lucky-hounds-lie.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+UnderlineNav 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/UnderlineNav.md b/docs/content/UnderlineNav.md
index 4dae70d8943..837a50e3cb7 100644
--- a/docs/content/UnderlineNav.md
+++ b/docs/content/UnderlineNav.md
@@ -23,31 +23,23 @@ This ensures that the NavLink gets `activeClassName='selected'`
 </UnderlineNav>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-UnderlineNav and UnderlineNav.Link components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 ### UnderlineNav
 
-| Prop name  | Type    | Description                                                                            |
-| :--------- | :------ | :------------------------------------------------------------------------------------- |
-| actions    | Node    | Place another element, such as a button, to the opposite side of the navigation items. |
-| align      | String  | Use `right` to have navigation items aligned right.                                    |
-| full       | Boolean | Used to make navigation fill the width of the container.                               |
-| aria-label | String  | Used to set the `aria-label` on the top level `<nav>` element.                         |
+| Name       | Type              | Default | Description                                                                            |
+| :--------- | :---------------- | :-----: | :------------------------------------------------------------------------------------- |
+| actions    | Node              |         | Place another element, such as a button, to the opposite side of the navigation items. |
+| align      | String            |         | Use `right` to have navigation items aligned right.                                    |
+| full       | Boolean           |         | Used to make navigation fill the width of the container.                               |
+| aria-label | String            |         | Used to set the `aria-label` on the top level `<nav>` element.                         |
+| sx         | SystemStyleObject |   {}    | Style to be applied to the component                                                   |
 
 ### UnderlineNav.Link
 
-| Prop name | Type    | Description                                      |
-| :-------- | :------ | :----------------------------------------------- |
-| as        | String  | sets the HTML tag for the component              |
-| href      | String  | URL to be used for the Link                      |
-| selected  | Boolean | Used to style the link as selected or unselected |
+| Name     | Type              | Default | Description                                      |
+| :------- | :---------------- | :-----: | :----------------------------------------------- |
+| as       | String            |         | sets the HTML tag for the component              |
+| href     | String            |         | URL to be used for the Link                      |
+| selected | Boolean           |         | Used to style the link as selected or unselected |
+| sx       | SystemStyleObject |   {}    | Style to be applied to the component             |
diff --git a/src/UnderlineNav.tsx b/src/UnderlineNav.tsx
index e2cf2406e7e..5c72c322fde 100644
--- a/src/UnderlineNav.tsx
+++ b/src/UnderlineNav.tsx
@@ -3,14 +3,14 @@ import classnames from 'classnames'
 import * as History from 'history'
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
 const ITEM_CLASS = 'UnderlineNav-item'
 const SELECTED_CLASS = 'selected'
 
-const UnderlineNavBase = styled.nav`
+const UnderlineNavBase = styled.nav<SxProp>`
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid ${get('colors.border.muted')};
@@ -39,7 +39,6 @@ const UnderlineNavBase = styled.nav`
     align-self: center;
   }
 
-  ${COMMON};
   ${sx};
 `
 
@@ -63,8 +62,7 @@ function UnderlineNav({actions, className, align, children, full, label, theme,
 type StyledUnderlineNavLinkProps = {
   to?: History.LocationDescriptor
   selected?: boolean
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const UnderlineNavLink = styled.a.attrs<StyledUnderlineNavLinkProps>(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
@@ -100,7 +98,6 @@ const UnderlineNavLink = styled.a.attrs<StyledUnderlineNavLinkProps>(props => ({
     }
   }
 
-  ${COMMON};
   ${sx};
 `
 
diff --git a/src/__tests__/UnderlineNav.types.test.tsx b/src/__tests__/UnderlineNav.types.test.tsx
new file mode 100644
index 00000000000..6e984372067
--- /dev/null
+++ b/src/__tests__/UnderlineNav.types.test.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import UnderlineNav from '../UnderlineNav'
+
+export function shouldAcceptCallWithNoProps() {
+  return (
+    <>
+      <UnderlineNav />
+      <UnderlineNav.Link />
+    </>
+  )
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <UnderlineNav backgroundColor="snow" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <UnderlineNav.Link backgroundColor="springgreen" />
+    </>
+  )
+}