fix(tabs): stabilize drag scrolling

[mattrothenberg]

Summary

• Replace the overflowing segmented Tabs drag handler with pointer-threshold logic that preserves normal tab clicks.
• Add grab/grabbing cursors when segmented tabs overflow.
• Remove the now-unused @use-gesture/react dependency from @cloudflare/kumo.

Testing

• pnpm --filter @cloudflare/kumo lint

• pnpm --filter @cloudflare/kumo typecheck

• Reviews

• bonk has reviewed the change

• automated review not possible because: interaction timing needs human verification in browser

• Tests

• Tests included/updated

• Automated tests not possible - manual testing has been completed as follows: verified drag-to-scroll and tab click interactions locally during implementation

• Additional testing not necessary because: lint and typecheck cover the code change and browser interaction was manually verified

[mattrothenberg]

/bonk

[ask-bonk]

PR #508: fix(tabs): stabilize drag scrolling

Summary of changes:

• Core fix: Replaced the @use-gesture/react drag handler in segmented Tabs with custom pointer-threshold logic that distinguishes between drag-to-scroll and normal tab clicks (prevents accidental drags when clicking)
• UX enhancement: Added grab/grabbing cursors when segmented tabs overflow to indicate draggable behavior
• Dependency cleanup: Removed the now-unused @use-gesture/react dependency from @cloudflare/kumo (also cleaned up from lockfile)

Files changed (4):

• .changeset/tabs-drag-scroll.md – Changeset for patch release
• packages/kumo/src/components/tabs/tabs.tsx – Main implementation (+82/-14)
• packages/kumo/package.json – Dependency removal
• pnpm-lock.yaml – Lockfile update

Status: Open, 1 commit by mattrothenberg, ready for review

github run

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@508

commit: 9a8d530

[mattrothenberg]

/bonk does this seem sensible? approve?

[github-actions]

Docs Preview

View docs preview

Commit: cd66734

[ask-bonk]

Based on my review of PR #508, here's my assessment:

Review: ✅ Approve

What's Changed

The PR replaces @use-gesture/react with a custom useHorizontalDragScroll hook for the segmented Tabs component when overflowing.

Why This Makes Sense

1. Simpler & More Focused

• Removes an external dependency (~18 lines from lockfile)
• Custom implementation is ~90 lines with clear, focused logic
• No unnecessary abstractions for a straightforward use case

2. Better UX

• 3px threshold nicely distinguishes clicks from drags
• Touch-friendly: Allows vertical scrolling on touch devices when Y-movement exceeds X
• Visual feedback: cursor-grab / active:cursor-grabbing indicates draggable state
• Click preservation: Properly suppresses click events only after dragging occurs

3. Implementation Quality

• Uses pointer capture (setPointerCapture/releasePointerCapture) for reliable drag tracking even when pointer leaves the element
• Capture-phase event handlers for more reliable interception
• ResizeObserver for dynamic overflow detection
• Proper cleanup on unmount

4. Conventions Followed

• ✅ Uses cn() utility consistently
• ✅ Semantic tokens only (bg-kumo-recessed, ring-kumo-hairline/70)
• ✅ No dark: prefixes (tokens auto-adapt)
• ✅ Maintains KUMO_TABS_STYLING export for Figma generator
• ✅ Changeset included

Figma Generator Impact

The Figma generator test (tabs.test.ts) only validates registry structure (container/tab/indicator styling metadata), which is unchanged. The drag behavior is runtime-only and doesn't affect the Figma output.

Minor Nit (Non-blocking)

The useHorizontalDragScroll hook could be extracted to a shared utility if similar drag-scrolling is needed elsewhere, but keeping it co-located with Tabs is fine for now.

---

Verdict: Clean, focused fix that reduces dependencies while improving user experience. Ready to merge.

github run

[github-actions]

Visual Regression Report — 9 changed, 29 unchanged

9 screenshot(s) with visual changes:

Button / Variant: Outline

155 px (0.15%) changed

Before	After	Diff

Button / Loading State

5 px (0%) changed

Before	After	Diff

Select / Select Without Label

105 px (0.1%) changed

Before	After	Diff

Select / Select With Field

635 px (0.54%) changed

Before	After	Diff

Select / Select Custom Rendering

575 px (0.57%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Disabled Options

508 px (0.5%) changed

Before	After	Diff

Select / Select Grouped With Disabled

757 px (0.75%) changed

Before	After	Diff

Select (Open)

1,942 px (0.01%) changed

Before	After	Diff

29 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Button / Title
• Button / Link as Button
• Dialog / Dialog With Actions
• Dialog / Dialog Basic
• Dialog / Dialog Alert
• Dialog / Dialog Confirmation
• Dialog / Dialog With Select
• Dialog / Dialog With Combobox
• Dialog / Dialog With Dropdown
• Dialog (Open)
• Select / Select Basic
• Select / Select Sizes
• Select / Select Placeholder
• Select / Select With Tooltip
• Select / Select Multiple
• Select / Select Complex
• Select / Select Disabled Items
• Select / Select Grouped
• Select / Select Long List

---

Generated by Kumo Visual Regression

[mattrothenberg]

/bonk approve please

[ask-bonk]

✅ Approved PR #508 — "fix(tabs): stabilize drag scrolling"

The changes look good:

• Custom drag-to-scroll hook replaces @use-gesture/react dependency
• Clean implementation with proper pointer capture and threshold logic
• Good UX with grab/grabbing cursors for overflow state
• Changeset included for patch release

github run