feat(docx): Improve search experience in new docs site

[chris-at-jobber]

Motivations

Searching the new docs site should be smooth and consumer grade! This cleans up some UI cruft and makes the search feel more intuitive.

Before

• No search icon or clearable on the search input
• Modal would overflow the screen, forcing scroll - also limited results per viewport with a "base" width modal
• Results headings too similar in weight to section headings (Design + Components)
• Could not predictably fire the Search modal via keyboard

Screen.Recording.2024-11-02.at.2.26.27.PM.mov

After

• Search icon on the search input, and it's clearable
• Modal cannot overflow the screen
• Modal is wider, allowing for more results per query
• Better hierarchy within search results (more spacing, emphasis on content over headings)
• Can predictably fire the search modal using keyboard

Screen.Recording.2024-11-02.at.2.47.25.PM.mov

Changes

Added

Changed

• add clear and icon to input
• use large modal
• style results box
• Nav search item is a Button now

Deprecated

Removed

Fixed

Security

Testing

Changes can be
tested via Pre-release

---

In Atlantis we use Github's built in pull request reviews.

[chris-at-jobber]

Notes for additional improvements that might need more dev assistance:

• interaction to fire search by keyboard is janky, cannot open by keyboard interactions (onClick only)
  • tried to use onFocus property but the issue now is when the modal is closed, focus is returned to the Input, which then sets isOpen to true again 😭
  • design thought; maybe just a button is the move here
  • Button is the move here - there's never an instance where you could type in the "nav search" so using an Input is just a lie
• useInView to add gradient overflow indicator when scrolling within modal

[cloudflare-workers-and-pages]

Deploying atlantis with    Cloudflare Pages

Latest commit:	8d12975
Status:	✅  Deploy successful!
Preview URL:	https://ebaac347.atlantis.pages.dev
Branch Preview URL:	https://refine-search-ui.atlantis.pages.dev

View logs

[chris-at-jobber]

Component usage thoughts:

• If Box or utils are desired as replacements CSS modules, should support

  • max-height
  • overflow
  • box-sizing

• Heading should support subdued variation for web (parity with mobile)

[chris-at-jobber]

See my comment here on why Box could/should support some of these properties

[scotttjob]

How much effort to get Box to support them in your estimate? Is it something I could roll inside an hour or so?

[chris-at-jobber]

See comment on why Box didn't meet the needs here

[scotttjob]

LGTM!

Apologies on the delay. I need to clean up my GH notifications, it's 95% noise so I miss some of the signals.