Skip to content

Commit 1a43da6

Browse files
jfuchsjfuchs
committed
Buttons no longer accept styled system props (#1475)
1 parent 057118e commit 1a43da6

File tree

11 files changed

+30
-61
lines changed

11 files changed

+30
-61
lines changed

‎.changeset/purple-buttons-look.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/components': major
3+
---
4+
5+
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.

‎docs/content/Buttons.md‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. `
1717
<ButtonOutline>Button Outline</ButtonOutline>
1818
<ButtonPrimary>Button Primary</ButtonPrimary>
1919
<ButtonInvisible>Button Invisible</ButtonInvisible>
20-
<ButtonClose onClick={() => window.alert('button clicked')}/>
20+
<ButtonClose onClick={() => window.alert('button clicked')} />
2121

22-
<ButtonGroup display='block' my={2}>
22+
<ButtonGroup display="block" my={2}>
2323
<Button>Button</Button>
2424
<Button>Button</Button>
2525
<Button>Button</Button>
@@ -29,27 +29,17 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. `
2929
</>
3030
```
3131

32-
## System props
33-
34-
<Note variant="warning">
35-
36-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
37-
38-
</Note>
39-
40-
`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.
41-
4232
## Component props
4333

4434
Native `<button>` HTML attributes are forwarded to the underlying React `button` component and are not listed below.
4535

4636
### Button
4737

48-
| Prop name | Type | Default | Description |
49-
| :-------- | :--------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------- |
50-
| as | String | `button` | sets the HTML tag for the component |
51-
| fontSize | Number or String | | explicitly sets the font size for the Button text; overrides any value for the `variant` prop |
52-
| 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 |
38+
| Prop name | Type | Default | Description |
39+
| :-------- | :---------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------- |
40+
| as | String | `button` | sets the HTML tag for the component |
41+
| sx | SystemStyleObject | {} | Additional styles |
42+
| 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 |
5343

5444
### ButtonGroup
5545

‎src/Button/Button.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import styled from 'styled-components'
22
import {get} from '../constants'
33
import sx, {SxProp} from '../sx'
44
import {ComponentProps} from '../utils/types'
5-
import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
5+
import ButtonBase, {ButtonBaseProps} from './ButtonBase'
66

7-
const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
7+
const Button = styled(ButtonBase)<ButtonBaseProps & SxProp>`
88
color: ${get('colors.btn.text')};
99
background-color: ${get('colors.btn.bg')};
1010
border: 1px solid ${get('colors.btn.border')};
@@ -32,7 +32,6 @@ const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
3232
border-color: ${get('colors.btn.border')};
3333
}
3434
35-
${buttonSystemProps};
3635
${sx};
3736
`
3837

‎src/Button/ButtonBase.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import styled from 'styled-components'
2-
import {compose, fontSize, FontSizeProps, variant} from 'styled-system'
3-
import {COMMON, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants'
2+
import {variant} from 'styled-system'
43
import {ComponentProps} from '../utils/types'
54
import buttonBaseStyles from './ButtonStyles'
65

7-
export const buttonSystemProps = compose(fontSize, COMMON, LAYOUT)
8-
export type ButtonSystemProps = FontSizeProps & SystemCommonProps & SystemLayoutProps
9-
106
const variants = variant({
117
variants: {
128
small: {
@@ -26,7 +22,7 @@ const variants = variant({
2622
type StyledButtonBaseProps = {
2723
as?: 'button' | 'a' | 'summary' | 'input' | string | React.ReactType
2824
variant?: 'small' | 'medium' | 'large'
29-
} & FontSizeProps
25+
}
3026

3127
const ButtonBase = styled.button.attrs<StyledButtonBaseProps>(({disabled, onClick}) => ({
3228
onClick: disabled ? undefined : onClick

‎src/Button/ButtonClose.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import {XIcon} from '@primer/octicons-react'
22
import React, {forwardRef} from 'react'
33
import styled from 'styled-components'
4-
import {COMMON, get, LAYOUT, SystemCommonProps, SystemLayoutProps} from '../constants'
4+
import {get} from '../constants'
55
import sx, {SxProp} from '../sx'
66
import {ComponentProps} from '../utils/types'
77

8-
type StyledButtonProps = SystemCommonProps & SystemLayoutProps & SxProp
9-
10-
const StyledButton = styled.button<StyledButtonProps>`
8+
const StyledButton = styled.button<SxProp>`
119
border: none;
1210
padding: 0;
1311
background: transparent;
@@ -23,8 +21,6 @@ const StyledButton = styled.button<StyledButtonProps>`
2321
&:hover {
2422
color: ${get('colors.accent.fg')};
2523
}
26-
${COMMON};
27-
${LAYOUT};
2824
${sx};
2925
`
3026

‎src/Button/ButtonDanger.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import styled from 'styled-components'
22
import {get} from '../constants'
33
import sx, {SxProp} from '../sx'
44
import {ComponentProps} from '../utils/types'
5-
import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
5+
import ButtonBase, {ButtonBaseProps} from './ButtonBase'
66

7-
const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
7+
const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & SxProp>`
88
color: ${get('colors.btn.danger.text')};
99
border: 1px solid ${get('colors.btn.border')};
1010
background-color: ${get('colors.btn.bg')};
@@ -35,7 +35,6 @@ const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & Sx
3535
border-color: ${get('colors.btn.danger.disabledBorder')};
3636
}
3737
38-
${buttonSystemProps};
3938
${sx};
4039
`
4140

‎src/Button/ButtonInvisible.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import styled from 'styled-components'
22
import {get} from '../constants'
33
import sx, {SxProp} from '../sx'
44
import {ComponentProps} from '../utils/types'
5-
import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
5+
import ButtonBase, {ButtonBaseProps} from './ButtonBase'
66

7-
const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
7+
const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & SxProp>`
88
color: ${get('colors.accent.fg')};
99
background-color: transparent;
1010
border: 0;
@@ -24,7 +24,6 @@ const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps &
2424
background-color: ${get('colors.btn.selectedBg')};
2525
}
2626
27-
${buttonSystemProps};
2827
${sx}
2928
`
3029

‎src/Button/ButtonOutline.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import styled from 'styled-components'
22
import {get} from '../constants'
33
import sx, {SxProp} from '../sx'
44
import {ComponentProps} from '../utils/types'
5-
import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
5+
import ButtonBase, {ButtonBaseProps} from './ButtonBase'
66

7-
const ButtonOutline = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
7+
const ButtonOutline = styled(ButtonBase)<ButtonBaseProps & SxProp>`
88
color: ${get('colors.btn.outline.text')};
99
border: 1px solid ${get('colors.btn.border')};
1010
background-color: ${get('colors.btn.bg')};
@@ -35,7 +35,6 @@ const ButtonOutline = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & S
3535
border-color: ${get('colors.btn.border')};
3636
}
3737
38-
${buttonSystemProps};
3938
${sx};
4039
`
4140

‎src/Button/ButtonPrimary.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import styled from 'styled-components'
22
import {get} from '../constants'
33
import sx, {SxProp} from '../sx'
44
import {ComponentProps} from '../utils/types'
5-
import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
5+
import ButtonBase, {ButtonBaseProps} from './ButtonBase'
66

7-
export const ButtonPrimary = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
7+
export const ButtonPrimary = styled(ButtonBase)<ButtonBaseProps & SxProp>`
88
color: ${get('colors.btn.primary.text')};
99
border: 1px solid ${get('colors.btn.primary.border')};
1010
background-color: ${get('colors.btn.primary.bg')};
@@ -33,7 +33,6 @@ export const ButtonPrimary = styled(ButtonBase)<ButtonBaseProps & ButtonSystemPr
3333
border-color: ${get('colors.btn.primary.disabledBorder')};
3434
}
3535
36-
${buttonSystemProps};
3736
${sx};
3837
`
3938

‎src/Button/ButtonTableList.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,9 @@
11
import styled from 'styled-components'
2-
import {
3-
COMMON,
4-
get,
5-
LAYOUT,
6-
SystemCommonProps,
7-
SystemLayoutProps,
8-
SystemTypographyProps,
9-
TYPOGRAPHY
10-
} from '../constants'
2+
import {get} from '../constants'
113
import sx, {SxProp} from '../sx'
124
import {ComponentProps} from '../utils/types'
135

14-
type StyledButtonTableListProps = SystemCommonProps & SystemTypographyProps & SystemLayoutProps & SxProp
15-
16-
const ButtonTableList = styled.summary<StyledButtonTableListProps>`
6+
const ButtonTableList = styled.summary<SxProp>`
177
display: inline-block;
188
padding: 0;
199
font-size: ${get('fontSizes.1')};
@@ -48,9 +38,6 @@ const ButtonTableList = styled.summary<StyledButtonTableListProps>`
4838
border: 4px solid transparent;
4939
border-top-color: currentcolor;
5040
}
51-
${COMMON}
52-
${TYPOGRAPHY}
53-
${LAYOUT}
5441
${sx};
5542
`
5643

0 commit comments

Comments
 (0)