[MVC] - Search modal

Details

With the navigation redesign, we will no longer expose the global search field by default. Instead, users will access this through a button within the updated left sidebar. This will be the first step towards our eventual goal of moving towards a command palette to navigate, search, and perform quick actions within GitLab.

Implementation Guide

Resources
Guidelines
  • Add an icon button (search icon) in the header area of the left sidebar using our tertiary button styles
  • Include a tooltip for the button that reads "Search GitLab /" (ensuring the shortcut is included as a kdb element)
  • Clicking/tapping on the search button opens the global search menu similar to how our modals work (lightbox effect)
  • Clicking/tapping outside of the Global Search menu (overlay area) when it is open closes the modal/menu
  • Esc key can also be used to close the Global Search menu when it is open
  • Global Search modal/menu container should have a max-height of 100%vh of window (minus top offset), with overflow-y: auto
  • The options/autocomplete portion of the modal/menu should have a max-height of 30rem (480px), with overflow-y: auto (this makes it so the entire modal/menu can only be a total of 530px in height, if you include the search input which is 48px)
  • Global Search modal/menu container should have an initial width of 40rem (640px), with a max-width: 100%vw (minus right and left offset/padding of 1rem/16px on each side – see mobile designs)
  • Top offset/margin based on breakpoint:
    • xsmall: 3rem (48px)
    • small +: 5rem (80px)
  • Do not display the scope token that is shown within the search field on xsmall viewport

When opening the global search menu...

  • Focus the search field
  • Display the default Autosuggestion options as we do today that are based on the users location in the product (see image below)

Screen_Shot_2023-02-17_at_2.23.26_PM

Ensure all existing Global Search field functionality remains intact
  • Defaulting scope when directed to the results page based on location user searched from
  • Autocomplete options are not effected
    • Recent Issues, MRs, Epics
    • Groups, Projects
    • Users
    • Settings
    • Help
    • In this project
  • Scope is displayed as a token within the search field upon typing (this should really be shown by default, but currently doesn't show up until 3 characters are entered)
  • Clear button functions correctly
  • Tabbing order is maintained
Edited by Nick Brandt