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.
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 |
---|---|
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 |
---|---|
How to set up and validate locally
- Check out this branch locally
- Ensure your user is using dark mode in the GDK
- Visit a project's MR list page
- 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
- You should see that the
x
remove button icon on each label token matches the label text color