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

[DreaminDani]

Commits

• test(Toast): add visual regression baseline before CSS Modules migration — adds stories that auto-open each toast variant (default/success/warning/danger, title-only, with-actions) across light and dark themes, a Playwright spec, and fresh PNG snapshots that capture the current styled-components rendering.
• chore(Toast): migrate styling from styled-components to CSS Modules — replaces styled-components with Toast.module.css + cva/cn. DOM-identical, byte-for-byte visual parity verified.

Notes

• The Toast renders through a Radix Toast portal, so the baseline stories fire createToast on mount inside a ToastProvider decorator (with animations disabled for a stable frame) to make the portaled toast deterministically screenshot-able.

Verification

• yarn test:visual tests/display/toast.spec.ts passes with zero snapshot regenerations
• yarn lint:css, yarn lint:code, yarn format, yarn build all green (Toast has no unit test file)
• grep -r 'styled-components' src/components/Toast/ empty

---

Note

Low Risk
Presentation-layer refactor with explicit visual regression tests; no auth, data, or API changes.

Overview
Toast styling moves from styled-components to Toast.module.css, wired through cn/cva on Radix primitives (root, viewport, icon type variants, alignment). Public API and behavior are unchanged; a patch changeset notes no functional change.

Storybook gains deterministic showcase stories (AutoToast on mount, long duration, ToastProvider decorator, animations disabled) for each variant (default/success/warning/danger, title-only, with-actions). Playwright visual regression covers light/dark snapshots plus close and action-button behavior, targeting the portaled li[role="status"][data-state="open"] toast.

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 9013187

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

This PR adds a visual-regression baseline for the Toast component and migrates Toast styling from styled-components to CSS Modules while aiming to preserve DOM structure and pixel-perfect rendering.

Changes:

• Added Playwright visual-regression coverage for Toast variants in light + dark themes with snapshots.
• Migrated Toast styling from styled-components to Toast.module.css using cva/cn.
• Added Storybook “auto-open” showcase stories to deterministically render portaled toasts for screenshotting, plus a changeset entry.

Reviewed changes

Copilot reviewed 5 out of 17 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tests/display/toast.spec.ts	Adds Toast visual-regression and basic interaction checks (close + action buttons).
src/components/Toast/Toast.tsx	Replaces styled-components with CSS Modules + cva for variants; updates Root/Viewport class wiring.
src/components/Toast/Toast.stories.tsx	Adds auto-opening stories + ToastProvider decorator to stabilize portaled toast snapshots.
src/components/Toast/Toast.module.css	New CSS Modules stylesheet reproducing previous Toast visuals/animations and viewport positioning.
.changeset/migrate-toast-to-css-modules.md	Adds a patch changeset describing the migration.

---

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

[workflow-authentication-public]

Storybook Preview Deployed

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

Built from commit: e190c08861837eedacc4eedd30fa191d44ea26f5