Skip to content

fix(GlLabel): Fix visibility of underline on hover and focus state

What does this MR do?

Current This MR
before after
Note: I have noticed that on the Figma font and underline color for the right side text portion is always #1F1F1F (gray-950). But currently, the right side text portion font color is changing based on the background color of the left side text portion. So, in my fix color of the underline also changing based on the font color as a default behavior.

In the issue told to fix the underline on hover but it's not working on also in focus state. So, I have fixed that also.

Reason for this bug: Underline colors by defaults take from the font color of the text. When the color of the text on the left side turns into white, the underline color becomes also white on for the right side text portion too and it becomes invisible. We have two separate classes in the <a>..</a> tag. One for the left side and another for the right side text portion. Because we are not specified which class to apply which style this problem is occurring.

My solution: My solution is to override the CSS color which is currently applying for the right side too. By adding @include gl-text-decoration-underline property for the right side (in gl-label-text-scoped class) we can solve the problem without changing the logic of getting font color according to the background.

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

Accessibility

If this MR adds or modifies a component, take a few moments to review the following:

  • All actions and functionality can be done with a keyboard.
  • Links, buttons, and controls have a visible focus state.
  • All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
  • Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
  • Color combinations have sufficient contrast.
Edited by Brandon Labuschagne

Merge request reports