feat(Timeline): Convert Timeline to CSS modules behind team feature flag

.changeset/rotten-teachers-brush.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Update `Timeline` component to use CSS modules behind the feature flag primer_react_css_modules_team

e2e/components/Timeline.test.ts

@@ -2,143 +2,65 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('Timeline', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Timeline.Default.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
-        })
-      })
-    }
-  })
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-timeline--default',
+  },
+  {
+    title: 'Clip Sidebar',
+    id: 'components-timeline-features--clip-sidebar',
+  },
+  {
+    title: 'Condensed Items',
+    id: 'components-timeline-features--condensed-items',
+  },
+  {
+    title: 'Timeline Break',
+    id: 'components-timeline-features--timeline-break',
+  },
+  {
+    title: 'SX Props',
+    id: 'components-timeline-dev--sx-props',
+  },
+] as const
 
-  test.describe('Clip Sidebar', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline-features--clip-sidebar',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Timeline.Clip Sidebar.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline-features--clip-sidebar',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
+test.describe('Timeline', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('@vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
               },
-            },
-          })
-        })
-      })
-    }
-  })
+            })
 
-  test.describe('Condensed Items', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline-features--condensed-items',
-            globals: {
-              colorScheme: theme,
-            },
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`Timeline.${story.title}.${theme}.png`)
           })
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Timeline.Condensed Items.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline-features--condensed-items',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
               },
-            },
-          })
-        })
-      })
-    }
-  })
-
-  test.describe('Timeline Break', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline-features--timeline-break',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Timeline.Timeline Break.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline-features--timeline-break',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
+            })
+            await expect(page).toHaveNoViolations({
+              rules: {
+                'color-contrast': {
+                  enabled: theme !== 'dark_dimmed',
+                },
               },
-            },
+            })
           })
         })
-      })
-    }
-  })
-
+      }
+    })
+  }
   test.describe('With Inline Links', () => {
     for (const theme of themes) {
       test.describe(theme, () => {

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

@@ -0,0 +1,92 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import type {ComponentProps} from '../utils/types'
+import Timeline from './Timeline'
+import Octicon from '../Octicon'
+import {GitCommitIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Components/Timeline/Dev',
+  component: Timeline,
+  subcomponents: {
+    'Timeline.Item': Timeline.Item,
+    'Timeline.Badge': Timeline.Badge,
+    'Timeline.Body': Timeline.Body,
+    'Timeline.Break': Timeline.Break,
+  },
+} 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',
+        }}
+      >
+        <Octicon icon={GitCommitIcon} aria-label="Commit" />
+      </Timeline.Badge>
+      <Timeline.Body>This is a message</Timeline.Body>
+    </Timeline.Item>
+  </Timeline>
+)

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

@@ -0,0 +1,99 @@
+.Timeline {
+  display: flex;
+  flex-direction: column;
+
+  &:where([data-clip-sidebar]) {
+    .TimelineItem:first-child {
+      padding-top: 0;
+    }
+
+    .TimelineItem:last-child {
+      padding-bottom: 0;
+    }
+  }
+}
+
+.TimelineItem {
+  position: relative;
+  display: flex;
+  padding: var(--base-size-16) 0;
+  margin-left: var(--base-size-16);
+
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: 2px;
+    content: '';
+    /* stylelint-disable-next-line primer/colors */
+    background-color: var(--borderColor-muted);
+  }
+
+  &:where([data-condensed]) {
+    padding-top: var(--base-size-4);
+    padding-bottom: 0;
+
+    &:last-child {
+      padding-bottom: var(--base-size-16);
+    }
+
+    .TimelineBadge {
+      height: 16px;
+      margin-top: var(--base-size-8);
+      margin-bottom: var(--base-size-8);
+      color: var(--fgColor-muted);
+      background-color: var(--bgColor-default);
+      border: 0;
+    }
+  }
+}
+
+.TimelineBadgeWrapper {
+  position: relative;
+  z-index: 1;
+}
+
+.TimelineBadge {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  margin-right: var(--base-size-8);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-left: -15px;
+  flex-shrink: 0;
+  overflow: hidden;
+  color: var(--fgColor-muted);
+
+  /* TODOl not quite sure if this is the correct migration for this line */
+  background-color: var(--timelineBadge-bgColor);
+  /* stylelint-disable-next-line primer/colors */
+  border-color: var(--bgColor-default);
+  border-style: solid;
+  border-width: var(--borderWidth-thick);
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+}
+
+.TimelineBody {
+  min-width: 0;
+  max-width: 100%;
+  margin-top: var(--base-size-4);
+  font-size: var(--text-body-size-medium);
+  color: var(--fgColor-muted);
+  flex: auto;
+}
+
+.TimelineBreak {
+  position: relative;
+  z-index: 1;
+  height: var(--base-size-24);
+  margin: 0;
+  margin-bottom: calc(-1 * var(--base-size-16));
+  margin-left: 0;
+  background-color: var(--bgColor-default);
+  border: 0;
+  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);
+}