Resolve "Frontend for clarifying the usefulness of the search bar"
What does this MR do?
Resting State
- Increase the width of the search box to
240px
- Remove the scope indicator (
This group
andThis project
). - Rephrase the placeholder to: “Search or jump to…”
Active State
When the search bar becomes active:
- The width of the search box should increase to
320px
for more comfortable typing. - The width of the suggestions dropdown should be
320px
- The separator between the options for issues and MRs should be removed.
- The headers that indicate the scope should be as follows:
- Project:
Name of the project
(no change) - Group:
Name of the group
(no change) - Global:
All GitLab
- Project:
- The style of these headers should match the 'Header title' style from the dropdown library spec previews.
Typing State
[Examples for all the possible row types can be found here]
- The max height of the suggestion dropdown should be
400px
- There should be a fade effect layer at the bottom to indicate the dropdown is scrollable.
- All substrings inside the dropdown which match the query should be bolded.
- The first row should be automatically highlighted, so the user can just press
Enter
to search. - The first rows in the dropdown should allow the user to perform a search for the entered term:
- Search rows for project scope:
- Row 1:
Magnifying glass
+"KEYWORD" in this project
- Row 2:
Magnifying glass
+"KEYWORD" in all GitLab
- Search rows for group scope:
- Row 1:
Magnifying glass
+"KEYWORD" in this group
- Row 2:
Magnifying glass
+"KEYWORD" in all GitLab
- Search row for global scope:
- Row 1:
Magnifying glass
+"KEYWORD" in all GitLab
After that, navigation suggestions will be shown for projects, groups, pages inside the project/group, preferences pages and help pages that match the string entered.
- Project and group rows will show their avatar on the left side.
- The size of the avatar will be
16px x 16px
- The margin between the avatar and the name will be
4px
- If the project or group doesn't have an avatar, the generic one with its initial should be used.
- The size of the avatar will be
- The headers for each type of suggestion should also be updated to match the spec previews
- The header for pages in the project or group should be renamed to:
- Project:
In this project
- Group:
In this group
- Project:
Are there points in the code the reviewer needs to double check?
- That I didn't terribly break something by changing the
gitlab-theme
mixin or the search template. - I changed the dropdown global styles
😟
Why was this MR needed?
See #36409 (closed)
Screenshots (if relevant)
Resting State
Active State
Project | Group | Global |
---|---|---|
Typing State
Does this MR meet the acceptance criteria?
-
Changelog entry added, if necessary -
Documentation created/updated -
API support added -
Tests added for this feature/bug - Conform by the code review guidelines
-
Has been reviewed by a UX Designer -
Has been reviewed by a Frontend maintainer
-
-
Conform by the merge request performance guides -
Conform by the style guides -
Conform by the database guides -
If you have multiple commits, please combine them into a few logically organized commits by squashing them -
Internationalization required/considered -
End-to-end tests pass ( package-and-qa
manual pipeline job)
What are the relevant issue numbers?
Closes #36409 (closed)
Edited by Dennis Tang