Label no longer accepts styled system props (#1564)

Author: jfuchs

.changeset/rotten-apricots-float.md

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

@@ -8,35 +8,42 @@ The Label component is used to add contextual metadata to a design. Visually it
 
 ```jsx live
 <>
-  <Label variant="small" outline sx={{borderColor: "danger.emphasis", mr: 2, color: "danger.fg"}}>small</Label>
-  <Label variant="medium" sx={{mr: 2}}>medium (default)</Label>
-  <Label variant="large" sx={{mr: 2}}>large</Label>
+  <Label variant="small" outline sx={{borderColor: 'danger.emphasis', mr: 2, color: 'danger.fg'}}>
+    small
+  </Label>
+  <Label variant="medium" sx={{mr: 2}}>
+    medium (default)
+  </Label>
+  <Label variant="large" sx={{mr: 2}}>
+    large
+  </Label>
   <Label variant="xl">xl label</Label>
 
-  <Box mt={4}/>
-  <Label variant="medium" sx={{bg:"#A575FF", m: 1}}>good first issue</Label>
-  <Label variant="medium" sx={{bg:"#FF75C8", m: 1}}>🚂 deploy: train</Label>
-  <Label variant="medium" sx={{bg:"#1C90FA", m: 1}}>css</Label>
-  <Label variant="medium" sx={{bg:"#FFF06C", color:"#24292E", m: 1}}>documentation</Label>
-  <Label variant="medium" sx={{bg: "#656BFE", m: 1}}>primer</Label>
+  <Box mt={4} />
+  <Label variant="medium" sx={{bg: '#A575FF', m: 1}}>
+    good first issue
+  </Label>
+  <Label variant="medium" sx={{bg: '#FF75C8', m: 1}}>
+    🚂 deploy: train
+  </Label>
+  <Label variant="medium" sx={{bg: '#1C90FA', m: 1}}>
+    css
+  </Label>
+  <Label variant="medium" sx={{bg: '#FFF06C', color: '#24292E', m: 1}}>
+    documentation
+  </Label>
+  <Label variant="medium" sx={{bg: '#656BFE', m: 1}}>
+    primer
+  </Label>
 </>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Label components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## 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. |
+| 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                                           |

src/Label.tsx

@@ -1,6 +1,6 @@
 import styled, {css} from 'styled-components'
 import {borderColor, BorderColorProps, variant} from 'styled-system'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -11,7 +11,6 @@ const outlineStyles = css`
   border: ${get('borderWidths.1')} solid ${get('colors.border.default')};
   box-shadow: none;
   ${borderColor};
-  ${COMMON};
   background-color: transparent;
 `
 
@@ -47,27 +46,25 @@ const Label = styled.span<
     dropshadow?: boolean
     outline?: boolean
   } & BorderColorProps &
-    SystemCommonProps &
     SxProp
 >`
   display: inline-block;
   font-weight: ${get('fontWeights.semibold')};
   color: ${get('colors.fg.onEmphasis')};
   border-radius: ${get('radii.3')};
+  background-color: ${get('colors.neutral.emphasis')};
 
   &:hover {
     text-decoration: none;
   }
 
   ${sizeVariant}
-  ${COMMON}
   ${props => (props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '')}
   ${props => (props.outline ? outlineStyles : '')} // must be last to override other values
   ${sx}
 `
 
 Label.defaultProps = {
-  bg: 'neutral.emphasis',
   variant: 'medium'
 }
 

src/__tests__/Label.types.test.tsx

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

src/__tests__/__snapshots__/Label.test.tsx.snap

@@ -6,10 +6,10 @@ exports[`Label renders consistently 1`] = `
   font-weight: 500;
   color: #ffffff;
   border-radius: 100px;
+  background-color: #6e7781;
   font-size: 12px;
   line-height: 20px;
   padding: 0 8px;
-  background-color: #6e7781;
 }
 
 .c0:hover {
@@ -28,16 +28,15 @@ exports[`Label respects the "outline" prop 1`] = `
   font-weight: 500;
   color: #ffffff;
   border-radius: 100px;
+  background-color: #6e7781;
   font-size: 12px;
   line-height: 20px;
   padding: 0 8px;
-  background-color: #6e7781;
   margin-top: -1px;
   margin-bottom: -1px;
   color: #57606a;
   border: 1px solid #d0d7de;
   box-shadow: none;
-  background-color: #6e7781;
   background-color: transparent;
 }
 
@@ -57,10 +56,10 @@ exports[`Label respects the "variant" prop 1`] = `
   font-weight: 500;
   color: #ffffff;
   border-radius: 100px;
+  background-color: #6e7781;
   font-size: 14px;
   line-height: 16px;
   padding: 8px 12px;
-  background-color: #6e7781;
 }
 
 .c0:hover {