Skip to content

Fix mismatching chevron color in split dropdown buttons

What does this MR do?

Fixes the split dropdown chevron color by utilizing an SVG mask over an element whose contents are a box in the color of border-color. This was tested in Firefox, Edge, Chrome, and Safari.

before after
before1 after1
before2 after2
before3 after3

The caveat is that this method does not work in Internet Explorer and some pre-Blink versions of Edge:

Edge 17 Edge 18
edge17 edge18

I am not sure whether we technically support Edge 17 anymore, do we @leipert?

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • Security reports checked/validated by a reviewer from the AppSec team

Closes #1040 (closed)

Edited by Mike Greiling

Merge request reports