Skip to content

Commit b3d8f4b

Browse files
jfuchsjfuchs
committed
Timeline no longer accepts styled system props
1 parent 94c6122 commit b3d8f4b

File tree

4 files changed

+81
-36
lines changed

4 files changed

+81
-36
lines changed

‎.changeset/brave-trains-give.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+
Timeline 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/Timeline.md‎

Lines changed: 34 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ The Timeline.Item component is used to display items on a vertical timeline, con
1313
<StyledOcticon icon={FlameIcon} />
1414
</Timeline.Badge>
1515
<Timeline.Body>
16-
<Link href="#" sx={{fontWeight: 'bold', color: "fg.default", mr: 1}} muted>
16+
<Link href="#" sx={{fontWeight: 'bold', color: 'fg.default', mr: 1}} muted>
1717
Monalisa
1818
</Link>
19-
created one <Link href="#" sx={{fontWeight: 'bold', color: "fg.default", mr: 1}} muted>
19+
created one <Link href="#" sx={{fontWeight: 'bold', color: 'fg.default', mr: 1}} muted>
2020
hot potato
2121
</Link>
2222
<Link href="#" color="fg.muted" muted>
@@ -50,20 +50,20 @@ of the child `StyledOcticon` if necessary.
5050
```jsx live
5151
<Timeline>
5252
<Timeline.Item>
53-
<Timeline.Badge sx={{bg: "danger.emphasis"}}>
54-
<StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
53+
<Timeline.Badge sx={{bg: 'danger.emphasis'}}>
54+
<StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
5555
</Timeline.Badge>
5656
<Timeline.Body>Background used when closed events occur</Timeline.Body>
5757
</Timeline.Item>
5858
<Timeline.Item>
59-
<Timeline.Badge sx={{bg: "danger.emphasis"}}>
59+
<Timeline.Badge sx={{bg: 'danger.emphasis'}}>
6060
<StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
6161
</Timeline.Badge>
6262
<Timeline.Body>Background when opened or passed events occur</Timeline.Body>
6363
</Timeline.Item>
6464
<Timeline.Item>
65-
<Timeline.Badge sx={{bg: "danger.emphasis"}}>
66-
<StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
65+
<Timeline.Badge sx={{bg: 'danger.emphasis'}}>
66+
<StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
6767
</Timeline.Badge>
6868
<Timeline.Body>Background used when pull requests are merged</Timeline.Body>
6969
</Timeline.Item>
@@ -98,41 +98,51 @@ To create a visual break in the timeline, use Timeline.Break. This adds a horizo
9898
```jsx live
9999
<Timeline>
100100
<Timeline.Item>
101-
<Timeline.Badge sx={{bg: "danger.emphasis"}}>
101+
<Timeline.Badge sx={{bg: 'danger.emphasis'}}>
102102
<StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
103103
</Timeline.Badge>
104104
<Timeline.Body>Background used when closed events occur</Timeline.Body>
105105
</Timeline.Item>
106106
<Timeline.Break />
107107
<Timeline.Item>
108-
<Timeline.Badge sx={{bg: "success.emphasis"}}>
109-
<StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
108+
<Timeline.Badge sx={{bg: 'success.emphasis'}}>
109+
<StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
110110
</Timeline.Badge>
111111
<Timeline.Body>Background when opened or passed events occur</Timeline.Body>
112112
</Timeline.Item>
113113
</Timeline>
114114
```
115115

116-
## System props
116+
## Component props
117117

118-
<Note variant="warning">
118+
### Timeline
119119

120-
System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
120+
| Name | Type | Default | Description |
121+
| :---------- | :---------------- | :-----: | :-------------------------------------------------------------------------------- |
122+
| clipSidebar | Boolean | | Hides the sidebar above the first Timeline.Item and below the last Timeline.Item. |
123+
| sx | SystemStyleObject | {} | Style to be applied to the component |
121124

122-
</Note>
125+
### Timeline.Item
123126

124-
Timeline and Timeline.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
127+
| Name | Type | Default | Description |
128+
| :-------- | :---------------- | :-----: | :-------------------------------------------------------------------- |
129+
| condensed | Boolean | | Reduces vertical padding and removes background from an item's badge. |
130+
| sx | SystemStyleObject | {} | Style to be applied to the component |
125131

126-
## Component props
132+
### Timeline.Badge
127133

128-
### Timeline
134+
| Name | Type | Default | Description |
135+
| :--- | :---------------- | :-----: | :----------------------------------- |
136+
| sx | SystemStyleObject | {} | Style to be applied to the component |
129137

130-
| Prop name | Type | Description |
131-
| :---------- | :------ | :-------------------------------------------------------------------------------- |
132-
| clipSidebar | Boolean | Hides the sidebar above the first Timeline.Item and below the last Timeline.Item. |
138+
### Timeline.Body
133139

134-
### Timeline.Item
140+
| Name | Type | Default | Description |
141+
| :--- | :---------------- | :-----: | :----------------------------------- |
142+
| sx | SystemStyleObject | {} | Style to be applied to the component |
143+
144+
### Timeline.Break
135145

136-
| Prop name | Type | Description |
137-
| :-------- | :------ | :-------------------------------------------------------------------- |
138-
| condensed | Boolean | Reduces vertical padding and removes background from an item's badge. |
146+
| Name | Type | Default | Description |
147+
| :--- | :---------------- | :-----: | :----------------------------------- |
148+
| sx | SystemStyleObject | {} | Style to be applied to the component |

‎src/Timeline.tsx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import classnames from 'classnames'
22
import React from 'react'
33
import styled, {css} from 'styled-components'
4-
import Box, {BoxProps} from './Box'
5-
import {COMMON, get} from './constants'
6-
import sx from './sx'
4+
import {Box} from '.'
5+
import {get} from './constants'
6+
import sx, {SxProp} from './sx'
77
import {ComponentProps} from './utils/types'
88

9-
const Timeline = styled(Box)<{clipSidebar?: boolean}>`
9+
const Timeline = styled.div<{clipSidebar?: boolean} & SxProp>`
1010
display: flex;
1111
flex-direction: column;
1212
${props =>
@@ -24,9 +24,9 @@ const Timeline = styled(Box)<{clipSidebar?: boolean}>`
2424
${sx};
2525
`
2626

27-
type StyledTimelineItemProps = {condensed?: boolean}
27+
type StyledTimelineItemProps = {condensed?: boolean} & SxProp
2828

29-
const TimelineItem = styled(Box).attrs<StyledTimelineItemProps>(props => ({
29+
const TimelineItem = styled.div.attrs<StyledTimelineItemProps>(props => ({
3030
className: classnames('Timeline-Item', props.className)
3131
}))<StyledTimelineItemProps>`
3232
display: flex;
@@ -64,18 +64,17 @@ const TimelineItem = styled(Box).attrs<StyledTimelineItemProps>(props => ({
6464
}
6565
`}
6666
67-
${COMMON};
6867
${sx};
6968
`
7069

71-
export type TimelineBadgeProps = BoxProps
70+
export type TimelineBadgeProps = {children?: React.ReactNode} & SxProp
7271

7372
const TimelineBadge = (props: TimelineBadgeProps) => {
7473
return (
7574
<Box position="relative" zIndex={1}>
7675
<Box
7776
display="flex"
78-
className={classnames(props.className, 'TimelineItem-Badge')}
77+
className="TimelineItem-Badge"
7978
flexShrink={0}
8079
borderRadius="50%"
8180
borderWidth="2px"
@@ -90,15 +89,15 @@ const TimelineBadge = (props: TimelineBadgeProps) => {
9089
ml="-15px"
9190
alignItems="center"
9291
justifyContent="center"
93-
{...props}
92+
sx={props.sx}
9493
>
9594
{props.children}
9695
</Box>
9796
</Box>
9897
)
9998
}
10099

101-
const TimelineBody = styled(Box)`
100+
const TimelineBody = styled.div<SxProp>`
102101
min-width: 0;
103102
max-width: 100%;
104103
margin-top: ${get('space.1')};
@@ -108,7 +107,7 @@ const TimelineBody = styled(Box)`
108107
${sx};
109108
`
110109

111-
const TimelineBreak = styled(Box)`
110+
const TimelineBreak = styled.div<SxProp>`
112111
position: relative
113112
z-index: 1;
114113
height: 24px;

‎src/__tests__/Timeline.types.test.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react'
2+
import Timeline from '../Timeline'
3+
4+
export function shouldAcceptCallWithNoProps() {
5+
return (
6+
<>
7+
<Timeline />
8+
<Timeline.Item />
9+
<Timeline.Badge />
10+
<Timeline.Body />
11+
<Timeline.Break />
12+
</>
13+
)
14+
}
15+
16+
export function shouldNotAcceptSystemProps() {
17+
return (
18+
<>
19+
{/* @ts-expect-error system props should not be accepted */}
20+
<Timeline backgroundColor="red" />
21+
{/* @ts-expect-error system props should not be accepted */}
22+
<Timeline.Item backgroundColor="orange" />
23+
{/* @ts-expect-error system props should not be accepted */}
24+
<Timeline.Badge backgroundColor="yellow" />
25+
{/* @ts-expect-error system props should not be accepted */}
26+
<Timeline.Body backgroundColor="green" />
27+
{/* @ts-expect-error system props should not be accepted */}
28+
<Timeline.Break backgroundColor="blue" />
29+
</>
30+
)
31+
}

0 commit comments

Comments
 (0)