Skip to content

fix(GlLabel): Fix GlLabel close button

Coung Ngo requested to merge cngo-fix-gllabel-close-button into master

What does this MR do?

This MR fixes the GlLabel close icon. Since the close icon was wrapped in the label link, clicking on it redirects the page to the label link. This MR:

  • Prevents clicking the close icon from redirecting to the label link
  • Corrects the close button text and background colours including when hovering
  • Refactors GlLabel to simplify the logic and to accommodate fixing the above two points

Video going through various states of the label:

Screen_Recording_2020-09-17_at_7.18.24_pm

Video showing how it looks in the issue sidebar:

Screen_Recording_2020-09-18_at_2.13.01_pm

Table of the different colour states:

bg color scoped span1 text span1 bg span2 text span2 bg button text button bg button text hover button bg hover
light no black bgcolor black bgcolor black bgcolor bgcolor black
dark no white bgcolor white bgcolor white bgcolor bgcolor white
light yes black bgcolor black white black white white bgcolor
dark yes white bgcolor bgcolor white bgcolor white white bgcolor

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.
Edited by Coung Ngo

Merge request reports