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

[DreaminDani]

Commits

• test(Dialog): add visual regression baseline before CSS Modules migration — adds named stories per visual variant (modal, with-description, title-only, only-close, no-header, reduce-padding, chat), a Playwright spec covering light + dark themes plus accessibility assertions, and fresh PNG snapshots that capture the current rendering. Also converts the two styled-components story wrappers (ActionArea, TopNav) to inline-styled divs so the baseline file carries no styled-components.
• chore(Dialog): migrate styling from styled-components to CSS Modules — replaces styled-components with Dialog.module.css + cva/cn. DOM-identical, byte-for-byte visual parity verified.

Verification

• yarn test:visual tests/display/dialog.spec.ts passes with zero snapshot regenerations (migrated CSS Modules vs the styled-components baseline)
• yarn test Dialog, yarn lint:css, yarn lint:code, yarn format, yarn build all green
• grep -r 'styled-components' src/components/Dialog/ empty

---

Note

Low Risk
Styling-only refactor of a UI component with visual regression tests; public props and Radix behavior are intended to stay the same.

Overview
Dialog styling moves from styled-components to Dialog.module.css, using design-token CSS variables and cva/cn for reducePadding and title-bar layout (onlyClose). Radix primitives get module classes directly; Dialog.Trigger and Dialog.Content now accept className for extension without changing behavior.

Storybook adds dedicated stories (title-only, only-close, no header, reduce padding, etc.) and replaces story-only styled wrappers with inline CSS variables. A new Playwright spec (tests/display/dialog.spec.ts) locks light/dark screenshots and basic a11y checks against those stories. Patch changeset documents a no-behavior-change release.

^{Reviewed by Cursor Bugbot for commit e4ce0c9. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

🦋 Changeset detected

Latest commit: e4ce0c9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clickhouse/click-ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Pull request overview

Migrates the Dialog component’s styling from styled-components to a CSS Modules implementation while adding Storybook variants and Playwright visual-regression coverage to lock in visual parity.

Changes:

• Added a new Playwright visual regression spec for Dialog variants across light/dark themes plus basic accessibility assertions.
• Reworked Dialog to use Dialog.module.css with cva/cn, and allowed className composition on trigger/content.
• Expanded Storybook stories to include additional named variants used by the visual tests, and added a patch changeset.

Reviewed changes

Copilot reviewed 5 out of 19 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
tests/display/dialog.spec.ts	Adds visual regression + a11y coverage for Dialog variants in light/dark.
src/components/Dialog/Dialog.tsx	Switches Dialog styling from styled-components to CSS Modules with cva/cn and className composition.
src/components/Dialog/Dialog.stories.tsx	Adds/adjusts stories for visual baselines; removes styled-components wrappers.
src/components/Dialog/Dialog.module.css	New CSS Modules stylesheet implementing prior Dialog styles and animations.
.changeset/migrate-dialog-to-css-modules.md	Records a patch release note for the migration.

Comments suppressed due to low confidence (1)

src/components/Dialog/Dialog.tsx:85

• CloseButton only destructures onClose and does not forward other props to CrossButton. As a result, data-testid="click-dialog-close" passed at the call site is silently dropped (and any future attributes like aria-label/className would be too). Forward remaining props and merge onClick with onClose.

const CloseButton = ({ onClose }: { onClose?: () => void }) => (
  <RadixDialog.Close asChild>
    <CrossButton onClick={onClose}>
      <Icon
        name="cross"
        size="lg"
      />
    </CrossButton>
  </RadixDialog.Close>
);

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[workflow-authentication-public]

Storybook Preview Deployed

✅ Preview URL: https://click-fwc6zx0vu-clickhouse.vercel.app

Built from commit: 9460fc92d8899a2d2b3379b01f47c0b4c538352b