Merge branch '228698-dark-mode-labels-text-not-always-visible' into 'master'

Dark mode - Fix edit scoped labels

See merge request gitlab-org/gitlab!39166

app/assets/javascripts/labels_select.js

@@ -477,13 +477,11 @@ export default class LabelsSelect {
 
     const linkOpenTag =
       '<a href="<%- issueUpdateURL.slice(0, issueUpdateURL.lastIndexOf("/")) %>?label_name[]=<%- encodeURIComponent(label.title) %>" class="gl-link gl-label-link has-tooltip" <%= linkAttrs %> title="<%= tooltipTitleTemplate({ label, isScopedLabel, enableScopedLabels, escapeStr }) %>">';
-    const spanOpenTag =
-      '<span class="gl-label-text" style="background-color: <%= escapeStr(label.color) %>; color: <%= escapeStr(label.text_color) %>;">';
     const labelTemplate = template(
       [
         '<span class="gl-label">',
         linkOpenTag,
-        spanOpenTag,
+        '<span class="gl-label-text <%= labelTextClass({ label, escapeStr }) %>" style="background-color: <%= escapeStr(label.color) %>;">',
         '<%- label.title %>',
         '</span>',
         '</a>',
@@ -491,18 +489,24 @@ export default class LabelsSelect {
       ].join(''),
     );
 
-    const rightLabelTextColor = ({ label, escapeStr }) => {
-      return escapeStr(label.text_color === '#FFFFFF' ? label.color : label.text_color);
+    const labelTextClass = ({ label, escapeStr }) => {
+      return escapeStr(
+        label.text_color === '#FFFFFF' ? 'gl-label-text-light' : 'gl-label-text-dark',
+      );
+    };
+
+    const rightLabelTextClass = ({ label, escapeStr }) => {
+      return escapeStr(label.text_color === '#333333' ? labelTextClass({ label, escapeStr }) : '');
     };
 
     const scopedLabelTemplate = template(
       [
         '<span class="gl-label gl-label-scoped" style="color: <%= escapeStr(label.color) %>; --label-inset-border: inset 0 0 0 2px <%= escapeStr(label.color) %>;">',
         linkOpenTag,
-        spanOpenTag,
+        '<span class="gl-label-text <%= labelTextClass({ label, escapeStr }) %>" style="background-color: <%= escapeStr(label.color) %>;">',
         '<%- label.title.slice(0, label.title.lastIndexOf("::")) %>',
         '</span>',
-        '<span class="gl-label-text" style="color: <%= rightLabelTextColor({ label, escapeStr }) %>;">',
+        '<span class="gl-label-text <%= rightLabelTextClass({ label, escapeStr }) %>">',
         '<%- label.title.slice(label.title.lastIndexOf("::") + 2) %>',
         '</span>',
         '</a>',
@@ -526,9 +530,9 @@ export default class LabelsSelect {
       [
         '<% labels.forEach(function(label){ %>',
         '<% if (isScopedLabel(label) && enableScopedLabels) { %>',
-        '<%= scopedLabelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, rightLabelTextColor, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>',
+        '<%= scopedLabelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, labelTextClass, rightLabelTextClass, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>',
         '<% } else { %>',
-        '<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, tooltipTitleTemplate, escapeStr, linkAttrs: "" }) %>',
+        '<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, labelTextClass, tooltipTitleTemplate, escapeStr, linkAttrs: "" }) %>',
         '<% } %>',
         '<% }); %>',
       ].join(''),
@@ -537,7 +541,8 @@ export default class LabelsSelect {
     return tpl({
       ...tplData,
       labelTemplate,
-      rightLabelTextColor,
+      labelTextClass,
+      rightLabelTextClass,
       scopedLabelTemplate,
       tooltipTitleTemplate,
       isScopedLabel,

ee/changelogs/unreleased/228698-dark-mode-labels-text-not-always-visible.yml

+---
+title: Dark mode - Fix edit scoped labels
+merge_request: 39166
+author:
+type: fixed

spec/frontend/labels_select_spec.js

@@ -29,7 +29,7 @@ const mockScopedLabels2 = [
     title: 'Foo::Bar2',
     description: 'Foobar2',
     color: '#FFFFFF',
-    text_color: '#000000',
+    text_color: '#333333',
   },
 ];
 
@@ -61,10 +61,11 @@ describe('LabelsSelect', () => {
         expect($labelEl.find('a').attr('title')).toBe(label.description);
       });
 
-      it('generated label item template has correct label styles', () => {
+      it('generated label item template has correct label styles and classes', () => {
         expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
-          `background-color: ${label.color}; color: ${label.text_color};`,
+          `background-color: ${label.color};`,
         );
+        expect($labelEl.find('span.gl-label-text')).toHaveClass('gl-label-text-light');
       });
 
       it('generated label item has a gl-label-text class', () => {
@@ -100,16 +101,12 @@ describe('LabelsSelect', () => {
         expect($labelEl.find('a').attr('data-html')).toBe('true');
       });
 
-      it('generated label item template has correct label styles', () => {
+      it('generated label item template has correct label styles and classes', () => {
         expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
-          `background-color: ${label.color}; color: ${label.text_color};`,
+          `background-color: ${label.color};`,
         );
-        expect(
-          $labelEl
-            .find('span.gl-label-text')
-            .last()
-            .attr('style'),
-        ).toBe(`color: ${label.color};`);
+        expect($labelEl.find('span.gl-label-text')).toHaveClass('gl-label-text-light');
+        expect($labelEl.find('span.gl-label-text').last()).not.toHaveClass('gl-label-text-light');
       });
 
       it('generated label item has a badge class', () => {
@@ -131,16 +128,12 @@ describe('LabelsSelect', () => {
         );
       });
 
-      it('generated label item template has correct label styles', () => {
+      it('generated label item template has correct label styles and classes', () => {
         expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
-          `background-color: ${label.color}; color: ${label.text_color};`,
+          `background-color: ${label.color};`,
         );
-        expect(
-          $labelEl
-            .find('span.gl-label-text')
-            .last()
-            .attr('style'),
-        ).toBe(`color: ${label.text_color};`);
+        expect($labelEl.find('span.gl-label-text')).toHaveClass('gl-label-text-dark');
+        expect($labelEl.find('span.gl-label-text').last()).toHaveClass('gl-label-text-dark');
       });
     });
   });