Skip to content

Add paging to the icon picker#1819

Merged
kmcginnes merged 3 commits into
mainfrom
add-iconpicker-paging
Jun 12, 2026
Merged

Add paging to the icon picker#1819
kmcginnes merged 3 commits into
mainfrom
add-iconpicker-paging

Conversation

@kmcginnes

Copy link
Copy Markdown
Collaborator

Description

The icon picker (added in #1777) capped the grid at 64 icons and told users to "type to search" — there was no way to browse the rest of the Lucide library. This adds paging so every icon is reachable.

  • Paging — the grid now pages through the full filtered/unfiltered list, 64 icons per page, with a minimal footer (Page X of Y + prev/next chevrons) modeled on the query results list footer. filterIcons returns the full match list instead of stopping at a hard cap.
  • Page persistence — page position is component-local state, so the picker reopens on the same page while the Node Style dialog stays open; it resets on search and when the dialog reopens (the picker unmounts).
  • Tooltips — each icon now uses the Button tooltip prop instead of the native title, giving a styled tooltip and an aria-label accessible name.

Suggested reading order: IconPicker.tsx (component + new PagerFooter), then IconPicker.test.tsx.

Validation

  • pnpm checks passes (lint, format, types)
  • pnpm test passes (1787 tests; IconPicker.tsx at 100% line coverage)
  • Manual: open the Node Styling panel for a vertex type, click Browse, page through with the chevrons, type to filter (resets to page 1), select an icon on a later page and reopen to confirm it returns to that page.

The vitest.config.ts change is the repo's automatic coverage-threshold ratchet, not a hand edit.

Related Issues

Check List

  • I confirm that my contribution is made under the terms of the Apache 2.0 license.
  • I have verified pnpm checks passes with no errors.
  • I have verified pnpm test passes with no failures.
  • I have covered new added functionality with unit tests if necessary.
  • I have updated documentation if necessary.

Replace the icon picker's hard 64-icon cap and "type to search" hint
with paging through the full icon list. Adds a minimal footer (Page X of
Y plus prev/next chevrons) modeled on the query results list, 64 icons
per page. Page position persists while the style dialog stays open and
resets on search or when the dialog reopens.
Replace the native title attribute on each icon button with the Button
tooltip prop, giving a styled tooltip and an aria-label accessible name.
Tests identify icon buttons by aria-pressed and read names from
aria-label, and wrap renders in TooltipProvider as the app does.
The autoUpdate ratchet bumped the function threshold to 60 from a local
coverage measurement, but CI measures 58.47% functions and fails. Revert
the function floor to 58 (its pre-paging value); statements, branches,
and lines stay at the ratcheted values, which CI still meets.
@kmcginnes kmcginnes marked this pull request as ready for review June 11, 2026 23:01
@kmcginnes kmcginnes merged commit 7e4db80 into main Jun 12, 2026
6 checks passed
@kmcginnes kmcginnes deleted the add-iconpicker-paging branch June 12, 2026 15:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants