Avatar, BranchName, Details, Heading, and ProgressBar no longer accep…

…t styled-system props. (#1643)

.changeset/clean-clocks-warn.md

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

.changeset/rude-squids-lick.md

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

.changeset/ten-doors-arrive.md

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

.changeset/three-moose-impress.md

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

@@ -12,15 +12,16 @@ BranchName is a label-type component rendered as an `<a>` tag by default with mo
 
 ## Props
 
-| Name | Type   | Default | Description                         |
-| :--- | :----- | :-----: | :---------------------------------- |
-| as   | String |  `<a>`  | sets the HTML tag for the component |
-| href | String |         | a URL to link the component to      |
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| as   | String            |  `<a>`  | sets the HTML tag for the component  |
+| href | String            |         | a URL to link the component to       |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 ## Component status
 
 <ComponentChecklist
-  items={{
+items={{
     propsDocumented: true,
     noUnnecessaryDeps: true,
     adaptsToThemes: true,

docs/content/Details.md

@@ -79,15 +79,11 @@ In previous versions of Primer React Components, we allowed users to pass in a c
 </State>
 ```
 
-## `Details` System props
+## Details props
 
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Details components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
 ## `useDetails` hook configuration options
 

docs/content/Heading.md

@@ -10,17 +10,12 @@ The Heading component will render an html `h2` tag without any default styling.
 ## Default example
 
 ```jsx live
-<Heading fontSize={1} mb={2}>
-  H2 heading with fontSize={1}
-</Heading>
+<Heading sx={{fontSize: 1, mb: 2}}>H2 heading with fontSize={1}</Heading>
 ```
 
-## System props
-
-Heading components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
-| Prop name | Type                    | Description                         |
-| :-------- | :---------------------- | :---------------------------------- |
-| as        | String or React element | sets the HTML tag for the component |
+| Name | Type                    | Default | Description                          |
+| :--- | :---------------------- | :-----: | :----------------------------------- |
+| as   | String or React element |         | sets the HTML tag for the component  |
+| sx   | SystemStyleObject       |   {}    | Style to be applied to the component |

docs/content/Label.md

@@ -41,10 +41,9 @@ The Label component is used to add contextual metadata to a design. Visually it
 
 ## Component props
 
-| Name       | Type              |        Default         | Description                                                                    |
-| :--------- | :---------------- | :--------------------: | :----------------------------------------------------------------------------- |
-| outline    | Boolean           |                        | Creates an outline style label                                                 |
-| variant    | String            |        'medium'        | Can be one of `small`, `medium` (default), `large` or `xl` .                   |
-| dropshadow | Boolean           |                        | Adds a dropshadow to the label                                                 |
-| bg         | String            | 'label.primary.border' | Part of the `COMMON` system props, used to change the background of the label. |
-| sx         | SystemStyleObject |           {}           | Style to be applied to the component                                           |
+| Name       | Type              | Default  | Description                                                  |
+| :--------- | :---------------- | :------: | :----------------------------------------------------------- |
+| outline    | Boolean           |          | Creates an outline style label                               |
+| variant    | String            | 'medium' | Can be one of `small`, `medium` (default), `large` or `xl` . |
+| dropshadow | Boolean           |          | Adds a dropshadow to the label                               |
+| sx         | SystemStyleObject |    {}    | Style to be applied to the component                         |

docs/content/ProgressBar.mdx

@@ -22,9 +22,10 @@ If you'd like to use ProgressBar inline, pass the `inline` boolean prop & **be s
 
 ## Component props
 
-| Name     | Type    |       Default       | Description                                                                                                                      |
-| :------- | :------ | :-----------------: | :------------------------------------------------------------------------------------------------------------------------------- |
-| progress | Number  |                     | Used to set the size of the green bar                                                                                            |
-| barSize  | String  |      'default'      | Controls the height of the progress bar. Can be 'small', 'large', or 'default'. If omitted, height is set to the default height. |
-| inline   | Boolean |        false        | Styles the progress bar inline                                                                                                   |
-| bg       | String  | 'bg.successInverse' | Set the progress bar color, defaults to bg-green                                                                                 |
+| Name     | Type              |       Default       | Description                                                                                                                      |
+| :------- | :---------------- | :-----------------: | :------------------------------------------------------------------------------------------------------------------------------- |
+| progress | Number            |                     | Used to set the size of the green bar                                                                                            |
+| barSize  | String            |      'default'      | Controls the height of the progress bar. Can be 'small', 'large', or 'default'. If omitted, height is set to the default height. |
+| inline   | Boolean           |        false        | Styles the progress bar inline                                                                                                   |
+| bg       | String            | 'bg.successInverse' | Set the progress bar color, defaults to bg-green                                                                                 |
+| sx       | SystemStyleObject |         {}          | Style to be applied to the component                                                                                             |

docs/content/Text.md

@@ -23,12 +23,6 @@ The Text component is a wrapper component that will apply typography styles to t
 
 ## System props
 
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
 Text components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props

docs/content/system-props.mdx

@@ -6,7 +6,7 @@ import {PropsList, COMMON, LAYOUT, BORDER, TYPOGRAPHY, FLEX, POSITION, GRID} fro
 
 <Note variant="warning">
 
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
+System props are deprecated in all components except [Box](/Box) and [Text](/Text). Please use the [`sx` prop](/overriding-styles) instead.
 
 </Note>
 

src/Avatar.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -12,8 +12,7 @@ type StyledAvatarProps = {
   src: string
   /** Provide alt text when the Avatar is used without the user's name next to it. */
   alt?: string
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 function getBorderRadius({size, square}: StyledAvatarProps) {
   if (square) {
@@ -32,7 +31,6 @@ const Avatar = styled.img.attrs<StyledAvatarProps>(props => ({
   line-height: ${get('lineHeights.condensedUltra')};
   vertical-align: middle;
   border-radius: ${props => getBorderRadius(props)};
-  ${COMMON};
   ${sx}
 `
 

src/BranchName.tsx

@@ -1,17 +1,17 @@
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-const BranchName = styled.a<SystemCommonProps & SxProp>`
+const BranchName = styled.a<SxProp>`
   display: inline-block;
   padding: 2px 6px;
   font-size: ${get('fontSizes.0')};
   font-family: ${get('fonts.mono')};
   color: ${get('colors.fg.muted')};
   background-color: ${get('colors.accent.subtle')};
   border-radius: ${get('radii.2')};
-  ${COMMON};
+
   ${sx};
 `
 

src/Details.tsx

@@ -1,19 +1,15 @@
 import styled from 'styled-components'
-import {COMMON, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-type StyledDetailsProps = SystemCommonProps & SxProp
-
-const Details = styled.details<StyledDetailsProps>`
+const Details = styled.details<SxProp>`
   & > summary {
     list-style: none;
   }
   & > summary::-webkit-details-marker {
     display: none;
   }
 
-  ${COMMON}
   ${sx};
 `
 

src/Heading.tsx

@@ -1,21 +1,14 @@
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
-import theme from './theme'
 import {ComponentProps} from './utils/types'
 
-const Heading = styled.h2<SystemTypographyProps & SystemCommonProps & SxProp>`
+const Heading = styled.h2<SxProp>`
   font-weight: ${get('fontWeights.bold')};
   font-size: ${get('fontSizes.5')};
   margin: 0;
-  ${TYPOGRAPHY};
-  ${COMMON};
   ${sx};
 `
 
-Heading.defaultProps = {
-  theme
-}
-
 export type HeadingProps = ComponentProps<typeof Heading>
 export default Heading

src/ProgressBar.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import styled from 'styled-components'
 import {width, WidthProps} from 'styled-system'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
 
-const Bar = styled.span<{progress?: string | number} & SystemCommonProps>`
+type ProgressProp = {progress?: string | number}
+
+const Bar = styled.span<ProgressProp & SxProp>`
   width: ${props => (props.progress ? `${props.progress}%` : 0)};
-  ${COMMON}
+
+  ${sx};
 `
 
 const sizeMap = {
@@ -20,7 +22,6 @@ type StyledProgressContainerProps = {
   inline?: boolean
   barSize?: keyof typeof sizeMap
 } & WidthProps &
-  SystemCommonProps &
   SxProp
 
 const ProgressContainer = styled.span<StyledProgressContainerProps>`
@@ -29,17 +30,17 @@ const ProgressContainer = styled.span<StyledProgressContainerProps>`
   background-color: ${get('colors.border.default')};
   border-radius: ${get('radii.1')};
   height: ${props => sizeMap[props.barSize || 'default']};
-  ${COMMON}
+
   ${width}
   ${sx};
 `
 
-export type ProgressBarProps = ComponentProps<typeof ProgressContainer> & ComponentProps<typeof Bar>
+export type ProgressBarProps = {bg: string} & StyledProgressContainerProps & ProgressProp
 
-function ProgressBar({progress, bg, theme, ...rest}: ProgressBarProps) {
+function ProgressBar({progress, bg, ...rest}: ProgressBarProps) {
   return (
-    <ProgressContainer theme={theme} {...rest}>
-      <Bar progress={progress} bg={bg} theme={theme} />
+    <ProgressContainer {...rest}>
+      <Bar progress={progress} sx={{bg}} />
     </ProgressContainer>
   )
 }

src/Spinner.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -40,7 +39,7 @@ function Spinner({size: sizeKey = 'medium', ...props}: SpinnerInternalProps) {
   )
 }
 
-const StyledSpinner = styled(Spinner)<SystemCommonProps & SxProp>`
+const StyledSpinner = styled(Spinner)<SxProp>`
   @keyframes rotate-keyframes {
     100% {
       transform: rotate(360deg);
@@ -49,7 +48,6 @@ const StyledSpinner = styled(Spinner)<SystemCommonProps & SxProp>`
 
   animation: rotate-keyframes 1s linear infinite;
 
-  ${COMMON}
   ${sx}
 `
 

src/__tests__/Avatar.test.tsx

@@ -39,6 +39,6 @@ describe('Avatar', () => {
   })
 
   it('respects margin props', () => {
-    expect(render(<Avatar m={2} src="primer.png" alt="" />)).toHaveStyleRule('margin', px(theme.space[2]))
+    expect(render(<Avatar src="primer.png" alt="" sx={{m: 2}} />)).toHaveStyleRule('margin', px(theme.space[2]))
   })
 })

src/__tests__/Avatar.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Avatar from '../Avatar'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Avatar src="https://avatars.githubusercontent.com/primer" />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Avatar src="https://avatars.githubusercontent.com/primer" backgroundColor="thistle" />
+}

src/__tests__/BranchName.types.test.tsx

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

src/__tests__/Details.types.test.tsx

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