Update labels to use gitlab-ui css in haml

- Refactor render_label helper
- Support for scoped labels
- Support for small labels
- Impacts issue sidebar, issues list, labels list, epic, milestones
- Move tooltip from span to link

app/assets/javascripts/boards/components/board.js

 import $ from 'jquery';
 import Sortable from 'sortablejs';
 import Vue from 'vue';
-import { GlButtonGroup, GlButton, GlTooltip } from '@gitlab/ui';
+import { GlButtonGroup, GlButton, GlLabel, GlTooltip } from '@gitlab/ui';
 import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
 import { s__, __, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -14,6 +14,7 @@ import IssueCount from './issue_count.vue';
 import boardsStore from '../stores/boards_store';
 import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_default_options';
 import { ListType } from '../constants';
+import { isScopedLabel } from '~/lib/utils/common_utils';
 
 export default Vue.extend({
   components: {
@@ -24,6 +25,7 @@ export default Vue.extend({
     GlButtonGroup,
     IssueCount,
     GlButton,
+    GlLabel,
     GlTooltip,
   },
   directives: {
@@ -95,6 +97,9 @@ export default Vue.extend({
       // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
       return `boards.${this.boardId}.${this.list.type}.${this.list.id}`;
     },
+    helpLink() {
+      return boardsStore.scopedLabels.helpLink;
+    },
   },
   watch: {
     filter: {
@@ -145,6 +150,10 @@ export default Vue.extend({
     }
   },
   methods: {
+    showScopedLabels(label) {
+      return boardsStore.scopedLabels.enabled && isScopedLabel(label);
+    },
+
     showNewIssueForm() {
       this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
     },

app/assets/javascripts/boards/components/board_sidebar.js

@@ -2,6 +2,7 @@
 
 import $ from 'jquery';
 import Vue from 'vue';
+import { GlLabel } from '@gitlab/ui';
 import Flash from '~/flash';
 import { sprintf, __ } from '~/locale';
 import Sidebar from '~/right_sidebar';
@@ -22,6 +23,7 @@ export default Vue.extend({
   components: {
     AssigneeTitle,
     Assignees,
+    GlLabel,
     SidebarEpicsSelect: () =>
       import('ee_component/sidebar/components/sidebar_item_epics_select.vue'),
     RemoveBtn,
@@ -67,6 +69,9 @@ export default Vue.extend({
     selectedLabels() {
       return this.hasLabels ? this.issue.labels.map(l => l.title).join(',') : '';
     },
+    helpLink() {
+      return boardsStore.scopedLabels.helpLink;
+    },
   },
   watch: {
     detail: {
@@ -147,19 +152,5 @@ export default Vue.extend({
     showScopedLabels(label) {
       return boardsStore.scopedLabels.enabled && isScopedLabel(label);
     },
-    splitScopedLabel(label) {
-      return label.title.split('::');
-    },
-    scopedLabelScope(label) {
-      const splitLabel = this.splitScopedLabel(label)
-      return splitLabel[0];
-    },
-    scopedValue(label) {
-      const splitLabel = this.splitScopedLabel(label)
-      return splitLabel[1];
-    },
-    helpLink() {
-      return boardsStore.scopedLabels.helpLink;
-    },
   },
 });

app/assets/stylesheets/framework/modal.scss

@@ -18,10 +18,9 @@
       display: inline-block;
     }
 
-    .color-label {
-      font-size: $gl-font-size;
-      padding: $gl-vert-padding $label-padding-modal;
-      vertical-align: middle;
+    .gl-label {
+      vertical-align: top;
+      line-height: 16px;
     }
   }
 

app/assets/stylesheets/pages/issuable.scss

@@ -86,17 +86,6 @@
 }
 
 .issuable-show-labels {
-  .gl-label-scoped {
-    border-style: solid;
-    border-width: 2px;
-    &.gl-label-sm {
-      border-width: 1px;
-    }
-    .gl-label-text:last-child {
-      padding-right: 22px;
-    }
-  }
-
   .gl-label {
     margin-bottom: 5px;
     margin-right: 5px;
@@ -134,7 +123,8 @@
       padding-right: $gl-padding-24;
     }
 
-    .scoped-label {
+    .scoped-label,
+    .gl-label-icon {
       right: 12px;
     }
   }
@@ -173,9 +163,17 @@
       .avatar {
         border-color: rgba($gray-normal, 0.2);
       }
-
     }
+  }
+
+  .gl-label .gl-label-link:hover,
+  .gl-label + .gl-label-icon:hover {
+    text-decoration: none;
+    color: inherit;
 
+    .gl-label-text:last-of-type {
+      text-decoration: underline;
+    }
   }
 
   .btn-link {
@@ -814,9 +812,17 @@
 
       a {
         color: $gl-text-color;
+      }
 
-        .fa {
-          color: $gl-text-color-secondary;
+      .gl-label-link {
+        color: inherit;
+
+        &:hover {
+          text-decoration: none;
+
+          .gl-label-text:last-of-type {
+            text-decoration: underline;
+          }
         }
       }
     }

app/assets/stylesheets/pages/labels.scss

@@ -127,6 +127,11 @@
   .color-label {
     padding: $gl-padding-4 $grid-size;
   }
+
+  .prepend-description-left {
+    vertical-align: top;
+    line-height: 24px;
+  }
 }
 
 .prioritized-labels {
@@ -305,10 +310,15 @@
     width: 150px;
     flex-shrink: 0;
 
-    .badge {
-      overflow: hidden;
-      text-overflow: ellipsis;
+    .gl-label {
       max-width: 100%;
+
+      .gl-label-text {
+        text-overflow: ellipsis;
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+      }
     }
   }
 
@@ -414,6 +424,14 @@
 .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;
@@ -431,13 +449,17 @@
 
   .scoped-label {
     position: absolute;
-    top: 4px;
+    top: 6px;
     right: 8px;
     padding: 0;
     margin: 0;
     line-height: $gl-line-height;
   }
 
+  .gl-label-scoped-text {
+    padding-right: 22px;
+  }
+
   &.board-label {
     .scoped-label {
       top: 1px;
@@ -445,10 +467,23 @@
   }
 }
 
+.gl-label-sm + .scoped-label {
+  top: 2px;
+}
+
+.gl-label-scoped {
+  box-shadow: 0 0 0 2px currentColor inset;
+
+  &.gl-label-sm {
+    box-shadow: 0 0 0 1px inset;
+  }
+}
+
 // Label inside title of Delete Label Modal
 .modal-header .page-title {
   .scoped-label-wrapper {
-    .scoped-label {
+    .scoped-label,
+    .gl-label-icon {
       line-height: 20px;
     }
 

app/assets/stylesheets/pages/notes.scss

@@ -283,7 +283,7 @@ $note-form-margin-left: 72px;
         text-transform: lowercase;
       }
 
-      a {
+      a:not(.gl-link) {
         color: $blue-600;
       }
 
@@ -671,6 +671,16 @@ $note-form-margin-left: 72px;
   a:hover {
     text-decoration: underline;
   }
+
+  .gl-label-link:hover,
+  .gl-label-icon:hover {
+    text-decoration: none;
+    color: inherit;
+
+    .gl-label-text:last-of-type {
+      text-decoration: underline;
+    }
+  }
 }
 
 /**

app/helpers/labels_helper.rb

@@ -36,35 +36,53 @@ module LabelsHelper
   #   link_to_label(label) { "My Custom Label Text" }
   #
   # Returns a String
-  def link_to_label(label, type: :issue, tooltip: true, css_class: nil, &block)
+  def link_to_label(label, type: :issue, tooltip: true, small: false, &block)
     link = label.filter_path(type: type)
 
     if block_given?
-      link_to link, class: css_class, &block
+      link_to link, class: 'gl-link gl-label-link', &block
     else
-      render_label(label, tooltip: tooltip, link: link, css: css_class)
+      render_label(label, tooltip: tooltip, link: link, small: small)
     end
   end
 
-  def render_label(label, tooltip: true, link: nil, css: nil, dataset: nil)
+  def render_label(label, tooltip: true, link: nil, dataset: nil, small: false)
     # if scoped label is used then EE wraps label tag with scoped label
     # doc link
-    html = render_colored_label(label, tooltip: tooltip)
-    html = link_to(html, link, class: css, data: dataset) if link
+    html = render_colored_label(label)
+
+    if link
+      html = link_to(
+        html,
+        link,
+        class: label_css_classes(tooltip),
+        data: label_dataset(label, dataset, tooltip)
+      )
+    end
+
+    wrapper_class = "gl-label"
+    wrapper_class += " gl-label-sm" if small
 
-    html
+    content_tag(:span, html.html_safe, class: wrapper_class)
   end
 
-  def render_colored_label(label, label_suffix: '', tooltip: true, title: nil)
-    text_color = text_color_for_bg(label.color)
-    title ||= tooltip ? label_tooltip_title(label) : label.name
+  def render_colored_label(label, label_suffix: '')
+    render_partial_label(
+      label,
+      label_suffix: label_suffix,
+      label_name: label.name,
+      css_class: text_color_class_for_bg(label.color),
+      bg_color: label.color
+    )
+  end
 
+  def render_partial_label(label, label_suffix: '', label_name: nil, css_class: nil, bg_color: nil)
     # Intentionally not using content_tag here so that this method can be called
     # by LabelReferenceFilter
-    span = %(<span class="badge color-label #{"has-tooltip" if tooltip}" ) +
-      %(data-html="true" style="background-color: #{label.color}; color: #{text_color}" ) +
-      %(title="#{ERB::Util.html_escape_once(title)}" data-container="body">) +
-      %(#{ERB::Util.html_escape_once(label.name)}#{label_suffix}</span>)
+    span = %(<span class="gl-label-text #{css_class}" ) +
+      %(data-html="true" #{"style=\"background-color: #{bg_color}\"" if bg_color} ) +
+      %(data-container="body">) +
+      %(#{ERB::Util.html_escape_once(label_name)}#{label_suffix}</span>)
 
     span.html_safe
   end
@@ -109,6 +127,20 @@ module LabelsHelper
     end
   end
 
+  def text_color_class_for_bg(bg_color)
+    if bg_color.length == 4
+      r, g, b = bg_color[1, 4].scan(/./).map { |v| (v * 2).hex }
+    else
+      r, g, b = bg_color[1, 7].scan(/.{2}/).map(&:hex)
+    end
+
+    if (r + g + b) > 500
+      'gl-label-text-black'
+    else
+      'gl-label-text-light'
+    end
+  end
+
   def text_color_for_bg(bg_color)
     if bg_color.length == 4
       r, g, b = bg_color[1, 4].scan(/./).map { |v| (v * 2).hex }
@@ -246,6 +278,21 @@ module LabelsHelper
   def issuable_types
     ['issues', 'merge requests']
   end
+
+  private
+
+  def label_dataset(label, dataset, tooltip)
+    dataset ||= {}
+    dataset.merge!(html: true, title: label_tooltip_title(label)) if tooltip
+  end
+
+  def label_css_classes(tooltip)
+    css = 'gl-link gl-label-link'
+    tooltip ? "#{css} has-tooltip" : css
+  end
+
+  # Required for Banzai::Filter::LabelReferenceFilter
+  module_function :render_colored_label, :text_color_for_bg, :escape_once, :label_tooltip_title
 end
 
 LabelsHelper.prepend_if_ee('EE::LabelsHelper')

app/views/projects/issues/_issue.html.haml

@@ -38,7 +38,7 @@
           - if issue.labels.any?
              
             - presented_labels_sorted_by_title(issue.labels, issue.project).each do |label|
-              = link_to_label(label, css_class: 'label-link')
+              = link_to_label(label, small: true)
 
           = render_if_exists "projects/issues/issue_weight", issue: issue
 

app/views/projects/merge_requests/_merge_request.html.haml

@@ -35,7 +35,7 @@
         - if merge_request.labels.any?
            
           - presented_labels_sorted_by_title(merge_request.labels, merge_request.project).each do |label|
-            = link_to_label(label, type: :merge_request, css_class: 'label-link')
+            = link_to_label(label, type: :merge_request, small: true)
 
     .issuable-meta
       %ul.controls.d-flex.align-items-end

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

@@ -29,11 +29,15 @@
             ":title" => '(list.assignee && list.assignee.username || "")' }
             @{{ list.assignee.username }}
 
-          %span.has-tooltip.badge.color-label.title.d-inline-block.mw-100.text-truncate.align-middle{ "v-if": "list.type === \"label\"",
-            ":title" => '(list.label ? list.label.description : "")',
-            data: { container: "body", placement: "bottom" },
-            ":style" => "{ backgroundColor: (list.label && list.label.color ? list.label.color : null), color: (list.label && list.label.textColor ? list.label.textColor : \"#2e2e2e\") }" }
-            {{ list.title }}
+          %gl-label{ "v-if" => " list.type === \"label\"",
+            ":id" => "list.label.id",
+            ":background-color" => "list.label.color",
+            ":title" => "list.label.title",
+            ":description" => "list.label.description",
+            "tooltipPlacement" => "bottom",
+            ":size" => '(!list.isExpanded ? "sm" : "")',
+            ":scoped" => "showScopedLabels(list.label)",
+            ":scoped-labels-documentation-link" => "helpLink" }
 
         - if can?(current_user, :admin_list, current_board_parent)
           %board-delete{ "inline-template" => true,

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

@@ -8,19 +8,13 @@
     %span.no-value{ "v-if" => "issue.labels && issue.labels.length === 0" }
       = _("None")
     %span{ "v-for" => "label in issue.labels" }
-      %span.d-inline-block.position-relative.scoped-label-wrapper{ "v-if" => "showScopedLabels(label)" }
-        %span.gl-label.gl-label-scoped{ ":style" => "{ borderColor: label.color }" }
-          %a.gl-link.gl-label-link{ href: '#' }
-            %span.gl-label-text{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
-              {{ scopedLabelScope(label) }}
-            %span.gl-label-text{ ":style" => "{ backgroundColor: label.textColor, color: label.Color }" }
-              {{ scopedValue(label) }}
-          %a.label.scoped-label.gl-link.gl-label-icon{ ":href" => "helpLink()" }
-            %i.fa.fa-question-circle
-      %span.gl-label{ "v-else" => true }
-        %a.gl-link.gl-label-link{ href: "#" }
-          %span.gl-label-text{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
-            {{ label.title }}
+      %gl-label{ ":id" => "label.id",
+        ":key" => "label.id",
+        ":background-color" => "label.color",
+        ":title" => "label.title",
+        ":description" => "label.description",
+        ":scoped" => "showScopedLabels(label)",
+        ":scoped-labels-documentation-link" => "helpLink" }
 
   - if can_admin_issue?
     .selectbox

app/views/shared/milestones/_issuable.html.haml

@@ -21,7 +21,7 @@
       %span.issuable-number= issuable.to_reference
 
     - labels.each do |label|
-      = render_label(label.present(issuable_subject: project), link: polymorphic_path(issuable_type_args, { milestone_title: @milestone.title, label_name: label.title, state: 'all' }))
+      = render_label(label.present(issuable_subject: project), link: polymorphic_path(issuable_type_args, { milestone_title: @milestone.title, label_name: label.title, state: 'all' }), small: true)
 
     %span.assignee-icon
       - assignees.each do |assignee|

app/views/shared/milestones/_labels_tab.html.haml

@@ -3,11 +3,9 @@
     - options = { milestone_title: @milestone.title, label_name: label.title }
 
     %li.no-border
-      %span.label-row
-        %span.label-name
-          = render_label(label, tooltip: false, link: milestones_label_path(options))
-        %span.prepend-description-left
-          = markdown_field(label, :description)
+      = render_label(label, tooltip: false, link: milestones_label_path(options))
+      %span.prepend-description-left
+        = markdown_field(label, :description)
 
       .float-right.d-none.d-lg-block.d-xl-block
         = link_to milestones_label_path(options.merge(state: 'opened')), class: 'btn btn-transparent btn-action' do

changelogs/unreleased/38144-replace-labels-in-haml-with-gitlab-ui-css.yml

+---
+title: New styles for scoped labels
+merge_request: 21377
+author:
+type: changed

ee/app/helpers/ee/labels_helper.rb

@@ -8,17 +8,63 @@ module EE
       singleton_class.prepend self
     end
 
-    def render_label(label, tooltip: true, link: nil, css: nil, dataset: nil)
-      content = super
-      content = scoped_label_wrapper(content, label) if label.scoped_label?
+    def render_label(label, tooltip: true, link: nil, dataset: nil, small: false)
+      if label.scoped_label?
+        render_scoped_label(
+          label,
+          link: link,
+          css: label_css_classes(tooltip),
+          dataset: label_dataset(label, dataset, tooltip),
+          small: small
+        )
+      else
+        super
+      end
+    end
+
+    def render_scoped_label(label, link: nil, css: nil, dataset: nil, small: false)
+      # if scoped label is used then EE wraps label tag with scoped label
+      # doc link
+      size_class = small ? "gl-label-sm" : ""
+      html = render_colored_scoped_label(label)
+      html = link_to(html, link, class: css, data: dataset) if link
+
+      html = %(<span class="gl-label gl-label-scoped #{size_class}" style="color: #{label.color}">#{html}</span>)
+      wrapped_html = scoped_label_wrapper(html, label)
 
-      content
+      wrapped_html.html_safe
+    end
+
+    def render_colored_scoped_label(label, label_suffix: '')
+      text_color_class = ::LabelsHelper.text_color_class_for_bg(label.color)
+      scope_name, label_name = label.name.split(Label::SCOPED_LABEL_SEPARATOR)
+
+      # Intentionally not using content_tag here so that this method can be called
+      # by LabelReferenceFilter
+      # Tooltip is omitted as it's attached to the link containing label title on scoped labels
+      ::LabelsHelper.render_partial_label(
+        label, label_suffix: label_suffix,
+        label_name: scope_name,
+        css_class: text_color_class,
+        bg_color: label.color
+      ) + ::LabelsHelper.render_partial_label(
+        label, label_suffix: label_suffix,
+        label_name: label_name,
+        css_class: 'gl-label-scoped-text'
+      )
     end
 
     def scoped_label_wrapper(link, label)
       %(<span class="d-inline-block position-relative scoped-label-wrapper">#{link}#{scoped_labels_doc_link(label)}</span>).html_safe
     end
 
+    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>)
+    end
+
     def label_tooltip_title(label)
       tooltip = super
       tooltip = %(<span class='font-weight-bold scoped-label-tooltip-title'>Scoped label</span><br />#{tooltip}) if label.scoped_label?
@@ -55,8 +101,6 @@ module EE
       super + ['epics']
     end
 
-    private
-
     def scoped_labels_doc_link(label)
       text_color = text_color_for_bg(label.color)
       content = %(<i class="fa fa-question-circle" style="background-color: #{label.color}; color: #{text_color}"></i>)
@@ -64,5 +108,7 @@ module EE
 
       %(<a href="#{help_url}" class="label scoped-label" target="_blank" rel="noopener">#{content}</a>)
     end
+
+    module_function :render_colored_scoped_label, :scoped_label_wrapper, :scoped_labels_doc_link, :label_tooltip_title
   end
 end

ee/app/models/ee/label.rb

@@ -4,7 +4,8 @@ module EE
   module Label
     extend ActiveSupport::Concern
 
-    SCOPED_LABEL_PATTERN = /^.*::/.freeze
+    SCOPED_LABEL_SEPARATOR = '::'
+    SCOPED_LABEL_PATTERN = /^.*#{SCOPED_LABEL_SEPARATOR}/.freeze
 
     def scoped_label?
       SCOPED_LABEL_PATTERN.match?(name)

ee/app/views/groups/epics/_epic.html.haml

@@ -23,7 +23,7 @@
           - if epic.labels.any?
              
             - epic.labels.each do |label|
-              = render_label(label.present(issuable_subject: @group), tooltip: true, link: group_epics_path(@group, label_name:[label.name]), css: 'label-link')
+              = render_label(label.present(issuable_subject: @group), tooltip: true, link: group_epics_path(@group, label_name:[label.name]), small: true)
 
       .issuable-meta
         %ul.controls

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

@@ -6,6 +6,20 @@ module EE
       module LabelReferenceFilter
         extend ::Gitlab::Utils::Override
 
+        override :object_link_text
+        def object_link_text(object, matches)
+          presenter = label_link_text(object, matches)
+          label_suffix = label_link_suffix(object, matches)
+
+          content = if object.scoped_label?
+                      ::EE::LabelsHelper.render_colored_scoped_label(presenter, label_suffix: label_suffix)
+                    else
+                      ::LabelsHelper.render_colored_label(presenter, label_suffix: label_suffix)
+                    end
+
+          content
+        end
+
         override :wrap_link
         def wrap_link(link, label)
           content = super
@@ -13,7 +27,8 @@ module EE
 
           if label.scoped_label? && parent && parent.feature_available?(:scoped_labels)
             presenter = label.present(issuable_parent: parent)
-            content = ::LabelsHelper.scoped_label_wrapper(content, presenter)
+            content = %(<span class="gl-label gl-label-scoped gl-label-sm" style="color: #{label.color}">#{link}</span>)
+            content = ::EE::LabelsHelper.scoped_label_wrapper(content, presenter)
           end
 
           content
@@ -22,6 +37,10 @@ module EE
         def tooltip_title(label)
           ::LabelsHelper.label_tooltip_title(label)
         end
+
+        def object_link_title(object, matches)
+          ::EE::LabelsHelper.label_tooltip_title(object)
+        end
       end
     end
   end

ee/spec/features/boards/sidebar_spec.rb

@@ -263,6 +263,9 @@ describe 'Issue Boards', :js do
     end
 
     it 'removes existing scoped label' do
+      scoped1 = scoped_label_1.title.split('::')
+      scoped2 = scoped_label_2.title.split('::')
+
       click_card(card1)
 
       page.within('.labels') do
@@ -281,9 +284,10 @@ describe 'Issue Boards', :js do
         find('.dropdown-menu-close-icon').click
 
         page.within('.value') do
-          expect(page).to have_selector('.scoped-label-wrapper', count: 1)
-          expect(page).not_to have_content(scoped_label_1.title)
-          expect(page).to have_content(scoped_label_2.title)
+          expect(page).to have_selector('.gl-label-scoped', count: 1)
+          expect(page).not_to have_content(scoped1.last)
+          expect(page).to have_content(scoped2.first)
+          expect(page).to have_content(scoped2.last)
         end
       end
 

ee/spec/helpers/ee/labels_helper_spec.rb

@@ -14,11 +14,12 @@ describe LabelsHelper do
       end
 
       it 'includes link to scoped labels documentation' do
-        expect(render_label(scoped_label)).to match(%r(<span.+>#{scoped_label.name}</span><a.+>.*question-circle.*</a>))
+        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>$))
       end
 
       it 'does not include link to scoped label documentation for common labels' do
-        expect(render_label(label)).to match(%r(<span.+>#{label.name}</span>$))
+        expect(render_label(label)).to match(%r(<span.+><span.+>#{label.name}</span></span>$))
       end
     end
 
@@ -28,7 +29,7 @@ describe LabelsHelper do
       end
 
       it 'does not include link to scoped documentation' do
-        expect(render_label(scoped_label)).to match(%r(<span.+>#{scoped_label.name}</span>$))
+        expect(render_label(scoped_label)).to match(%r(<span.+><span.+>#{scoped_label.name}</span></span>$))
       end
     end
   end

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

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

lib/banzai/filter/label_reference_filter.rb

@@ -80,7 +80,15 @@ module Banzai
         end
       end
 
-      def object_link_text(object, matches)
+      def label_link_text(object, matches)
+        parent = project || group
+
+        presenter = object.present(issuable_subject: parent)
+
+        presenter
+      end
+
+      def label_link_suffix(object, matches)
         label_suffix = ''
         parent = project || group
 
@@ -92,8 +100,20 @@ module Banzai
           label_suffix = " <i>in #{ERB::Util.html_escape(reference)}</i>" if reference.present?
         end
 
-        presenter = object.present(issuable_subject: parent)
-        LabelsHelper.render_colored_label(presenter, label_suffix: label_suffix, title: tooltip_title(presenter))
+        label_suffix
+      end
+
+      def object_link_text(object, matches)
+        presenter = label_link_text(object, matches)
+        label_suffix = label_link_suffix(object, matches)
+        LabelsHelper.render_colored_label(presenter, label_suffix: label_suffix)
+      end
+
+      def wrap_link(link, label)
+        content = super
+        content = %(<span class="gl-label gl-label-sm">#{content}</span>)
+
+        content
       end
 
       def tooltip_title(label)
@@ -104,9 +124,12 @@ module Banzai
         matches[:namespace] && matches[:project]
       end
 
+      def reference_class(type, tooltip: true)
+        super + ' gl-link gl-label-link'
+      end
+
       def object_link_title(object, matches)
-        # use title of wrapped element instead
-        nil
+        LabelsHelper.label_tooltip_title(object)
       end
     end
   end

lib/banzai/filter/reference_filter.rb

@@ -37,7 +37,8 @@ module Banzai
 
         attributes[:reference_type] ||= self.class.reference_type
         attributes[:container] ||= 'body'
-        attributes[:placement] ||= 'bottom'
+        attributes[:placement] ||= 'top'
+        attributes[:html] ||= 'true'
         attributes.delete(:original) if context[:no_original_data]
         attributes.map do |key, value|
           %Q(data-#{key.to_s.dasherize}="#{escape_once(value)}")

spec/features/boards/sidebar_spec.rb

@@ -277,7 +277,7 @@ describe 'Issue Boards', :js do
         wait_for_requests
 
         page.within('.value') do
-          expect(page).to have_selector('.badge', count: 2)
+          expect(page).to have_selector('.gl-label-text', count: 2)
           expect(page).to have_content(development.title)
           expect(page).to have_content(stretch.title)
         end
@@ -299,7 +299,7 @@ describe 'Issue Boards', :js do
         find('.dropdown-menu-close-icon').click
 
         page.within('.value') do
-          expect(page).to have_selector('.badge', count: 3)
+          expect(page).to have_selector('.gl-label-text', count: 3)
           expect(page).to have_content(bug.title)
         end
       end
@@ -328,7 +328,7 @@ describe 'Issue Boards', :js do
         find('.dropdown-menu-close-icon').click
 
         page.within('.value') do
-          expect(page).to have_selector('.badge', count: 4)
+          expect(page).to have_selector('.gl-label-text', count: 4)
           expect(page).to have_content(bug.title)
           expect(page).to have_content(regression.title)
         end
@@ -357,13 +357,13 @@ describe 'Issue Boards', :js do
         find('.dropdown-menu-close-icon').click
 
         page.within('.value') do
-          expect(page).to have_selector('.badge', count: 1)
+          expect(page).to have_selector('.gl-label-text', count: 1)
           expect(page).not_to have_content(stretch.title)
         end
       end
 
       # 'Development' label does not show since the card is in a 'Development' list label
-      expect(card).to have_selector('.badge', count: 0)
+      expect(card).to have_selector('.gl-label-text', count: 0)
       expect(card).not_to have_content(stretch.title)
     end
 

spec/features/issuables/issuable_list_spec.rb

@@ -41,10 +41,10 @@ describe 'issuable list' do
 
       visit_issuable_list(issuable_type)
 
-      expect(all('.label-link')[0].text).to have_content('B')
-      expect(all('.label-link')[1].text).to have_content('X')
-      expect(all('.label-link')[2].text).to have_content('a')
-      expect(all('.label-link')[3].text).to have_content('z')
+      expect(all('.gl-label-text')[0].text).to have_content('B')
+      expect(all('.gl-label-text')[1].text).to have_content('X')
+      expect(all('.gl-label-text')[2].text).to have_content('a')
+      expect(all('.gl-label-text')[3].text).to have_content('z')
     end
   end
 

spec/features/issues/filtered_search/filter_issues_spec.rb

@@ -332,7 +332,7 @@ describe 'Filter issues', :js do
 
     context 'issue label clicked' do
       it 'filters and displays in search bar' do
-        find('.issues-list .issue .issuable-main-info .issuable-info a .badge', text: multiple_words_label.title).click
+        find('.issues-list .issue .issuable-main-info .issuable-info a .gl-label-text', text: multiple_words_label.title).click
 
         expect_issues_list_count(1)
         expect_tokens([label_token("\"#{multiple_words_label.title}\"")])

spec/features/labels_hierarchy_spec.rb

@@ -161,9 +161,9 @@ describe 'Labels Hierarchy', :js do
       find('.btn-success').click
 
       expect(page.find('.issue-details h2.title')).to have_content('new created issue')
-      expect(page).to have_selector('span.badge', text: grandparent_group_label.title)
-      expect(page).to have_selector('span.badge', text: parent_group_label.title)
-      expect(page).to have_selector('span.badge', text: project_label_1.title)
+      expect(page).to have_selector('span.gl-label-text', text: grandparent_group_label.title)
+      expect(page).to have_selector('span.gl-label-text', text: parent_group_label.title)
+      expect(page).to have_selector('span.gl-label-text', text: project_label_1.title)
     end
   end
 

spec/helpers/labels_helper_spec.rb

@@ -56,7 +56,7 @@ describe LabelsHelper do
 
     context 'without subject' do
       it "uses the label's project" do
-        expect(link_to_label(label_presenter)).to match %r{<a href="/#{label.project.full_path}/issues\?label_name%5B%5D=#{label.name}">.*</a>}
+        expect(link_to_label(label_presenter)).to match %r{<a.*href="/#{label.project.full_path}/issues\?label_name%5B%5D=#{label.name}".*>.*</a>}
       end
     end
 
@@ -65,7 +65,7 @@ describe LabelsHelper do
       let(:subject) { build(:project, namespace: namespace, name: 'bar3') }
 
       it 'links to project issues page' do
-        expect(link_to_label(label_presenter)).to match %r{<a href="/foo3/bar3/issues\?label_name%5B%5D=#{label.name}">.*</a>}
+        expect(link_to_label(label_presenter)).to match %r{<a.*href="/foo3/bar3/issues\?label_name%5B%5D=#{label.name}".*>.*</a>}
       end
     end
 
@@ -73,7 +73,7 @@ describe LabelsHelper do
       let(:subject) { build(:group, name: 'bar') }
 
       it 'links to group issues page' do
-        expect(link_to_label(label_presenter)).to match %r{<a href="/groups/bar/-/issues\?label_name%5B%5D=#{label.name}">.*</a>}
+        expect(link_to_label(label_presenter)).to match %r{<a.*href="/groups/bar/-/issues\?label_name%5B%5D=#{label.name}".*>.*</a>}
       end
     end
 
@@ -81,7 +81,7 @@ describe LabelsHelper do
       ['issue', :issue].each do |type|
         context "set to #{type}" do
           it 'links to correct page' do
-            expect(link_to_label(label_presenter, type: type)).to match %r{<a href="/#{label.project.full_path}/#{type.to_s.pluralize}\?label_name%5B%5D=#{label.name}">.*</a>}
+            expect(link_to_label(label_presenter, type: type)).to match %r{<a.*href="/#{label.project.full_path}/#{type.to_s.pluralize}\?label_name%5B%5D=#{label.name}".*>.*</a>}
           end
         end
       end
@@ -89,7 +89,7 @@ describe LabelsHelper do
       ['merge_request', :merge_request].each do |type|
         context "set to #{type}" do
           it 'links to correct page' do
-            expect(link_to_label(label_presenter, type: type)).to match %r{<a href="/#{label.project.full_path}/-/#{type.to_s.pluralize}\?label_name%5B%5D=#{label.name}">.*</a>}
+            expect(link_to_label(label_presenter, type: type)).to match %r{<a.*href="/#{label.project.full_path}/-/#{type.to_s.pluralize}\?label_name%5B%5D=#{label.name}".*>.*</a>}
           end
         end
       end
@@ -113,7 +113,7 @@ describe LabelsHelper do
     context 'without block' do
       it 'uses render_colored_label as the link content' do
         expect(self).to receive(:render_colored_label)
-          .with(label_presenter, tooltip: true).and_return('Foo')
+          .with(label_presenter).and_return('Foo')
         expect(link_to_label(label_presenter)).to match('Foo')
       end
     end

spec/helpers/markup_helper_spec.rb

@@ -537,8 +537,10 @@ describe MarkupHelper do
 
         it 'does not style a label that can not be accessed by current_user' do
           project = create(:project, :private)
+          label = create_and_format_label(project)
 
-          expect(create_and_format_label(project)).to eq("<p>#{label_title}</p>")
+          expect(label).to include("~label_1")
+          expect(label).not_to match(/span class=.*style=.*/)
         end
       end
 

spec/lib/banzai/filter/label_reference_filter_spec.rb

@@ -28,7 +28,7 @@ describe Banzai::Filter::LabelReferenceFilter do
 
   it 'includes default classes' do
     doc = reference_filter("Label #{reference}")
-    expect(doc.css('a').first.attr('class')).to eq 'gfm gfm-label has-tooltip'
+    expect(doc.css('a').first.attr('class')).to eq 'gfm gfm-label has-tooltip gl-link gl-label-link'
   end
 
   it 'includes a data-project attribute' do
@@ -66,12 +66,12 @@ describe Banzai::Filter::LabelReferenceFilter do
   describe 'label span element' do
     it 'includes default classes' do
       doc = reference_filter("Label #{reference}")
-      expect(doc.css('a span').first.attr('class')).to eq 'badge color-label has-tooltip'
+      expect(doc.css('a span').first.attr('class')).to include 'gl-label-text'
     end
 
     it 'includes a style attribute' do
       doc = reference_filter("Label #{reference}")
-      expect(doc.css('a span').first.attr('style')).to match(/\Abackground-color: #\h{6}; color: #\h{6}\z/)
+      expect(doc.css('a span').first.attr('style')).to match(/\Abackground-color: #\h{6}\z/)
     end
   end
 
@@ -85,7 +85,7 @@ describe Banzai::Filter::LabelReferenceFilter do
 
     it 'links with adjacent text' do
       doc = reference_filter("Label (#{reference}.)")
-      expect(doc.to_html).to match(%r(\(<a.+><span.+>#{label.name}</span></a>\.\)))
+      expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>#{label.name}</span></a></span>\.\)))
     end
 
     it 'ignores invalid label IDs' do
@@ -109,7 +109,7 @@ describe Banzai::Filter::LabelReferenceFilter do
 
     it 'links with adjacent text' do
       doc = reference_filter("Label (#{reference}).")
-      expect(doc.to_html).to match(%r(\(<a.+><span.+>#{label.name}</span></a>\)\.))
+      expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>#{label.name}</span></a></span>\)\.))
     end
 
     it 'ignores invalid label names' do
@@ -133,7 +133,7 @@ describe Banzai::Filter::LabelReferenceFilter do
 
     it 'links with adjacent text' do
       doc = reference_filter("Label (#{reference}).")
-      expect(doc.to_html).to match(%r(\(<a.+><span.+>#{label.name}</span></a>\)\.))
+      expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>#{label.name}</span></a></span>\)\.))
     end
 
     it 'ignores invalid label names' do
@@ -158,7 +158,7 @@ describe Banzai::Filter::LabelReferenceFilter do
     it 'does not include trailing punctuation', :aggregate_failures do
       ['.', ', ok?', '...', '?', '!', ': is that ok?'].each do |trailing_punctuation|
         doc = filter("Label #{reference}#{trailing_punctuation}")
-        expect(doc.to_html).to match(%r(<a.+><span.+>\?g\.fm&amp;</span></a>#{Regexp.escape(trailing_punctuation)}))
+        expect(doc.to_html).to match(%r(<span.+><a.+><span.+>\?g\.fm&amp;</span></a></span>#{Regexp.escape(trailing_punctuation)}))
       end
     end
 
@@ -184,7 +184,7 @@ describe Banzai::Filter::LabelReferenceFilter do
 
     it 'links with adjacent text' do
       doc = reference_filter("Label (#{reference}.)")
-      expect(doc.to_html).to match(%r(\(<a.+><span.+>#{label.name}</span></a>\.\)))
+      expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>#{label.name}</span></a></span>\.\)))
     end
 
     it 'ignores invalid label names' do
@@ -208,7 +208,7 @@ describe Banzai::Filter::LabelReferenceFilter do
 
     it 'links with adjacent text' do
       doc = reference_filter("Label (#{reference}.)")
-      expect(doc.to_html).to match(%r(\(<a.+><span.+>#{label.name}</span></a>\.\)))
+      expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>#{label.name}</span></a></span>\.\)))
     end
 
     it 'ignores invalid label names' do
@@ -232,7 +232,7 @@ describe Banzai::Filter::LabelReferenceFilter do
 
     it 'links with adjacent text' do
       doc = reference_filter("Label (#{reference}.)")
-      expect(doc.to_html).to match(%r(\(<a.+><span.+>g\.fm &amp; references\?</span></a>\.\)))
+      expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>g\.fm &amp; references\?</span></a></span>\.\)))
     end
 
     it 'ignores invalid label names' do
@@ -320,7 +320,7 @@ describe Banzai::Filter::LabelReferenceFilter do
 
     it 'links with adjacent text' do
       doc = reference_filter("Label (#{reference}.)")
-      expect(doc.to_html).to match(%r(\(<a.+>Label</a>\.\)))
+      expect(doc.to_html).to match(%r(\(<span.+><a.+>Label</a></span>\.\)))
     end
 
     it 'includes a data-project attribute' do
@@ -358,7 +358,7 @@ describe Banzai::Filter::LabelReferenceFilter do
 
       it 'links with adjacent text' do
         doc = reference_filter("Label (#{reference}.)")
-        expect(doc.to_html).to match(%r(\(<a.+><span.+>#{group_label.name}</span></a>\.\)))
+        expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>#{group_label.name}</span></a></span>\.\)))
       end
 
       it 'ignores invalid label names' do
@@ -381,7 +381,7 @@ describe Banzai::Filter::LabelReferenceFilter do
 
       it 'links with adjacent text' do
         doc = reference_filter("Label (#{reference}.)")
-        expect(doc.to_html).to match(%r(\(<a.+><span.+>#{group_label.name}</span></a>\.\)))
+        expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>#{group_label.name}</span></a></span>\.\)))
       end
 
       it 'ignores invalid label names' do