chore(MultiAccordion): migrate to CSS Modules with visual regression baseline#1085
Open
DreaminDani wants to merge 3 commits into
Open
chore(MultiAccordion): migrate to CSS Modules with visual regression baseline#1085DreaminDani wants to merge 3 commits into
DreaminDani wants to merge 3 commits into
Conversation
…es migration Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…Modules Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: c15dc70 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates MultiAccordion styling from styled-components to CSS Modules while adding Storybook + Playwright visual-regression coverage to preserve rendering parity across variants and themes.
Changes:
- Added a dedicated Playwright visual-regression spec for MultiAccordion snapshots (variants + interactive states + basic keyboard/a11y checks).
- Migrated
MultiAccordionstyles toMultiAccordion.module.cssand wired class composition viacva/cn. - Expanded Storybook stories and added a fixed-width harness to stabilize visual snapshots.
Reviewed changes
Copilot reviewed 5 out of 27 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/display/multi-accordion.spec.ts | Adds Playwright visual-regression coverage for MultiAccordion variants/themes and interactive states. |
| src/components/MultiAccordion/MultiAccordion.tsx | Replaces styled-components wrappers with Radix primitives + CSS Modules classes via cva/cn. |
| src/components/MultiAccordion/MultiAccordion.stories.tsx | Adds harness decorator and variant stories used by visual regression. |
| src/components/MultiAccordion/MultiAccordion.module.css | Introduces CSS Module styles equivalent to previous styled-components rules. |
| .changeset/migrate-multi-accordion-to-css-modules.md | Records a patch changeset for the styling migration. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Addresses PR review feedback: apply the empty base BEM class on the status Icon so the base selector stays referenced. No visual change. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
Storybook Preview Deployed✅ Preview URL: https://click-iw3wm3qph-clickhouse.vercel.app Built from commit: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Commits
test(MultiAccordion): add visual regression baseline before CSS Modules migration— adds stories, Playwright spec, and fresh PNG snapshots that capture the current rendering.chore(MultiAccordion): migrate styling from styled-components to CSS Modules— replaces styled-components with.module.css+cva/cn. DOM-identical, byte-for-byte visual parity verified.Verification
yarn test:visual tests/display/multi-accordion.spec.tspasses with zero snapshot regenerationsyarn test MultiAccordion,yarn lint:css,yarn lint:code,yarn format,yarn buildall greengrep -r 'styled-components' src/components/MultiAccordion/emptyNote
Low Risk
Presentation-only refactor with visual regression coverage; no API or logic changes beyond optional className passthrough.
Overview
MultiAccordion styling moves from styled-components to
MultiAccordion.module.css, wired throughcva/cnon the Radix root, item, trigger, and content. Public props and behavior stay the same; root and item also accept optionalclassName.Storybook gains a fixed-width harness and variant stories (sizes, link color, icons, checks, borders, open/multiple). A new Playwright spec snapshots those variants in light/dark plus hover/focus and basic keyboard/a11y checks. The changeset records a patch with no intended visual change.
Reviewed by Cursor Bugbot for commit c15dc70. Bugbot is set up for automated code reviews on this repo. Configure here.