chore(IconButton): migrate to CSS Modules with visual regression baseline#1036
Open
DreaminDani wants to merge 2 commits into
Open
chore(IconButton): migrate to CSS Modules with visual regression baseline#1036DreaminDani wants to merge 2 commits into
DreaminDani wants to merge 2 commits into
Conversation
…igration Captures the current styled-components rendering for each type variant (primary, secondary, ghost, danger, info), size variant (default, sm, xs), disabled state, and interactive states (hover, focus, active) under both light and dark themes. These snapshots will be re-asserted byte-for-byte after the CSS Modules migration. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the inline styled.button template with an IconButton.module.css + cva/cn wrapper. The DOM (role, aria-label, disabled) and all visual states are preserved byte-for-byte against the snapshots captured in the baseline commit. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: c97a548 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
Storybook Preview Deployed✅ Preview URL: https://click-gjifahi2w-clickhouse.vercel.app Built from commit: |
This was referenced May 20, 2026
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
1 participant
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.
Summary
Migrates
IconButtonfromstyled-componentsto CSS Modules (cva+cn), following the procedure established by ButtonGroup (PR #1034) and codified in thecomponent-css-modules-migrationskill.Two commits, each green on its own:
test(IconButton): add visual regression baseline before CSS Modules migration— extends the stories with one named story per visual variant (each of the 5 types, both small sizes, disabled) and addstests/buttons/iconbutton.spec.ts. Snapshots are generated against the existing styled-components rendering.chore(IconButton): migrate styling from styled-components to CSS Modules— addsIconButton.module.css, rewritesIconButton.tsxwithcva+cn, and re-asserts the baseline snapshots byte-for-byte with zero regenerations. DOM attributes (role="button",aria-label={iconName},disabled) andforwardRef/displayNameare preserved.The migration is a pure styling refactor — no a11y refinements, no type changes, no consumer updates.
Judgment call to flag
The design tokens for IconButton use camelCase segments (
--click-button-iconButton-*) — this is the first time a CSS Modules migration has had to reference them from a.module.cssfile. The repo's stylelintcustom-property-patternrule (inherited fromstylelint-config-standard) expects pure kebab-case and rejects the existing token names.Rather than relax the stylelint config repo-wide (which would be a drive-by tooling change bundled into this migration), I added a scoped
/* stylelint-disable custom-property-pattern */comment at the top ofIconButton.module.css. If you'd prefer the stylelint rule loosened repo-wide instead — so future migrations of camelCase-token components don't each need the disable — that's a follow-up I'm happy to take separately.Test plan
yarn test:visual tests/buttons/iconbutton.spec.ts— all 25 snapshots pass against the baseline with zero regenerations after the migration commit.yarn test IconButton— unit tests pass unchanged.yarn lint:code src/components/IconButton/— no new errors.yarn lint:css— clean (with the scoped disable noted above).yarn build— succeeds.grep -r 'styled-components' src/components/IconButton/— empty.🤖 Generated with Claude Code