diff --git a/.changeset/brave-trains-give.md b/.changeset/brave-trains-give.md new file mode 100644 index 00000000000..6b81730c171 --- /dev/null +++ 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 index d71752f4460..be0b7fcff4c 100644 --- 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 - + Monalisa - created one + created one hot potato @@ -50,20 +50,20 @@ of the child `StyledOcticon` if necessary. ```jsx live - - + + Background used when closed events occur - + Background when opened or passed events occur - - + + Background used when pull requests are merged @@ -98,41 +98,51 @@ To create a visual break in the timeline, use Timeline.Break. This adds a horizo ```jsx live - + Background used when closed events occur - - + + Background when opened or passed events occur ``` -## System props +## Component props - +### 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 | - +### 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 index 20ae97b66ae..9fa3d2ad219 100644 --- 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(props => ({ +const TimelineItem = styled.div.attrs(props => ({ className: classnames('Timeline-Item', props.className) }))` display: flex; @@ -64,18 +64,17 @@ const TimelineItem = styled(Box).attrs(props => ({ } `} - ${COMMON}; ${sx}; ` -export type TimelineBadgeProps = BoxProps +export type TimelineBadgeProps = {children?: React.ReactNode} & SxProp const TimelineBadge = (props: TimelineBadgeProps) => { return ( { ml="-15px" alignItems="center" justifyContent="center" - {...props} + sx={props.sx} > {props.children} @@ -98,7 +97,7 @@ const TimelineBadge = (props: TimelineBadgeProps) => { ) } -const TimelineBody = styled(Box)` +const TimelineBody = styled.div` 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` position: relative z-index: 1; height: 24px; diff --git a/src/__tests__/Timeline.types.test.tsx b/src/__tests__/Timeline.types.test.tsx new file mode 100644 index 00000000000..c86ca5e2b9a --- /dev/null +++ b/src/__tests__/Timeline.types.test.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import Timeline from '../Timeline' + +export function shouldAcceptCallWithNoProps() { + return ( + <> + + + + + + + ) +} + +export function shouldNotAcceptSystemProps() { + return ( + <> + {/* @ts-expect-error system props should not be accepted */} + + {/* @ts-expect-error system props should not be accepted */} + + {/* @ts-expect-error system props should not be accepted */} + + {/* @ts-expect-error system props should not be accepted */} + + {/* @ts-expect-error system props should not be accepted */} + + + ) +}