feat(docs): Add search functionality and component thumbnails by twjeffery · Pull Request #3405 · GovAlta/ui-components

twjeffery · 2026-02-09T19:20:09Z

Summary

Two improvements to the docs site:

1. Component Thumbnails

Adds SVG thumbnail images for all components
Displayed in the ComponentsGrid for visual browsing

2. Search Functionality (⌘K command palette)

⌘K / Ctrl+K opens search modal from anywhere
FlexSearch indexes 130 entries (49 components + 81 examples)
OS detection shows correct keyboard shortcut (Mac vs Windows)
Hero search button on homepage triggers modal
Mobile search icon in header opens modal
Nav menu search buttons with label hidden when collapsed
Quick links use GoA icons matching sidebar navigation
Filter commands — type /c for components, /e for examples
Accessibility — focus trap, keyboard navigation, ARIA labels

Changes

New files:

docs/public/images/component-thumbnails/*.svg (48 thumbnails)
docs/src/components/search/* (13 modules)
docs/src/scripts/build-search-index.ts
docs/src/pages/search.astro (fallback page)

Deleted orphaned files:

SideNav.tsx, ExamplesSideNav.tsx (replaced by SiteNav)
Search.tsx (replaced by new search modal)

Test plan

Component thumbnails display in /components grid
⌘K / Ctrl+K opens modal from any page
Click hero search button on homepage → modal opens
Click mobile header search icon → modal opens
Nav search button works (expanded & collapsed states)
Arrow keys navigate results, Enter selects
Escape closes modal and restores focus

Created with the help of Claude.

Related issue:

#3366

netlify · 2026-02-23T19:23:12Z

✅ Deploy Preview for goa-design-2 ready!

Name	Link
🔨 Latest commit	`94257e1`
🔍 Latest deploy log	https://app.netlify.com/projects/goa-design-2/deploys/69a8da32f03b980008d4946a
😎 Deploy Preview	https://deploy-preview-3405--goa-design-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

ArakTaiRoth · 2026-02-24T19:48:19Z

-        badge="/"
-        url="/search"
-      />
+      <button className="search-menu-button" onClick={openSearch} type="button">


Because the search button is just a rendered button and not using WorkSideMenuItem. There's no aria-label being assigned to it right now. So when the menu is collapsed, there's no indication of what it is for screen readers, because on line 153, the text elements literally disappear from the DOM when the menu is collapsed.

Added aria-label="Search" to the button so screen readers can identify it when the menu is collapsed.

@twjeffery You did indeed add this here. But it's also missing in ComponentsSubMenu.tsx on line 219.

But on that note, I'm not sure why we're duplicating this secondary content in every menu? It looks like it's duplicated in this file, ComponentsSubMenu.tsx, ExampleSubMenu.tsx, and TokensSubMenu.tsx? This issue is in all of these, but currently I don't think the last two are being used, so I didn't highlight them as issues.

I extracted MenuSecondaryContent to replace the duplicated secondary content across the nav files. The aria-label="Search" fix is in that component. I also deleted ExamplesSubMenu.tsx and TokensSubMenu.tsx since they weren't being used.

twjeffery · 2026-03-03T00:40:17Z

@ArakTaiRoth I pushed changes as we discussed, it's ready for another review

chrisolsen · 2026-03-04T23:21:47Z

@twjeffery you will need to rebase to get the failing calendar test fix

ArakTaiRoth · 2026-03-04T23:58:53Z

@chrisolsen This has been done, it's ready to be merged

- Add ⌘K/Ctrl+K command palette search for components, examples, tokens, and pages - Add component thumbnail images to ComponentsGrid - Search features: filter commands (/c, /e, /t, /g), history, keyboard navigation

twjeffery · 2026-03-05T01:31:36Z

@twjeffery you will need to rebase to get the failing calendar test fix

done

chrisolsen · 2026-03-05T01:38:05Z

@ArakTaiRoth it was failing the test, so it wasn't ready to be merged

chrisolsen · 2026-03-05T01:44:57Z

🎉 This PR is included in version 1.41.0-dev.11 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-05T19:51:51Z

🎉 This PR is included in version 6.11.0-dev.8 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-05T23:07:23Z

🎉 This PR is included in version 4.11.0-dev.9 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-07T16:12:35Z

🎉 This PR is included in version 1.11.0-dev.4 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:24:02Z

🎉 This PR is included in version 2.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:32:26Z

🎉 This PR is included in version 2.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:40:51Z

🎉 This PR is included in version 7.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:49:30Z

🎉 This PR is included in version 5.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:32:56Z

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:41:20Z

🎉 This PR is included in version 7.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:49:42Z

🎉 This PR is included in version 5.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

twjeffery marked this pull request as ready for review February 9, 2026 21:59

chrisolsen self-requested a review February 18, 2026 15:35

Spark450 requested review from ArakTaiRoth and bdfranck and removed request for bdfranck February 18, 2026 22:46

twjeffery linked an issue Feb 19, 2026 that may be closed by this pull request

# Create site-wide search with facets and synonyms (WIP) #3050

Closed

2 tasks

ArakTaiRoth reviewed Feb 19, 2026

View reviewed changes

twjeffery force-pushed the tom/docs-search-feature branch from ff5f107 to 8c38f67 Compare February 23, 2026 19:23

twjeffery force-pushed the tom/docs-search-feature branch from 8c38f67 to cc2714e Compare February 23, 2026 19:56

twjeffery requested a review from ArakTaiRoth February 23, 2026 20:51

twjeffery mentioned this pull request Feb 24, 2026

feat(docs): enhance search with tokens, pages, and improved UX #3484

Merged

11 tasks

twjeffery force-pushed the tom/docs-search-feature branch from cc2714e to f3c2509 Compare February 24, 2026 05:47

ArakTaiRoth reviewed Feb 24, 2026

View reviewed changes

Comment thread docs/src/components/search/SearchModal.tsx

twjeffery force-pushed the tom/docs-search-feature branch from f3c2509 to bd4cd9f Compare February 26, 2026 19:59

twjeffery requested a review from ArakTaiRoth February 26, 2026 19:59

twjeffery force-pushed the tom/docs-search-feature branch from bd4cd9f to 7328ce4 Compare March 3, 2026 00:37

twjeffery force-pushed the tom/docs-search-feature branch from 7328ce4 to de8e566 Compare March 3, 2026 15:27

ArakTaiRoth approved these changes Mar 4, 2026

View reviewed changes

chrisolsen approved these changes Mar 4, 2026

View reviewed changes

feat(#3050): Add search functionality and component thumbnails

94257e1

- Add ⌘K/Ctrl+K command palette search for components, examples, tokens, and pages - Add component thumbnail images to ComponentsGrid - Search features: filter commands (/c, /e, /t, /g), history, keyboard navigation

twjeffery force-pushed the tom/docs-search-feature branch from de8e566 to 94257e1 Compare March 5, 2026 01:19

chrisolsen merged commit 00a015d into dev Mar 5, 2026
8 of 9 checks passed

chrisolsen deleted the tom/docs-search-feature branch March 5, 2026 01:38

chrisolsen added the released on @dev label Mar 5, 2026

twjeffery mentioned this pull request Mar 11, 2026

feat(docs): automate component API extraction in build pipeline #3513

Merged

4 tasks

chrisolsen added the released on @next label Mar 31, 2026

chrisolsen added the released Released into production. label Apr 1, 2026

Conversation

twjeffery commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

1. Component Thumbnails

2. Search Functionality (⌘K command palette)

Changes

Test plan

Related issue:

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

netlify Bot commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for goa-design-2 ready!

Uh oh!

ArakTaiRoth Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

twjeffery Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

ArakTaiRoth Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

ArakTaiRoth Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

twjeffery Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

twjeffery commented Mar 3, 2026

Uh oh!

chrisolsen commented Mar 4, 2026

Uh oh!

ArakTaiRoth commented Mar 4, 2026

Uh oh!

twjeffery commented Mar 5, 2026

Uh oh!

chrisolsen commented Mar 5, 2026

Uh oh!

Uh oh!

chrisolsen commented Mar 5, 2026

Uh oh!

chrisolsen commented Mar 5, 2026

Uh oh!

chrisolsen commented Mar 5, 2026

Uh oh!

chrisolsen commented Mar 7, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Apr 1, 2026

Uh oh!

chrisolsen commented Apr 1, 2026

Uh oh!

chrisolsen commented Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

twjeffery commented Feb 9, 2026 •

edited

Loading

netlify Bot commented Feb 23, 2026 •

edited

Loading