chore(SplitButton): 🤖 Migrate component to CSS Modules

[punkbit]

Why?

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

⚠️ Depends on #990 (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-css-module-split-button-migration.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: 6ef0b7c

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

[github-actions]

Claude finished @punkbit's task in 1m 48s —— View job

---

PR Review — SplitButton CSS Modules Migration (Re-review)

• Read conventions/guidelines
• Read changed files and verify fixes
• Analyze for remaining bugs, a11y, and conventions
• Post review findings

---

All three issues flagged in the previous review have been addressed. Nice follow-through! 🙌

Previous findings — verification:

• ✅ overflow: hidden → clip-path (SplitButton.module.css line 8): Fixed correctly. clip-path: inset(0 round var(--click-button-radii-all)) is now used with an explanatory comment. This preserves focus outlines in most browser implementations.

• ✅ Explicit disabled on dropdown button (SplitButton.tsx lines 126–132): The inner <button> now has disabled={disabled}, aria-disabled={disabled || undefined}, and data-disabled set directly — no longer relying solely on Radix propagation.

• ✅ Dynamic aria-label on group wrapper (SplitButton.tsx line 102): Now uses typeof children === 'string' ? children : 'Split button', which is a meaningful improvement.

• ✅ Unit tests: SplitButton.test.tsx is co-located and uses renderCUI() per conventions.

---

💡 One minor note (non-blocking):

The outline: 2px solid ...; outline-offset: 2px on inner buttons (e.g. SplitButton.module.css lines 90–92, 116–118) still technically extends 2px beyond the clip-path boundary since the buttons are flush with the wrapper edges. In Chromium, clip-path on a parent does clip descendant outlines. If focus ring visibility becomes an issue in testing, the fallback is to switch to box-shadow: inset 0 0 0 2px var(--color) on the inner buttons. The visual regression snapshots updating cleanly suggests this is acceptable in practice.

---

✅ All must-fix and a11y items from the previous review are resolved. This looks good to merge once the dependency PR (#990) lands.

[github-actions]

Claude finished @punkbit's task in 1m 44s —— View job

---

PR Review — SplitButton CSS Modules Migration

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

---

Overall this is a solid migration — well-structured CSS, good BEM naming, proper token usage, and forwardRef is now in place. One Must Fix has persisted across reviews.

---

🚨 Must Fix

• SplitButton.module.css line 3 — overflow: hidden was reverted in commit a3ef5dbd from the previous clip-path fix, re-introducing the focus outline clipping bug. Inner buttons have outline: 2px solid …; outline-offset: 2px (lines 89–91, 115–117, 143–144, 165–167) which extends beyond the flush wrapper boundary, and Chromium clips those outlines. The correct fix was already in the codebase — clip-path: inset(0 round var(--click-button-radii-all)) — and was removed without a documented reason. Please restore it or switch the inner focus ring to box-shadow: inset 0 0 0 2px … (which doesn't overflow). Note: without this fix, the only visible keyboard focus indicator is the wrapper border-color change, which may not pass WCAG 2.4.11 on its own. Fix this →

---

💡 Suggestions (non-blocking)

• SplitButton.stories.tsx:107 — onClick: () => console.log('clicked') should use fn() from @storybook/test so interactions show up in the Actions panel.

• MenuContentItem (type 'group') — <Dropdown.Group> renders without an aria-label (SplitButton.tsx:194). Screen readers won't announce any group context. Pre-existing, but straightforward to address with a label prop on the MenuGroup type.

---

[workflow-authentication-public]

📚 Storybook Preview Deployed

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

Built from commit: 9d8daba36b6b362bcf9b83ba31a56e8baffa19cb

[punkbit]

• SplitButton.module.css line 3 — overflow: hidden was reverted back from clip-path in commit a3ef5dbd, re-introducing the focus outline clipping bug. The inner buttons have outline: 2px solid …; outline-offset: 2px (e.g. lines 89–91, 115–117, 143–144, 165–167), but because they sit flush with the wrapper edge and the wrapper uses overflow: hidden, Chromium will clip those outlines. The previous review confirmed the fix (clip-path: inset(0 round var(--click-button-radii-all))) was correct — reverting it without a documented reason or alternative means keyboard focus rings are broken again. Either restore clip-path, switch the inner focus ring to box-shadow: inset 0 0 0 2px … (no overflow needed), or add a comment explaining why the revert was intentional

This will be fixed in a separate PR. Do ignore!