Refactor labels in board sidebar

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

@@ -147,6 +147,17 @@ 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/pages/issuable.scss

@@ -86,9 +86,23 @@
 }
 
 .issuable-show-labels {
-  a {
+  .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;
+  }
+
+  a {
     display: inline-block;
 
     .color-label {

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

@@ -9,13 +9,17 @@
       = _("None")
     %span{ "v-for" => "label in issue.labels" }
       %span.d-inline-block.position-relative.scoped-label-wrapper{ "v-if" => "showScopedLabels(label)" }
-        %a{ href: '#' }
-          %span.badge.color-label.label{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
-            {{ label.title }}
-        %a.label.scoped-label{ ":href" => "helpLink()" }
-          %i.fa.fa-question-circle{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
-      %a{ href: "#", "v-else" => true }
-        .badge.color-label.has-tooltip{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
+        %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 }}
 
   - if can_admin_issue?