Use gitlab-ui classes for labels

- Style fixes
- Restructure scoped label
- Remove label render on delete label modal

app/assets/stylesheets/framework/modal.scss

@@ -13,15 +13,14 @@
 
   .page-title,
   .modal-title {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
     .modal-title-with-label span {
       vertical-align: middle;
       display: inline-block;
     }
-
-    .gl-label {
-      vertical-align: top;
-      line-height: 16px;
-    }
   }
 
   .modal-title {

app/assets/stylesheets/pages/issuable.scss

@@ -97,6 +97,8 @@
     .color-label {
       padding: 4px $grid-size;
       border-radius: $label-border-radius;
+      margin-right: 4px;
+      margin-bottom: 4px;
     }
 
     &:hover .color-label {
@@ -123,8 +125,7 @@
       padding-right: $gl-padding-24;
     }
 
-    .scoped-label,
-    .gl-label-icon {
+    .scoped-label {
       right: 12px;
     }
   }
@@ -166,8 +167,11 @@
     }
   }
 
-  .gl-label .gl-label-link:hover,
-  .gl-label + .gl-label-icon:hover {
+  a.gl-label-icon {
+    color: $gray-500;
+  }
+
+  .gl-label .gl-label-link:hover {
     text-decoration: none;
     color: inherit;
 
@@ -176,6 +180,11 @@
     }
   }
 
+  .gl-label .gl-label-icon:hover {
+    text-decoration: none;
+    color: $gray-500;
+  }
+
   .btn-link {
     color: inherit;
     outline: none;
@@ -825,6 +834,10 @@
           }
         }
       }
+
+      .gl-label-icon {
+        color: $gray-500;
+      }
     }
 
     @media(max-width: map-get($grid-breakpoints, lg)-1) {

app/assets/stylesheets/pages/labels.scss

@@ -310,15 +310,13 @@
     width: 150px;
     flex-shrink: 0;
 
+    .scoped-label-wrapper,
     .gl-label {
-      max-width: 100%;
+      line-height: $gl-line-height;
+    }
 
-      .gl-label-text {
-        text-overflow: ellipsis;
-        max-width: 100%;
-        overflow: hidden;
-        white-space: nowrap;
-      }
+    .gl-label-scoped .gl-label-text:last-of-type {
+      padding-right: 22px;
     }
   }
 
@@ -424,14 +422,6 @@
 .scoped-label-wrapper {
   max-width: 100%;
   vertical-align: top;
-  line-height: 16px;
-
-  .gl-link.gl-label-icon {
-    color: $gray-500;
-    display: inline-flex;
-    align-items: center;
-    margin-left: 0.25rem;
-  }
 
   .badge {
     text-overflow: ellipsis;
@@ -449,17 +439,13 @@
 
   .scoped-label {
     position: absolute;
-    top: 6px;
+    top: 4px;
     right: 8px;
     padding: 0;
     margin: 0;
     line-height: $gl-line-height;
   }
 
-  .gl-label-scoped-text {
-    padding-right: 22px;
-  }
-
   &.board-label {
     .scoped-label {
       top: 1px;
@@ -467,10 +453,6 @@
   }
 }
 
-.gl-label-sm + .scoped-label {
-  top: 2px;
-}
-
 .gl-label-scoped {
   box-shadow: 0 0 0 2px currentColor inset;
 

app/assets/stylesheets/pages/milestone.scss

@@ -59,9 +59,19 @@ $status-box-line-height: 26px;
   }
 
   .issuable-row {
-    span a {
-      color: $gl-text-color;
-      word-wrap: break-word;
+    span {
+      a {
+        color: $gl-text-color;
+        word-wrap: break-word;
+      }
+
+      .gl-label-link {
+        color: inherit;
+      }
+
+      .gl-label-icon {
+        color: $gray-500;
+      }
     }
   }
 

app/helpers/labels_helper.rb

@@ -46,7 +46,7 @@ module LabelsHelper
     end
   end
 
-  def render_label(label, tooltip: true, link: nil, dataset: nil, small: false, wrapper_class: nil, wrapper_style: nil)
+  def render_label(label, tooltip: true, link: nil, dataset: nil, small: false, wrapper_class: nil, wrapper_style: nil, extra: nil)
     # if scoped label is used then EE wraps label tag with scoped label
     # doc link
     html = render_colored_label(label)
@@ -60,6 +60,8 @@ module LabelsHelper
       )
     end
 
+    html += extra.html_safe if extra
+
     wrapper_classes = Array.wrap(wrapper_class)
     wrapper_classes << 'gl-label'
     wrapper_classes << 'gl-label-sm' if small
@@ -136,7 +138,7 @@ module LabelsHelper
     end
 
     if (r + g + b) > 500
-      'gl-label-text-black'
+      'gl-label-text-dark'
     else
       'gl-label-text-light'
     end

app/views/shared/_delete_label_modal.html.haml

@@ -2,7 +2,7 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %h3.page-title Delete #{render_label(label, tooltip: false)} ?
+        %h3.page-title Delete label: #{label.name} ?
         %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
           %span{ "aria-hidden": true } ×
 

app/views/shared/boards/components/_board.html.haml

@@ -30,7 +30,6 @@
             @{{ list.assignee.username }}
 
           %gl-label{ "v-if" => " list.type === \"label\"",
-            ":id" => "list.label.id",
             ":background-color" => "list.label.color",
             ":title" => "list.label.title",
             ":description" => "list.label.description",

app/views/shared/boards/components/sidebar/_labels.html.haml

@@ -8,8 +8,7 @@
     %span.no-value{ "v-if" => "issue.labels && issue.labels.length === 0" }
       = _("None")
     %span{ "v-for" => "label in issue.labels" }
-      %gl-label{ ":id" => "label.id",
-        ":key" => "label.id",
+      %gl-label{ ":key" => "label.id",
         ":background-color" => "label.color",
         ":title" => "label.title",
         ":description" => "label.description",

ee/app/helpers/ee/labels_helper.rb

@@ -11,7 +11,7 @@ module EE
     def render_label(label, tooltip: true, link: nil, dataset: nil, small: false)
       return super unless label.scoped_label?
 
-      scoped_label_doc_wrapper(
+      scoped_label_wrapper(
         super(
           label,
           tooltip: tooltip,
@@ -19,7 +19,8 @@ module EE
           dataset: dataset,
           small: small,
           wrapper_class: 'gl-label-scoped',
-          wrapper_style: "color: #{label.color}"
+          wrapper_style: "color: #{label.color}",
+          extra: scoped_labels_doc_link(label)
         ),
         label
       )
@@ -39,13 +40,12 @@ module EE
         bg_color: label.color
       ) + render_partial_label(
         label, label_suffix: label_suffix,
-        label_name: label_name,
-        css_class: 'gl-label-scoped-text'
+        label_name: label_name
       )
     end
 
-    def scoped_label_doc_wrapper(link, label)
-      %(<span class="d-inline-block position-relative scoped-label-wrapper">#{link}#{scoped_labels_doc_link(label)}</span>).html_safe
+    def scoped_label_wrapper(link, label)
+      %(<span class="d-inline-block position-relative scoped-label-wrapper">#{link}</span>).html_safe
     end
 
     def label_tooltip_title(label)
@@ -84,13 +84,11 @@ module EE
       super + ['epics']
     end
 
-    private
-
     def scoped_labels_doc_link(label)
       content = %(<i class="fa fa-question-circle"></i>)
       help_url = ::Gitlab::Routing.url_helpers.help_page_url('user/project/labels.md', anchor: 'scoped-labels')
 
-      %(<a href="#{help_url}" class="label scoped-label gl-link gl-label-icon" target="_blank" rel="noopener">#{content}</a>)
+      %(<a href="#{help_url}" class="gl-link gl-label-icon" target="_blank" rel="noopener">#{content}</a>)
     end
   end
 end

ee/lib/ee/banzai/filter/label_reference_filter.rb

@@ -13,6 +13,8 @@ module EE
 
           if label.scoped_label? && parent && parent.feature_available?(:scoped_labels)
             presenter = label.present(issuable_parent: parent)
+            doc_link = ::LabelsHelper.scoped_labels_doc_link(label)
+            content = %(<span class="gl-label gl-label-scoped gl-label-sm" style="color: #{label.color}">#{link}#{doc_link}</span>)
             content = ::LabelsHelper.scoped_label_wrapper(content, presenter)
           end
 

ee/spec/helpers/ee/labels_helper_spec.rb

@@ -15,7 +15,7 @@ describe LabelsHelper do
 
       it 'includes link to scoped labels documentation' do
         scoped = scoped_label.title.split('::')
-        expect(render_label(scoped_label)).to match(%r(<span.+><span.+><span.+>#{scoped.first}</span><span.+>#{scoped.last}</span></span><a.+>.*question-circle.*</a></span>$))
+        expect(render_label(scoped_label)).to match(%r(<span.+><span.+><span.+>#{scoped.first}</span><span.+>#{scoped.last}</span><a.+>.*question-circle.*</a></span></span>$))
       end
 
       it 'does not include link to scoped label documentation for common labels' do

ee/spec/lib/banzai/filter/label_reference_filter_spec.rb

@@ -18,7 +18,7 @@ describe Banzai::Filter::LabelReferenceFilter do
       doc = reference_filter("See #{scoped_label.to_reference}")
       scoped = scoped_label.name.split('::')
 
-      expect(doc.to_html).to match(%r(<span.+><a.+><span.+>#{scoped.first}</span><span.+>#{scoped.last}</span></a></span><a.+>.*question-circle.*</a>))
+      expect(doc.to_html).to match(%r(<span.+><a.+><span.+>#{scoped.first}</span><span.+>#{scoped.last}</span></a><a.+>.*question-circle.*</a></span>))
     end
 
     it 'does not include link to scoped documentation for common labels' do