feat(docs): add inline search with slash commands to grid pages#3702
feat(docs): add inline search with slash commands to grid pages#3702
Conversation
twjeffery
force-pushed
the
tom/docs-inline-search
branch
from
266a1b9 to
b55dc27
Compare
Spark450
added
the
P3
|
@twjeffery needs a rebase |
twjeffery
force-pushed
the
tom/docs-inline-search
branch
from
b55dc27 to
664aef2
Compare
@chrisolsen Done |
twjeffery
force-pushed
the
tom/docs-inline-search
branch
from
664aef2 to
ab2d88f
Compare
| : filteredCommands.length > 0; | ||
|
|
||
| const effectivePlaceholder = error | ||
| ? "Search unavailable" |
There was a problem hiding this comment.
This doesn't work I don't think. In this screenshot I've blocked requests to search-index to simulate an error:
This just modifies the placeholder of the search input. But they've already typed something the search input, so a placeholder change does nothing because there's already text in the input. Handling it like the modal I think would be preferable:
There was a problem hiding this comment.
I switched it to show an error dropdown below the input, similar to how the modal handles it.
docs/src/components/TokensGrid.tsx
Outdated
| const { sortConfig, setSortConfig, sortByKey, clearSort, handleTableSort } = | ||
| useTwoLevelSort(); | ||
| const isContainerNarrow = useContainerNarrow(gridRef, 840); | ||
| const { search, isLoading, error } = useSearch(); |
There was a problem hiding this comment.
We're coupling this page to useSearch, but it isn't actually used anywhere in this page, the page seems to use a local page search instead.
There was a problem hiding this comment.
Good call, removed it. The tokens page uses its own substring matching so it doesn't need the search hook at all.
FlexSearch-powered inline search on Components, Examples, and Tokens grids with contextual slash commands that toggle grid filters. - Stepped dimension picker for multi-dimension pages (Category, Status, Scale, User Type) with arrow key navigation - Single-dimension pages (Tokens) skip straight to values - Search combines with filters using AND logic - Filter chips bar only shows for real filters, not search-only - Eager CSS import in BaseLayout prevents FOUC on search inputs - Explicit SVG dimensions and focus outline suppression for polish
twjeffery
force-pushed
the
tom/docs-inline-search
branch
from
ab2d88f to
c0871e0
Compare
4 participants
Summary
/) that toggle grid filters with a stepped dimension pickerWhat it does
Screen.Recording.2026-03-27.at.4.32.13.PM.mov
Type in the search input to filter the grid by relevance. Type
/to open a slash command menu that lets you quickly apply filters (category, status, scale, user type) without opening the filter drawer. Multi-dimension pages (Components, Examples) show a dimension picker first, single-dimension pages (Tokens) go straight to values.Keyboard navigation: arrow keys to navigate, right arrow to drill into a dimension, left/backspace to go back, escape to close, enter to toggle a filter.
Test plan
/components- search narrows grid,/shows Category + Status dimensions/examples- search narrows grid,/shows Scale, Category, User Type dimensions/tokens- search narrows grid,/shows category values directly