Buttons no longer accept styled system props (#1475)

jfuchs · jfuchs · commit 5a25ecbb9d35 · 2021-11-22T10:54:42.000-08:00
diff --git a/.changeset/purple-buttons-look.md b/.changeset/purple-buttons-look.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Buttons no longer accept 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/Buttons.md b/docs/content/Buttons.md
@@ -17,9 +17,9 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. `
   <ButtonOutline>Button Outline</ButtonOutline>
   <ButtonPrimary>Button Primary</ButtonPrimary>
   <ButtonInvisible>Button Invisible</ButtonInvisible>
-  <ButtonClose onClick={() => window.alert('button clicked')}/>
+  <ButtonClose onClick={() => window.alert('button clicked')} />
 
-  <ButtonGroup display='block' my={2}>
+  <ButtonGroup display="block" my={2}>
     <Button>Button</Button>
     <Button>Button</Button>
     <Button>Button</Button>
@@ -29,27 +29,17 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. `
 </>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-`Button` and `ButtonGroup` components get `COMMON` and `LAYOUT` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 Native `<button>` HTML attributes are forwarded to the underlying React `button` component and are not listed below.
 
 ### Button
 
-| Prop name | Type             | Default  | Description                                                                                                                 |
-| :-------- | :--------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------- |
-| as        | String           | `button` | sets the HTML tag for the component                                                                                         |
-| fontSize  | Number or String |          | explicitly sets the font size for the Button text; overrides any value for the `variant` prop                               |
-| variant   | String           | 'medium' | a value of `small`, `medium`, or `large` results in smaller or larger Button text size; no effect if `fontSize` prop is set |
+| Prop name | Type              | Default  | Description                                                                                                                 |
+| :-------- | :---------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------- |
+| as        | String            | `button` | sets the HTML tag for the component                                                                                         |
+| sx        | SystemStyleObject |    {}    | Additional styles                                                                                                           |
+| variant   | String            | 'medium' | a value of `small`, `medium`, or `large` results in smaller or larger Button text size; no effect if `fontSize` prop is set |
 
 ### ButtonGroup
 
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -2,9 +2,9 @@ import styled from 'styled-components'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps} from './ButtonBase'
 
-const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
+const Button = styled(ButtonBase)<ButtonBaseProps & SxProp>`
   color: ${get('colors.btn.text')};
   background-color: ${get('colors.btn.bg')};
   border: 1px solid ${get('colors.btn.border')};
@@ -32,7 +32,6 @@ const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
     border-color: ${get('colors.btn.border')};
   }
 
-  ${buttonSystemProps};
   ${sx};
 `
 
diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx
@@ -1,12 +1,8 @@
 import styled from 'styled-components'
-import {compose, fontSize, FontSizeProps, variant} from 'styled-system'
-import {COMMON, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants'
+import {variant} from 'styled-system'
 import {ComponentProps} from '../utils/types'
 import buttonBaseStyles from './ButtonStyles'
 
-export const buttonSystemProps = compose(fontSize, COMMON, LAYOUT)
-export type ButtonSystemProps = FontSizeProps & SystemCommonProps & SystemLayoutProps
-
 const variants = variant({
   variants: {
     small: {
@@ -26,7 +22,7 @@ const variants = variant({
 type StyledButtonBaseProps = {
   as?: 'button' | 'a' | 'summary' | 'input' | string | React.ReactType
   variant?: 'small' | 'medium' | 'large'
-} & FontSizeProps
+}
 
 const ButtonBase = styled.button.attrs<StyledButtonBaseProps>(({disabled, onClick}) => ({
   onClick: disabled ? undefined : onClick
diff --git a/src/Button/ButtonClose.tsx b/src/Button/ButtonClose.tsx
@@ -1,13 +1,11 @@
 import {XIcon} from '@primer/octicons-react'
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {COMMON, get, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants'
+import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 
-type StyledButtonProps = SystemCommonProps & SystemLayoutProps & SxProp
-
-const StyledButton = styled.button<StyledButtonProps>`
+const StyledButton = styled.button<SxProp>`
   border: none;
   padding: 0;
   background: transparent;
@@ -23,8 +21,6 @@ const StyledButton = styled.button<StyledButtonProps>`
   &:hover {
     color: ${get('colors.accent.fg')};
   }
-  ${COMMON};
-  ${LAYOUT};
   ${sx};
 `
 
diff --git a/src/Button/ButtonDanger.tsx b/src/Button/ButtonDanger.tsx
@@ -2,9 +2,9 @@ import styled from 'styled-components'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps} from './ButtonBase'
 
-const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
+const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & SxProp>`
   color: ${get('colors.btn.danger.text')};
   border: 1px solid ${get('colors.btn.border')};
   background-color: ${get('colors.btn.bg')};
@@ -35,7 +35,6 @@ const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & Sx
     border-color: ${get('colors.btn.danger.disabledBorder')};
   }
 
-  ${buttonSystemProps};
   ${sx};
 `
 
diff --git a/src/Button/ButtonInvisible.tsx b/src/Button/ButtonInvisible.tsx
@@ -2,9 +2,9 @@ import styled from 'styled-components'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps} from './ButtonBase'
 
-const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
+const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & SxProp>`
   color: ${get('colors.accent.fg')};
   background-color: transparent;
   border: 0;
@@ -24,7 +24,6 @@ const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps &
     background-color: ${get('colors.btn.selectedBg')};
   }
 
-  ${buttonSystemProps};
   ${sx}
 `
 
diff --git a/src/Button/ButtonOutline.tsx b/src/Button/ButtonOutline.tsx
@@ -2,9 +2,9 @@ import styled from 'styled-components'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps} from './ButtonBase'
 
-const ButtonOutline = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
+const ButtonOutline = styled(ButtonBase)<ButtonBaseProps & SxProp>`
   color: ${get('colors.btn.outline.text')};
   border: 1px solid ${get('colors.btn.border')};
   background-color: ${get('colors.btn.bg')};
@@ -35,7 +35,6 @@ const ButtonOutline = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & S
     border-color: ${get('colors.btn.border')};
   }
 
-  ${buttonSystemProps};
   ${sx};
 `
 
diff --git a/src/Button/ButtonPrimary.tsx b/src/Button/ButtonPrimary.tsx
@@ -2,9 +2,9 @@ import styled from 'styled-components'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
-import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
+import ButtonBase, {ButtonBaseProps} from './ButtonBase'
 
-export const ButtonPrimary = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
+export const ButtonPrimary = styled(ButtonBase)<ButtonBaseProps & SxProp>`
   color: ${get('colors.btn.primary.text')};
   border: 1px solid ${get('colors.btn.primary.border')};
   background-color: ${get('colors.btn.primary.bg')};
@@ -33,7 +33,6 @@ export const ButtonPrimary = styled(ButtonBase)<ButtonBaseProps & ButtonSystemPr
     border-color: ${get('colors.btn.primary.disabledBorder')};
   }
 
-  ${buttonSystemProps};
   ${sx};
 `
 
diff --git a/src/Button/ButtonTableList.tsx b/src/Button/ButtonTableList.tsx
@@ -1,19 +1,9 @@
 import styled from 'styled-components'
-import {
-  COMMON,
-  get,
-  LAYOUT,
-  SystemCommonProps,
-  SystemLayoutProps,
-  SystemTypographyProps,
-  TYPOGRAPHY
-} from '../constants'
+import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 
-type StyledButtonTableListProps = SystemCommonProps & SystemTypographyProps & SystemLayoutProps & SxProp
-
-const ButtonTableList = styled.summary<StyledButtonTableListProps>`
+const ButtonTableList = styled.summary<SxProp>`
   display: inline-block;
   padding: 0;
   font-size: ${get('fontSizes.1')};
@@ -48,9 +38,6 @@ const ButtonTableList = styled.summary<StyledButtonTableListProps>`
     border: 4px solid transparent;
     border-top-color: currentcolor;
   }
-  ${COMMON}
-  ${TYPOGRAPHY}
-  ${LAYOUT}
   ${sx};
 `
 
diff --git a/src/__tests__/Button.test.tsx b/src/__tests__/Button.test.tsx
@@ -48,7 +48,7 @@ describe('Button', () => {
   })
 
   it('respects width props', () => {
-    expect(render(<Button width={200} />)).toHaveStyleRule('width', '200px')
+    expect(render(<Button sx={{width: 200}} />)).toHaveStyleRule('width', '200px')
   })
 
   it('respects the "disabled" prop', () => {
@@ -63,7 +63,7 @@ describe('Button', () => {
   })
 
   it('respects the "fontSize" prop over the "variant" prop', () => {
-    expect(render(<Button variant="small" fontSize={20} />)).toHaveStyleRule('font-size', '20px')
+    expect(render(<Button variant="small" sx={{fontSize: 20}} />)).toHaveStyleRule('font-size', '20px')
   })
 })
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@primer/components': major
 +---
++
 +Buttons no longer accept 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.