chore(Avatar): migrate to CSS Modules with visual regression baseline#1051
Conversation
🦋 Changeset detectedLatest commit: 344cddf 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 |
There was a problem hiding this comment.
Pull request overview
This PR migrates the Avatar component from styled-components to CSS Modules while adding visual regression coverage and a patch changeset for the styling refactor.
Changes:
- Replaces Avatar styled-components with
Avatar.module.cssandcva/cnclass composition. - Adds Storybook Avatar variants and Playwright visual regression tests for fallback text sizes, themes, and hover states.
- Adds a patch changeset documenting the migration.
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 |
|---|---|
src/components/Avatar/Avatar.tsx |
Uses CSS Module classes for Radix Avatar root, image, and fallback. |
src/components/Avatar/Avatar.module.css |
Defines Avatar root, image, fallback, size, hover, and active styles with CSS variables. |
src/components/Avatar/Avatar.stories.tsx |
Adds harnessed Avatar stories for visual regression scenarios. |
tests/display/avatar.spec.ts |
Adds Playwright snapshot tests for fallback variants across light/dark themes. |
.changeset/migrate-avatar-to-css-modules.md |
Records a patch release note for the Avatar CSS Modules migration. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| describe('Text Fallback Variants', () => { | ||
| it('sm text fallback matches snapshot', async ({ page }) => { |
There was a problem hiding this comment.
Good catch — added a WithImage story (deterministic inline SVG src) plus light/dark snapshots in 344cddf so the image element's width/height, border-radius, and object-fit styling is covered by the baseline.
Storybook Preview Deployed✅ Preview URL: https://click-1rgl3ihp0-clickhouse.vercel.app Built from commit: |
Commits
test(Avatar): add visual regression baseline before CSS Modules migration— adds stories, Playwright spec, and fresh PNG snapshots that capture the current rendering.chore(Avatar): 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/avatar.spec.tspasses with zero snapshot regenerationsyarn test Avatar,yarn lint:css,yarn lint:code,yarn buildall greengrep -r 'styled-components' src/components/Avatar/emptyCloses CUI-8
Note
Low Risk
Display-only styling refactor with visual regression tests; no auth, data, or API surface changes beyond optional className on Avatar.
Overview
Avatar styling moves off styled-components onto
Avatar.module.css, using the same click CSS variables for size, colors, radii, and label typography. The component wires Radix primitives withcn/cvaforsm/mdfallback text, supports an optionalclassNameon the root, and keeps the existing initials logic unchanged.Storybook gains an
avatar-harnesswrapper and stories for text sizes, edge-case labels, default size, and a stable inline SVG image source. A new Playwright suite snapshots light and dark themes plus hover for those variants. The changeset records a patch with no intended behavior change.Reviewed by Cursor Bugbot for commit 344cddf. Bugbot is set up for automated code reviews on this repo. Configure here.