Merge branch 'fix-stylelint-warning-related-items-list' into 'master'

Fix stylelint warning in related_items_list.scss

See merge request gitlab-org/gitlab!34693

app/assets/stylesheets/components/related_items_list.scss

@@ -59,10 +59,6 @@ $item-remove-button-space: 42px;
     flex-basis: 100%;
     font-size: $gl-font-size-small;
 
-    &.mr-title {
-      font-weight: $gl-font-weight-bold;
-    }
-
     .sortable-link {
       color: $gray-900;
     }
@@ -77,10 +73,6 @@ $item-remove-button-space: 42px;
     overflow: hidden;
     white-space: nowrap;
   }
-
-  .health-label-short {
-    display: none;
-  }
 }
 
 .item-body,
@@ -89,10 +81,6 @@ $item-remove-button-space: 42px;
     max-width: 0;
   }
 
-  .health-label-long {
-    display: none;
-  }
-
   .status {
     &-at-risk {
       color: $red-500;
@@ -158,19 +146,16 @@ $item-remove-button-space: 42px;
     max-width: $item-milestone-max-width;
 
     .ic-clock {
-      color: $gl-text-color-secondary;
       margin-right: $gl-padding-4;
     }
   }
 
   .item-weight {
     max-width: $item-weight-max-width;
-
-    .ic-weight {
-      color: $gl-text-color-secondary;
-    }
   }
 
+  .item-milestone .ic-clock,
+  .item-weight .ic-weight,
   .item-due-date .ic-calendar {
     color: $gl-text-color-secondary;
   }
@@ -314,10 +299,6 @@ $item-remove-button-space: 42px;
       max-width: 100px;
     }
   }
-
-  .health-label-long {
-    display: none;
-  }
 }
 
 /* Large devices (large desktops, 1200px and up) */
@@ -331,10 +312,6 @@ $item-remove-button-space: 42px;
     }
   }
 
-  .health-label-long {
-    display: none;
-  }
-
   .item-contents {
     overflow: hidden;
   }
@@ -371,12 +348,8 @@ $item-remove-button-space: 42px;
 
 @media only screen and (min-width: 1500px) {
   .card-header {
-    .health-label-short {
-      display: none;
-    }
-
     .health-label-long {
-      display: initial;
+      display: block;
     }
   }
 }

ee/app/assets/javascripts/related_items_tree/components/epic_health_status.vue

@@ -45,34 +45,42 @@ export default {
       >
     </gl-tooltip>
 
-    <span class="gl-label gl-label-text-dark gl-label-sm status-on-track mr-1"
-      ><span class="gl-label-text">
+    <span class="gl-label gl-label-text-dark gl-label-sm status-on-track gl-mr-2">
+      <span class="gl-label-text">
         {{ healthStatus.issuesOnTrack }}
-      </span></span
+      </span>
+    </span>
+    <span class="gl-mr-2 mr-md-2 gl-text-gray-700 health-label-long gl-display-none">
+      {{ __('issues on track') }}
+    </span>
+    <span
+      class="gl-mr-2 mr-md-2 gl-text-gray-700 gl-str-truncated health-label-short gl-display-none"
+      >{{ __('on track') }}</span
     >
-    <span class="mr-1 mr-md-2 text-secondary health-label-long">{{ __('issues on track') }}</span>
-    <span class="mr-1 mr-md-2 text-secondary text-truncate health-label-short">{{
-      __('on track')
-    }}</span>
 
-    <span class="gl-label gl-label-text-dark gl-label-sm status-needs-attention mr-1"
-      ><span class="gl-label-text">
+    <span class="gl-label gl-label-text-dark gl-label-sm status-needs-attention gl-mr-2">
+      <span class="gl-label-text">
         {{ healthStatus.issuesNeedingAttention }}
-      </span></span
+      </span>
+    </span>
+    <span class="gl-mr-2 mr-md-2 gl-text-gray-700 health-label-long gl-display-none">
+      {{ __('issues need attention') }}
+    </span>
+    <span
+      class="gl-mr-2 mr-md-2 gl-text-gray-700 gl-str-truncated health-label-short gl-display-none"
+      >{{ __('need attention') }}</span
     >
-    <span class="mr-1 mr-md-2 text-secondary health-label-long">{{
-      __('issues need attention')
-    }}</span>
-    <span class="mr-1 mr-md-2 text-secondary text-truncate health-label-short">{{
-      __('need attention')
-    }}</span>
 
-    <span class="gl-label gl-label-text-dark gl-label-sm status-at-risk mr-1"
-      ><span class="gl-label-text">
+    <span class="gl-label gl-label-text-dark gl-label-sm status-at-risk gl-mr-2">
+      <span class="gl-label-text">
         {{ healthStatus.issuesAtRisk }}
-      </span></span
-    >
-    <span class="text-secondary health-label-long">{{ __('issues at risk') }}</span>
-    <span class="text-secondary text-truncate health-label-short">{{ __('at risk') }}</span>
+      </span>
+    </span>
+    <span class="gl-text-gray-700 health-label-long gl-display-none">
+      {{ __('issues at risk') }}
+    </span>
+    <span class="gl-text-gray-700 gl-str-truncated health-label-short gl-display-none">
+      {{ __('at risk') }}
+    </span>
   </div>
 </template>