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 !9592 (merged)

mentioned in issue #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 #8938 (moved)

added Deliverable label

changed milestone to %9.4

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 !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 !12186 (closed)

mentioned in commit gitlab-design@caefecd5

added UX ready and removed UX labels

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

changed milestone to %9.5

mentioned in issue #34146 (moved)

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

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

mentioned in merge request !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 !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 !13182 (merged)

mentioned in merge request !13183 (merged)

mentioned in merge request !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 !13193 (merged)

mentioned in issue #35784 (closed)

mentioned in merge request !13253 (merged)

mentioned in merge request !13274 (merged)

mentioned in merge request !12388 (merged)

mentioned in merge request !13417 (closed)

mentioned in merge request !13421 (merged)

mentioned in merge request !13424 (merged)

mentioned in merge request !13426 (merged)

mentioned in merge request !13455 (merged)

mentioned in merge request !13457 (merged)

mentioned in merge request !13473 (merged)

mentioned in merge request !13476 (merged)

mentioned in merge request !13478 (merged)

mentioned in merge request !13479 (closed)

mentioned in merge request !13530 (merged)

mentioned in merge request !13532 (merged)

mentioned in merge request !13534 (merged)

mentioned in merge request !13543 (merged)

mentioned in merge request !13544 (merged)

mentioned in merge request !13546 (merged)

mentioned in merge request !13557 (closed)

mentioned in merge request !13562 (merged)

mentioned in merge request !13574 (merged)

mentioned in merge request !13577 (merged)

mentioned in merge request !13584 (merged)

mentioned in merge request !13585 (merged)

mentioned in merge request !13587 (merged)

mentioned in merge request !13590 (merged)

mentioned in merge request !13592 (merged)

mentioned in merge request !13594 (merged)

mentioned in merge request !13595 (merged)

mentioned in merge request !13596 (merged)

mentioned in merge request !13599 (merged)

mentioned in merge request !13600 (merged)

mentioned in merge request !13611 (merged)

mentioned in merge request !13615 (merged)

mentioned in merge request !13623 (merged)

mentioned in merge request !13624 (merged)

mentioned in merge request !13626 (merged)

mentioned in merge request !13628 (merged)

mentioned in merge request !13630 (merged)

mentioned in issue #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 !13676

mentioned in issue #35010 (closed)

mentioned in issue #37023 (closed)

mentioned in merge request !13830 (closed)

added In dev label

mentioned in merge request !14049 (merged)

mentioned in merge request !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 #36234

mentioned in merge request !14557 (merged)

moved to gitlab#8586

Hey!

GitLab is moving all development for both GitLab Community Edition and Enterprise Edition into a single codebase. The current gitlab-ce repository will become a read-only mirror, without any proprietary code. All development is moved to the current gitlab-ee repository, which we will rename to just gitlab in the coming weeks. As part of this migration, issues will be moved to the current gitlab-ee project.

If you have any questions about all of this, please ask them in our dedicated FAQ issue.

https://gitlab.com/gitlab-org/gitlab-ee/issues/13855

You can also find more information here:

• https://gitlab.com/gitlab-org/gitlab-ee/issues/13304
• https://about.gitlab.com/2019/08/23/a-single-codebase-for-gitlab-community-and-enterprise-edition/

Frequently Asked Questions

For an up to date list of questions and answers, please take a look at https://gitlab.com/gitlab-org/gitlab-ee/issues/13855

What will we do with the repository names?

https://gitlab.com/gitlab-org/gitlab-ee/ will become https://gitlab.com/gitlab-org/gitlab, and https://gitlab.com/gitlab-org/gitlab-ce will become https://gitlab.com/gitlab-org/gitlab-foss.

Why rename gitlab-ce to gitlab-foss?

Using "gitlab" and "gitlab-ce" would be confusing, so we decided to rename gitlab-ce to gitlab-foss to make the purpose of this FOSS repository more clear

I created a merge requests for CE, and this got closed. What do I need to do?

You will need to create a merge request at https://gitlab.com/gitlab-org/gitlab-ee/. This link will eventually redirect to https://gitlab.com/gitlab-org/gitlab.

How does the licensing work in this new setup?

Everything in the ee/ directory is proprietary. Everything else is free and open source software. If your merge request does not change anything in the ee/ directory, the process of contributing changes is the same as when using the gitlab-ce repository.

Will you accept merge requests on the gitlab-ce/gitlab-foss project after it has been renamed?

No. Merge requests submitted to this project will be closed automatically.

Will I still be able to view old issues and merge requests in gitlab-ce/gitlab-foss?

Yes.

How will this affect users of GitLab CE using Omnibus?

No changes will be necessary, as the packages built remain the same.

How will this affect users of GitLab CE that build from source?

Once the project has been renamed, you will need to change your Git remotes to use this new URL. GitLab will take care of redirecting Git operations so there is no hard deadline, but we recommend doing this as soon as the projects have been renamed.

Where can I see a timeline of the remaining steps?

https://gitlab.com/gitlab-org/gitlab-ee/issues/13304

Will community contributions submitted to the new "gitlab" repository be available in the new gitlab-foss repository?

Yes, these changes will be synced to gitlab-foss automatically, several times per day.

locked this issue