WIP: Fix scoped label text color in dark mode
What does this MR do?
gl-label
related attributes in labels_helper.rb
(both ce/ee)
1. Updates 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 |
---|---|
Screenshots (strongly suggested)
for dark mode regression
| location | before | after| | --- | --- | --- | | issue list | | | | issue list (dark mode) | | | | issue show | | | | issue show (dark mode) | | |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:
"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
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
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