Remove extend from dropdown-menu-toggle
What does this MR do and why?
For #323021 (closed)
Delete an @extend
s 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):
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
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:
- Search for any of the dropdowns that only have the
dropdown-menu-trigger
class. Any gl-dropdowns (usingtoggle-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.
-
I have evaluated the MR acceptance checklist for this MR.