Merge branch 'fix-scoped-labels-border' into 'master'

Fix scoped labels border

See merge request gitlab-org/gitlab!34481

app/assets/javascripts/labels_select.js

@@ -497,7 +497,7 @@ export default class LabelsSelect {
 
     const scopedLabelTemplate = template(
       [
-        '<span class="gl-label gl-label-scoped" style="color: <%= escapeStr(label.color) %>;">',
+        '<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,
         '<%- label.title.slice(0, label.title.lastIndexOf("::")) %>',
@@ -526,9 +526,7 @@ export default class LabelsSelect {
       [
         '<% labels.forEach(function(label){ %>',
         '<% if (isScopedLabel(label) && enableScopedLabels) { %>',
-        '<span class="d-inline-block position-relative scoped-label-wrapper">',
         '<%= scopedLabelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, rightLabelTextColor, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>',
-        '</span>',
         '<% } else { %>',
         '<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, tooltipTitleTemplate, escapeStr, linkAttrs: "" }) %>',
         '<% } %>',

app/assets/stylesheets/pages/issuable.scss

@@ -115,20 +115,6 @@
     font-size: 0;
     margin-bottom: -5px;
   }
-
-  .scoped-label-wrapper {
-    > a {
-      max-width: 100%;
-    }
-
-    .color-label {
-      padding-right: $gl-padding-24;
-    }
-
-    .scoped-label {
-      right: 12px;
-    }
-  }
 }
 
 .assignee {

app/assets/stylesheets/pages/labels.scss

@@ -310,7 +310,6 @@
     width: 200px;
     flex-shrink: 0;
 
-    .scoped-label-wrapper,
     .gl-label {
       line-height: $gl-line-height;
     }
@@ -415,40 +414,6 @@
   color: $indigo-300;
 }
 
-.scoped-label-wrapper {
-  max-width: 100%;
-  vertical-align: top;
-
-  .badge {
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-  }
-
-  &.label-link .color-label a {
-    color: inherit;
-  }
-
-  .color-label {
-    padding-right: $gl-padding-24;
-    max-width: 100%;
-  }
-
-  .scoped-label {
-    position: absolute;
-    top: 4px;
-    right: 8px;
-    padding: 0;
-    margin: 0;
-    line-height: $gl-line-height;
-  }
-
-  &.board-label {
-    .scoped-label {
-      top: 1px;
-    }
-  }
-}
-
 .gl-label-scoped {
   box-shadow: 0 0 0 2px currentColor inset;
 
@@ -456,29 +421,3 @@
     box-shadow: 0 0 0 1px inset;
   }
 }
-
-// Label inside title of Delete Label Modal
-.modal-header .page-title {
-  .scoped-label-wrapper {
-    .scoped-label {
-      line-height: 20px;
-    }
-
-    span.color-label {
-      padding-right: $gl-padding-24;
-    }
-  }
-}
-
-// Don't hide the overflow in system messages
-.system-note-message,
-.issuable-details,
-.md-preview-holder,
-.referenced-commands,
-.note-body {
-  .scoped-label-wrapper {
-    .badge {
-      overflow: initial;
-    }
-  }
-}

ee/app/helpers/ee/labels_helper.rb

@@ -28,11 +28,11 @@ module EE
       wrapper_classes = %w(gl-label gl-label-scoped)
       wrapper_classes << 'gl-label-sm' if small
 
-      <<~HTML.chomp.html_safe
-        <span class="d-inline-block position-relative scoped-label-wrapper">
-          <span class="#{wrapper_classes.join(' ')}" style="color: #{label.color}">#{label_html}</span>
-        </span>
-      HTML
+      border_width = small ? '1px' : '2px'
+
+      html = %(<span class="#{wrapper_classes.join(' ')}" style="--label-inset-border: inset 0 0 0 #{border_width} #{label.color}; color: #{label.color}">#{label_html}</span>).html_safe
+
+      html
     end
 
     def label_tooltip_title(label)

lib/gitlab/markdown_cache.rb

@@ -3,7 +3,7 @@
 module Gitlab
   module MarkdownCache
     # Increment this number every time the renderer changes its output
-    CACHE_COMMONMARK_VERSION        = 21
+    CACHE_COMMONMARK_VERSION        = 22
     CACHE_COMMONMARK_VERSION_START  = 10
 
     BaseError = Class.new(StandardError)