primer · jfuchs · Nov 16, 2021 · Nov 3, 2021
diff --git a/.changeset/brave-trains-give.md b/.changeset/brave-trains-give.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+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.
diff --git a/docs/content/Timeline.md b/docs/content/Timeline.md
@@ -13,10 +13,10 @@ The Timeline.Item component is used to display items on a vertical timeline, con
       <StyledOcticon icon={FlameIcon} />
     </Timeline.Badge>
     <Timeline.Body>
-      <Link href="#" sx={{fontWeight: 'bold', color: "fg.default", mr: 1}} muted>
+      <Link href="#" sx={{fontWeight: 'bold', color: 'fg.default', mr: 1}} muted>
         Monalisa
       </Link>
-      created one <Link href="#" sx={{fontWeight: 'bold', color: "fg.default", mr: 1}} muted>
+      created one <Link href="#" sx={{fontWeight: 'bold', color: 'fg.default', mr: 1}} muted>
         hot potato
       </Link>
       <Link href="#" color="fg.muted" muted>
@@ -50,20 +50,20 @@ of the child `StyledOcticon` if necessary.
 ```jsx live
 <Timeline>
   <Timeline.Item>
-    <Timeline.Badge sx={{bg: "danger.emphasis"}}>
-      <StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
+    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
+      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
     </Timeline.Badge>
     <Timeline.Body>Background used when closed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item>
-    <Timeline.Badge sx={{bg: "danger.emphasis"}}>
+    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
       <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
     </Timeline.Badge>
     <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item>
-    <Timeline.Badge sx={{bg: "danger.emphasis"}}>
-      <StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
+    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
+      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
     </Timeline.Badge>
     <Timeline.Body>Background used when pull requests are merged</Timeline.Body>
   </Timeline.Item>
@@ -98,41 +98,51 @@ To create a visual break in the timeline, use Timeline.Break. This adds a horizo
 ```jsx live
 <Timeline>
   <Timeline.Item>
-    <Timeline.Badge sx={{bg: "danger.emphasis"}}>
+    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
       <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
     </Timeline.Badge>
     <Timeline.Body>Background used when closed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Break />
   <Timeline.Item>
-    <Timeline.Badge sx={{bg: "success.emphasis"}}>
-      <StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
+    <Timeline.Badge sx={{bg: 'success.emphasis'}}>
+      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
     </Timeline.Badge>
     <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
   </Timeline.Item>
 </Timeline>
 ```
 
-## System props
+## Component props
 
-<Note variant="warning">
+### Timeline
 
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
+| Name        | Type              | Default | Description                                                                       |
+| :---------- | :---------------- | :-----: | :-------------------------------------------------------------------------------- |
+| clipSidebar | Boolean           |         | Hides the sidebar above the first Timeline.Item and below the last Timeline.Item. |
+| sx          | SystemStyleObject |   {}    | Style to be applied to the component                                              |
 
-</Note>
+### Timeline.Item
 
-Timeline and Timeline.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+| Name      | Type              | Default | Description                                                           |
+| :-------- | :---------------- | :-----: | :-------------------------------------------------------------------- |
+| condensed | Boolean           |         | Reduces vertical padding and removes background from an item's badge. |
+| sx        | SystemStyleObject |   {}    | Style to be applied to the component                                  |
 
-## Component props
+### Timeline.Badge
 
-### Timeline
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
-| Prop name   | Type    | Description                                                                       |
-| :---------- | :------ | :-------------------------------------------------------------------------------- |
-| clipSidebar | Boolean | Hides the sidebar above the first Timeline.Item and below the last Timeline.Item. |
+### Timeline.Body
 
-### Timeline.Item
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
+
+### Timeline.Break
 
-| Prop name | Type    | Description                                                           |
-| :-------- | :------ | :-------------------------------------------------------------------- |
-| condensed | Boolean | Reduces vertical padding and removes background from an item's badge. |
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
diff --git a/src/Timeline.tsx b/src/Timeline.tsx
@@ -1,12 +1,12 @@
 import classnames from 'classnames'
 import React from 'react'
 import styled, {css} from 'styled-components'
-import Box, {BoxProps} from './Box'
-import {COMMON, get} from './constants'
-import sx from './sx'
+import {Box} from '.'
+import {get} from './constants'
+import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-const Timeline = styled(Box)<{clipSidebar?: boolean}>`
+const Timeline = styled.div<{clipSidebar?: boolean} & SxProp>`
   display: flex;
   flex-direction: column;
   ${props =>
@@ -24,9 +24,9 @@ const Timeline = styled(Box)<{clipSidebar?: boolean}>`
   ${sx};
 `
 
-type StyledTimelineItemProps = {condensed?: boolean}
+type StyledTimelineItemProps = {condensed?: boolean} & SxProp
 
-const TimelineItem = styled(Box).attrs<StyledTimelineItemProps>(props => ({
+const TimelineItem = styled.div.attrs<StyledTimelineItemProps>(props => ({
   className: classnames('Timeline-Item', props.className)
 }))<StyledTimelineItemProps>`
   display: flex;
@@ -64,18 +64,17 @@ const TimelineItem = styled(Box).attrs<StyledTimelineItemProps>(props => ({
       }
     `}
 
-  ${COMMON};
   ${sx};
 `
 
-export type TimelineBadgeProps = BoxProps
+export type TimelineBadgeProps = {children?: React.ReactNode} & SxProp
 
 const TimelineBadge = (props: TimelineBadgeProps) => {
   return (
     <Box position="relative" zIndex={1}>
       <Box
         display="flex"
-        className={classnames(props.className, 'TimelineItem-Badge')}
+        className="TimelineItem-Badge"
         flexShrink={0}
         borderRadius="50%"
         borderWidth="2px"
@@ -90,15 +89,15 @@ const TimelineBadge = (props: TimelineBadgeProps) => {
         ml="-15px"
         alignItems="center"
         justifyContent="center"
-        {...props}
+        sx={props.sx}
       >
         {props.children}
       </Box>
     </Box>
   )
 }
 
-const TimelineBody = styled(Box)`
+const TimelineBody = styled.div<SxProp>`
   min-width: 0;
   max-width: 100%;
   margin-top: ${get('space.1')};
@@ -108,7 +107,7 @@ const TimelineBody = styled(Box)`
   ${sx};
 `
 
-const TimelineBreak = styled(Box)`
+const TimelineBreak = styled.div<SxProp>`
   position: relative
   z-index: 1;
   height: 24px;

diff --git a/src/__tests__/Timeline.types.test.tsx b/src/__tests__/Timeline.types.test.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import Timeline from '../Timeline'
+
+export function shouldAcceptCallWithNoProps() {
+  return (
+    <>
+      <Timeline />
+      <Timeline.Item />
+      <Timeline.Badge />
+      <Timeline.Body />
+      <Timeline.Break />
+    </>
+  )
+}
+
+export function shouldNotAcceptSystemProps() {
+  return (
+    <>
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline backgroundColor="red" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline.Item backgroundColor="orange" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline.Badge backgroundColor="yellow" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline.Body backgroundColor="green" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline.Break backgroundColor="blue" />
+    </>
+  )
+}