Skip to content

WIP: Fix scoped label text color in dark mode

euko requested to merge fix-scoped-label-text-in-dark-mode into master

What does this MR do?

1. Updates gl-label related attributes in labels_helper.rb (both ce/ee)

The updates make sure that the rendered HTML for labels in the backend are close to the reference renders for labels in gitlab-ui. The discrepancies between the rendered HTMLs make it impossible to maintain/update stylings and cause regressions like #270389 (closed).

How `gl-label` should be rendered in HTML according to gitlab-ui reference
  <span class="gl-label gl-label-scoped gl-label-text-light" style="--label-background-color:#5CB85C; --label-inset-border:inset 0 0 0 2px #5CB85C;">
  <a href="#" class="gl-link gl-label-link">
   <span class="gl-label-text">Basic</span>
   <span class="gl-label-text-scoped">Label</span>
  </a>
</span>
An example of a rendered HTML cached in the backend (before this MR)
<span class="gl-label gl-label-scoped gl-label-sm" style="color: #5CB85C;">
  <a href="#" data-html="true" title="<span class='font-weight-bold scoped-label-tooltip-title'>Scoped label</span><br />" class="gfm gfm-label has-tooltip gl-link gl-label-link">
    <span class="gl-label-text gl-label-text-light" data-html="true" style="background-color: #5CB85C;">stage</span>
    <span class="gl-label-text-scoped " data-html="true">plan</span>
  </a>
</span>
An example of a rendered HTML cached in the backend (after this MR)
<span class="gl-label gl-label-text-light gl-label-sm gl-label-scoped" style="--label-inset-border: inset 0 0 0 1px #5CB85C;--label-background-color:#5CB85C;">
  <a href="#" data-html="true" title="<span class='font-weight-bold scoped-label-tooltip-title'>Scoped label</span><br />" class="gfm gfm-label has-tooltip gl-link gl-label-link">
    <span class="gl-label-text" data-html="true">stage</span>
    <span class="gl-label-text-scoped" data-html="true">plan</span>
  </a>
</span>

2. Updates "_dark.scss" to correctly display label texts both in normal and dark mode

This update fixes #270389 (closed).


To see the changes in this MR, you must invalidate markdown cache to see the changes in discussion notes!

https://docs.gitlab.com/ee/administration/invalidate_markdown_cache.html#invalidate-markdown-cache

without invalidating cache after invalidating cache
image image

Screenshots (strongly suggested)

for dark mode regression | location | before | after| | --- | --- | --- | | issue list | image | image | | issue list (dark mode) | image | image| | issue show | image | image | | issue show (dark mode) | image | image |

note:

Without the fix in this MR, the color of scoped label text also changes depending on what other labels are present - take for an example, the green scoped label in this screenshot:

image

"scope2" label's text color is wrong in this screenshot but appears correctly in the above screenshot for "before: issue show(dark mode)"

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

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
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team

~bug frontend ~darkmode devopsplan issues sectiondev

Edited by euko

Merge request reports