Background
This task is to review and improve the styles for the new search bar (and results) implemented in T317792: Consider adding search to the Codex docs site.
Design proposal
Search bar
Make the search bar similar to the Codex SearchInput:
- Use background-color-base and border-color-interactive
- When hover over the search input, use border-color-interactive--hover and color-placeholder
- If possible, align left and right paddings to 8px
- Make the ⌘k less prominent by using smaller paddings and background-color-neutral-subtle and border-color-muted
Search results
- Modal:
- 512px width on desktop and tablet and full-screen on mobile
- Do we need the keyboard navigation in this modal? We don't provide keyboard navigation in other menus in the Codex site
- Make the menu results simpler and similar to the Codex MenuItem:
- Remove the # from the results if possible
- Remove the gray border around the results and use instead a border-color-muted divider to separate each of them in the list
- Use background-color-interactive--hover and background-color-interactive--active when hover and active
- Bold the text when it matches the text typed in the input
- When the typed text matches words within a paragraph of a page section, the relevant description’s text in the search result will appear in bold, indicating that the paragraph contains matched text.
- Include InfoChip to show the section where the result is included (just if possible)
Acceptance criteria
Design
- Explore improvements for the search bar
- Explore improvements for the search results
Code
- Update the Codex site with the decided improvements