From 6237866395c169caad28966c47f580815b4ff276 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Thu, 14 Nov 2024 15:56:47 -0500 Subject: [PATCH 01/10] Start module convert --- .../src/ProgressBar/ProgressBar.module.css | 10 ++++ .../react/src/ProgressBar/ProgressBar.tsx | 53 +++++++++++++------ 2 files changed, 47 insertions(+), 16 deletions(-) create mode 100644 packages/react/src/ProgressBar/ProgressBar.module.css diff --git a/packages/react/src/ProgressBar/ProgressBar.module.css b/packages/react/src/ProgressBar/ProgressBar.module.css new file mode 100644 index 00000000000..54b638ef1ec --- /dev/null +++ b/packages/react/src/ProgressBar/ProgressBar.module.css @@ -0,0 +1,10 @@ +.ProgressBarItem { + @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-duration: 1s; + animation-iteration-count: infinite; + } + } +} \ No newline at end of file diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx index 1a49d5a828a..c0b6299d012 100644 --- a/packages/react/src/ProgressBar/ProgressBar.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.tsx @@ -5,8 +5,11 @@ import {width} from 'styled-system' import {get} from '../constants' import type {SxProp} from '../sx' import sx from '../sx' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import clsx from 'clsx' type ProgressProp = { + className?: string progress?: string | number bg?: string } @@ -16,22 +19,28 @@ const shimmer = keyframes` to { mask-position: 0%; } ` -const ProgressItem = styled.span` - width: ${props => (props.progress ? `${props.progress}%` : 0)}; - background-color: ${props => get(`colors.${props.bg || 'success.emphasis'}`)}; - - @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: ${shimmer}; - animation-duration: 1s; - animation-iteration-count: infinite; +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' + +const ProgressItem = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'span', + styled.span` + width: ${props => (props.progress ? `${props.progress}%` : 0)}; + background-color: ${props => get(`colors.${props.bg || 'success.emphasis'}`)}; + + @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: ${shimmer}; + animation-duration: 1s; + animation-iteration-count: infinite; + } } - } - ${sx}; -` + ${sx}; + `, +) const sizeMap = { small: '5px', @@ -57,11 +66,22 @@ const ProgressContainer = styled.span` ${sx}; ` -export type ProgressBarItems = React.HTMLAttributes & {'aria-label'?: string} & ProgressProp & SxProp +export type ProgressBarItems = React.HTMLAttributes & { + 'aria-label'?: string + className?: string +} & ProgressProp & + SxProp export const Item = forwardRef( ( - {progress, 'aria-label': ariaLabel, 'aria-valuenow': ariaValueNow, 'aria-valuetext': ariaValueText, ...rest}, + { + progress, + 'aria-label': ariaLabel, + 'aria-valuenow': ariaValueNow, + 'aria-valuetext': ariaValueText, + className, + ...rest + }, forwardRef, ) => { const progressAsNumber = typeof progress === 'string' ? parseInt(progress, 10) : progress @@ -76,6 +96,7 @@ export const Item = forwardRef( return ( Date: Fri, 15 Nov 2024 11:47:55 -0500 Subject: [PATCH 02/10] Add more stuff --- .../src/ProgressBar/ProgressBar.module.css | 49 +++++++++++++++--- .../react/src/ProgressBar/ProgressBar.tsx | 50 +++++++++++++------ 2 files changed, 78 insertions(+), 21 deletions(-) diff --git a/packages/react/src/ProgressBar/ProgressBar.module.css b/packages/react/src/ProgressBar/ProgressBar.module.css index 54b638ef1ec..56f25cbc366 100644 --- a/packages/react/src/ProgressBar/ProgressBar.module.css +++ b/packages/react/src/ProgressBar/ProgressBar.module.css @@ -1,10 +1,45 @@ +@keyframes shimmer { + from { + mask-position: 200%; + } + + to { + mask-position: 0%; + } +} + .ProgressBarItem { - @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-duration: 1s; - animation-iteration-count: infinite; - } + @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; + background-color: var(--borderColor-default); + border-radius: var(--borderRadius-small); + gap: 2px; + + &[data-progress-display="inline"] { + display: inline-flex + } + + &[data-progress-bar-size="default"] { + height: 8px; + } + + &[data-progress-bar-size="small"] { + height: 5px; + } + + &[data-progress-bar-size="large"] { + height: 10px; } } \ No newline at end of file diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx index c0b6299d012..6a641fc7c3f 100644 --- a/packages/react/src/ProgressBar/ProgressBar.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.tsx @@ -6,7 +6,9 @@ import {get} from '../constants' import type {SxProp} from '../sx' import sx from '../sx' import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' -import clsx from 'clsx' +import {clsx} from 'clsx' +import classes from './ProgressBar.module.css' +import {useFeatureFlag} from '../FeatureFlags' type ProgressProp = { className?: string @@ -55,16 +57,20 @@ type StyledProgressContainerProps = { } & WidthProps & SxProp -const ProgressContainer = styled.span` - display: ${props => (props.inline ? 'inline-flex' : 'flex')}; - overflow: hidden; - background-color: ${get('colors.border.default')}; - border-radius: ${get('radii.1')}; - height: ${props => sizeMap[props.barSize || 'default']}; - gap: 2px; - ${width} - ${sx}; -` +const ProgressContainer = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'span', + styled.span` + display: ${props => (props.inline ? 'inline-flex' : 'flex')}; + overflow: hidden; + background-color: ${get('colors.border.default')}; + border-radius: ${get('radii.1')}; + height: ${props => sizeMap[props.barSize || 'default']}; + gap: 2px; + ${width} + ${sx}; + `, +) export type ProgressBarItems = React.HTMLAttributes & { 'aria-label'?: string @@ -94,14 +100,17 @@ export const Item = forwardRef( 'aria-valuetext': ariaValueText, } + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + return ( ) @@ -110,7 +119,10 @@ export const Item = forwardRef( Item.displayName = 'ProgressBar.Item' -export type ProgressBarProps = React.HTMLAttributes & {bg?: string} & StyledProgressContainerProps & +export type ProgressBarProps = React.HTMLAttributes & { + bg?: string + className?: string +} & StyledProgressContainerProps & ProgressProp export const ProgressBar = forwardRef( @@ -124,6 +136,7 @@ export const ProgressBar = forwardRef( 'aria-label': ariaLabel, 'aria-valuenow': ariaValueNow, 'aria-valuetext': ariaValueText, + className, ...rest }: ProgressBarProps, forwardRef, @@ -136,8 +149,17 @@ export const ProgressBar = forwardRef( // booleans, null, and undefined const validChildren = React.Children.toArray(children).length + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + return ( - + {validChildren ? ( children ) : ( From 2f5caa66de74c7b0123c1dbd2156071faaf234d7 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Fri, 15 Nov 2024 13:03:49 -0500 Subject: [PATCH 03/10] Add even more stuff --- packages/react/src/ProgressBar/ProgressBar.module.css | 2 ++ packages/react/src/ProgressBar/ProgressBar.tsx | 10 +++++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/react/src/ProgressBar/ProgressBar.module.css b/packages/react/src/ProgressBar/ProgressBar.module.css index 56f25cbc366..a6306e761b8 100644 --- a/packages/react/src/ProgressBar/ProgressBar.module.css +++ b/packages/react/src/ProgressBar/ProgressBar.module.css @@ -9,6 +9,8 @@ } .ProgressBarItem { + width: var(--progress-width); + 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%); diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx index 6a641fc7c3f..16fadec9f45 100644 --- a/packages/react/src/ProgressBar/ProgressBar.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.tsx @@ -102,6 +102,14 @@ export const Item = forwardRef( const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + const progressBarWidth = '--progress-width' + const progressBarBg = '--progress-bg' + const styles: {[key: string]: string} = {} + + const bgType = rest.bg && rest.bg.split('.') + styles[progressBarWidth] = progress ? `${progress}%` : '0%' + styles[progressBarBg] = (bgType && `var(--bgColor-${bgType[0]}-${bgType[1]})`) || 'var(--bgColor-success-emphasis)' + return ( ( aria-label={ariaLabel} ref={forwardRef} progress={progress} - data-progress={`${progress || 0}%`} + style={styles} {...ariaAttributes} /> ) From b2fc244dcc64a0bf40ba40389dff1da8234be06c Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 18 Nov 2024 08:29:09 -0500 Subject: [PATCH 04/10] Add rest of styles needed --- packages/react/src/ProgressBar/ProgressBar.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx index 16fadec9f45..69c048bcc09 100644 --- a/packages/react/src/ProgressBar/ProgressBar.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.tsx @@ -118,7 +118,7 @@ export const Item = forwardRef( aria-label={ariaLabel} ref={forwardRef} progress={progress} - style={styles} + style={enabled ? styles : undefined} {...ariaAttributes} /> ) @@ -156,16 +156,17 @@ export const ProgressBar = forwardRef( // Get the number of non-empty nodes passed as children, this will exclude // booleans, null, and undefined const validChildren = React.Children.toArray(children).length - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + const cssModulesProps = !enabled + ? {barSize} + : {'data-progress-display': rest.inline ? 'inline' : 'block', 'data-progress-bar-size': barSize} + return ( {validChildren ? ( From 095272109d7747cc5af1371970f12a334b7a4a0c Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 18 Nov 2024 09:34:14 -0500 Subject: [PATCH 05/10] lint and format --- .../src/ProgressBar/ProgressBar.module.css | 41 ++++++++++--------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/packages/react/src/ProgressBar/ProgressBar.module.css b/packages/react/src/ProgressBar/ProgressBar.module.css index a6306e761b8..d343899a5bc 100644 --- a/packages/react/src/ProgressBar/ProgressBar.module.css +++ b/packages/react/src/ProgressBar/ProgressBar.module.css @@ -10,7 +10,9 @@ .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%); @@ -23,25 +25,26 @@ } .ProgressBarContainer { - display: flex; - overflow: hidden; - background-color: var(--borderColor-default); - border-radius: var(--borderRadius-small); - gap: 2px; - - &[data-progress-display="inline"] { - display: inline-flex - } + display: flex; + overflow: hidden; + /* stylelint-disable-next-line primer/colors */ + background-color: var(--borderColor-default); + border-radius: var(--borderRadius-small); + gap: 2px; - &[data-progress-bar-size="default"] { - height: 8px; - } + &[data-progress-display='inline'] { + display: inline-flex; + } - &[data-progress-bar-size="small"] { - height: 5px; - } + &[data-progress-bar-size='default'] { + height: 8px; + } - &[data-progress-bar-size="large"] { - height: 10px; - } -} \ No newline at end of file + &[data-progress-bar-size='small'] { + height: 5px; + } + + &[data-progress-bar-size='large'] { + height: 10px; + } +} From 0f33ceb330e032c713947edfdfa407199cf5033f Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 18 Nov 2024 13:53:47 -0500 Subject: [PATCH 06/10] Add changeset --- .changeset/small-foxes-tan.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/small-foxes-tan.md diff --git a/.changeset/small-foxes-tan.md b/.changeset/small-foxes-tan.md new file mode 100644 index 00000000000..bc5ee27c455 --- /dev/null +++ b/.changeset/small-foxes-tan.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Convert ProgressBar to CSS modules behind feature flag From 0ba5d32dc79534a65619cba9a453162f03715154 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 18 Nov 2024 13:55:42 -0500 Subject: [PATCH 07/10] Add `where` --- packages/react/src/ProgressBar/ProgressBar.module.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/ProgressBar/ProgressBar.module.css b/packages/react/src/ProgressBar/ProgressBar.module.css index d343899a5bc..e9f3badcd38 100644 --- a/packages/react/src/ProgressBar/ProgressBar.module.css +++ b/packages/react/src/ProgressBar/ProgressBar.module.css @@ -32,19 +32,19 @@ border-radius: var(--borderRadius-small); gap: 2px; - &[data-progress-display='inline'] { + &:where([data-progress-display='inline']) { display: inline-flex; } - &[data-progress-bar-size='default'] { + &:where([data-progress-bar-size='default']) { height: 8px; } - &[data-progress-bar-size='small'] { + &:where([data-progress-bar-size='small']) { height: 5px; } - &[data-progress-bar-size='large'] { + &:where([data-progress-bar-size='large']) { height: 10px; } } From dd2a2bce5bf7ac4dc3b94302875bc4735e43f393 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 18 Nov 2024 17:53:41 -0500 Subject: [PATCH 08/10] Refactor E2E, add dev story --- e2e/components/ProgressBar.test.ts | 293 +++++------------- .../ProgressBar/ProgressBar.dev.stories.tsx | 19 ++ 2 files changed, 89 insertions(+), 223 deletions(-) create mode 100644 packages/react/src/ProgressBar/ProgressBar.dev.stories.tsx diff --git a/e2e/components/ProgressBar.test.ts b/e2e/components/ProgressBar.test.ts index ac87493b2a1..acef0768594 100644 --- 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 new file mode 100644 index 00000000000..da900ddd134 --- /dev/null +++ b/packages/react/src/ProgressBar/ProgressBar.dev.stories.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import {ProgressBar} from '.' + +export default { + title: 'Components/ProgressBar/Dev', + component: ProgressBar, +} + +export const Default = () => ( + +) From f282411eed08d33d309af36eb373ddf23988cd2a Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Tue, 19 Nov 2024 09:25:52 -0500 Subject: [PATCH 09/10] Add label to progressbar --- packages/react/src/ProgressBar/ProgressBar.dev.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/ProgressBar/ProgressBar.dev.stories.tsx b/packages/react/src/ProgressBar/ProgressBar.dev.stories.tsx index da900ddd134..4d3afa7d319 100644 --- a/packages/react/src/ProgressBar/ProgressBar.dev.stories.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.dev.stories.tsx @@ -8,6 +8,7 @@ export default { export const Default = () => ( Date: Tue, 19 Nov 2024 14:29:53 +0000 Subject: [PATCH 10/10] test(vrt): update snapshots --- ...essBar-Dev-SX-Props-dark-colorblind-linux.png | Bin 0 -> 4249 bytes ...rogressBar-Dev-SX-Props-dark-dimmed-linux.png | Bin 0 -> 4236 bytes ...Bar-Dev-SX-Props-dark-high-contrast-linux.png | Bin 0 -> 4257 bytes .../ProgressBar-Dev-SX-Props-dark-linux.png | Bin 0 -> 4230 bytes ...essBar-Dev-SX-Props-dark-tritanopia-linux.png | Bin 0 -> 4249 bytes ...ssBar-Dev-SX-Props-light-colorblind-linux.png | Bin 0 -> 4252 bytes ...ar-Dev-SX-Props-light-high-contrast-linux.png | Bin 0 -> 4266 bytes .../ProgressBar-Dev-SX-Props-light-linux.png | Bin 0 -> 4256 bytes ...ssBar-Dev-SX-Props-light-tritanopia-linux.png | Bin 0 -> 4252 bytes 9 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-colorblind-linux.png create mode 100644 .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-dimmed-linux.png create mode 100644 .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-linux.png create mode 100644 .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-colorblind-linux.png create mode 100644 .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-linux.png create mode 100644 .playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-tritanopia-linux.png diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-colorblind-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6fe55fca51d278dad48e58f957e41fd655b6927e GIT binary patch literal 4249 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO7!JaOT zAr*7p-ahLUnkdosaOsZV!?F^s7MzNk4)85oFh5XGHq!JByVZ<2FH+9W@o;I&uzDd- zC>ecCa%va1`=0FbF=9V_;A^ zV#~nb(oxO8&>`?0XszNqMg|2Z{0bv>9Z4&Fe)QG1&xyNC+ksji>@PR5zFA$r=Xc(l zyplWX-|d-WS7GFH?c8xa#vNAWW%2P}IT>QE-2C+H`tJU=#D^8%->!K0BHeQJ?elFX zdp~DyKgP$%(9k_&j@%uaKYNP)zr6AAN4n)@-TQAC84}j1EoVP`>qYv9x)rRHx?Dp3 zyZh#)^V^GevNAA8v?WTMn`YiFzj@>8i-q-@z9)YCvwI&fbSy2S@BJzJ{qg0$%-pJN-m2|Zf9UP@Lu+;-#2@?`by)n@|nQ!WccSq1;-H`{-X-1la5Ej zaWovsF9k>H{JYD@<);T3K0RZAjSi}GT literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-dimmed-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-dimmed-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..1aa04d731a107deee7127ce01a8dd06d5f5e09a4 GIT binary patch literal 4236 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO7Zk{fV zAr*7p-m=XTPLy!FxN&3WS$}s<)`*E3nK$bX%Jq1-dWs9FZz{auw2vdX&~kabNq%Lz z$>#6!_Pz`Z2lnUJy<=uzXs~y_!_45&vV)zWfuoS0fkE(*90P;W5nBcZmyT)%h7N)6 zK)V#*F)}DP;a3=8lel?b%sR8~pRa}I08ReC_wm<~?{7E!-X$-~cl__KqMu2{hS7F5 zKF2TWGCbe(@6)q8>I@$uj(>f4^Y-jav$xxlYwiC;pUc`jLswod>=e)yeo6bHZT|l& z+A8@^z}{xY{&_W%G|L@W-ns-vNfqpHgz23-*_x%=hE3Gs~V&1qQC)iyd|{ z^?d8wjQ_rSW$-rr7sv%qcG$hSfA>!OUnyBVH}>6c>&$$`<;6ZEV0tS{Yh_nmwD;X-@g%Wup6x2Q8RFsMI$FGWfK5*^Z`3aOJ~N5gS69LX>5MpMsd z>KRQvq_q)7^UP?T8O<}Jd4_OrVzi_fEh$Dz3YwP`kIa4iTz_me4(kE-fEhep{an^L HB{Ts5BSK2F literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-high-contrast-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..ea3000d0cfda60b87dd7f2c4efb5946162e10bfd GIT binary patch literal 4257 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO7(Vi}j zAr*7p-Zsn%31n!yIP=GaBPx6>2bCH_%vRou`s13u|^TDD3|n- zmLoe@Y7Z(t`#k4gdvx9VPwz^sa(oyV8dm4O-NX;H;*abjIR*x$Beo0-E*;ej3>^aB zfp#grV`NZpy2H%i(6WP_p@E|is8kTY!XpKZXTMfkA3m64s1sfQH1o&(+ z`RenHhc9;QFU(K>{_pP3o7<1Z++mK9JTGsv_l+{chvj{Kee!SZDs3w*x4n1&Kh0R? z%(L|ScIWJSWr0CapH#o?`-cw)3k;;KWonD<<);;we`8?S;Prd+-u2h_`Ma;PS;0!2 z3vqizLiT&~^4I0t^432yU|=|qVl-1`u1x;?+@9FpzTcm>cSm2}{uLNNYffA|`SEf1 z`D^$7OIXkGYriPZGP}L}-1~bmJf}B0GcY{ZZsvde`n}ru`+pdeRZIki9K%0HxhqU0 zgd%P?k{d6hCQ>JTkA~xDIFesFj;5Z`)H9lTNNZ7y=9$qvGn!{c^9

$7o40T2hRb f6l9ka`x!K*yQv-cI`uPfK!Cy1)z4*}Q$iB}^zT@R literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..b272c909a6f420a1011a4e18580c5197772228fe GIT binary patch literal 4230 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO74xTQK zAr*7p-tzSe36yZXSj8d5rMcpU!p8LLZH~?|`Uhy3xgM!l?W(J3r z9qbGZ9EJQ041)L-9(l%WX6;`6`S8&#Ukn%+8jf$bi;b0!kEyknm*qSD_uR#Mk1o%? zdHU<$9MfH_4|eYPTlC@1e1-$}cg?*&cYnR@2@vs9qmCwwUqJUso%=HT@#&Y}+x7v?S1+>Ozq_LR=j$g~B^JQYb2DFW|31I|#@uPYfFUP$ z|5r(AanaAuuW!Eipa=@5Kg}`sNe(^S4kR}|Mopwnx*iS3(QqWcR2)q`qp4>!^^n$* z7|k=Id1f@vjOH1_eU8zRVzi_fEh)$-DLU+(0v&i&L^kXM4goNDy85}Sb4q9e0Jc6( AZU6uP literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-tritanopia-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-dark-tritanopia-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6fe55fca51d278dad48e58f957e41fd655b6927e GIT binary patch literal 4249 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO7!JaOT zAr*7p-ahLUnkdosaOsZV!?F^s7MzNk4)85oFh5XGHq!JByVZ<2FH+9W@o;I&uzDd- zC>ecCa%va1`=0FbF=9V_;A^ zV#~nb(oxO8&>`?0XszNqMg|2Z{0bv>9Z4&Fe)QG1&xyNC+ksji>@PR5zFA$r=Xc(l zyplWX-|d-WS7GFH?c8xa#vNAWW%2P}IT>QE-2C+H`tJU=#D^8%->!K0BHeQJ?elFX zdp~DyKgP$%(9k_&j@%uaKYNP)zr6AAN4n)@-TQAC84}j1EoVP`>qYv9x)rRHx?Dp3 zyZh#)^V^GevNAA8v?WTMn`YiFzj@>8i-q-@z9)YCvwI&fbSy2S@BJzJ{qg0$%-pJN-m2|Zf9UP@Lu+;-#2@?`by)n@|nQ!WccSq1;-H`{-X-1la5Ej zaWovsF9k>H{JYD@<);T3K0RZAjSi}GT literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-colorblind-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..1fcdfa55c724bb73b97c8a2561e22696b0d054bb GIT binary patch literal 4252 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO7VV*9I zAr*7p-nPyPO_XT6SnMN^vxk*=nx+wlVc07Nk%OmBhaAyb(Dd0LbkEs`BATrpdR-l^ zCDtr|n-zcU2>X91+%D&v{rqK_Yzz#4exIB3jgf)jz{I%3Pf;L=gez|bM^9cVoPg*x)dpG&g;-~6`x=(~%YK=T;>@BVuAX|=hY z&5p{-5(}B{{@cIB@3Z{z>Fx0s0u8}m{(Zc8*^aT{{?^Urx%;eVEW3F)I=R;VPxQIX zZx1)Gx3{a2y9;#S{?y#my8pK>eSUlR;=>Qqe;b@TqGWX=JFj4Aq zp5uRiy}ESuvwAT%(BRo;(>BlDoB8+Dr59Ni@80Le>?z4x_nwjALCc#rzO(cD-{r(e z$evrCDRtMTa_j#`UqRk|A;7@!V=2(LyRV?NinEOijMgjh29%BBr|dV QhZ`6?UHx3vIVCg!0Gu3LzyJUM literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-high-contrast-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-high-contrast-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..d828f979366cbab67160326a293b4f50b9f7ad46 GIT binary patch literal 4266 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO7DV{El zAr*7p-nP&8E0k$}xcsa7EVpo}uX<-LxttLb?39pTY3@Cmm#AE+!^1O8N+SD15YN>s zYFfVDi;jCgFqu`fd)?p3HOH;@&oMUUIn2Vq@ZAovtJ&b`tsbn?I#y*3})av^Xa)Udo2^g{_NMMzfGR{{BX*S z@`vA6JbZD!XxaO?cW>%$TYjm1BLH-)?C0IZ-m}%0t=2!z=f3|={hd1>(tsBH&Z;ZV z`}=zNMs52mOq9C6r|dT6XlBmYy!lpjMQ^f7?%cO1e|n-I;yyFO z0lS;C?*22_UibFR(v62_CQ2O3liO4G=gr^MThI1xbY@_9FdgXYxcGfF{~yiWcz7=; z5I=~2a@Hj!EQt>EQH9h=yrbbb8jj=_eWR&oH1&+89@3f%qj_dD&y41o(L6)AV=-D% kjFuFmB?Zk(ijTsgy1tv{F{R7}4n8n=y85}Sb4q9e06^4Z4FCWD literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-linux.png b/.playwright/snapshots/components/ProgressBar.test.ts-snapshots/ProgressBar-Dev-SX-Props-light-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..baf2d5630f7db4d6643b4fae713cc52042f28606 GIT binary patch literal 4256 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO7QJyZ2 zAr*7p-rnyutx%@@;dPEC1@8{AO4j4c=DgByY3ew#ZP8?|Flf5y<6w5-P_N;yZ~s_pZCww zk9`-PCU<9#b%}+=yYTp2o7=S?zdrxI(3#=fg>P@w(`%U+j&H3m+3_#0*htD&=EnEt z`A^sEz4`0UyzIGnN&Z;gzTZ<@m!1~adkG8)3)SE5?b-R} z)5XQw`IZAi@xs~1)6dU;m-oKbM#74PfuSzDE^SXu^2dv7tDW1`JAqmr=s#(XA|(uo z4(w5d)Je3X;W!$O-{A5muMoRzQleILO_JVcj{ImkbO7VV*9I zAr*7p-nPyPO_XT6SnMN^vxk*=nx+wlVc07Nk%OmBhaAyb(Dd0LbkEs`BATrpdR-l^ zCDtr|n-zcU2>X91+%D&v{rqK_Yzz#4exIB3jgf)jz{I%3Pf;L=gez|bM^9cVoPg*x)dpG&g;-~6`x=(~%YK=T;>@BVuAX|=hY z&5p{-5(}B{{@cIB@3Z{z>Fx0s0u8}m{(Zc8*^aT{{?^Urx%;eVEW3F)I=R;VPxQIX zZx1)Gx3{a2y9;#S{?y#my8pK>eSUlR;=>Qqe;b@TqGWX=JFj4Aq zp5uRiy}ESuvwAT%(BRo;(>BlDoB8+Dr59Ni@80Le>?z4x_nwjALCc#rzO(cD-{r(e z$evrCDRtMTa_j#`UqRk|A;7@!V=2(LyRV?NinEOijMgjh29%BBr|dV QhZ`6?UHx3vIVCg!0Gu3LzyJUM literal 0 HcmV?d00001