Breadcrumbs no longer accepts styled system props (#1469)

Author: jfuchs

.changeset/spicy-seas-mate.md

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

@@ -27,26 +27,21 @@ This ensures that the NavLink gets `activeClassName='selected'`
 </Breadcrumbs>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Breadcrumbs and Breadcrumbs.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 ### Breadcrumbs
 
-The `Breadcrumbs` component does not receive any additional props besides `COMMON` system props.
+| Prop name | Type              | Default | Description                          |
+| :-------- | :---------------- | :-----: | :----------------------------------- |
+| children  | ReactNode         |         | The `Breadcrumbs.Item`s              |
+| className | string            |         |                                      |
+| sx        | SystemStyleObject |  `{}`   | Style to be applied to the component |
 
 ### Breadcrumbs.Item
 
-| Prop name | Type    | Default | Description                                      |
-| :-------- | :------ | :-----: | :----------------------------------------------- |
-| as        | String  |   `a`   | Sets the HTML tag for the component              |
-| href      | String  |         | URL to be used for the Link                      |
-| selected  | Boolean |  false  | Used to style the link as selected or unselected |
+| Prop name | Type              | Default | Description                                      |
+| :-------- | :---------------- | :-----: | :----------------------------------------------- |
+| as        | string            |   `a`   | Sets the HTML tag for the component              |
+| href      | string            |         | URL to be used for the Link                      |
+| selected  | boolean           | `false` | Used to style the link as selected or unselected |
+| sx        | SystemStyleObject |  `{}`   | Style to be applied to the component             |

src/Breadcrumbs.tsx

@@ -4,7 +4,7 @@ import * as History from 'history'
 import React from 'react'
 import styled from 'styled-components'
 import Box from './Box'
-import {COMMON, FLEX, get, SystemCommonProps, SystemFlexProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -31,20 +31,22 @@ const Wrapper = styled.li`
   }
 `
 
-const BreadcrumbsBase = styled.nav<SystemFlexProps & SystemCommonProps & SxProp>`
+const BreadcrumbsBase = styled.nav<SxProp>`
   display: flex;
   justify-content: space-between;
-  ${COMMON};
-  ${FLEX};
   ${sx};
 `
 
-export type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>
+export type BreadcrumbsProps = React.PropsWithChildren<
+  {
+    className?: string
+  } & SxProp
+>
 
-function Breadcrumbs({className, children, theme, ...rest}: React.PropsWithChildren<BreadcrumbsProps>) {
-  const wrappedChildren = React.Children.map(children, child => <Wrapper theme={theme}>{child}</Wrapper>)
+function Breadcrumbs({className, children, sx: sxProp}: React.PropsWithChildren<BreadcrumbsProps>) {
+  const wrappedChildren = React.Children.map(children, child => <Wrapper>{child}</Wrapper>)
   return (
-    <BreadcrumbsBase className={className} aria-label="Breadcrumbs" theme={theme} {...rest}>
+    <BreadcrumbsBase className={className} aria-label="Breadcrumbs" sx={sxProp}>
       <Box as="ol" my={0} pl={0}>
         {wrappedChildren}
       </Box>
@@ -55,8 +57,7 @@ function Breadcrumbs({className, children, theme, ...rest}: React.PropsWithChild
 type StyledBreadcrumbsItemProps = {
   to?: History.LocationDescriptor
   selected?: boolean
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 const BreadcrumbsItem = styled.a.attrs<StyledBreadcrumbsItemProps>(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
@@ -74,7 +75,6 @@ const BreadcrumbsItem = styled.a.attrs<StyledBreadcrumbsItemProps>(props => ({
     color: ${get('colors.fg.default')};
     pointer-events: none;
   }
-  ${COMMON}
   ${sx};
 `
 

src/__tests__/Breadcrumbs.test.tsx

@@ -7,7 +7,7 @@ import 'babel-polyfill'
 expect.extend(toHaveNoViolations)
 
 describe('Breadcrumbs', () => {
-  behavesAsComponent({Component: Breadcrumbs})
+  behavesAsComponent({Component: Breadcrumbs, options: {skipAs: true}})
 
   checkExports('Breadcrumbs', {
     default: Breadcrumbs,

src/__tests__/Breadcrumbs.types.test.tsx

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