[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 ourtertiary
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
of100%vh
of window (minus top offset), withoverflow-y: auto
-
The options/autocomplete portion of the modal/menu should have a max-height of 30rem
(480px
), withoverflow-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)
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