Make our dropdown menus consistent

Resources

FE @winh | UX @cperessini

Problem

We would like to change the highlight style of our dropdowns so they match the slash commands menu and the new smart filters.

Proposed style

For dropdowns that have elements with color we will make small modifications so they don't clash with the blue background.

For the Pipelines dropdowns we will replace the badge's border with blue.

Current	Proposal

If any other special cases are found they will be listed here.

mentioned in merge request gitlab-foss!9592 (merged)

mentioned in issue gitlab-foss#29062 (closed)

added ~1434245 label

@cperessini perhaps a white border around the status icons?

I think the simplest solution is to turn all the special elements white. Since it's a temporary change, the loss in of color should not matter. Elements like assignee pictures have a gray border that also turns white on hover. Here are some dropdown examples:

Dropdown	Resting	Hover
Switch branch
Download artifacts
Add label
Assign user

The dropdowns for pipeline builds are a little more special because they include a button to cancel the build. When hovering over that button, its fill color is inverted

Resting	Hover	Hover over element

Since blue text over a white background is not so readable, badges turn a darker shade of blue instead of white.

Resting	Hover

@cperessini I like your proposals. Still, I would keep the color for the pipeline statuses on hover as you do for the labels list. Adding a 1px white border around the status icons could be the solution.

I'm not against this change, but I'm curious to understand the motivations/rationale behind it. Why is this a better solution than the current light gray/blue on hover? Is it just increased contrast?

@pedroms Adding a white border could work, but it looks a little weird to me because of all the colors

The first time this style was used was for slash commands. I don't know if it was a conscious design decision, but I think it's a fits our style better than the light gray/blue. So basically the motivation/rationale is to improve our personality (if you think this is an improvement!)

@cperessini maybe we can remove the double border and only keep the icon colored — in this case, the green check without the green border.

I like that this style improves the contrast and is consistent with the OS's (both macOS and Windows).

@pedroms you mean like this?

I think it can look like the border disappears as you hover over the element. I made some gifs to see which one feels more natural (it's probably best to look at each one in its own tab)

1. Replace border	2. Add border	3. Turn blue

I think we should go with either 2 or 3. 2 is good because it keeps the badge's colors and 3 makes the whole row look consistent.

I like keeping the badges color, but I think the extra line makes it difficult to look at.

I wanted to see what it would look like if the blue background replaced the border, rather than replacing the border with white. What do you think?

@cperessini I think 1. Replace border as @tauriedavis suggested makes sense. If we think about it, the green colored border is just acting as a container for the icon. So, if we use a white circle to visually draw the boundaries of the container when hovering, we don't need to keep the border.

mentioned in issue gitlab-foss#8938 (moved)

added Deliverable in GitLab FOSS label

changed milestone to %9.4 in gitlab-foss

changed the description

I think 1. Replace border as @tauriedavis suggested makes sense.

@cperessini @pedroms Just to be sure: Is that a decision?

assigned to @winh

mentioned in merge request gitlab-foss!12101 (merged)

unassigned @winh

Just to be sure: Is that a decision?

I would say yes @winh

changed the description

Thanks @winh and @sarrahvesselov. I updated the issue body with a description of the approach

Thanks @cperessini!

assigned to @winh

mentioned in merge request gitlab-foss!12186 (closed)

mentioned in commit gitlab-design@caefecd5

I am pushing this to %9.5 in gitlab-foss. Please see my comment here: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/12186#note_33944500

changed milestone to %9.5 in gitlab-foss

mentioned in issue gitlab-foss#34146 (moved)

@winh is the scope of this limited to hover styles? I have some more dropdown inconsistencies, possibly needs separate regression in GitLab FOSS

mentioned in issue gitlab-foss#35424 (closed)

is the scope of this limited to hover styles?

@psimyn I would like to focus on hover style here because that is already a lot of changes. (I will split my merge request as soon as I'm done with regressions) /cc @cperessini

That sounds good @winh. We have a new proposal (gitlab-foss#35424 (closed)) to change the hover color to a light gray so it's more neutral and easier to handle with color elements. Do you think that would be a simple change or would it present complications for this MR?

@cperessini I don't mind changing it to light gray. However, since this was already meant to go into %9.4 in gitlab-foss and next feature freeze is already next week, it would be great if a final decision on the colors could be made within the next days.

mentioned in merge request gitlab-foss!13106 (merged)

@cperessini The style for the clone dropdown is currently broken:

• missing options for box-shadow: https://gitlab.com/gitlab-org/gitlab-ce/blob/0c563225b663742b4f26731dc7bc822a38f7289b/app/assets/stylesheets/framework/buttons.scss#L63
• missing #: https://gitlab.com/gitlab-org/gitlab-ce/blob/0c563225b663742b4f26731dc7bc822a38f7289b/app/assets/stylesheets/framework/variables.scss#L308

So this is how it would look like:

Note that there is a different style for the selected option. Do we want to keep that and if so, with the same colors?

/cc @pedroms

List of dropdowns

• global
  • fly out menu (new navigation): gitlab-foss!12938 (merged)
  • burger menu (old navigation): gitlab-foss!13106 (merged)
  • More (new navigation): gitlab-foss!13106 (merged)
  • search: gitlab-foss!13106 (merged)
  • "new..." in header: gitlab-foss!13106 (merged)
  • current user: gitlab-foss!13106 (merged)
  • Markdown autocompletion: gitlab-foss!13127 (merged)
  • go to a project (old navigation): gitlab-foss!13106 (merged)
  • go to a project (new navigation): gitlab-foss!13182 (merged)
  • Pikaday / date picker dropdowns: gitlab-foss!13426 (merged)
• user profile
  • public email: gitlab-foss!13623 (merged)
  • preferred language: gitlab-foss!13623 (merged)
  • notifications
    • global notifications: gitlab-foss!13624 (merged)
    • per group / project notifications: gitlab-foss!13624 (merged)
• project page
  • clone options: gitlab-foss!13193 (merged)
  • download: gitlab-foss!13193 (merged)
  • create new: gitlab-foss!13193 (merged)
  • notifications: gitlab-foss!13193 (merged)
• cycle analytics
  • time span: gitlab-foss!13183 (merged)
• repository
  • Switch branch/tag: gitlab-foss!13116 (merged)
  • + / new...: gitlab-foss!13184 (merged)
  • download: gitlab-foss!13184 (merged)
• find file
  • switch branch/tag: gitlab-foss!13116 (merged)
• new file
  • template type: gitlab-foss!13577 (merged)
  • .gitignore: gitlab-foss!13577 (merged)
  • .gitlab-ci.yml: gitlab-foss!13577 (merged)
  • Dockerfile: gitlab-foss!13577 (merged)
  • LICENSE: gitlab-foss!13577 (merged)
  • encoding (base64 / text): gitlab-foss!13585 (merged)
• edit file
  • template type: gitlab-foss!13577 (merged)
  • .gitignore: gitlab-foss!13577 (merged)
  • .gitlab-ci.yml: gitlab-foss!13577 (merged)
  • Dockerfile: gitlab-foss!13577 (merged)
  • LICENSE: gitlab-foss!13577 (merged)
  • encoding (base64 / text): gitlab-foss!13585 (merged)
• commits
  • Switch branch/tag: gitlab-foss!13116 (merged)
• single commit
  • build jobs for stage: gitlab-foss!13530 (merged)
  • pipeline actions: gitlab-foss!13534 (merged)
• branches
  • sort by: gitlab-foss!13253 (merged)
  • download: gitlab-foss!13417 (closed)
• new branch
  • Select Git revision: gitlab-foss!13116 (merged)
• tags
  • sort by: gitlab-foss!13253 (merged)
  • download: gitlab-foss!13417 (closed)
• new tag
  • Select Git revision: gitlab-foss!13116 (merged)
• contributors
  • Switch branch/tag: gitlab-foss!13116 (merged)
• graph
  • Switch branch/tag: gitlab-foss!13116 (merged)
• compare
  • Select Git revision: gitlab-foss!13116 (merged)
• charts
  • Switch branch/tag: gitlab-foss!13116 (merged)
• issue list
  • Recent searches: gitlab-foss!13421 (merged)
  • filter actions / selection: gitlab-foss!13421 (merged)
  • filters: gitlab-foss!13421 (merged)
  • sort order: gitlab-foss!13421 (merged)
  • bulk edit sidebar: gitlab-foss!13424 (merged)
• new issue
  • choose a template: gitlab-foss!13584 (merged)
  • assignee: gitlab-foss!13584 (merged)
  • milestone: gitlab-foss!13584 (merged)
  • labels: gitlab-foss!13584 (merged)
  • due date: gitlab-foss!13426 (merged)
• single issue
  • close / reopen issue: gitlab-foss!13455 (merged)
  • options (small screen): gitlab-foss!13455 (merged)
  • create merge request / branch: gitlab-foss!13457 (merged)
  • comment actions (report abuse / delete comment): gitlab-foss!13476 (merged)
  • comment: gitlab-foss!13473 (merged)
  • sidebar (assignee(s) / milestone / labels): gitlab-foss!13424 (merged)
  • move to a different project: gitlab-foss!13574 (merged)
• issue boards
  • go to a board: gitlab-ee!2641
  • filter actions / selection: gitlab-foss!13421 (merged)
  • filters: gitlab-foss!13421 (merged)
• labels
  • options (small screen): gitlab-foss!13478 (merged)
• milestones
  • sort order: gitlab-foss!13253 (merged)
• merge request list
  • Recent searches: gitlab-foss!13421 (merged)
  • filter actions / selection: gitlab-foss!13421 (merged)
  • filters: gitlab-foss!13421 (merged)
  • sort order: gitlab-foss!13421 (merged)
  • bulk edit sidebar: gitlab-foss!13424 (merged)
• new merge request
  • source project: gitlab-foss!13479 (closed)
  • source branch: gitlab-foss!13116 (merged)
  • target project: gitlab-foss!13479 (closed)
  • target branch: gitlab-foss!13116 (merged)
  • choose a template: gitlab-foss!13587 (merged)
  • assignee: gitlab-foss!13587 (merged)
  • milestone: gitlab-foss!13587 (merged)
  • labels: gitlab-foss!13587 (merged)
• single merge request
  • options (small screen): gitlab-foss!13455 (merged)
  • comment actions (report abuse / delete comment): gitlab-foss!13476 (merged)
  • comment: gitlab-foss!13473 (merged)
  • sidebar (assignee(s) / milestone / labels): gitlab-foss!13424 (merged)
  • description
    • download (email patches / plain diff): gitlab-foss!13532 (merged)
    • build jobs for stage: gitlab-foss!13530 (merged)
  • pipelines
    • build jobs for stage: gitlab-foss!13530 (merged)
    • manual job: gitlab-foss!13534 (merged)
    • download artifacts: gitlab-foss!13534 (merged)
  • changes
    • version: gitlab-foss!13590 (merged)
    • compare with (version): gitlab-foss!13590 (merged)
• edit merge request
  • choose a template: gitlab-foss!13587 (merged)
  • assignee: gitlab-foss!13587 (merged)
  • milestone: gitlab-foss!13587 (merged)
  • labels: gitlab-foss!13587 (merged)
  • target branch: gitlab-foss!13592 (merged)
• pipelines list
  • build jobs for stage: gitlab-foss!13530 (merged)
  • manual job: gitlab-foss!13534 (merged)
  • download artifacts: gitlab-foss!13534 (merged)
• new pipeline
  • select branch: gitlab-foss!13116 (merged)
• single pipeline
  • grouped build jobs: gitlab-foss!13530 (merged)
• single build job
  • select stage: gitlab-foss!13543 (merged)
• environments
  • deploy to: gitlab-foss!13544 (merged)
• single environment
  • deploy to: gitlab-foss!13544 (merged)
• environment terminal
  • manual action: gitlab-foss!13253 (merged)
• group page
  • notifications: gitlab-foss!13557 (closed)
  • sort order: gitlab-foss!13253 (merged)
• group issues
  • recent searches: gitlab-foss!13421 (merged)
  • filters: gitlab-foss!13421 (merged)
  • sort order: gitlab-foss!13421 (merged)
• group labels
  • options (small screen): gitlab-foss!13478 (merged)
• group members
  • member to invite: gitlab-foss!13599 (merged)
  • sort order: gitlab-foss!13546 (merged)
  • change permission: gitlab-foss!13600 (merged)
  • expiration date: gitlab-foss!13426 (merged)
• dashboard
  • sort order: gitlab-foss!13253 (merged)
• groups dashboard
  • sort order: gitlab-foss!13253 (merged)
• projects dashboard
  • sort order: gitlab-foss!13253 (merged)
• new project
  • fogbuz import: gitlab-foss!13599 (merged) (untested)
  • project path: gitlab-foss!13628 (merged)
• issue dashboard
  • new issue: gitlab-foss!13562 (merged)
  • author: gitlab-foss!13594 (merged)
  • assignee: gitlab-foss!13594 (merged)
  • milestone: gitlab-foss!13594 (merged)
  • labels: gitlab-foss!13594 (merged)
  • sort order: gitlab-foss!13594 (merged)
• merge requests dashboard
  • new merge request: gitlab-foss!13562 (merged)
  • author: gitlab-foss!13594 (merged)
  • assignee: gitlab-foss!13594 (merged)
  • milestone: gitlab-foss!13594 (merged)
  • labels: gitlab-foss!13594 (merged)
  • sort order: gitlab-foss!13594 (merged)
• todos dashboard
  • project: gitlab-foss!13595 (merged)
  • author: gitlab-foss!13595 (merged)
  • type: gitlab-foss!13595 (merged)
  • action: gitlab-foss!13595 (merged)
  • sort order: gitlab-foss!13595 (merged)
• explore groups
  • sort order: gitlab-foss!13253 (merged)
• explore projects
  • sort order: gitlab-foss!13253 (merged)
• project settings
  • transfer namespace: gitlab-foss!13596 (merged)
• project members
  • member to invite: gitlab-foss!13599 (merged)
  • sort order: gitlab-foss!13546 (merged)
  • change permission: gitlab-foss!13600 (merged)
  • expiration date: gitlab-foss!13426 (merged)
• repository settings
  • Pull from a remote repository
    • mirror user: gitlab-ee!2706
  • Protected Branches
    • branch: gitlab-foss!13116 (merged)
    • allowed to merge: gitlab-foss!13611 (merged)
    • allowed to push: gitlab-foss!13611 (merged)
  • Protected Tags
    • tag: gitlab-foss!13116 (merged)
    • allowed to create: gitlab-foss!13611 (merged)
• pipeline settings
  • Build status: Switch branch/tag: gitlab-foss!13116 (merged)
  • Coverage report: Switch branch/tag: gitlab-foss!13116 (merged)
• search
  • Group: gitlab-foss!13615 (merged)
  • Project: gitlab-foss!13615 (merged)
• forks
  • sort by: gitlab-foss!13253 (merged)
• admin area
  • groups
    • sort order: gitlab-foss!13615 (merged)
  • single group
    • add user: gitlab-foss!13599 (merged)
    • role: gitlab-foss!14049 (merged)
  • projects
    • namespace: gitlab-foss!13615 (merged)
    • sort order: gitlab-foss!13615 (merged)
  • single project
    • transfer project: gitlab-foss!13626 (merged)
  • users
    • sort order: gitlab-foss!13615 (merged)
    • actions / cog (for each user): gitlab-foss!13630 (merged)

mentioned in merge request gitlab-foss!13116 (merged)

@cperessini I have another question about the Switch branch/tag dropdown: As you can see in the screenshot below, there are two highlights—one for hovering and one for keyboard navigation. Should they both remain the same color?

mentioned in merge request gitlab-foss!13127 (merged)

@cperessini I have completed the list of dropdowns above now. Please let me know if you know of anything missing there.

mentioned in merge request gitlab-foss!13182 (merged)

mentioned in merge request gitlab-foss!13183 (merged)

mentioned in merge request gitlab-foss!13184 (merged)

@winh Re: https://gitlab.com/gitlab-org/gitlab-ce/issues/28921#note_35996787

The active option should be marked with a checkmark instead of a box shadow/background

There's a small inconsistency in the behavior of the dropdown: the active option is not shown when you open it for the first time. If you manually select one of the options, the next time you open the dropdown the selected option will be highlighted.

mentioned in merge request gitlab-foss!13193 (merged)

mentioned in issue gitlab-foss#35784 (closed)

mentioned in merge request gitlab-foss!13253 (merged)

mentioned in merge request gitlab-foss!13274 (merged)

mentioned in merge request gitlab-foss!12388 (merged)

mentioned in merge request gitlab-foss!13417 (closed)

mentioned in merge request gitlab-foss!13421 (merged)

mentioned in merge request gitlab-foss!13424 (merged)

mentioned in merge request gitlab-foss!13426 (merged)

mentioned in merge request gitlab-foss!13455 (merged)

mentioned in merge request gitlab-foss!13457 (merged)

mentioned in merge request gitlab-foss!13473 (merged)

mentioned in merge request gitlab-foss!13476 (merged)

mentioned in merge request gitlab-foss!13478 (merged)

mentioned in merge request gitlab-foss!13479 (closed)

mentioned in merge request gitlab-foss!13530 (merged)

mentioned in merge request gitlab-foss!13532 (merged)

mentioned in merge request gitlab-foss!13534 (merged)

mentioned in merge request gitlab-foss!13543 (merged)

mentioned in merge request gitlab-foss!13544 (merged)

mentioned in merge request gitlab-foss!13546 (merged)

mentioned in merge request gitlab-foss!13557 (closed)

mentioned in merge request gitlab-foss!13562 (merged)

mentioned in merge request gitlab-foss!13574 (merged)

mentioned in merge request gitlab-foss!13577 (merged)

mentioned in merge request gitlab-foss!13584 (merged)

mentioned in merge request gitlab-foss!13585 (merged)

mentioned in merge request gitlab-foss!13587 (merged)

mentioned in merge request gitlab-foss!13590 (merged)

mentioned in merge request gitlab-foss!13592 (merged)

mentioned in merge request gitlab-foss!13594 (merged)

mentioned in merge request gitlab-foss!13595 (merged)

mentioned in merge request gitlab-foss!13596 (merged)

mentioned in merge request gitlab-foss!13599 (merged)

mentioned in merge request gitlab-foss!13600 (merged)

mentioned in merge request gitlab-foss!13611 (merged)

mentioned in merge request gitlab-foss!13615 (merged)

mentioned in merge request gitlab-foss!13623 (merged)

mentioned in merge request gitlab-foss!13624 (merged)

mentioned in merge request gitlab-foss!13626 (merged)

mentioned in merge request gitlab-foss!13628 (merged)

mentioned in merge request gitlab-foss!13630 (merged)

mentioned in issue gitlab-foss#36623

After these are all merged into EE @winh, you should check and see if there are any inconsistencies. I feel like it's going to be easy to miss something there

After these are all merged into EE @winh, you should check and see if there are any inconsistencies.

@ClemMakesApps Yes, I will. However the list above (https://gitlab.com/gitlab-org/gitlab-ce/issues/28921#note_36011920) was created using EE (which confused me when I tried to find some dropdowns in CE code... ). That is why there are two EE-only merge requests.

mentioned in merge request gitlab-foss!13676

mentioned in issue gitlab-foss#35010 (closed)

mentioned in issue gitlab-foss#37023 (closed)

mentioned in merge request gitlab-foss!13830 (closed)

added In dev in GitLab FOSS label

mentioned in merge request gitlab-foss!14049 (merged)

mentioned in merge request gitlab-foss!14092 (merged)

@winh are we good to close this?

are we good to close this?

@cperessini Not yet, I'm planning to do this with https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/13676 which is planned to go into 10.1.

mentioned in issue gitlab-foss#36234

mentioned in merge request gitlab-foss!14557 (merged)

moved from gitlab-foss#28921 (moved)