Skip to content

Use label text color for remove button icon in MR filter bar token

What does this MR do and why?

This addresses a dark mode style bug. Currently, the x button to remove a label filter token in the MR filter bar is either the standard token remove color or an inverted color for labels that have a darker background color. This works well in light mode. But in dark mode, the sass variables used are the inverse of what is expected, and the x button ends up having an unexpected color.

This MR simply uses the label text color that is applied to the text of the token for the remove button, so that they will always match for label tokens.

NOTE: the color that appears for the text of some label filter tokens on MRs is affected by a separate bug that is fixed in !153594 (merged). Screenshots in this MR depict the UI as it will appear after that MR is merged.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Dark mode

Before After
image image

Light mode

Note that there is a slight difference introduced by this MR in light mode. This actually corrects some existing accessible contrast problems, such as the remove icon on the "Caprice" label in the Before screenshot below.

Before After
image image

How to set up and validate locally

  1. Check out this branch locally
  2. Ensure your user is using dark mode in the GDK
  3. Visit a project's MR list page
  4. Filter on a label that should have light text on a dark background and a label that should have dark text on a light background
  5. You should see that the x remove button icon on each label token matches the label text color
Edited by Chad Lavimoniere

Merge request reports