TabNav no longer accepts styled system props

Author: jfuchs

.changeset/neat-masks-grab.md

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

@@ -23,28 +23,20 @@ This ensures that the NavLink gets `activeClassName='selected'`
 </TabNav>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-TabNav and TabNav.Link components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 ### TabNav
 
-| Prop name  | Type   | Description                                                    |
-| :--------- | :----- | :------------------------------------------------------------- |
-| aria-label | String | Used to set the `aria-label` on the top level `<nav>` element. |
+| Name       | Type              | Default | Description                                                    |
+| :--------- | :---------------- | :-----: | :------------------------------------------------------------- |
+| aria-label | String            |         | Used to set the `aria-label` on the top level `<nav>` element. |
+| sx         | SystemStyleObject |   {}    | Style to be applied to the component                           |
 
 ### TabNav.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             |

src/TabNav.tsx

@@ -3,17 +3,16 @@ import classnames from 'classnames'
 import * as History from 'history'
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
 const ITEM_CLASS = 'TabNav-item'
 const SELECTED_CLASS = 'selected'
 
-const TabNavBase = styled.div<SystemCommonProps & SxProp>`
+const TabNavBase = styled.div<SxProp>`
   margin-top: 0;
   border-bottom: 1px solid ${get('colors.border.default')};
-  ${COMMON}
   ${sx}
 `
 
@@ -36,9 +35,7 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
 type StyledTabNavLinkProps = {
   to?: History.LocationDescriptor
   selected?: boolean
-} & SystemCommonProps &
-  SxProp &
-  SystemTypographyProps
+} & SxProp
 
 const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
@@ -67,7 +64,6 @@ const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
     background-color: ${get('colors.canvas.default')};
   }
 
-  ${COMMON};
   ${sx};
 `
 

src/__tests__/TabNav.types.test.tsx

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