Homogenize sort and filter dropdown toggles

What does this MR do?

Homogenizes the style of filter and sort dropdown toggles (aka buttons) related to:

• issues (index, new & edit views)
• issue boards (index);
• merge requests (index, new, edit);
• projects (index and "explore");
• projects admin (index);
• groups (show and "explore");
• groups admin (index);
• users admin (index);
• todos (index);
• branches (index);
• commits (index);
• cycle analytics;
• network;
• forks;
• tags (index);
• global search

Some other dropdowns are incidently concerned:

• project admin (show);
• assigne/due date/milestone/label dropdowns on the issue and board sidebars;
• stage dropdown on the build sidebar;
• merge request and comparison dropdowns for choosing forks and branches;
• ref switcher (e.g. in the blob (show) view or in the graphs view);

Dropdown toggles concerned by #24150 (moved) but not covered in this MR:

• Dropdowns for selection MR versions to be compared (in the "Changes" tab of an MR);
• Dropdowns that bring up a list of actions:
  • "Settings" dropdowns (such as the one found on the upper-right corner of all project pages);
  • The download/action/notifications buttons on the main project page;
  • Dropdowns located inside of list items (on list of pipelines, users and groups, for instance);
  • The "Options" button on the commit (show) view;
  • The "+" button on the tree explorer (for creating files, branches, tags, ...)

TODO

• Update ui.html if needed

Are there points in the code the reviewer needs to double check?

Am I changing any other dropdown toggle than listed above?

Why was this MR needed?

For #24150 (moved)

Screenshots (if relevant)

Issue Index

Before:

After:

Issue New

Before:

After:

Merge Request Branch Selector

Before:

After:

Global Search

Cycle Analytics

Does this MR meet the acceptance criteria?

• Changelog entry added
• Documentation created/updated
• API support added
• Tests
  • Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

#24150 (moved)

/cc @cperessini @awhildy

How's that for a start? I've changed the filter and sort dropdowns on the Issue list for now (not yet dropdowns with icons).

Added ~164274 frontend labels

Thanks for your contributions @deubeuliou

Let me know once you're ready for this to get reviewed and or if you need any help

@deubeuliou Looking good! Could you shrink the chevron so it's 9px wide? (font size 10px if you're using font icons)

Now that I got to play around with it I think we should also darken the chevron on hover and active to #b2b2b2. Thanks!

Added 195 commits:

• 83c5b142...9aded5c8 - 194 commits from branch gitlab-org:master
• 5a7db9e8 - Homogenize dropdowns on Issue page

Compare with previous version

Added 1 commit:

• 3a52e94c - Homogenize dropdowns on Issue page

Compare with previous version

Reassigned to @deubeuliou

@cperessini I've changed the color as requested and fixed the UI tests. Do you want to merge this branch now (I still need to provide screenshots to comply with the MR guidelines, though) and have me work on the "project settings" after or do you prefer to merge everything in one go?

@deubeuliou Awesome, thanks so much! One little detail, could you keep the darker color of the chevron as long as the dropdown is open? That is what happens for the outline color, so it'd be great if they both went together.

@ClemMakesApps could you @deubeuliou with the merge process? Thanks!

Is this UI change supposed to impact all dropdowns across GitLab?

@ClemMakesApps: Yes. The goal is to make them consistent. However, because we haven't removed the grey buttons on the project home page, I think we are keeping those grey for now (see https://gitlab.com/gitlab-org/gitlab-ce/issues/24150#note_18599304). So, I believe those are the only drop downs that might not be impacted.

Do you have concerns about this? Thanks!

Cool, just wanted to double check. So we only need this change for the issue page. @deubeuliou let me know when you're ready for this to get reviewed and or need any help. Please update the MR description when you're ready for review so that it's easier for everyone to understand the context of the MR

Added 1 commit:

• 3ea37579 - Make open and hovered dropdown toggles look the same

Compare with previous version

Changed title: WIP: Homogenize dropdowns on Issue page → WIP: Homogenize dropdown toggles on Issue page

Marked the task Changelog entry added as completed

Added 1 commit:

• 6bf958f7 - Update the Changelog

Compare with previous version

Changed title: WIP: Homogenize dropdown toggles on Issue page → WIP: Homogenize sort and filter dropdown toggles

Added 1 commit:

• 9ea6fef7 - Update some more sort/filter dropdowns

Compare with previous version

Unmarked this merge request as a Work In Progress

@cperessini there you go :)

After a complete (?) review of all dropdowns on GitLab using git grep -e 'dropdown.*[-_]toggle' app/views/, I updated the MR description to detail what is changed and what is not (I intend to change those in a second MR). I still need to make screenshots (it will take some time) and maybe update help/ui.html if you think it is relevant.

@ClemMakesApps I think it is ripe for reviewing (I removed the WIP marker) :)

All the changes seem to deal with replacing caret-down with chevron-down. I'm not sure why .fa-caret-up is being removed here

I removed it because I didn't find it being used anywhere. But that's right, this change is unrelated. Would you prefer that I open another MR for this?

Thanks @deubeuliou! @mikegreiling can you review?

Reassigned to @mikegreiling

Checked it out and this looks good to me

Any reason for splitting this work up into separate MRs?

Until we get the rest done, we'll have to deal with some slightly jarring inconsistencies like this one:

Whoever does the merge, make sure it doesn't automatically close #24150 (moved).

Reassigning to @annabeldunstone

Reassigned to @annabeldunstone

@mikegreiling: My understanding is there is concern about some drop downs that currently have a grey background (https://gitlab.com/gitlab-org/gitlab-ce/issues/24150#note_18599304) but are next to buttons that also have a grey background. There is discussion about the button styling (https://gitlab.com/gitlab-org/gitlab-ce/issues/24145), but until that work gets sorted out, we think it will be bizarre to have white drop downs in between grey buttons. So I agree that there are some drop downs that may take some time to update.

However, I guess I don't understand why the dropdown in the screenshot you have is misaligned, and styled with the old dropdown chevron (since it is white).

Super excited to moving towards consistent drop downs!

Added 1 commit:

• 6ca64997 - dropdowns.scss: Fix style issues after review

Compare with previous version

Thanks a lot to whoever started adding the screenshots!

@annabeldunstone I pushed a new patch removing the superfluous blank lines.

@mikegreiling the reasons are indeed those explained by @awhildy and also the fact that I'd be more confortable going step by step (less risky, IMHO, and faster to merge what is enhanced). After all, most modified dropdowns are related to sort/filter of issues and MR and most ones that are not modified are not related.

@deubeuliou Is there a reason to use a mixin here, rather than just declaring all instances of .fa-chevron-down to be that color? I tried that out and it didn't seem to break anything, but I might be missing something

I used a mixin to avoid code duplication.

They look awesome, thanks @deubeuliou! Excited to get them rolled out to the rest of the app

@deubeuliou thanks! Could you resolve the conflicts? Then we can get this merged in

@annabeldunstone sure. Do you prefer a rebase or a merge for resolving conflicts?

@deubeuliou rebase would be great!

Added 526 commits:

• 6ca64997...4fddd9b7 - 521 commits from branch gitlab-org:master
• b3ed4e0c - Homogenize dropdowns on Issue page
• 4c6468aa - Make open and hovered dropdown toggles look the same
• a3a85c07 - Update the Changelog
• be0fb391 - Update some more sort/filter dropdowns
• 92704298 - dropdowns.scss: Fix style issues after review

Compare with previous version

@anabeldunstone done :)

Enabled an automatic merge when the build for 92704298 succeeds

Status changed to merged

Mentioned in commit 63f5c4ea

Milestone changed to %8.15

mentioned in merge request !10324 (merged)

mentioned in merge request !13628 (merged)