diff --git a/.changeset/little-bats-repeat.md b/.changeset/little-bats-repeat.md new file mode 100644 index 00000000000..24a7bc73c0e --- /dev/null +++ b/.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. diff --git a/docs/content/Header.md b/docs/content/Header.md index 26548ad3fb3..632262a9c50 100644 --- a/docs/content/Header.md +++ b/docs/content/Header.md @@ -53,27 +53,25 @@ All items directly under the Header component should be a `Header.Item` componen ``` -## System props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - +## 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 | diff --git a/src/Header.tsx b/src/Header.tsx index ac4bc8af8e3..4476b47c0d5 100644 --- a/src/Header.tsx +++ b/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` z-index: 32; @@ -23,8 +20,6 @@ const Header = styled.div` align-items: center; flex-wrap: nowrap; - ${COMMON} - ${BORDER} ${sx}; ` const HeaderItem = styled.div` @@ -40,8 +35,6 @@ const HeaderItem = styled.div` flex: auto; `}; - ${COMMON}; - ${BORDER}; ${sx}; ` @@ -70,9 +63,6 @@ const HeaderLink = styled.a.attrs(({to}) => { color: ${get('colors.header.text')}; } - ${COMMON}; - ${BORDER}; - ${TYPOGRAPHY}; ${sx}; ` diff --git a/src/__tests__/Header.types.test.tsx b/src/__tests__/Header.types.test.tsx new file mode 100644 index 00000000000..65da425b161 --- /dev/null +++ b/src/__tests__/Header.types.test.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import Header from '../Header' + +export function shouldAcceptCallWithNoProps() { + return
+} + +export function shouldNotAcceptSystemProps() { + return ( + <> + {/* @ts-expect-error system props should not be accepted */} +
+ {/* @ts-expect-error system props should not be accepted */} + + {/* @ts-expect-error system props should not be accepted */} + + + ) +}