From 1962621a053efc92a3876ebf429588c37a11280b Mon Sep 17 00:00:00 2001 From: Dani Sandoval Date: Wed, 27 May 2026 11:24:33 -0600 Subject: [PATCH 1/4] test(GenericLabel): add visual regression baseline before CSS Modules migration --- .../GenericLabel/GenericLabel.stories.tsx | 27 ++++ tests/utils/generic-label.spec.ts | 120 ++++++++++++++++++ ...eric-label-default-dark-chromium-linux.png | Bin 0 -> 2191 bytes ...ric-label-default-light-chromium-linux.png | Bin 0 -> 2103 bytes ...ric-label-disabled-dark-chromium-linux.png | Bin 0 -> 2223 bytes ...ic-label-disabled-light-chromium-linux.png | Bin 0 -> 2113 bytes ...eneric-label-focus-dark-chromium-linux.png | Bin 0 -> 2243 bytes ...neric-label-focus-light-chromium-linux.png | Bin 0 -> 2150 bytes ...eneric-label-hover-dark-chromium-linux.png | Bin 0 -> 2189 bytes ...neric-label-hover-light-chromium-linux.png | Bin 0 -> 2101 bytes 10 files changed, 147 insertions(+) create mode 100644 tests/utils/generic-label.spec.ts create mode 100644 tests/utils/generic-label.spec.ts-snapshots/generic-label-default-dark-chromium-linux.png create mode 100644 tests/utils/generic-label.spec.ts-snapshots/generic-label-default-light-chromium-linux.png create mode 100644 tests/utils/generic-label.spec.ts-snapshots/generic-label-disabled-dark-chromium-linux.png create mode 100644 tests/utils/generic-label.spec.ts-snapshots/generic-label-disabled-light-chromium-linux.png create mode 100644 tests/utils/generic-label.spec.ts-snapshots/generic-label-focus-dark-chromium-linux.png create mode 100644 tests/utils/generic-label.spec.ts-snapshots/generic-label-focus-light-chromium-linux.png create mode 100644 tests/utils/generic-label.spec.ts-snapshots/generic-label-hover-dark-chromium-linux.png create mode 100644 tests/utils/generic-label.spec.ts-snapshots/generic-label-hover-light-chromium-linux.png diff --git a/src/components/GenericLabel/GenericLabel.stories.tsx b/src/components/GenericLabel/GenericLabel.stories.tsx index e5dc3917c..1c3a0a3dc 100644 --- a/src/components/GenericLabel/GenericLabel.stories.tsx +++ b/src/components/GenericLabel/GenericLabel.stories.tsx @@ -23,3 +23,30 @@ export const Playground: Story = { ), }; + +export const Default: Story = { + render: () => ( + + Form Field generic label + + + ), +}; + +export const Disabled: Story = { + render: () => ( + + Form Field generic label + + + ), +}; diff --git a/tests/utils/generic-label.spec.ts b/tests/utils/generic-label.spec.ts new file mode 100644 index 000000000..8c445c435 --- /dev/null +++ b/tests/utils/generic-label.spec.ts @@ -0,0 +1,120 @@ +import { test as it, expect } from '@playwright/test'; +import { getStoryUrl } from './index'; + +const { describe, use } = it; + +const labelLocator = 'label'; + +describe('GenericLabel Visual Regression', () => { + describe('Light Theme (Storybook Global)', () => { + describe('States', () => { + it('default matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('forms-genericlabel--default', 'light'), { + waitUntil: 'networkidle', + }); + const label = page.locator(labelLocator).first(); + await expect(label).toBeVisible({ timeout: 10000 }); + await expect(label).toHaveScreenshot('generic-label-default-light.png', { + maxDiffPixels: 100, + }); + }); + + it('disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('forms-genericlabel--disabled', 'light'), { + waitUntil: 'networkidle', + }); + const label = page.locator(labelLocator).first(); + await expect(label).toBeVisible({ timeout: 10000 }); + await expect(label).toHaveScreenshot('generic-label-disabled-light.png', { + maxDiffPixels: 100, + }); + }); + }); + + describe('Interactive States', () => { + it('hover state matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('forms-genericlabel--default', 'light'), { + waitUntil: 'networkidle', + }); + const label = page.locator(labelLocator).first(); + await expect(label).toBeVisible({ timeout: 10000 }); + await label.hover(); + await page.waitForTimeout(100); + await expect(label).toHaveScreenshot('generic-label-hover-light.png', { + maxDiffPixels: 100, + }); + }); + + it('focus-within state matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('forms-genericlabel--default', 'light'), { + waitUntil: 'networkidle', + }); + await page.locator('body').click(); + const label = page.locator(labelLocator).first(); + await expect(label).toBeVisible({ timeout: 10000 }); + await page.locator('#default-input').focus(); + await page.waitForTimeout(100); + await expect(label).toHaveScreenshot('generic-label-focus-light.png', { + maxDiffPixels: 100, + }); + }); + }); + }); + + describe('Dark Theme (System prefers-color-scheme)', () => { + use({ colorScheme: 'dark' }); + + describe('States', () => { + it('default matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('forms-genericlabel--default'), { + waitUntil: 'networkidle', + }); + const label = page.locator(labelLocator).first(); + await expect(label).toBeVisible({ timeout: 10000 }); + await expect(label).toHaveScreenshot('generic-label-default-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('forms-genericlabel--disabled'), { + waitUntil: 'networkidle', + }); + const label = page.locator(labelLocator).first(); + await expect(label).toBeVisible({ timeout: 10000 }); + await expect(label).toHaveScreenshot('generic-label-disabled-dark.png', { + maxDiffPixels: 100, + }); + }); + }); + + describe('Interactive States', () => { + it('hover state matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('forms-genericlabel--default'), { + waitUntil: 'networkidle', + }); + const label = page.locator(labelLocator).first(); + await expect(label).toBeVisible({ timeout: 10000 }); + await label.hover(); + await page.waitForTimeout(100); + await expect(label).toHaveScreenshot('generic-label-hover-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('focus-within state matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('forms-genericlabel--default'), { + waitUntil: 'networkidle', + }); + await page.locator('body').click(); + const label = page.locator(labelLocator).first(); + await expect(label).toBeVisible({ timeout: 10000 }); + await page.locator('#default-input').focus(); + await page.waitForTimeout(100); + await expect(label).toHaveScreenshot('generic-label-focus-dark.png', { + maxDiffPixels: 100, + }); + }); + }); + }); +}); diff --git a/tests/utils/generic-label.spec.ts-snapshots/generic-label-default-dark-chromium-linux.png b/tests/utils/generic-label.spec.ts-snapshots/generic-label-default-dark-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..f1904b7654214d53a552d73d5c2c383882caa275 GIT binary patch literal 2191 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 h00006Nkl}+bsY9002ovPDHLkV1i%T7E}NL literal 0 HcmV?d00001 diff --git a/tests/utils/generic-label.spec.ts-snapshots/generic-label-disabled-dark-chromium-linux.png b/tests/utils/generic-label.spec.ts-snapshots/generic-label-disabled-dark-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..36f426692999c28be17e98c08d6cd327926179ce GIT binary patch literal 2223 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 literal 0 HcmV?d00001 diff --git a/tests/utils/generic-label.spec.ts-snapshots/generic-label-hover-dark-chromium-linux.png b/tests/utils/generic-label.spec.ts-snapshots/generic-label-hover-dark-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..18fdfefb11f88970bee9926f99cf3de9856fec50 GIT binary patch literal 2189 zcmV;82y*v{P)UKv-`;z%sEDnlw2d;wp~ zTueBGELBWu1y>>_2Ryle580v82C6z3DK@nnP@Q-xSw^bxM#ai5K~FgUg5N0d72+~d^C zZSM6NyF70rvDy)|cD#(w&BtGCb1xr%{^{?e)23t87k$3DvBu1Qro~C?{FBVa+v3aT z3$_a%gApZZn}5Pec3(leR#J%^7aouVHnzEqZ{l9lP2@D4k{;*=_xhXo+?W29HMUV5 zv^7y*m)9Hp`c-lF?dI1H9RrOepCNxN4)rCphVH)Y#1f8%dDI_$o_j4-K$)nU!VYB> zxFxW%R@~jrB_I2(x~7(nA(D|f52qwQf(>~e`i9WW$gFcVk^!VAG-uH^cVDl;q!ZYC zPS?G^{pVYNpn8*jcVWuvdMZ+L@u-(7MQp=kfdWD~9Id;#GYDq#-**{6CNk^3_q3=S zq(k$j*2)*v+5-1yDJ1s*3Zw<v z)W&ue&1%wJ)gbJ#^a!bufRhqOCdqUqwPU}cZ+KySxG}b$`okap@wq`v%}#k34i>TT zQ~_DOKWx%6h4pGpd$755camP`rLBm;g15v(meK_gaG{}F3;JwiX|=!uF7WJjbkKk! zRUJ)^+j88VN;R%N!3T%6+|uM7zoZ+)nOtbuJ8Zy`Y+c|wZn~`%S7z#tF}dBPWsma2 zst|ktim|gzvHhkPa+V39lzI?iqz{%t`r8Ww1{`JiGvtrOp}vH%BcaP?hVaum0srHk zxr|vs1@UgCb*c~nkEPZ zsN`dbJJcUzQ59F{)>4(LUn#kyOkK&PK?GN5*5CU@~u3SCZ3ayFI8*x(T^N z=w{kA{CMuo&m0)wlADc9%a<}Gk?O~l$T|lvMRA|w5BIYu9yG4RDhFbHSQHV+QH#fI z<)D#9`l6T~@6#KYjmee?MQE0-zeoBoB`7U79OFytIZhY?$ANlU{pU;BOzFVX(S*o1 z*9Dg-0u)6N6g@-!XdK#^2IX~TX&syaf>92by|_}T#QJ&_#b)E+pun!zZ<`{Q%W+`n zCOp0HokG-#nu6IMj^*tH3APe!g|HjdiXH`>-=k{+gppDQV>^4D9^=ARGPa{055wsI zsHkZ>VGP%ADl%P5`-Y#=1YpjdcwBuyrRB+nUrU(__k3}gzL(lRG|ra_@4!H-h8D-9 zdrcb~3d#TW{+`docad)wy7pYxefiab6X(*YOnf<4Mon(l%}#SJ;*Ua2jT3Y*u~pFs zF_`<))#Md+5-Pyv~)rG3pW?rw4b zGxRq)Nhq$zk#ezg+5gCr?1~83&!$#arB{{%3UR;8w+L`$fKv^}5KO1XZnV=Qi8cL4 zl(<%TQWo|Bcaoote+X$H$HxX=_#$4_DxQC=tuEYsJiujbpwaTfyO#vH2}&* znC}z65HVQdRr<6`f2+@Op>`Ay1ff!WtLRay zetG*Z|9XGO-lAE~{O;yj+flyoG{l$!?s*Tol;IJ*#c4v)o=CO01((P>Xg6gE_~w1R z@tR#5S&odY2e^hniCHO(&UhuqHW7o#ItaUvCpSJ{VwMY|vvZF_+6c2Q_M04rUQli> z?MxHLRb5bCS^{GUcn?Eo)0RA$XYG}jc~PkwvkvYu<(nq!1l0!)PecN$b4Nn@Xex)0 zHkU!nxYDo+5HIMDiW(tlHw};ZRG5^qwX&1nQ)noSs@lT~FXs0IQmE%VM4{5C6^nWJ zRM)749TpxM00~Dm#u4>mIG8ljMwJ3K41F;$?z0m;K&E?XpZq{9r|7#rWZv%&O~6f3 zO!+2fj`r;?2g&YK(=KeNEzjHyWO;x!1o%S4H3giGF?VR<#(pjuVfr10lY02VlIsp| zIwvfC4OLVnJItzhxz)lj7)d%e*gdg|NqEH+S~vD00v1!K~w_(w(V?1;J>JE P00000NkvXXu0mjfiIF$H literal 0 HcmV?d00001 diff --git a/tests/utils/generic-label.spec.ts-snapshots/generic-label-hover-light-chromium-linux.png b/tests/utils/generic-label.spec.ts-snapshots/generic-label-hover-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..7d9a6e240c8cb8dd8d548b8a92923c8b6b0f0a03 GIT binary patch literal 2101 zcmV-52+H?~P)wFhAi4ID;f60uE2OlQCi zD;y9fSztD4oQvgUsMEp;-DD+hrrB`7T@y&wk&7uWz+t!Qd-1j(xLcPXrPp%qF7Ts#MB#BW z)cONKDDipFWmI)0Aw-YD;C_&^rGc6z<2a{R-cA7B%=O zkh5iSZ6?7$qaN%faHW`y%uzYUV^A(%kA>cQ{zfGebQ7khqq-M_BS4oMoq4gmbOb{V z%hOSlJNqxO+DtQX*Nky|iV9{cY&o;?3LhUEHO+YG{>$J-nGQMyyHC((xFe9cuzM+7 zq*t6R{o_-PNTI^_^1myln{ouV;`SGpy8~Gh?RCXB-Nds|WXwn`Y`yQAzCr$jICPfK zBXsg%W^DJEGaLD` z(BCGM&8~Ptc`!M@o`|@NEVJNP%1SkG725Ay%JR5>VecYZqPLo>mvZ#SO-3wD@LkrNT|h-E*|S5tp@n(EG> z_N~86Z|4CS*$Cl?FhSr(Ksvw9)(E%0RTM(Q7FS}U{hF--NM)qv$O&PHdWjvXIPIb= zt$}}zp_sx6ha-|o@|vyf>;~Q)aVNWU5%F#%T%zum_&7wqq4#UVWLKcNyYpUc-`rSf zJ7!X`#GC6kK2Z;3zwqCrauTcTttKGINWHe>!W(+K*UnJ6!y0F5+#r874jui4tt+9k zSn@Rl0`eeuB>QaxsKr)+-9>!uD3)2SvnLuRgIk+qcbzk#ox;fsiQE<PMd){c*~dV` zM%>h0z_8Jx2TZxik?Pw*Bt>f#vOhtWJeV0AF?)5)W7EPKI9xgnw*@epRU4y^Pj9=8 zb4NM)SnEs(9|vH>>hoZ>MCYQSFtErs{2F;#;a=P8{B$}=r{_h zg=+VFYSfD525Qu)!2Qy)3-bUmO-@=`hY1Bdq>`NF5TZl4OUJm{Kldw5IXzdzK(kt` zHScJmUzcR$rJ>_0`HXN|mltM>*+Yn27j`jjJ1(e(_{&R&P~;RV-F2Ro3l)IqRdApF z2-#0!^*wq|I5?}*IwJP&baim0ekiXY%{`Y|6hx17e;s-gl8F+JzXuXm>xG^1gcITHCE& z7NxLm+CI_P5e2gJ=7Kj`Y|80DiI$kl>5Vga!T(@1U*qp+qFwI1Ry zq6X~lRwiFLDQA;w(M(lZH?a9t_k1do&(o2GP#(tZ)1&?SGh(I8TrM2m1Hy||w$_hJ zr?A0l7!iATiFD~yNN|ZuBL*#eToUf;trB5RC>q3BgN@Q2C1N>ogCH~veZEAg4ipBO zp&s+{ES0$qHb&U8``F6g8X0-)(!1557aCJk_Ug7as0YeO!%p|8~l;xqrfOY&jEIO_hgD z7WBbqzJkKt83GRy7$t*$YDT^a5YfXk9teehJh?dW)BJo{L18fXKL7v#|Nmv Date: Wed, 27 May 2026 11:28:11 -0600 Subject: [PATCH 2/4] chore(GenericLabel): migrate styling from styled-components to CSS Modules --- .../migrate-generic-label-to-css-modules.md | 5 ++ .../GenericLabel/GenericLabel.module.css | 31 +++++++++++ src/components/GenericLabel/GenericLabel.tsx | 53 +++++++------------ 3 files changed, 54 insertions(+), 35 deletions(-) create mode 100644 .changeset/migrate-generic-label-to-css-modules.md create mode 100644 src/components/GenericLabel/GenericLabel.module.css diff --git a/.changeset/migrate-generic-label-to-css-modules.md b/.changeset/migrate-generic-label-to-css-modules.md new file mode 100644 index 000000000..05b33afb2 --- /dev/null +++ b/.changeset/migrate-generic-label-to-css-modules.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': patch +--- + +Migrate GenericLabel from styled-components to css modules with no change in behavior diff --git a/src/components/GenericLabel/GenericLabel.module.css b/src/components/GenericLabel/GenericLabel.module.css new file mode 100644 index 000000000..dbc7c6cee --- /dev/null +++ b/src/components/GenericLabel/GenericLabel.module.css @@ -0,0 +1,31 @@ +/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericLabel) */ + +.generic-label { + color: var(--click-field-color-genericLabel-default); + font: var(--click-field-typography-genericLabel-default); + cursor: pointer; +} + +.generic-label:hover { + color: var(--click-field-color-genericLabel-hover); + font: var(--click-field-typography-genericLabel-hover); +} + +.generic-label:focus, +.generic-label:focus-within { + color: var(--click-field-color-genericLabel-active); + font: var(--click-field-typography-genericLabel-active); +} + +/* stylelint-disable no-descending-specificity -- disabled state intentionally + defined after hover/focus to neutralize them; the original styled-components + emits no hover/focus rules when disabled is true. */ +.generic-label.generic-label_disabled, +.generic-label.generic-label_disabled:hover, +.generic-label.generic-label_disabled:focus, +.generic-label.generic-label_disabled:focus-within { + color: var(--click-field-color-genericLabel-disabled); + font: var(--click-field-typography-genericLabel-disabled); + cursor: not-allowed; +} +/* stylelint-enable no-descending-specificity */ diff --git a/src/components/GenericLabel/GenericLabel.tsx b/src/components/GenericLabel/GenericLabel.tsx index a07481436..8069807f7 100644 --- a/src/components/GenericLabel/GenericLabel.tsx +++ b/src/components/GenericLabel/GenericLabel.tsx @@ -1,42 +1,25 @@ -import { styled } from 'styled-components'; +import { cn, cva } from '@/lib/cva'; import { GenericLabelProps } from './GenericLabel.types'; +import styles from './GenericLabel.module.css'; -interface FormFieldLableProps { - disabled?: boolean; - htmlFor?: string; -} +const genericLabelVariants = cva(styles['generic-label'], { + variants: { + disabled: { + true: styles['generic-label_disabled'], + }, + }, +}); -const FormFieldLabel = styled.label` - ${({ theme, disabled }) => ` - ${ - disabled - ? ` - color: ${theme.click.field.color.genericLabel.disabled}; - font: ${theme.click.field.typography.genericLabel.disabled}; - cursor: not-allowed; - ` - : ` - cursor: pointer; - color: ${theme.click.field.color.genericLabel.default}; - font: ${theme.click.field.typography.genericLabel.default}; - &:hover { - color: ${theme.click.field.color.genericLabel.hover}; - font: ${theme.click.field.typography.genericLabel.hover}; - } - &:focus, &:focus-within { - color: ${theme.click.field.color.genericLabel.active}; - font: ${theme.click.field.typography.genericLabel.active}; - } - ` - }; - `} -`; - -export const GenericLabel = ({ disabled, children, ...props }: GenericLabelProps) => ( - ( + + ); From f682d42d7c78541a1fc2be88413f2a31f67b2c16 Mon Sep 17 00:00:00 2001 From: Dani Sandoval Date: Wed, 27 May 2026 11:42:25 -0600 Subject: [PATCH 3/4] chore(GenericLabel): move spec from tests/utils/ to tests/display/ Address Copilot's standing review feedback on the migration PRs: tests/utils/ is reserved for shared helpers like getStoryUrl; component specs belong in component-family folders. Migration skill updated in PR #1049 to codify this for future migrations. Visual regression remains byte-for-byte: 8/8 snapshots match without regeneration. --- tests/{utils => display}/generic-label.spec.ts | 2 +- .../generic-label-default-dark-chromium-linux.png | Bin .../generic-label-default-light-chromium-linux.png | Bin .../generic-label-disabled-dark-chromium-linux.png | Bin .../generic-label-disabled-light-chromium-linux.png | Bin .../generic-label-focus-dark-chromium-linux.png | Bin .../generic-label-focus-light-chromium-linux.png | Bin .../generic-label-hover-dark-chromium-linux.png | Bin .../generic-label-hover-light-chromium-linux.png | Bin 9 files changed, 1 insertion(+), 1 deletion(-) rename tests/{utils => display}/generic-label.spec.ts (99%) rename tests/{utils => display}/generic-label.spec.ts-snapshots/generic-label-default-dark-chromium-linux.png (100%) rename tests/{utils => display}/generic-label.spec.ts-snapshots/generic-label-default-light-chromium-linux.png (100%) rename tests/{utils => display}/generic-label.spec.ts-snapshots/generic-label-disabled-dark-chromium-linux.png (100%) rename tests/{utils => display}/generic-label.spec.ts-snapshots/generic-label-disabled-light-chromium-linux.png (100%) rename tests/{utils => display}/generic-label.spec.ts-snapshots/generic-label-focus-dark-chromium-linux.png (100%) rename tests/{utils => display}/generic-label.spec.ts-snapshots/generic-label-focus-light-chromium-linux.png (100%) rename tests/{utils => display}/generic-label.spec.ts-snapshots/generic-label-hover-dark-chromium-linux.png (100%) rename tests/{utils => display}/generic-label.spec.ts-snapshots/generic-label-hover-light-chromium-linux.png (100%) diff --git a/tests/utils/generic-label.spec.ts b/tests/display/generic-label.spec.ts similarity index 99% rename from tests/utils/generic-label.spec.ts rename to tests/display/generic-label.spec.ts index 8c445c435..ee951c0e6 100644 --- a/tests/utils/generic-label.spec.ts +++ b/tests/display/generic-label.spec.ts @@ -1,5 +1,5 @@ import { test as it, expect } from '@playwright/test'; -import { getStoryUrl } from './index'; +import { getStoryUrl } from '../utils'; const { describe, use } = it; diff --git a/tests/utils/generic-label.spec.ts-snapshots/generic-label-default-dark-chromium-linux.png b/tests/display/generic-label.spec.ts-snapshots/generic-label-default-dark-chromium-linux.png similarity index 100% rename from tests/utils/generic-label.spec.ts-snapshots/generic-label-default-dark-chromium-linux.png rename to tests/display/generic-label.spec.ts-snapshots/generic-label-default-dark-chromium-linux.png diff --git a/tests/utils/generic-label.spec.ts-snapshots/generic-label-default-light-chromium-linux.png b/tests/display/generic-label.spec.ts-snapshots/generic-label-default-light-chromium-linux.png similarity index 100% rename from tests/utils/generic-label.spec.ts-snapshots/generic-label-default-light-chromium-linux.png rename to tests/display/generic-label.spec.ts-snapshots/generic-label-default-light-chromium-linux.png diff --git a/tests/utils/generic-label.spec.ts-snapshots/generic-label-disabled-dark-chromium-linux.png b/tests/display/generic-label.spec.ts-snapshots/generic-label-disabled-dark-chromium-linux.png similarity index 100% rename from tests/utils/generic-label.spec.ts-snapshots/generic-label-disabled-dark-chromium-linux.png rename to tests/display/generic-label.spec.ts-snapshots/generic-label-disabled-dark-chromium-linux.png diff --git a/tests/utils/generic-label.spec.ts-snapshots/generic-label-disabled-light-chromium-linux.png b/tests/display/generic-label.spec.ts-snapshots/generic-label-disabled-light-chromium-linux.png similarity index 100% rename from tests/utils/generic-label.spec.ts-snapshots/generic-label-disabled-light-chromium-linux.png rename to tests/display/generic-label.spec.ts-snapshots/generic-label-disabled-light-chromium-linux.png diff --git a/tests/utils/generic-label.spec.ts-snapshots/generic-label-focus-dark-chromium-linux.png b/tests/display/generic-label.spec.ts-snapshots/generic-label-focus-dark-chromium-linux.png similarity index 100% rename from tests/utils/generic-label.spec.ts-snapshots/generic-label-focus-dark-chromium-linux.png rename to tests/display/generic-label.spec.ts-snapshots/generic-label-focus-dark-chromium-linux.png diff --git a/tests/utils/generic-label.spec.ts-snapshots/generic-label-focus-light-chromium-linux.png b/tests/display/generic-label.spec.ts-snapshots/generic-label-focus-light-chromium-linux.png similarity index 100% rename from tests/utils/generic-label.spec.ts-snapshots/generic-label-focus-light-chromium-linux.png rename to tests/display/generic-label.spec.ts-snapshots/generic-label-focus-light-chromium-linux.png diff --git a/tests/utils/generic-label.spec.ts-snapshots/generic-label-hover-dark-chromium-linux.png b/tests/display/generic-label.spec.ts-snapshots/generic-label-hover-dark-chromium-linux.png similarity index 100% rename from tests/utils/generic-label.spec.ts-snapshots/generic-label-hover-dark-chromium-linux.png rename to tests/display/generic-label.spec.ts-snapshots/generic-label-hover-dark-chromium-linux.png diff --git a/tests/utils/generic-label.spec.ts-snapshots/generic-label-hover-light-chromium-linux.png b/tests/display/generic-label.spec.ts-snapshots/generic-label-hover-light-chromium-linux.png similarity index 100% rename from tests/utils/generic-label.spec.ts-snapshots/generic-label-hover-light-chromium-linux.png rename to tests/display/generic-label.spec.ts-snapshots/generic-label-hover-light-chromium-linux.png From 15c70fcc314acb453d7b3de7400d3400e312d4de Mon Sep 17 00:00:00 2001 From: Dani Sandoval Date: Wed, 27 May 2026 11:48:14 -0600 Subject: [PATCH 4/4] chore(GenericLabel): disable the input in the Disabled story Address Copilot review feedback on PR #1048: the Disabled story labelled itself "Disabled" but only the GenericLabel had the disabled prop set; the nested input was still interactive. Pass `disabled` to the input too so the story represents a fully-disabled field, matching the story's name. The two disabled-state snapshots are regenerated to reflect the native disabled input rendering (greyed background, no caret). The other six snapshots (default, hover, focus-within in both themes) remain byte-for-byte unchanged. --- .../GenericLabel/GenericLabel.stories.tsx | 1 + ...ric-label-disabled-dark-chromium-linux.png | Bin 2223 -> 2282 bytes ...ic-label-disabled-light-chromium-linux.png | Bin 2113 -> 2180 bytes 3 files changed, 1 insertion(+) diff --git a/src/components/GenericLabel/GenericLabel.stories.tsx b/src/components/GenericLabel/GenericLabel.stories.tsx index 1c3a0a3dc..777ee131a 100644 --- a/src/components/GenericLabel/GenericLabel.stories.tsx +++ b/src/components/GenericLabel/GenericLabel.stories.tsx @@ -46,6 +46,7 @@ export const Disabled: Story = { ), diff --git a/tests/display/generic-label.spec.ts-snapshots/generic-label-disabled-dark-chromium-linux.png b/tests/display/generic-label.spec.ts-snapshots/generic-label-disabled-dark-chromium-linux.png index 36f426692999c28be17e98c08d6cd327926179ce..aa71f29471b4447ce78e7e79beed867aa1fed08d 100644 GIT binary patch delta 2270 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 f00v1!K~w_(r~Si1qsI