Skip to content

Remove extend from dropdown-menu-toggle

Simon Knox requested to merge psi-no-extend-dropdown into master

What does this MR do and why?

For #323021 (closed)

Delete an @extends from dropdown-menu-trigger. This is probably gonna break a bunch of stuff horribly.

My biggest concern is that dropdown-menu-toggle inherits a bunch of rules from dropdown-toggle just slightly further up in dropdowns.scss. That includes some padding, background-color, and border rules. dropdown-menu-trigger makes it into startup-general.css, because it is on the project page, but the other two rules there do not. So to actually test the impact meant also updating startupcss with the output from https://gitlab.com/gitlab-org/gitlab/-/jobs/1611389343

With that I was able to see broken dropdowns looked like this (this is the Sort dropdown on Projects list page):

Screen_Shot_2021-09-23_at_12.48.22_pm

So, to account for that I added dropdown-menu-trigger to the selectors list above, which I think is the only styles that should be required. After that the dropdown was back to its old self again

Screen_Shot_2021-09-23_at_1.05.29_pm

Screenshots or screen recordings

before/after for application.css https://gitlab.com/-/snippets/2178955

How to set up and validate locally

Apply this diff to remove the startupCSS rules:

  1. Search for any of the dropdowns that only have the dropdown-menu-trigger class. Any gl-dropdowns (using toggle-class prop) or gl-buttons already add most of these styles. Though there may also be some rules that affect those buttons, but it is unlikely.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Simon Knox

Merge request reports