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

[DreaminDani]

Summary

Migrates IconButton from styled-components to CSS Modules (cva + cn), following the procedure established by ButtonGroup (PR #1034) and codified in the component-css-modules-migration skill.

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 adds tests/buttons/iconbutton.spec.ts. Snapshots are generated against the existing styled-components rendering.
• chore(IconButton): migrate styling from styled-components to CSS Modules — adds IconButton.module.css, rewrites IconButton.tsx with cva + cn, and re-asserts the baseline snapshots byte-for-byte with zero regenerations. DOM attributes (role="button", aria-label={iconName}, disabled) and forwardRef / displayName are 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.css file. The repo's stylelint custom-property-pattern rule (inherited from stylelint-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 of IconButton.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

---

Note

Low Risk
Pure styling refactor in a UI package with snapshot tests; public props and a11y attributes are unchanged aside from optional className merging.

Overview
IconButton styling moves from styled-components to CSS Modules, using the same cva / cn pattern as Button and ButtonGroup. A new IconButton.module.css maps type, size, hover/focus/active, visited, and disabled states to existing --click-button-iconButton-* tokens; a file-level stylelint disable covers camelCase token names.

The component now renders a plain <button> with merged className support instead of a styled wrapper. Storybook gains named stories per type/size/disabled variant, and tests/buttons/iconbutton.spec.ts adds light/dark screenshot coverage plus basic a11y checks. A changeset records a patch with no intended behavior change.

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

[changeset-bot]

🦋 Changeset detected

Latest commit: bb6216d

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

[workflow-authentication-public]

Storybook Preview Deployed

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

Built from commit: 471b1e841fb512783a0a99ae865a6068715bd41b