[kumo] add pagination Enter key navigation and dropdown page selector by ben-pepito · Pull Request #342 · cloudflare/kumo

ben-pepito · 2026-03-31T16:42:46Z

Summary

Fix Enter key in page number input: The page number <Input> in Pagination.Controls previously only called setPage() on blur. Now pressing Enter also navigates to the typed page, with clamping to [1, maxPage].
Add pageSelector prop: New pageSelector prop on Pagination.Controls ("input" | "dropdown", defaults to "input"). When set to "dropdown", renders a <Select> with all page numbers instead of the text input.
Tests: Added 21 tests covering navigation buttons, Enter key handling, value clamping, dropdown mode (including interaction), simple controls mode, and backward compatibility.

Changes

File	What changed
`packages/kumo/src/components/pagination/pagination.tsx`	Added `onKeyDown` handler for Enter key; added `pageSelector` prop with dropdown rendering; extracted `clamp` utility; documented dropdown performance note in JSDoc
`packages/kumo/src/components/pagination/pagination.test.tsx`	New test file with 21 tests

How to test

// Enter key now works on the page input
<Pagination page={page} setPage={setPage} perPage={10} totalCount={100}>
  <Pagination.Controls />
</Pagination>

// New dropdown mode
<Pagination page={page} setPage={setPage} perPage={10} totalCount={100}>
  <Pagination.Controls pageSelector="dropdown" />
</Pagination>

Backward compatibility

All defaults are unchanged — pageSelector defaults to "input" and controls defaults to "full". Existing usage is unaffected.

Demo of the dropdown page selection

New docs section screenshot

Checklist

bonk has reviewed the change
Tests included/updated

- Fix page number input to call setPage() on Enter key press (previously only triggered on blur), with clamping to [1, maxPage] - Add pageSelector prop to Pagination.Controls ('input' | 'dropdown'), defaulting to 'input' for backward compatibility - When pageSelector='dropdown', render a Select with all page numbers instead of the text input - Add comprehensive test suite (20 tests) covering navigation buttons, Enter key handling, dropdown mode, and backward compatibility

The Select dropdown in the InputGroup had its default rounded corners, breaking visual alignment with the adjacent flat-edged navigation buttons. Add rounded-none to match the InputGroup.Input behavior.

The Select trigger uses ring-kumo-ring (from buttonVariants secondary) while InputGroup.Button uses ring-kumo-line. Override to ring-kumo-line so the dropdown border matches the adjacent navigation buttons.

Keep upstream's restructured docs format and add our dropdown page selector section in the same style.

stritt · 2026-04-01T12:36:59Z

/bonk please review

ask-bonk · 2026-04-01T12:37:24Z

UnknownError: ProviderInitError

github run

ask-bonk · 2026-04-01T12:37:26Z

@stritt Bonk workflow failed. Check the logs for details.

View workflow run · To retry, trigger Bonk again.

pkg-pr-new · 2026-04-01T12:39:05Z

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

commit: fb06a5a

github-actions · 2026-04-01T12:39:54Z

Docs Preview

View docs preview

Commit: fb06a5a

github-actions · 2026-04-01T12:43:26Z

Visual Regression Report

24 screenshot(s) with visual changes:

Button / Variant: Primary

370 px (0.36%) changed

Before	After	Diff

Button / Variant: Ghost

190 px (0.19%) changed

Before	After	Diff

Button / Variant: Destructive

585 px (0.58%) changed

Before	After	Diff

Button / Variant: Outline

152 px (0.15%) changed

Before	After	Diff

Button / Variant: Secondary Destructive

1,119 px (1.1%) changed

Before	After	Diff

Button / Sizes

477 px (0.47%) changed

Before	After	Diff

Button / Icon Only

32 px (0.03%) changed

Before	After	Diff

Button / Loading State

1 px (0%) changed

Before	After	Diff

Button / Title

272 px (0.27%) changed

Before	After	Diff

Dialog / Dialog With Actions

200 px (0.2%) changed

Before	After	Diff

Dialog / Dialog Basic

199 px (0.2%) changed

Before	After	Diff

Dialog / Dialog Alert

354 px (0.35%) changed

Before	After	Diff

Dialog / Dialog Confirmation

352 px (0.35%) changed

Before	After	Diff

Dialog / Dialog With Select

298 px (0.29%) changed

Before	After	Diff

Dialog / Dialog With Combobox

225 px (0.22%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

244 px (0.24%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Basic

300 px (0.3%) changed

Before	After	Diff

Select / Select Without Label

103 px (0.1%) changed

Before	After	Diff

Select / Select With Tooltip

591 px (0.58%) changed

Before	After	Diff

Select / Select Custom Rendering

621 px (0.61%) changed

Before	After	Diff

Select / Select Loading

1,461 px (0.68%) changed

Before	After	Diff

Select / Select Complex

1,373 px (1.16%) changed

Before	After	Diff

Select (Open)

152 px (0%) changed

Before	After	Diff

7 screenshot(s) unchanged

Button / Basic
Button / Variant: Secondary
Button / With Icon
Button / Disabled State
Select / Select With Field
Select / Select Placeholder
Select / Select Multiple

Generated by Kumo Visual Regression

ben-pepito · 2026-04-02T09:51:25Z

/bonk-check

ben-pepito · 2026-04-02T09:51:32Z

/bonk review

ben-pepito · 2026-04-02T10:06:04Z

/bonk

packages/kumo/src/components/pagination/pagination.tsx

mattrothenberg · 2026-04-06T14:51:24Z

/bonk this looks good to me, but what say you?

ask-bonk

Thanks for this PR! The Enter key navigation and dropdown page selector are useful additions. The code is well-structured and the test coverage is comprehensive.

Summary

Changes:

✅ Enter key now triggers page navigation (with clamping)
✅ New pageSelector prop for dropdown mode
✅ 20 comprehensive tests covering all scenarios
✅ clamp utility extracted as suggested
✅ Backward compatibility maintained

Concerns

1. Dropdown performance with large page counts (line 243)

When maxPage is very large (e.g., 10,000+ pages), rendering all options in the dropdown will cause performance issues. Consider:

Adding a threshold above which the input mode is forced
Or documenting this limitation in the prop JSDoc

2. Missing test for dropdown page selection (lines 186-205)

The dropdown tests verify rendering but don't test that selecting a page actually calls setPage. Consider adding:

it('calls setPage when selecting a page from dropdown', async () => {
  const user = userEvent.setup();
  const setPage = vi.fn();
  renderPagination({ pageSelector: 'dropdown', setPage });
  
  const combobox = screen.getByRole('combobox', { name: 'Page number' });
  await user.click(combobox);
  // Select option 5...
});

3. Select width in dropdown mode (line 233-248)

The Select component may need explicit width styling to match the input's 50px width, or the layout may shift. Have you verified this renders consistently?

Minor

The changeset and documentation updates are appreciated. The visual regression failures appear to be unrelated noise (Button, Dialog, Select).

Overall this is a solid PR. Addressing the performance concern and adding the missing interaction test would make it complete.

packages/kumo/src/components/pagination/pagination.tsx

packages/kumo/src/components/pagination/pagination.test.tsx

ask-bonk · 2026-04-06T14:53:17Z

I've submitted a comprehensive review for PR #342. Here's a summary of my findings:

✅ What's Good

Enter key navigation - Clean implementation using the extracted clamp utility
New pageSelector prop - Well-documented with clear JSDoc comments
Test coverage - 20 tests covering navigation, Enter key handling, clamping, dropdown mode, simple controls, and backward compatibility
Backward compatibility - All defaults preserved, no breaking changes
Changeset and docs - Properly updated

⚠️ Concerns Raised

Performance with large page counts - The dropdown renders all pages as options. With 10,000+ pages, this will cause performance issues. Suggested adding a threshold or documenting the limitation.
Missing interaction test - The dropdown tests verify rendering but don't test that selecting a page actually calls setPage. Suggested adding an interaction test.
Select width consistency - The Select component in dropdown mode may need explicit width styling to match the input's 50px width.

Visual Regression

The 6 failing screenshots (Button, Dialog, Select) appear to be unrelated noise/flakes, not caused by this PR's changes.

The review has been posted at: #342 (review)

github run

ben-pepito added 2 commits March 31, 2026 17:36

chore: add changeset for pagination enhancements

9d9ccc9

ben-pepito changed the title ~~feat(pagination): add Enter key navigation and dropdown page selector~~ [kumo] add pagination Enter key navigation and dropdown page selector Mar 31, 2026

ben-pepito marked this pull request as draft March 31, 2026 16:45

ben-pepito added 4 commits March 31, 2026 17:46

docs(pagination): add dropdown page selector demo and docs section

2971d5a

fix(pagination): remove rounded corners on dropdown page selector

e38f1c0

The Select dropdown in the InputGroup had its default rounded corners, breaking visual alignment with the adjacent flat-edged navigation buttons. Add rounded-none to match the InputGroup.Input behavior.

fix(pagination): match dropdown border color to InputGroup buttons

69fe71a

The Select trigger uses ring-kumo-ring (from buttonVariants secondary) while InputGroup.Button uses ring-kumo-line. Override to ring-kumo-line so the dropdown border matches the adjacent navigation buttons.

merge: resolve conflict with upstream main

3b71f46

Keep upstream's restructured docs format and add our dropdown page selector section in the same style.

ben-pepito marked this pull request as ready for review April 1, 2026 09:44

mattrothenberg reviewed Apr 2, 2026

View reviewed changes

packages/kumo/src/components/pagination/pagination.tsx Show resolved Hide resolved

ben-pepito and others added 2 commits April 6, 2026 15:34

refactor(pagination): extract clamp utility for page input handlers

1e86555

Merge branch 'main' into feat/pagination-enter-key-and-dropdown-selector

9b13cb7

mattrothenberg approved these changes Apr 6, 2026

View reviewed changes

ask-bonk bot reviewed Apr 6, 2026

View reviewed changes

packages/kumo/src/components/pagination/pagination.tsx Show resolved Hide resolved

packages/kumo/src/components/pagination/pagination.test.tsx Show resolved Hide resolved

ben-pepito and others added 3 commits April 6, 2026 16:19

address review: add dropdown perf JSDoc + test for dropdown setPage

96f68c3

chore: retrigger CI checks

071d9cc

Merge branch 'main' into feat/pagination-enter-key-and-dropdown-selector

fb06a5a

mattrothenberg merged commit b1e51a8 into cloudflare:main Apr 6, 2026
12 checks passed

Conversation

ben-pepito commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

How to test

Backward compatibility

Demo of the dropdown page selection

New docs section screenshot

Checklist

Uh oh!

stritt commented Apr 1, 2026

Uh oh!

ask-bonk bot commented Apr 1, 2026

Uh oh!

ask-bonk bot commented Apr 1, 2026

Uh oh!

pkg-pr-new bot commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Docs Preview

Uh oh!

github-actions bot commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Visual Regression Report

Button / Variant: Primary

Button / Variant: Ghost

Button / Variant: Destructive

Button / Variant: Outline

Button / Variant: Secondary Destructive

Button / Sizes

Button / Icon Only

Button / Loading State

Button / Title

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 Without Label

Select / Select With Tooltip

Select / Select Custom Rendering

Select / Select Loading

Select / Select Complex

Select (Open)

Uh oh!

ben-pepito commented Apr 2, 2026

Uh oh!

ben-pepito commented Apr 2, 2026

Uh oh!

ben-pepito commented Apr 2, 2026

Uh oh!

Uh oh!

mattrothenberg commented Apr 6, 2026

Uh oh!

ask-bonk bot left a comment

Choose a reason for hiding this comment

Summary

Concerns

1. Dropdown performance with large page counts (line 243)

2. Missing test for dropdown page selection (lines 186-205)

3. Select width in dropdown mode (line 233-248)

Minor

Uh oh!

Uh oh!

Uh oh!

ask-bonk bot commented Apr 6, 2026

✅ What's Good

⚠️ Concerns Raised

Visual Regression

Uh oh!

Uh oh!

Reviewers

Assignees

ben-pepito commented Mar 31, 2026 •

edited

Loading

pkg-pr-new bot commented Apr 1, 2026 •

edited

Loading

github-actions bot commented Apr 1, 2026 •

edited

Loading

github-actions bot commented Apr 1, 2026 •

edited

Loading