Merge 3ae1346 into a2536bf

.changeset/famous-trainers-allow.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+fix(Timeline): render as unordered list

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

@@ -53,19 +53,23 @@ export const CondensedItems = () => (
 
 export const TimelineBreak = () => (
   <Timeline>
-    <Timeline.Item>
-      <Timeline.Badge sx={{bg: 'done.emphasis'}}>
-        <Octicon icon={GitMergeIcon} color="fg.onEmphasis" aria-label="Merged" />
-      </Timeline.Badge>
-      <Timeline.Body>This is a message</Timeline.Body>
-    </Timeline.Item>
+    <Timeline.Group>
+      <Timeline.Item>
+        <Timeline.Badge sx={{bg: 'done.emphasis'}}>
+          <Octicon icon={GitMergeIcon} color="fg.onEmphasis" aria-label="Merged" />
+        </Timeline.Badge>
+        <Timeline.Body>This is a message</Timeline.Body>
+      </Timeline.Item>
+    </Timeline.Group>
     <Timeline.Break />
-    <Timeline.Item>
-      <Timeline.Badge>
-        <Octicon icon={GitBranchIcon} aria-label="Branch" />
-      </Timeline.Badge>
-      <Timeline.Body>This is a message</Timeline.Body>
-    </Timeline.Item>
+    <Timeline.Group>
+      <Timeline.Item>
+        <Timeline.Badge>
+          <Octicon icon={GitBranchIcon} aria-label="Branch" />
+        </Timeline.Badge>
+        <Timeline.Body>This is a message</Timeline.Body>
+      </Timeline.Item>
+    </Timeline.Group>
   </Timeline>
 )
 

packages/react/src/Timeline/Timeline.tsx

@@ -7,9 +7,18 @@ import type {SxProp} from '../sx'
 import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
 
-const Timeline = styled.div<{clipSidebar?: boolean} & SxProp>`
+const Timeline = styled.ul<{clipSidebar?: boolean} & SxProp>`
   display: flex;
   flex-direction: column;
+  list-style: none;
+  padding-inline-start: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+
+  .Timeline-Group {
+    padding-inline-start: 0;
+  }
+
   ${props =>
     props.clipSidebar &&
     css`
@@ -27,7 +36,7 @@ const Timeline = styled.div<{clipSidebar?: boolean} & SxProp>`
 
 type StyledTimelineItemProps = {condensed?: boolean} & SxProp
 
-const TimelineItem = styled.div.attrs<StyledTimelineItemProps>(props => ({
+const TimelineItem = styled.li.attrs<StyledTimelineItemProps>(props => ({
   className: clsx('Timeline-Item', props.className),
 }))<StyledTimelineItemProps>`
   display: flex;
@@ -108,7 +117,7 @@ const TimelineBody = styled.div<SxProp>`
   ${sx};
 `
 
-const TimelineBreak = styled.div<SxProp>`
+const StyledTimelineBreak = styled.div<SxProp>`
   position: relative;
   z-index: 1;
   height: 24px;
@@ -121,6 +130,21 @@ const TimelineBreak = styled.div<SxProp>`
   ${sx};
 `
 
+function TimelineBreak(props: ComponentProps<typeof StyledTimelineBreak>) {
+  return <StyledTimelineBreak aria-hidden {...props} />
+}
+
+function TimelineGroup({children, ...props}: React.ComponentPropsWithoutRef<'ul'>) {
+  return (
+    <Box as="li">
+      <Box as="ul" className="Timeline-Group" {...props}>
+        {children}
+      </Box>
+    </Box>
+  )
+}
+TimelineGroup.displayName = 'Timeline.Group'
+
 TimelineItem.displayName = 'Timeline.Item'
 
 TimelineBadge.displayName = 'Timeline.Badge'
@@ -133,9 +157,11 @@ export type TimelineProps = ComponentProps<typeof Timeline>
 export type TimelineItemsProps = ComponentProps<typeof TimelineItem>
 export type TimelineBodyProps = ComponentProps<typeof TimelineBody>
 export type TimelineBreakProps = ComponentProps<typeof TimelineBreak>
+export type TimelineGroupProps = ComponentProps<typeof TimelineGroup>
 export default Object.assign(Timeline, {
   Item: TimelineItem,
   Badge: TimelineBadge,
   Body: TimelineBody,
   Break: TimelineBreak,
+  Group: TimelineGroup,
 })

packages/react/src/Timeline/__tests__/Timeline.test.tsx

@@ -27,7 +27,11 @@ describe('Timeline.Item', () => {
   behavesAsComponent({Component: Timeline.Item})
 
   it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Timeline.Item />)
+    const {container} = HTMLRender(
+      <Timeline>
+        <Timeline.Item />
+      </Timeline>,
+    )
     const results = await axe.run(container)
     expect(results).toHaveNoViolations()
   })
@@ -50,3 +54,32 @@ describe('Timeline.Badge', () => {
     expect(results).toHaveNoViolations()
   })
 })
+
+describe('Timeline.Break', () => {
+  behavesAsComponent({Component: Timeline.Break})
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<Timeline.Break />)
+    const results = await axe.run(container)
+    expect(results).toHaveNoViolations()
+  })
+})
+
+describe('Timeline.Group', () => {
+  behavesAsComponent({Component: Timeline.Group, options: {skipAs: true, skipSx: true}})
+
+  // TODO
+  it.todo('correctly renders with Timeline.Group')
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(
+      <Timeline>
+        <Timeline.Group>
+          <Timeline.Item>test</Timeline.Item>
+        </Timeline.Group>
+      </Timeline>,
+    )
+    const results = await axe.run(container)
+    expect(results).toHaveNoViolations()
+  })
+})

packages/react/src/Timeline/__tests__/Timeline.types.test.tsx

@@ -9,6 +9,7 @@ export function shouldAcceptCallWithNoProps() {
       <Timeline.Badge />
       <Timeline.Body />
       <Timeline.Break />
+      <Timeline.Group />
     </>
   )
 }
@@ -26,6 +27,8 @@ export function shouldNotAcceptSystemProps() {
       <Timeline.Body backgroundColor="green" />
       {/* @ts-expect-error system props should not be accepted */}
       <Timeline.Break backgroundColor="blue" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Timeline.Group backgroundColor="blue" />
     </>
   )
 }

packages/react/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap

@@ -9,6 +9,12 @@ exports[`Timeline renders with clipSidebar prop 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.c0 .Timeline-Group {
+  padding-inline-start: 0;
 }
 
 .c0 .Timeline-Item:first-child {
@@ -19,7 +25,7 @@ exports[`Timeline renders with clipSidebar prop 1`] = `
   padding-bottom: 0;
 }
 
-<div
+<ul
   className="c0"
 />
 `;
@@ -61,7 +67,7 @@ exports[`Timeline.Item renders with condensed prop 1`] = `
   border: 0;
 }
 
-<div
+<li
   className="c0 Timeline-Item"
 />
 `;