WIP: Make dropdown hover style consistent
What does this MR do?
Adjust dropdown styling to match the issuable search filters.
Screenshots
| Before | After |
|---|---|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
What are the relevant issue numbers?
fixes #28921 (moved)
Merge request reports
Activity
@cperessini Could you take a look already please?
- Resolved by Winnie Hellmann
failing test: https://gitlab.com/gitlab-org/gitlab-ce/builds/18742640
- Last reply by Winnie Hellmann
-
@cperessini I am assigning to you for the UX review. Please assign back to me if this looks good to you (and also if it doesn't
assigned to @cperessini
@winh just reviewed the branch and there are a few places where the styles are failing
Project Home
The SSH/HTML dropdown:
Pipelines
The manual job and download artifacts buttons under Pipelines and Environments don't seem to have a hover effect
Manual job Pipelines Manual job Environments Download artifacts 
On the job page the stages dropdown doesn't switch the text to white and the jobs list uses the old style
Stages dropdown Jobs list 
In the pipeline graph the stages dropdown seems to be broken
In the pipeline list the accessory button still uses the old hover style
I propose we do the following:
Issues
The recent searches dropdown doesn't have a hover state:
The smart filters dropdowns have this hover state:
The labels dropdowns feel strange when the label color and the hover color 'touch'. Could you add a white border to the label color? We do this for the smart filters. It's not visible when the background is white and it helps when you're hovering
Label dropdown Smart filter 
The 'More actions' dropdown on comments uses the old color:
Global dropdown
The badge on the global dropdown doesn't look good to me in white. Could you make it a darker shade of blue?
Current Proposed 
Admin area
I found this dropdown in the admin area with a red button as the last row. It looks strange to me but I'm not sure if it's supposed to look like that
Dropdown colors
I realized that the color used in this MR is different from the color in slash commands. I prefer the slash commands color, but I'm not sure where each comes from. We should probably be using
$blue-500or$blue-600in both places.
There's also this dropdown type that's used in some parts of GitLab. It must be a different implementation, but I was wondering if we could change its hover color to match the other two
assigned to @winh
-
@cperessini Thank you for the detailed feedback!
added 253 commits
Toggle commit list-
@timzallmann I'm pinging you here because of https://gitlab.com/gitlab-org/gitlab-ce/blob/master/PROCESS.md#between-the-1st-and-the-7th, so that you could have a look whether you think this can still be finished.
added Deliverable label
-
I honestly don't expect this to be reviewed, tested (also in EE) and merged by the end of next week. The risk of introducing regression s is not neglectable because we may overlook a dropdown. So I'd rather push this to %9.5. /cc @timzallmann
changed milestone to %9.5
mentioned in issue #28921 (moved)
mentioned in issue #34146 (moved)
mentioned in issue #35424 (closed)
-
As changing the dropdown styles globally had unexpected side effects already (see https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/12186#note_32527328 for some examples), I'm splitting this up into multiple smaller merge requests. The idea is to have each dropdown styled in its own merge request first and then have a clean up merge request that moves everything to the global styles. I hope to reduce the risk of regressions that way.
