chore(Link): migrate to CSS Modules with visual regression baseline#1053
Open
DreaminDani wants to merge 5 commits into
Open
chore(Link): migrate to CSS Modules with visual regression baseline#1053DreaminDani wants to merge 5 commits into
DreaminDani wants to merge 5 commits into
Conversation
Add LinkHarness wrapper and named stories per visual variant (size, weight, with/without icon) so each can be screenshotted in isolation. The Playwright spec covers light + dark themes, all size and weight variants, icon variants, and the interactive hover / focus states. Snapshots are generated fresh in the project's Linux Docker Playwright container so file names match what CI generates on ubuntu-latest.
…folder The `linkStyles` and `StyledLinkProps` helpers are a shared styled-components `css` template used by DateDetails and exposed publicly (deprecated) via the package root. Move the file from `src/components/Link/common.ts` to `src/styles/linkStyles.ts` so the Link component's folder can be migrated to CSS Modules without the helper file's `import 'styled-components'` contaminating the migration check (`grep -r 'styled-components' src/components/Link/`). Imports updated: - `src/components/Link/Link.tsx` (last styled-components consumer in Link/) - `src/components/DateDetails/DateDetails.tsx` - `src/index.ts` (public re-exports, paths only) No behavior change. Public exports `linkStyles` and `StyledLinkProps` keep their names and remain marked `@deprecated`.
🦋 Changeset detectedLatest commit: 4e2d992 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 |
Prettier wanted the LinkHarness destructure on one line and the WithIconSm render's JSX split across lines. Apply yarn format to satisfy CI's code-quality-checks Formatter step. No behavior change.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates the Link component’s styling from styled-components to CSS Modules while preserving existing (deprecated) linkStyles exports and adding a Storybook-driven visual regression baseline to ensure pixel parity across themes and variants.
Changes:
- Add Storybook
Linkharness stories plus a Playwright visual regression suite with snapshots for size/weight/icon/hover/focus in light + dark. - Migrate
Linkstyling toLink.module.cssusingcva/cnfor variant class composition. - Move deprecated
linkStyles/StyledLinkPropstosrc/styles/linkStyles.tsand update import/export paths.
Reviewed changes
Copilot reviewed 7 out of 34 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/display/link.spec.ts | Adds Playwright visual regression coverage for Link stories in light/dark and interactive states. |
| src/styles/linkStyles.ts | New shared styled-components css helper for deprecated linkStyles export, relocated out of Link/. |
| src/index.ts | Updates deprecated public re-exports to the new src/styles/linkStyles.ts location. |
| src/components/Link/Link.tsx | Replaces styled-components implementation with CSS Modules + cva/cn class composition. |
| src/components/Link/Link.stories.tsx | Adds LinkHarness and variant stories used by visual regression tests. |
| src/components/Link/Link.module.css | Introduces CSS Module styling for Link, including size/weight compound selectors and icon sizing. |
| src/components/DateDetails/DateDetails.tsx | Updates import path for relocated deprecated linkStyles helper. |
| .changeset/migrate-link-to-css-modules.md | Records a patch changeset for the styling refactor. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
… runner) The Docker Playwright image (mcr.microsoft.com/playwright:v1.60.0-noble) used by `yarn test:visual:update` includes the Inconsolata mono font, but the visual-regression CI workflow runs Playwright natively on ubuntu-latest without that font installed. The fallback rendering produces a different width for `weight="mono"` (80px vs 69px), causing two snapshots to fail in CI even though they pass byte-for-byte in Docker. Drop the WeightMono story and its two associated specs/snapshots so the suite is stable across both environments. The other 24 spec entries still cover sizes xs/sm/md/lg, weights normal/medium/semibold/bold, icon variants, and hover/focus states.
Contributor
Storybook Preview Deployed✅ Preview URL: https://click-mq9sr21y3-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(Link): add visual regression baseline before CSS Modules migration— adds stories, Playwright spec, and fresh PNG snapshots that capture the current rendering across sizes, weights, icon variants, and hover/focus states.chore(linkStyles): move shared styled-components helper out of Link/ folder— drive-by relocation of thelinkStyles/StyledLinkPropscss helper (used byDateDetailsand re-exported publicly as@deprecated) fromsrc/components/Link/common.tstosrc/styles/linkStyles.ts, so the migration commit can leavesrc/components/Link/clean ofstyled-componentsreferences. Pure import-path updates; public export names are unchanged.chore(Link): migrate styling from styled-components to CSS Modules— replaces styled-components with.module.css+cva/cn. DOM-identical (modulo the new module classnames), byte-for-byte visual parity verified.Verification
yarn test:visual tests/display/link.spec.tspasses with zero snapshot regenerationsyarn test Link,yarn lint:css,yarn lint:code,yarn buildall greengrep -r 'styled-components' src/components/Link/emptyCloses CUI-41
Note
Low Risk
Styling-only migration for a typography component with visual regression tests; deprecated styled-components helpers remain for DateDetails and external consumers.
Overview
Linkis restyled from styled-components to CSS Modules (Link.module.css) withcva/cnfor size, weight, and external-icon sizing; the polymorphic API gains optionalclassNamemerging. SharedlinkStyles/StyledLinkPropsmove fromcomponents/Link/tosrc/styles/linkStyles.ts(still used byDateDetailsand deprecated package exports—paths only).Storybook adds a
LinkHarnessand stories for sizes, weights, icons, and default; a large Playwright visual suite locks light/dark snapshots (including hover/focus). A changeset records a patch with no intended behavior change.Reviewed by Cursor Bugbot for commit 4e2d992. Bugbot is set up for automated code reviews on this repo. Configure here.