From a3fc4881b8e3916a054900fa2a2b252056350bc9 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Tue, 19 Nov 2024 09:47:25 -0500 Subject: [PATCH] feat(ProgressBar): Convert ProgressBar to CSS modules behind team feature 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 --- .changeset/small-foxes-tan.md | 5 + ...Bar-Dev-SX-Props-dark-colorblind-linux.png | Bin 0 -> 4249 bytes ...ressBar-Dev-SX-Props-dark-dimmed-linux.png | Bin 0 -> 4236 bytes ...-Dev-SX-Props-dark-high-contrast-linux.png | Bin 0 -> 4257 bytes .../ProgressBar-Dev-SX-Props-dark-linux.png | Bin 0 -> 4230 bytes ...Bar-Dev-SX-Props-dark-tritanopia-linux.png | Bin 0 -> 4249 bytes ...ar-Dev-SX-Props-light-colorblind-linux.png | Bin 0 -> 4252 bytes ...Dev-SX-Props-light-high-contrast-linux.png | Bin 0 -> 4266 bytes .../ProgressBar-Dev-SX-Props-light-linux.png | Bin 0 -> 4256 bytes ...ar-Dev-SX-Props-light-tritanopia-linux.png | Bin 0 -> 4252 bytes e2e/components/ProgressBar.test.ts | 293 +++++------------- .../ProgressBar/ProgressBar.dev.stories.tsx | 20 ++ .../src/ProgressBar/ProgressBar.module.css | 50 +++ .../react/src/ProgressBar/ProgressBar.tsx | 108 +++++-- 14 files changed, 225 insertions(+), 251 deletions(-) create mode 100644 .changeset/small-foxes-tan.md 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 create mode 100644 packages/react/src/ProgressBar/ProgressBar.dev.stories.tsx create mode 100644 packages/react/src/ProgressBar/ProgressBar.module.css 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 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 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..4d3afa7d319 --- /dev/null +++ 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 = () => ( + +) diff --git a/packages/react/src/ProgressBar/ProgressBar.module.css b/packages/react/src/ProgressBar/ProgressBar.module.css new file mode 100644 index 00000000000..e9f3badcd38 --- /dev/null +++ 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; + } +} diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx index 1a49d5a828a..69c048bcc09 100644 --- a/packages/react/src/ProgressBar/ProgressBar.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.tsx @@ -5,8 +5,13 @@ 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' +import classes from './ProgressBar.module.css' +import {useFeatureFlag} from '../FeatureFlags' type ProgressProp = { + className?: string progress?: string | number bg?: string } @@ -16,22 +21,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', @@ -46,22 +57,37 @@ 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} & 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 @@ -74,13 +100,25 @@ export const Item = forwardRef( 'aria-valuetext': ariaValueText, } + 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 ( ) @@ -89,7 +127,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( @@ -103,6 +144,7 @@ export const ProgressBar = forwardRef( 'aria-label': ariaLabel, 'aria-valuenow': ariaValueNow, 'aria-valuetext': ariaValueText, + className, ...rest }: ProgressBarProps, forwardRef, @@ -114,9 +156,19 @@ 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 ? ( children ) : (