feat(ProgressBar): Convert ProgressBar to CSS modules behind team fea…

…ture flag (#5304) * Start module convert * Add more stuff * Add even more stuff * Add rest of styles needed * lint and format * Add changeset * Add `where` * Refactor E2E, add dev story * Add label to progressbar * test(vrt): update snapshots --------- Co-authored-by: TylerJDev <TylerJDev@users.noreply.github.com>
primer · Nov 19, 2024 · a3fc488 · a3fc488
1 parent 65802fc
commit a3fc488
Show file tree

Hide file tree

Showing 14 changed files with 225 additions and 251 deletions.
diff --git a/.changeset/small-foxes-tan.md b/.changeset/small-foxes-tan.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert ProgressBar to CSS modules behind feature flag
diff --git a/...rogressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-colorblind-linux.png b/...rogressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-colorblind-linux.png
diff --git a/...ts/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-dimmed-linux.png b/...ts/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-dimmed-linux.png
diff --git a/...ressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-high-contrast-linux.png b/...ressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-high-contrast-linux.png
diff --git a/...omponents/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-linux.png b/...omponents/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-linux.png
diff --git a/...rogressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-tritanopia-linux.png b/...rogressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-tritanopia-linux.png
diff --git a/...ogressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-colorblind-linux.png b/...ogressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-colorblind-linux.png
diff --git a/...essBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-high-contrast-linux.png b/...essBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-high-contrast-linux.png
diff --git a/...mponents/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-linux.png b/...mponents/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-linux.png
diff --git a/...ogressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-tritanopia-linux.png b/...ogressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-tritanopia-linux.png
diff --git a/e2e/components/ProgressBar.test.ts b/e2e/components/ProgressBar.test.ts
@@ -2,228 +2,75 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('ProgressBar', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Default.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Progress Zero', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar-features--progress-zero',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Progress Zero.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar-features--progress-zero',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Progress Half', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar-features--progress-half',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Progress Half.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar-features--progress-half',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Progress Done', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar-features--progress-done',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Progress Done.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar-features--progress-done',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-progressbar--default',
+  },
+  {
+    title: 'Progress Zero',
+    id: 'components-progressbar-features--progress-zero',
+  },
+  {
+    title: 'Progress Half',
+    id: 'components-progressbar-features--progress-half',
+  },
+  {
+    title: 'Progress Done',
+    id: 'components-progressbar-features--progress-done',
+  },
+  {
+    title: 'Size Small',
+    id: 'components-progressbar-features--size-small',
+  },
+  {
+    title: 'Size Large',
+    id: 'components-progressbar-features--size-large',
+  },
+  {
+    title: 'Inline',
+    id: 'components-progressbar-features--inline',
+  },
+  {
+    title: 'Color',
+    id: 'components-progressbar-features--color',
+  },
+  {
+    title: 'Dev SX Props',
+    id: 'components-progressbar-dev--default',
+  },
+] as const
 
-  test.describe('Size Small', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar-features--size-small',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Size Small.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar-features--size-small',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Size Large', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar-features--size-large',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Size Large.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar-features--size-large',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Inline', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar-features--inline',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Inline.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar-features--inline',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Color', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar-features--color',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`ProgressBar.Color.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-progressbar-features--color',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
+test.describe('ProgressBar', () => {
+  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,
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+              `ProgressBar.${story.title}.${theme}.png`,
+            )
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
 })
diff --git a/packages/react/src/ProgressBar/ProgressBar.dev.stories.tsx b/packages/react/src/ProgressBar/ProgressBar.dev.stories.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import {ProgressBar} from '.'
+
+export default {
+  title: 'Components/ProgressBar/Dev',
+  component: ProgressBar,
+}
+
+export const Default = () => (
+  <ProgressBar
+    aria-label="Status"
+    progress={50}
+    sx={{
+      height: '20px',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'success.emphasis',
+    }}
+  />
+)
diff --git a/packages/react/src/ProgressBar/ProgressBar.module.css b/packages/react/src/ProgressBar/ProgressBar.module.css
@@ -0,0 +1,50 @@
+@keyframes shimmer {
+  from {
+    mask-position: 200%;
+  }
+
+  to {
+    mask-position: 0%;
+  }
+}
+
+.ProgressBarItem {
+  width: var(--progress-width);
+  /* stylelint-disable-next-line primer/colors */
+  background-color: var(--progress-bg);
+
+  @media (prefers-reduced-motion: no-preference) {
+    &[data-animated='true'] {
+      mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);
+      mask-size: 200%;
+      animation-name: shimmer;
+      animation-duration: 1s;
+      animation-iteration-count: infinite;
+    }
+  }
+}
+
+.ProgressBarContainer {
+  display: flex;
+  overflow: hidden;
+  /* stylelint-disable-next-line primer/colors */
+  background-color: var(--borderColor-default);
+  border-radius: var(--borderRadius-small);
+  gap: 2px;
+
+  &:where([data-progress-display='inline']) {
+    display: inline-flex;
+  }
+
+  &:where([data-progress-bar-size='default']) {
+    height: 8px;
+  }
+
+  &:where([data-progress-bar-size='small']) {
+    height: 5px;
+  }
+
+  &:where([data-progress-bar-size='large']) {
+    height: 10px;
+  }
+}