Merge branch '241990-clean-up-labels-css' into 'master'

Clean up labels css

See merge request gitlab-org/gitlab!43590

app/assets/stylesheets/pages/labels.scss

@@ -134,11 +134,6 @@
   }
 }
 
-.label-description-wrapper {
-  margin-right: 8px;
-  margin-left: 8px;
-}
-
 .prioritized-labels {
   margin-bottom: 30px;
 
@@ -201,10 +196,6 @@
   }
 }
 
-.label-options-toggle {
-  width: 100%;
-}
-
 .label-subscription {
   vertical-align: middle;
 
@@ -276,35 +267,6 @@
   font-size: $label-font-size;
 }
 
-.label-badge-blue {
-  background-color: $theme-blue-100;
-}
-
-.label-badge-gray {
-  background-color: $gray-50;
-}
-
-.label-links {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  white-space: nowrap;
-}
-
-.label-link-item {
-  padding: 0;
-}
-
-.label-description {
-  .description-text {
-    margin-bottom: 10px;
-
-    .admin-labels & {
-      margin-bottom: 0;
-    }
-  }
-}
-
 .label-list-item {
   .content-list &::before,
   .content-list &::after {
@@ -313,21 +275,12 @@
 
   .label-name {
     width: 200px;
-    flex-shrink: 0;
 
     .gl-label {
       line-height: $gl-line-height;
     }
   }
 
-  .label-description {
-    flex-grow: 1;
-
-    a {
-      color: $blue-600;
-    }
-  }
-
   .label {
     padding: 4px $grid-size;
     font-size: $label-font-size;
@@ -382,31 +335,8 @@
       text-align: left;
     }
 
-    .label-links {
-      white-space: normal;
-    }
-
     .label-description {
       order: 3;
-      width: 100%;
-
-      > .label-description-wrapper {
-        margin-left: 0;
-        margin-right: 0;
-      }
-    }
-  }
-}
-
-@media (max-width: 910px) {
-  .priority-badge {
-    display: block;
-    width: 100%;
-    margin-left: 0;
-    margin-top: $gl-padding;
-
-    .label-badge {
-      display: inline-block;
     }
   }
 }

app/helpers/labels_helper.rb

@@ -36,11 +36,11 @@ module LabelsHelper
   #   link_to_label(label) { "My Custom Label Text" }
   #
   # Returns a String
-  def link_to_label(label, type: :issue, tooltip: true, small: false, &block)
+  def link_to_label(label, type: :issue, tooltip: true, small: false, css_class: nil, &block)
     link = label.filter_path(type: type)
 
     if block_given?
-      link_to link, &block
+      link_to link, class: css_class, &block
     else
       render_label(label, link: link, tooltip: tooltip, small: small)
     end

app/views/groups/labels/index.html.haml

@@ -27,5 +27,5 @@
   = render 'shared/empty_states/labels'
 
 %template#js-badge-item-template
-  %li.label-link-item.js-priority-badge.inline.gl-ml-3
-    .label-badge.label-badge-blue= _('Prioritized label')
+  %li.js-priority-badge.inline.gl-ml-3
+    .label-badge.gl-bg-blue-50= _('Prioritized label')

app/views/projects/labels/index.html.haml

@@ -52,5 +52,5 @@
   = render 'shared/empty_states/labels'
 
 %template#js-badge-item-template
-  %li.label-link-item.js-priority-badge.inline.gl-ml-3
-    .label-badge.label-badge-blue= _('Prioritized label')
+  %li.js-priority-badge.inline.gl-ml-3
+    .label-badge.gl-bg-blue-50= _('Prioritized label')

app/views/shared/_label.html.haml

@@ -11,7 +11,7 @@
   %ul.label-actions-list
     - if @project
       %li.inline
-        .label-badge.label-badge-gray= label.model_name.human.capitalize
+        .label-badge.gl-bg-gray-50= label.model_name.human.capitalize
     - if can?(current_user, :admin_label, @project)
       %li.inline.js-toggle-priority{ data: { url: remove_priority_project_label_path(@project, label),
         dom_id: dom_id(label), type: label.type } }

app/views/shared/_label_row.html.haml

@@ -3,23 +3,22 @@
 - show_label_issues_link = subject_or_group_defined && show_label_issuables_link?(label, :issues)
 - show_label_merge_requests_link = subject_or_group_defined && show_label_issuables_link?(label, :merge_requests)
 
-.label-name
+.label-name.gl-flex-shrink-0.gl-mr-3
   = render_label(label, tooltip: false)
-.label-description
-  .label-description-wrapper
+.label-description.gl-flex-grow-1.gl-mr-3.gl-w-full
   - if label.description.present?
-      .description-text
+    .description-text.gl-mb-3
       = markdown_field(label, :description)
-    %ul.label-links
+  %ul.label-links.gl-m-0.gl-p-0.gl-white-space-nowrap
     - if show_label_issues_link
-        %li.label-link-item.inline
-          = link_to_label(label) { _('Issues') }
+      %li.inline.gl-text-blue-600
+        = link_to_label(label, css_class: 'gl-text-blue-600!') { _('Issues') }
     - if show_label_merge_requests_link
       ·
-        %li.label-link-item.inline
-          = link_to_label(label, type: :merge_request) { _('Merge requests') }
+      %li.inline.gl-text-blue-600
+        = link_to_label(label, type: :merge_request, css_class: 'gl-text-blue-600!') { _('Merge requests') }
+    = render_if_exists 'shared/label_row_epics_link', label: label
     - if force_priority
       ·
-        %li.label-link-item.priority-badge.js-priority-badge.inline.gl-ml-3
-          .label-badge.label-badge-blue= _('Prioritized label')
-      = render_if_exists 'shared/label_row_epics_link', label: label
+      %li.js-priority-badge.inline.gl-ml-3
+        .label-badge.gl-bg-blue-50= _('Prioritized label')

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

@@ -29,10 +29,10 @@
       %div
         = render('shared/milestone_expired', milestone: milestone)
         - if milestone.group_milestone?
-          .label-badge.label-badge-blue.d-inline-block
+          .label-badge.gl-bg-blue-50.d-inline-block
             = milestone.group.full_name
         - if milestone.project_milestone?
-          .label-badge.label-badge-gray.d-inline-block
+          .label-badge.gl-bg-gray-50.d-inline-block
             = milestone.project.full_name
 
     .col-sm-4.milestone-progress

ee/app/views/shared/_label_row_epics_link.html.haml

@@ -2,5 +2,5 @@
 
 - if show_label_epics_link
   ·
-  %li.label-link-item.inline
-    = link_to 'Epics', group_epics_path(@group, label_name:[label.name])
+  %li.inline
+    = link_to 'Epics', group_epics_path(@group, label_name:[label.name]), class: 'gl-text-blue-600!'