Header no longer accepts styled system props

.changeset/little-bats-repeat.md

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

@@ -53,27 +53,25 @@ All items directly under the Header component should be a `Header.Item` componen
 </Header>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
+## Component props
 
-`Header` and `Header.Item` components get `COMMON` and `BORDER` system props. `Header.Link` component gets `COMMON`, `BORDER`, and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+### Header
 
-## Component props
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 ### Header.Item
 
-| Prop name | Type    | Description                                |
-| :-------- | :------ | :----------------------------------------- |
-| full      | Boolean | stretches item to fill the available space |
+| Name | Type              | Default | Description                                |
+| :--- | :---------------- | :-----: | :----------------------------------------- |
+| full | Boolean           |         | stretches item to fill the available space |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component       |
 
 ### Header.Link
 
-| Prop name | Type   | Description                         |
-| :-------- | :----- | :---------------------------------- |
-| as        | String | sets the HTML tag for the component |
-| href      | String | URL to be used for the Link         |
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| as   | String            |         | sets the HTML tag for the component  |
+| href | String            |         | URL to be used for the Link          |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |

src/Header.tsx

@@ -1,16 +1,13 @@
 // eslint-disable-next-line import/no-namespace
 import * as History from 'history'
 import styled, {css} from 'styled-components'
-import {BORDER, COMMON, get, SystemBorderProps, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-type StyledHeaderItemProps = {full?: boolean} & SystemCommonProps & SxProp
-type StyledHeaderProps = SystemBorderProps & SystemCommonProps & SxProp
-type StyledHeaderLinkProps = {to?: History.LocationDescriptor} & SystemCommonProps &
-  SxProp &
-  SystemTypographyProps &
-  SystemBorderProps
+type StyledHeaderItemProps = {full?: boolean} & SxProp
+type StyledHeaderProps = SxProp
+type StyledHeaderLinkProps = {to?: History.LocationDescriptor} & SxProp
 
 const Header = styled.div<StyledHeaderProps>`
   z-index: 32;
@@ -23,8 +20,6 @@ const Header = styled.div<StyledHeaderProps>`
   align-items: center;
   flex-wrap: nowrap;
 
-  ${COMMON}
-  ${BORDER}
   ${sx};
 `
 const HeaderItem = styled.div<StyledHeaderItemProps>`
@@ -40,8 +35,6 @@ const HeaderItem = styled.div<StyledHeaderItemProps>`
       flex: auto;
     `};
 
-  ${COMMON};
-  ${BORDER};
   ${sx};
 `
 
@@ -70,9 +63,6 @@ const HeaderLink = styled.a.attrs<StyledHeaderLinkProps>(({to}) => {
     color: ${get('colors.header.text')};
   }
 
-  ${COMMON};
-  ${BORDER};
-  ${TYPOGRAPHY};
   ${sx};
 `
 

src/__tests__/Header.types.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Header from '../Header'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Header />
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <Header backgroundColor="saddlebrown" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Header.Item backgroundColor="salmon" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Header.Link backgroundColor="sandybrown" />
+    </>
+  )
+}