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);
+}