Update issuable state badge styles for Issues, MRs, and Epics

Summary

Updates state badge style for Issues, MRs, and Epics.

Screenshots

State Badges

	Desktop	Mobile
Issue (Open)
Issue (Closed)
Merge Request (Open)
Merge Request (Merged)
Merge Request (Closed)
Merge Request (w/ ff updated_mr_header, see !86019 (merged))
Epic (Open)
Epic (Closed)
Test Case (Open)
Test Case (Archived)

Related Issues

#330569

app/assets/javascripts/issuable/components/status_box.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlBadge } from '@gitlab/ui';
 import Vue from 'vue';
 import { fetchPolicies } from '~/lib/graphql';
 import { __ } from '~/locale';
+import { IssuableType } from '~/issues/constants';
 
-export const statusBoxState = Vue.observable({
+export const badgeState = Vue.observable({
   state: '',
   updateStatus: null,
 });
 
 const CLASSES = {
-  opened: 'status-box-open',
-  locked: 'status-box-open',
-  closed: 'status-box-mr-closed',
-  merged: 'status-box-mr-merged',
+  opened: 'issuable-status-badge-open',
+  locked: 'issuable-status-badge-open',
+  closed: 'issuable-status-badge-closed',
+  merged: 'issuable-status-badge-merged',
+};
+
+const ISSUE_ICONS = {
+  opened: 'issues',
+  locked: 'issues',
+  closed: 'issue-closed',
+};
+
+const MERGE_REQUEST_ICONS = {
+  opened: 'merge-request-open',
+  locked: 'merge-request-open',
+  closed: 'merge-request-close',
+  merged: 'merge',
 };
 
 const STATUS = {
-  opened: [__('Open'), 'issue-open-m'],
-  locked: [__('Open'), 'issue-open-m'],
-  closed: [__('Closed'), 'issue-close'],
-  merged: [__('Merged'), 'git-merge'],
+  opened: __('Open'),
+  locked: __('Open'),
+  closed: __('Closed'),
+  merged: __('Merged'),
 };
 
 export default {
   components: {
-    GlIcon,
+    GlBadge,
   },
   inject: {
     query: { default: null },
@@ -46,30 +60,41 @@ export default {
   },
   data() {
     if (this.initialState) {
-      statusBoxState.state = this.initialState;
+      badgeState.state = this.initialState;
     }
 
-    return statusBoxState;
+    return badgeState;
   },
   computed: {
-    statusBoxClass() {
+    badgeClass() {
       return CLASSES[`${this.issuableType}_${this.state}`] || CLASSES[this.state];
     },
-    statusHumanName() {
-      return (STATUS[`${this.issuableType}_${this.state}`] || STATUS[this.state])[0];
+    badgeVariant() {
+      if (this.state === 'opened') {
+        return 'success';
+      } else if (this.state === 'closed') {
+        return this.issuableType === IssuableType.MergeRequest ? 'danger' : 'info';
+      }
+      return 'info';
+    },
+    badgeText() {
+      return STATUS[`${this.issuableType}_${this.state}`] || STATUS[this.state];
     },
-    statusIconName() {
-      return (STATUS[`${this.issuableType}_${this.state}`] || STATUS[this.state])[1];
+    badgeIcon() {
+      if (this.issuableType === IssuableType.Issue) {
+        return ISSUE_ICONS[this.state];
+      }
+      return MERGE_REQUEST_ICONS[this.state];
     },
   },
   created() {
-    if (!statusBoxState.updateStatus) {
-      statusBoxState.updateStatus = this.fetchState;
+    if (!badgeState.updateStatus) {
+      badgeState.updateStatus = this.fetchState;
     }
   },
   beforeDestroy() {
-    if (statusBoxState.updateStatus && this.query) {
-      statusBoxState.updateStatus = null;
+    if (badgeState.updateStatus && this.query) {
+      badgeState.updateStatus = null;
     }
   },
   methods: {
@@ -83,17 +108,19 @@ export default {
         fetchPolicy: fetchPolicies.NO_CACHE,
       });
 
-      statusBoxState.state = data?.workspace?.issuable?.state;
+      badgeState.state = data?.workspace?.issuable?.state;
     },
   },
 };
 </script>
 
 <template>
-  <div :class="statusBoxClass" class="issuable-status-box status-box">
-    <gl-icon :name="statusIconName" class="gl-display-block gl-sm-display-none!" />
-    <span class="gl-display-none gl-sm-display-block">
-      {{ statusHumanName }}
-    </span>
-  </div>
+  <gl-badge
+    class="issuable-status-badge gl-sm-align-self-center gl-mr-3"
+    :class="badgeClass"
+    :variant="badgeVariant"
+    :icon="badgeIcon"
+  >
+    {{ badgeText }}
+  </gl-badge>
 </template>