Add latest changes from gitlab-org/gitlab@master

1 files changed, 15 insertions, 10 deletions

diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index 605cc4117a3..5443763539c 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/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,