feat(ui): grow the Mosaic Button touch target without growing the button - #9304
Conversation
Under a coarse pointer the button floored at `--cl-target-coarse` via `min-height`, which made every button visibly taller than its `size`. Grow an invisible `::after` overlay instead, so the hit area reaches the target while the rendered box stays put. `overflow: hidden` comes off `base` — the label span carries its own, and the overlay has to escape the box to be hit-testable. Adds `touchTarget` (default `true`) to opt out where neighbors sit close enough that the overlays would overlap. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 1990ce4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types 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 |
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-google-signin
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
API Changes Report
Summary
No API Changes DetectedAll packages have stable APIs with no detected changes. Report generated by Break Check Last ran on |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🔗 Linked repositories identifiedCodeRabbit considers these linked repositories for cross-repo context during reviews:
💤 Files with no reviewable changes (1)
📝 WalkthroughWalkthroughThe Mosaic Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/ui/src/mosaic/components/button/button.test.tsx (1)
33-42: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy liftTest the touch-target behavior, not only generated class atoms.
These assertions compare
classNamelengths and membership. They do not verify that the overlay works under(pointer: coarse), that default buttons expand only on the block axis, or that square and circle buttons expand on both axes. A regression in the media rule ortouchTargetIconcan pass these tests.Add browser-level integration/E2E coverage or a stable compiled-style assertion. Include square and circle cases. The link test should also verify that the default link has no touch-target styling, not only that
touchTarget={false}leaves its class unchanged.As per coding guidelines, React Testing Library tests must test component behavior rather than implementation details, and new functionality must include edge-case coverage.
Also applies to: 44-56
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/mosaic/components/button/button.test.tsx` around lines 33 - 42, Replace the className atom assertions in the Button touch-target tests with behavior-focused coverage of the compiled styles or browser-level behavior under pointer: coarse. Verify default buttons expand only on the block axis, while square and circle variants expand on both axes, and include the touchTargetIcon path. Extend the link tests to assert default links have no touch-target styling as well as preserving the behavior when touchTarget={false}.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@packages/ui/src/mosaic/components/button/button.test.tsx`:
- Around line 33-42: Replace the className atom assertions in the Button
touch-target tests with behavior-focused coverage of the compiled styles or
browser-level behavior under pointer: coarse. Verify default buttons expand only
on the block axis, while square and circle variants expand on both axes, and
include the touchTargetIcon path. Extend the link tests to assert default links
have no touch-target styling as well as preserving the behavior when
touchTarget={false}.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: bef126b1-b8e0-4ce2-83f2-0f00db654ab4
📒 Files selected for processing (6)
.changeset/rare-pumas-repeat.mdpackages/swingset/src/stories/button.mdxpackages/swingset/src/stories/button.stories.tsxpackages/ui/src/mosaic/components/button/button.styles.tspackages/ui/src/mosaic/components/button/button.test.tsxpackages/ui/src/mosaic/components/button/button.tsx
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
clerk/clerk_go(manual)clerk/dashboard(manual)clerk/accounts(manual)clerk/backoffice(manual)clerk/clerk(manual)clerk/clerk-docs(manual)clerk/cloudflare-workers(manual)
2 participants
Description
Under a coarse pointer
Buttonfloored at--cl-target-coarseviamin-height, which made everybutton visibly taller than its
size. It now grows an invisible::afteroverlay instead — the hitarea reaches the target, the rendered box stays put. Default shape grows on the block axis only;
square and circle grow on both.
touchTarget={false}opts out where neighbors sit close enough that the overlays would overlap.variant='link'never takes one.overflow: hiddencomes offbase: the label span carries its own, and the overlay has to escapethe box to be hit-testable.
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change