chore(GenericLabel): migrate to CSS Modules with visual regression baseline

.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

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 */

src/components/GenericLabel/GenericLabel.stories.tsx

@@ -23,3 +23,31 @@ export const Playground: Story = {
     </GenericLabel>
   ),
 };
+
+export const Default: Story = {
+  render: () => (
+    <GenericLabel htmlFor="default-input">
+      Form Field generic label
+      <input
+        id="default-input"
+        defaultValue="value"
+      />
+    </GenericLabel>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <GenericLabel
+      htmlFor="disabled-input"
+      disabled
+    >
+      Form Field generic label
+      <input
+        id="disabled-input"
+        defaultValue="value"
+        disabled
+      />
+    </GenericLabel>
+  ),
+};

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<FormFieldLableProps>`
-  ${({ 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) => (
-  <FormFieldLabel
-    disabled={disabled}
+export const GenericLabel = ({
+  disabled,
+  children,
+  className,
+  ...props
+}: GenericLabelProps) => (
+  <label
     {...props}
+    className={cn(genericLabelVariants({ disabled }), className)}
   >
     {children}
-  </FormFieldLabel>
+  </label>
 );

tests/display/generic-label.spec.ts

@@ -0,0 +1,120 @@
+import { test as it, expect } from '@playwright/test';
+import { getStoryUrl } from '../utils';
+
+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,
+        });
+      });
+    });
+  });
+});