SideNav no longer accepts styled system props (#1572)

Author: jfuchs

.changeset/tender-beds-learn.md

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

@@ -147,33 +147,25 @@ If using React Router, you can use the `as` prop to render the element as a `Nav
 <SideNav.Link as={NavLink} to="...">...</SideNav.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>
-
-`SideNav` components get `COMMON`, `BORDER`, `LAYOUT`, and `FLEX` system props. `SideNav.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
 
 ### SideNav
 
-| Name     | Type    | Default  | Description                                                                    |
-| :------- | :------ | :------: | :----------------------------------------------------------------------------- |
-| as       | String  |  'nav'   | Sets the HTML tag for the component.                                           |
-| bordered | Boolean |  false   | Renders the component with a border.                                           |
-| variant  | String  | 'normal' | Set to `lightweight` to render [in a lightweight style](#lightweight-variant). |
+| Name     | Type              | Default  | Description                                                                    |
+| :------- | :---------------- | :------: | :----------------------------------------------------------------------------- |
+| as       | String            |  'nav'   | Sets the HTML tag for the component.                                           |
+| bordered | Boolean           |  false   | Renders the component with a border.                                           |
+| variant  | String            | 'normal' | Set to `lightweight` to render [in a lightweight style](#lightweight-variant). |
+| sx       | SystemStyleObject |    {}    | Style to be applied to the component                                           |
 
 ### SideNav.Link
 
-| Name      | Type    | Default  | Description                                                                                       |
-| :-------- | :------ | :------: | :------------------------------------------------------------------------------------------------ |
-| as        | String  |   'a'    | Sets the HTML tag for the component.                                                              |
-| 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                   |
-| selected  | Boolean |  false   | Sets the link as selected, giving it a different style and setting the `aria-current` attribute.  |
-| underline | Boolean |  false   | Adds underline to the Link                                                                        |
-| variant   | String  | 'normal' | Set to `full` to render [a full variant](#full-variant), suitable for including icons and labels. |
+| Name      | Type              | Default  | Description                                                                                       |
+| :-------- | :---------------- | :------: | :------------------------------------------------------------------------------------------------ |
+| as        | String            |   'a'    | Sets the HTML tag for the component.                                                              |
+| 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                   |
+| selected  | Boolean           |  false   | Sets the link as selected, giving it a different style and setting the `aria-current` attribute.  |
+| underline | Boolean           |  false   | Adds underline to the Link                                                                        |
+| variant   | String            | 'normal' | Set to `full` to render [a full variant](#full-variant), suitable for including icons and labels. |
+| sx        | SystemStyleObject |    {}    | Style to be applied to the component                                                              |

src/SideNav.tsx

@@ -1,45 +1,44 @@
 // eslint-disable-next-line import/no-namespace
 import * as History from 'history'
 
-import {COMMON, get} from './constants'
+import {get} from './constants'
 import styled, {css} from 'styled-components'
 
 import Box from './Box'
 import {ComponentProps} from './utils/types'
 import Link from './Link'
 import React from 'react'
 import classnames from 'classnames'
-import sx from './sx'
+import sx, {SxProp} from './sx'
 
 type SideNavBaseProps = {
   variant?: 'lightweight' | 'normal'
   bordered?: boolean
-} & ComponentProps<typeof Box>
+  className?: string
+  children?: React.ReactNode
+  'aria-label'?: string
+}
 
-function SideNavBase({variant, className, bordered, children, ...props}: SideNavBaseProps) {
+function SideNavBase({variant, className, bordered, children, 'aria-label': ariaLabel}: SideNavBaseProps) {
   const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal'
   const newClassName = classnames(className, `variant-${variantClassName}`)
 
-  if (!bordered) {
-    props = {...props, borderWidth: 0}
-  }
-
   return (
     <Box
-      borderWidth="1px"
+      borderWidth={bordered ? '1px' : 0}
       borderStyle="solid"
       borderColor="border.default"
       borderRadius={2}
       as="nav"
       className={newClassName}
-      {...props}
+      aria-label={ariaLabel}
     >
       {children}
     </Box>
   )
 }
 
-const SideNav = styled(SideNavBase)`
+const SideNav = styled(SideNavBase)<SxProp>`
   background-color: ${get('colors.canvas.subtle')};
 
   ${props =>
@@ -53,7 +52,6 @@ const SideNav = styled(SideNavBase)`
       }
     `}
 
-  ${COMMON};
   ${sx};
 `
 type StyledSideNavLinkProps = {
@@ -85,7 +83,7 @@ const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(props => {
   } else {
     return {}
   }
-})<StyledSideNavLinkProps>`
+})<StyledSideNavLinkProps & SxProp>`
   position: relative;
   display: block;
   ${props =>

src/__tests__/SideNav.types.test.tsx

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