Remove sx prop support from the Timeline component

.changeset/fresh-points-cover.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove sx Props and BoxWithFallBack from Timeline component.

e2e/components/Timeline.test.ts

@@ -19,10 +19,6 @@ const stories = [
     title: 'Timeline Break',
     id: 'components-timeline-features--timeline-break',
   },
-  {
-    title: 'SX Props',
-    id: 'components-timeline-dev--sx-props',
-  },
 ] as const
 
 test.describe('Timeline', () => {

packages/react/src/Timeline/Timeline.dev.stories.tsx

@@ -15,74 +15,10 @@ export default {
   },
 } as Meta<ComponentProps<typeof Timeline>>
 
-export const SxProps = () => (
-  <Timeline
-    sx={{
-      ml: 4,
-    }}
-    style={{border: '1px solid red'}}
-  >
-    <Timeline.Item
-      sx={{
-        pt: 2,
-        pb: 1,
-      }}
-      style={{border: '1px solid pink'}}
-    >
-      <Timeline.Badge
-        sx={{
-          backgroundColor: 'canvas.default',
-        }}
-      >
-        <Octicon icon={GitCommitIcon} aria-label="Commit" />
-      </Timeline.Badge>
-      <Timeline.Body
-        sx={{
-          color: 'fg.subtle',
-          fontSize: '14px',
-          width: '100%',
-          paddingRight: 5,
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-        className="mt-0"
-        style={{border: '1px solid green'}}
-      >
-        This is a message
-      </Timeline.Body>
-    </Timeline.Item>
-    <Timeline.Item color="gray">
-      <Timeline.Badge
-        sx={{
-          bg: 'danger.emphasis',
-        }}
-      >
-        <Octicon icon={GitCommitIcon} aria-label="Commit" />
-      </Timeline.Badge>
-      <Timeline.Body
-        sx={{
-          color: 'fg.default',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        This is a message
-      </Timeline.Body>
-    </Timeline.Item>
-    <Timeline.Break
-      sx={{
-        borderWidth: '2px',
-      }}
-      style={{border: '1px solid gray'}}
-    />
-    <Timeline.Item condensed={true}>
-      <Timeline.Badge
-        sx={{
-          mt: 2,
-          bg: 'accent.emphasis',
-        }}
-      >
+export const Default = () => (
+  <Timeline>
+    <Timeline.Item>
+      <Timeline.Badge>
         <Octicon icon={GitCommitIcon} aria-label="Commit" />
       </Timeline.Badge>
       <Timeline.Body>This is a message</Timeline.Body>

packages/react/src/Timeline/Timeline.features.stories.module.css

@@ -0,0 +1,13 @@
+.BadgeWithDoneBackground {
+  background-color: var(--bgColor-done-emphasis);
+}
+
+.LinkWithBoldStyle {
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-default);
+  margin-right: var(--base-size-4);
+}
+
+.LinkWithBoldStyle:hover {
+  color: var(--fgColor-accent);
+}

packages/react/src/Timeline/Timeline.features.stories.tsx

@@ -4,6 +4,7 @@ import Timeline from './Timeline'
 import Octicon from '../Octicon'
 import {GitBranchIcon, GitCommitIcon, GitMergeIcon} from '@primer/octicons-react'
 import Link from '../Link'
+import classes from './Timeline.features.stories.module.css'
 
 export default {
   title: 'Components/Timeline/Features',
@@ -53,7 +54,7 @@ export const CondensedItems = () => (
 export const TimelineBreak = () => (
   <Timeline>
     <Timeline.Item>
-      <Timeline.Badge sx={{bg: 'done.emphasis'}}>
+      <Timeline.Badge className={classes.BadgeWithDoneBackground}>
         <Octicon icon={GitMergeIcon} color="fg.onEmphasis" aria-label="Merged" />
       </Timeline.Badge>
       <Timeline.Body>This is a message</Timeline.Body>
@@ -75,11 +76,7 @@ export const WithInlineLinks = () => (
         <Octicon icon={GitCommitIcon} aria-label="Commit" />
       </Timeline.Badge>
       <Timeline.Body>
-        <Link
-          href="#"
-          sx={{fontWeight: 'bold', color: 'fg.default', mr: 1, '&:hover': {color: 'var(--fgColor-accent)'}}}
-          muted
-        >
+        <Link href="#" className={classes.LinkWithBoldStyle} muted>
           Monalisa
         </Link>
         enabled auto-merge (squash)

packages/react/src/Timeline/Timeline.tsx

@@ -1,16 +1,14 @@
 import {clsx} from 'clsx'
 import React from 'react'
-import type {SxProp} from '../sx'
 import classes from './Timeline.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
-type StyledTimelineProps = {clipSidebar?: boolean; className?: string} & SxProp
+type StyledTimelineProps = {clipSidebar?: boolean; className?: string}
 
 export type TimelineProps = StyledTimelineProps & React.ComponentPropsWithoutRef<'div'>
 
 const Timeline = React.forwardRef<HTMLDivElement, TimelineProps>(({clipSidebar, className, ...props}, forwardRef) => {
   return (
-    <BoxWithFallback
+    <div
       {...props}
       className={clsx(className, classes.Timeline)}
       ref={forwardRef}
@@ -21,19 +19,19 @@ const Timeline = React.forwardRef<HTMLDivElement, TimelineProps>(({clipSidebar,
 
 Timeline.displayName = 'Timeline'
 
-type StyledTimelineItemProps = {condensed?: boolean; className?: string} & SxProp
+type StyledTimelineItemProps = {condensed?: boolean; className?: string}
 
 /**
  * @deprecated Use the `TimelineItemProps` type instead
  */
-export type TimelineItemsProps = StyledTimelineItemProps & SxProp & React.ComponentPropsWithoutRef<'div'>
+export type TimelineItemsProps = StyledTimelineItemProps & React.ComponentPropsWithoutRef<'div'>
 
-export type TimelineItemProps = StyledTimelineItemProps & SxProp & React.ComponentPropsWithoutRef<'div'>
+export type TimelineItemProps = StyledTimelineItemProps & React.ComponentPropsWithoutRef<'div'>
 
 const TimelineItem = React.forwardRef<HTMLDivElement, TimelineItemProps>(
   ({condensed, className, ...props}, forwardRef) => {
     return (
-      <BoxWithFallback
+      <div
         {...props}
         className={clsx(className, 'Timeline-Item', classes.TimelineItem)}
         ref={forwardRef}
@@ -45,13 +43,15 @@ const TimelineItem = React.forwardRef<HTMLDivElement, TimelineItemProps>(
 
 TimelineItem.displayName = 'TimelineItem'
 
-export type TimelineBadgeProps = {children?: React.ReactNode; className?: string} & SxProp &
-  React.ComponentPropsWithoutRef<'div'>
+export type TimelineBadgeProps = {
+  children?: React.ReactNode
+  className?: string
+} & React.ComponentPropsWithoutRef<'div'>
 
 const TimelineBadge = ({className, ...props}: TimelineBadgeProps) => {
   return (
     <div className={classes.TimelineBadgeWrapper}>
-      <BoxWithFallback {...props} className={clsx(className, classes.TimelineBadge)} />
+      <div {...props} className={clsx(className, classes.TimelineBadge)} />
     </div>
   )
 }
@@ -61,23 +61,21 @@ TimelineBadge.displayName = 'Timeline.Badge'
 export type TimelineBodyProps = {
   /** Class name for custom styling */
   className?: string
-} & SxProp &
-  React.ComponentPropsWithoutRef<'div'>
+} & React.ComponentPropsWithoutRef<'div'>
 
 const TimelineBody = React.forwardRef<HTMLDivElement, TimelineBodyProps>(({className, ...props}, forwardRef) => {
-  return <BoxWithFallback {...props} className={clsx(className, classes.TimelineBody)} ref={forwardRef} />
+  return <div {...props} className={clsx(className, classes.TimelineBody)} ref={forwardRef} />
 })
 
 TimelineBody.displayName = 'TimelineBody'
 
 export type TimelineBreakProps = {
   /** Class name for custom styling */
   className?: string
-} & SxProp &
-  React.ComponentPropsWithoutRef<'div'>
+} & React.ComponentPropsWithoutRef<'div'>
 
 const TimelineBreak = React.forwardRef<HTMLDivElement, TimelineBreakProps>(({className, ...props}, forwardRef) => {
-  return <BoxWithFallback {...props} className={clsx(className, classes.TimelineBreak)} ref={forwardRef} />
+  return <div {...props} className={clsx(className, classes.TimelineBreak)} ref={forwardRef} />
 })
 
 TimelineBreak.displayName = 'TimelineBreak'

packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -181,6 +181,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type TimelineBadgeProps",
   "type TimelineBodyProps",
   "type TimelineBreakProps",
+  "type TimelineItemProps",
   "type TimelineItemsProps",
   "type TimelineProps",
   "ToggleSwitch",

packages/react/src/index.ts

@@ -172,6 +172,7 @@ export type {
   TimelineBodyProps,
   TimelineBreakProps,
   TimelineItemsProps,
+  TimelineItemProps,
 } from './Timeline'
 export {default as Token, IssueLabelToken} from './Token'
 export type {TokenProps, IssueLabelTokenProps} from './Token'

packages/styled-react/src/__tests__/primer-react.browser.test.tsx

@@ -399,11 +399,21 @@ describe('@primer/react', () => {
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
+  test('Timeline.Break supports `sx` prop', () => {
+    render(<Timeline.Break data-testid="component" sx={{background: 'red'}} />)
+    expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+  })
+
   test('Timeline.Item supports `sx` prop', () => {
     render(<Timeline.Item data-testid="component" sx={{background: 'red'}} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
+  test('Timeline.Body supports `sx` prop', () => {
+    render(<Timeline.Body data-testid="component" sx={{background: 'red'}} />)
+    expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+  })
+
   test('Token supports `sx` prop', () => {
     render(<Token data-testid="component" sx={{background: 'red'}} text="test" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')

packages/styled-react/src/index.tsx

@@ -8,6 +8,12 @@ import {
   SubNav as PrimerSubNav,
   type SubNavProps as PrimerSubNavProps,
   type SubNavLinkProps as PrimerSubNavLinkProps,
+  Timeline as PrimerTimeline,
+  type TimelineProps as PrimerTimelineProps,
+  type TimelineItemProps as PrimerTimelineItemProps,
+  type TimelineBadgeProps as PrimerTimelineBadgeProps,
+  type TimelineBodyProps as PrimerTimelineBodyProps,
+  type TimelineBreakProps as PrimerTimelineBreakProps,
   ToggleSwitch as PrimerToggleSwitch,
   type ToggleSwitchProps as PrimerToggleSwitchProps,
   type SegmentedControlProps as PrimerSegmentedControlProps,
@@ -84,13 +90,46 @@ const SubNav = Object.assign(SubNavImpl, {
   Link: SubNavLink,
 })
 
+type TimelineProps = PrimerTimelineProps & SxProp
+type TimelineItemProps = PrimerTimelineItemProps & SxProp
+type TimelineBadgeProps = PrimerTimelineBadgeProps & SxProp
+type TimelineBodyProps = PrimerTimelineBodyProps & SxProp
+type TimelineBreakProps = PrimerTimelineBreakProps & SxProp
+
+const TimelineImpl = forwardRef<HTMLDivElement, TimelineProps>(function Timeline(props, ref) {
+  return <Box as={PrimerTimeline} ref={ref} {...props} />
+})
+
+const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(function TimelineItem(props, ref) {
+  return <Box as={PrimerTimeline.Item} ref={ref} {...props} />
+})
+
+function TimelineBadge(props: TimelineBadgeProps) {
+  return <Box as={PrimerTimeline.Badge} {...props} />
+}
+
+const TimelineBody = forwardRef<HTMLDivElement, TimelineBodyProps>(function TimelineBody(props, ref) {
+  return <Box as={PrimerTimeline.Body} ref={ref} {...props} />
+})
+
+const TimelineBreak = forwardRef<HTMLDivElement, TimelineBreakProps>(function TimelineBreak(props, ref) {
+  return <Box as={PrimerTimeline.Break} ref={ref} {...props} />
+})
+
+const Timeline = Object.assign(TimelineImpl, {
+  Item: TimelineItem,
+  Badge: TimelineBadge,
+  Body: TimelineBody,
+  Break: TimelineBreak,
+})
+
 type ToggleSwitchProps = PrimerToggleSwitchProps & Omit<StyledProps, keyof PrimerToggleSwitchProps>
 
 const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function ToggleSwitch(props, ref) {
   return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
 })
 
-export {SegmentedControl, StateLabel, SubNav, ToggleSwitch}
+export {SegmentedControl, StateLabel, SubNav, Timeline, ToggleSwitch}
 
 export {
   ActionList,
@@ -125,7 +164,6 @@ export {
   Text,
   Textarea,
   TextInput,
-  Timeline,
   Token,
   Tooltip,
   Truncate,