Skip to content

Story 2406: Update Search Bar with No-JS design#2433

Open
julhoang wants to merge 3 commits into
developfrom
jh/search-integration
Open

Story 2406: Update Search Bar with No-JS design#2433
julhoang wants to merge 3 commits into
developfrom
jh/search-integration

Conversation

@julhoang
Copy link
Copy Markdown
Collaborator

@julhoang julhoang commented May 14, 2026

Issue: #2406

Summary & Context

This ticket doesn't require any BE changes as the search component is already connected to Algolia and correctly run queries across two indexes: Libraries and Learn. The actual content crawling, indexing and search logic is handled by this Boost Gecko repo: https://github.com/cppalliance/boost-gecko. This PR handles small UI updates to the No-JavaScript state.

  • Figma link: We currently don't have a dedicated disabled state design for the search bar, but we're following this style:
Screenshot Link
image See Figma reference

Changes

  • Updated the component to add a design state for when JS is disabled.
  • Extracted the search bar into its own component for code organization and improved documentation.

‼️ Risks & Considerations ‼️

None

Screenshots

Regular Case (with JS) No JavaScript No JavaSript on mobile
Screenshot 2026-05-14 at 11 01 31 AM Screenshot 2026-05-19 at 1 27 54 PM Screenshot 2026-05-19 at 1 28 09 PM

Self-review Checklist

  • Tag at least one team member from each team to review this PR
  • Link this PR to the related GitHub Project ticket

Frontend

  • UI implementation matches Figma design
  • Tested in light and dark mode
  • Responsive / mobile verified
  • Accessibility checked (keyboard navigation, etc.)
  • Ensure design tokens are used for colors, spacing, typography, etc. – No hardcoded values
  • Test without JavaScript (if applicable)
  • No console errors or warnings

@julhoang julhoang linked an issue May 14, 2026 that may be closed by this pull request
@julhoang julhoang force-pushed the jh/search-integration branch from 7b4d8e4 to 283d7f0 Compare May 14, 2026 17:59
@julhoang julhoang changed the title Story 2406: Search Integration Story 2406: Update Search Bar with No-JS design May 14, 2026
@julhoang julhoang marked this pull request as ready for review May 14, 2026 18:05
Copy link
Copy Markdown
Collaborator

@herzog0 herzog0 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Behavior is fine. I just think that from a UI/UX perspective, if the field is disabled we should make that more clear with the standard disabled colors we have in the Figma foundational specs, and remove the cursor pointer.
I'm approving though, as there're no designs for that!

@ycanales
Copy link
Copy Markdown
Collaborator

Works without issues. I agree with @herzog0 that design could be improved maybe removing the hover state. Approving.

@julhoang
Copy link
Copy Markdown
Collaborator Author

I totally agree with you both @herzog0 and @ycanales that the design can be improved 😄! We're leaving it for now to an another ticket as we wait for design support (as confirmed here).

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.

Webpage Integration: Search

4 participants