Merge branch '38145-fix-scoped-label-text-color' into 'master'

Fix scoped label right text on update sidebar

Closes #38145

See merge request gitlab-org/gitlab!27171

app/assets/javascripts/labels_select.js

@@ -495,6 +495,10 @@ export default class LabelsSelect {
       ].join(''),
     );
 
+    const rightLabelTextColor = ({ label, escapeStr }) => {
+      return escapeStr(label.text_color === '#FFFFFF' ? label.color : label.text_color);
+    };
+
     const infoIconTemplate = _.template(
       [
         '<a href="<%= scopedLabelsDocumentationLink %>" class="gl-link gl-label-icon" target="_blank" rel="noopener">',
@@ -510,7 +514,7 @@ export default class LabelsSelect {
         spanOpenTag,
         '<%- label.title.slice(0, label.title.lastIndexOf("::")) %>',
         '</span>',
-        '<span class="gl-label-text" style="color: <%= escapeStr(label.color) %>;">',
+        '<span class="gl-label-text" style="color: <%= rightLabelTextColor({ label, escapeStr }) %>;">',
         '<%- label.title.slice(label.title.lastIndexOf("::") + 2) %>',
         '</span>',
         '</a>',
@@ -536,7 +540,7 @@ export default class LabelsSelect {
         '<% _.each(labels, function(label){ %>',
         '<% if (isScopedLabel(label) && enableScopedLabels) { %>',
         '<span class="d-inline-block position-relative scoped-label-wrapper">',
-        '<%= scopedLabelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, infoIconTemplate, scopedLabelsDocumentationLink, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>',
+        '<%= scopedLabelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, rightLabelTextColor, infoIconTemplate, scopedLabelsDocumentationLink, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>',
         '</span>',
         '<% } else { %>',
         '<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, tooltipTitleTemplate, escapeStr, linkAttrs: "" }) %>',
@@ -548,6 +552,7 @@ export default class LabelsSelect {
     return tpl({
       ...tplData,
       labelTemplate,
+      rightLabelTextColor,
       infoIconTemplate,
       scopedLabelTemplate,
       tooltipTitleTemplate,

app/assets/stylesheets/pages/issuable.scss

@@ -158,10 +158,6 @@
   a:not(.btn) {
     color: inherit;
 
-    .gl-label-text:hover {
-      color: inherit;
-    }
-
     &:hover {
       color: $blue-800;
 

spec/frontend/labels_select_spec.js

@@ -23,6 +23,16 @@ const mockScopedLabels = [
   },
 ];
 
+const mockScopedLabels2 = [
+  {
+    id: 28,
+    title: 'Foo::Bar2',
+    description: 'Foobar2',
+    color: '#FFFFFF',
+    text_color: '#000000',
+  },
+];
+
 describe('LabelsSelect', () => {
   describe('getLabelTemplate', () => {
     describe('when normal label is present', () => {
@@ -108,11 +118,45 @@ describe('LabelsSelect', () => {
         expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
           `background-color: ${label.color}; color: ${label.text_color};`,
         );
+        expect(
+          $labelEl
+            .find('span.gl-label-text')
+            .last()
+            .attr('style'),
+        ).toBe(`color: ${label.color};`);
       });
 
       it('generated label item has a badge class', () => {
         expect($labelEl.find('span').hasClass('gl-label-text')).toEqual(true);
       });
     });
+
+    describe('when scoped label is present, with text color not white', () => {
+      const label = mockScopedLabels2[0];
+      let $labelEl;
+
+      beforeEach(() => {
+        $labelEl = $(
+          LabelsSelect.getLabelTemplate({
+            labels: mockScopedLabels2,
+            issueUpdateURL: mockUrl,
+            enableScopedLabels: true,
+            scopedLabelsDocumentationLink: 'docs-link',
+          }),
+        );
+      });
+
+      it('generated label item template has correct label styles', () => {
+        expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
+          `background-color: ${label.color}; color: ${label.text_color};`,
+        );
+        expect(
+          $labelEl
+            .find('span.gl-label-text')
+            .last()
+            .attr('style'),
+        ).toBe(`color: ${label.text_color};`);
+      });
+    });
   });
 });