Skip to content

feat: update toolbox search UI - #10551

Open
mikeharv wants to merge 10 commits into
RaspberryPiFoundation:mainfrom
mikeharv:toolbox-search-ui
Open

mikeharv wants to merge 10 commits into
RaspberryPiFoundation:mainfrom
mikeharv:toolbox-search-ui

Conversation

@mikeharv

@mikeharv mikeharv commented Oct 1, 2026 •

Copy link
Copy Markdown
Contributor

The basics

The details

Proposed Changes

This updates the UI of the toolbox-search, primarily by moving the search field into the flyout.

The field is now an IPositionable pinned to the flyout's top edge, with a separator at the head of the flyout contents reserving room for it. It is a focusable node of the flyout's workspace, so focusing it does not leave the toolbox or close the flyout, and it persists when the flyout contents is updated (while typing).

  • Because the category is basically just a ToolboxCategory again, the createDom_, getId() and getFocusableElement() overrides are gone.
  • A separator is created at the top of the flyout sized based on the search field.
  • SearchFieldNode makes the input a focusable node of the flyout's workspace
  • SearchFlyoutNavigator makes the field the get focused when moving in from the toolbox. In a vertical flyout, it makes it so up/down can cycle between the field and blocks.
  • Custom keydown handling is needed for horizontal vs vertical layouts as well for the specific side of the screen where the toolbox appears.
Before After
No query before-2-empty-query after-2-empty-query
repeat before-3-results after-3-results

Reason for Changes

The search field was created in place of the category's label, leading to weird behavior such as not being able to style the category and not being able to select text within the field.

Test Coverage

Five unit tests were added, checking that:

  • the separator is at the top of the flyout contents
  • appropriate text is shown for when there are no matches
  • the field is only visible when the category is selected
  • the category's row carries the same classes as an ordinary category
  • the remembers the query while the flyout is hidden

Documentation

README updated with details about keyboard navigation.

Additional Information

Claude helped with boiler-plate for new files and some of the initial implementation shape. It also wrote the tests. Every line of generated code was carefully reviewed, if not modified or completely re-written by me.

@mikeharv mikeharv changed the title Toolbox search UI feat: update toolbox search UI Oct 1, 2026
@github-actions github-actions Bot added the PR: feature Adds a feature label Oct 1, 2026
@mikeharv
mikeharv marked this pull request as ready for review October 1, 2026 20:53
@mikeharv
mikeharv requested a review from a team as a code owner October 1, 2026 20:53
@mikeharv
mikeharv requested a review from gonfunko October 1, 2026 20:53

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: feature Adds a feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants