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 |
| const { sortConfig, setSortConfig, sortByKey, clearSort, handleTableSort } = | ||
| useTwoLevelSort(); | ||
| const isContainerNarrow = useContainerNarrow(gridRef, 624); | ||
| const { search } = useSearch(); |
There was a problem hiding this comment.
Maybe not an issue, I'm not sure. But because we're using useSearch here, any search results that are filtered on inside this file, are reduced to seeing only 50 results before any filters here are even run. This could be fine, but nowhere in our UX do we state "the top 50 results" or something like that, so people might be left wondering. Basically, the / filters run on the 50 results, not all of the potential results, so the numbers given might be misleading.
There was a problem hiding this comment.
I see what you mean. The limit was set to 50, I bumped it to 500. Also made it configurable in case we need to adjust it later.
docs/src/components/ExamplesGrid.tsx
Outdated
| const { sortConfig, setSortConfig, sortByKey, clearSort, handleTableSort } = | ||
| useTwoLevelSort(); | ||
| const isContainerNarrow = useContainerNarrow(gridRef, 780); | ||
| const { search } = useSearch(); |
There was a problem hiding this comment.
Same issues here as described in ComponentsGrid.tsx
| const { sortConfig, setSortConfig, sortByKey, clearSort, handleTableSort } = | ||
| useTwoLevelSort(); | ||
| const isContainerNarrow = useContainerNarrow(gridRef, 624); | ||
| const { search } = useSearch(); |
There was a problem hiding this comment.
You're not consuming isLoading or error. So this search can't render a loading state, or respond to errors if they're encountered, it'll just show a blank search results.
There was a problem hiding this comment.
Fixed. The search input now shows "Loading search..." while it's loading and "Search unavailable" if something goes wrong.
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
664aef2 to
ab2d88f
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