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

[DreaminDani]

Commits

• test(Accordion): add visual regression baseline before CSS Modules migration — adds stories (size, color, with-icon, fill-width, open variants), a Playwright spec, and fresh PNG snapshots that capture the current styled-components rendering.
• chore(Accordion): migrate styling from styled-components to CSS Modules — replaces styled-components with Accordion.module.css + cva/cn. DOM-identical, byte-for-byte visual parity verified. SidebarAccordion is preserved as a thin wrapper that applies the sidebar modifier class.

Verification

• yarn test:visual tests/display/accordion.spec.ts passes with zero snapshot regenerations (20 tests)
• yarn test Accordion, yarn lint:css, yarn lint:code, yarn format, yarn build all green
• grep -r 'styled-components' src/components/Accordion/ empty

Note

This branch is temporarily based on the unmerged vitest nested-worktree fix (fix(test): let vitest resolve deps from nested git worktrees) so the yarn test gate can run in a nested worktree. That commit will drop out on rebase once the tooling fix lands on main.

---

Note

Low Risk
Styling-only refactor with explicit visual regression tests; public props stay the same aside from optional className and a simplified export surface.

Overview
Accordion styling moves from styled-components to Accordion.module.css, with cva/cn driving size, color, and fillWidth on the trigger and root. Design tokens are wired through CSS variables so look-and-feel should match the previous theme-based rules.

SidebarAccordion is now a thin wrapper that adds the accordion_sidebar modifier (chevron visibility and sidebar gap) instead of a nested styled(Accordion) block; the extra AccordionToExport styled export is removed. The root accepts optional className, and color defaults to default when omitted.

Storybook gains a fixed-width harness, variant stories (sizes, link color, icon, fill width, open), and a new Playwright suite for light/dark snapshots, hover/focus, and keyboard/a11y checks. A patch changeset records the migration with no intended behavior change.

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 1aaba98

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 Accordion component’s styling from styled-components to CSS Modules while adding Storybook + Playwright visual-regression coverage to ensure visual parity. It also adjusts the Vitest/Vite server filesystem settings to support running tests from nested git worktrees.

Changes:

• Add Storybook stories + Playwright visual-regression spec and baseline screenshots for Accordion variants and interactive states.
• Replace styled-components styling with Accordion.module.css and cva/cn, keeping DOM structure consistent.
• Relax Vite/Vitest filesystem strictness to support nested worktree test runs, and add a patch changeset.

Reviewed changes

Copilot reviewed 6 out of 24 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
vite.config.ts	Relaxes Vite server FS strictness for Vitest runs in nested worktrees.
tests/display/accordion.spec.ts	Adds Playwright visual-regression coverage for Accordion variants + interactions.
src/components/Accordion/Accordion.tsx	Migrates Accordion styling to CSS Modules and introduces className support via cn.
src/components/Accordion/Accordion.stories.tsx	Adds a visual harness decorator and variant stories used by snapshots.
src/components/Accordion/Accordion.module.css	New CSS Module implementing former styled-components rules + sidebar overrides.
.changeset/migrate-accordion-to-css-modules.md	Records the migration as a patch release note.

---

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

[workflow-authentication-public]

Storybook Preview Deployed

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

Built from commit: 55384b45b0e1f337baa05ca706b67abab449dfb9