chore(CardHorizontal): 🤖 Migrate component to CSS Modules

[punkbit]

Why?

Migrate the component CardHorizontal from Styled-Components to CSS Modules.

⚠️ Depends on #997 (should merge first)

How?

• Migrates Styled Components styles onto CSS Modules
• Use utility CVA for variants
• Use CSS Variables for tokens

Tickets?

N/A

Contribution checklist?

• You've done enough research before writing
• You have reviewed the PR
• The commit messages are detailed
• The build command runs locally
• Assets or static content are linked and stored in the project
• For documentation, guides or references, you've tested the commands

Preview?

demo-card-horizon-css-mod-.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: eba0b26

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

[punkbit]

• CardHorizontal.tsx:70 — window.open without noopener:
  window.open(infoUrl, '_blank') allows the opened tab to access window.opener and redirect the parent page (reverse tabnapping). Pre-existing but worth fixing while the code is being touched

This is addressed in a separate PR #1000. Do ignore!

[punkbit]

• CardHorizontal.module.css:298 — Hardcoded 768px breakpoint: CSS custom properties can't be used in media queries, so this is a known limitation. Worth adding a comment so it doesn't silently drift if the token value ever changes

Design tokens are being replaced by a new system #946, which addresses these. Do ignore!

[punkbit]

• CardHorizontal.tsx:100,174 — Double-firing handleInteraction when inner Button is clicked:
  When infoText is provided, both <Button onClick={handleInteraction}> (line 174) and the root <div onClick={handleInteraction}> (line 100) fire on a single click due to event bubbling. This causes onButtonClick to be invoked twice and window.open to open two tabs when infoUrl is also set. The simplest fix is to call e.stopPropagation() inside handleInteraction when triggered by the <Button>, or remove onClick from the <Button> and let the root div handle all interactions.

This is addressed in PR #998. Do ignore!

[github-actions]

Claude finished @punkbit's task in 2m 18s —— View job

---

PR Review: CardHorizontal → CSS Modules (Round 2)

• Read CLAUDE.md and conventions files
• Read changed files and diff
• Analyze code for bugs, a11y, and conventions
• Post review

---

Nice work completing the final pieces from the previous round. The changeset is now in, JSDoc is solid, and the test coverage has improved significantly.

✅ Resolved from previous review

• .changeset/migrate-cardhorizontal-css-modules.md — added and well-detailed. Changeset blocker is cleared.
• CardHorizontal.types.ts — onButtonClick typed as CardInteractionEvent (MouseEvent | KeyboardEvent union).
• CardHorizontal.types.ts — JSDoc on infoText and isSelectable explaining their coupling.
• CardHorizontal.module.css — stylelint.config.js updated with media-feature-range-notation: null to allow the traditional (max-width: 768px) syntax without lint errors.
• Tests — Space/Enter keyboard tests added, disabled Button test added, aria-pressed coverage.
• card-horizontal__children class added so children have their own styling hook.

🚨 Still pending (deferred per author)

• Double-firing handleInteraction (CardHorizontal.tsx:100,175) — root <div onClick> + <Button onClick> both fire on a single click. Tracked in PR fix(CardHorizontla): 🐛 button event bubbling (double onClick) #998.
• window.open without noopener (CardHorizontal.tsx:72) — deferred to PR fix(CardHorizontal): 🐛 Security URL validation #1000.
• Hardcoded 768px breakpoint (CardHorizontal.module.css:295) — deferred to PR chore(monorepo): 🤖 Design tokens as a package (initial) #946.

💡 Suggestions (non-blocking)

• CardHorizontal.module.css:111-117 — still missing the explanatory comment: The stroke-hover token is applied unconditionally (always-on, not just on :hover) for unselected selectable cards. This is intentional design but still reads like a bug without a comment. Adding /* always show interactive border hint on selectable unselected cards */ above these two rules would save the next maintainer from questioning it.

• CardHorizontal.tsx:100 — onClick fires even when !isSelectable: The root div always has onClick={handleInteraction} regardless of isSelectable. This means clicking a non-selectable card (where isSelectable=false explicitly, not via infoText default) still calls onButtonClick if provided. Likely pre-existing behavior, but worth considering whether onClick should be gated on isSelectable || !!infoText.

This is ready to merge once PR #998 lands (or lands together with this one), since that addresses the double-firing regression introduced by the interaction between the root div and the Button.

[workflow-authentication-public]

📚 Storybook Preview Deployed

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

Built from commit: dc9211f204fadd15959c7c5c5b73da06260077f5