From 8c4f4b05e4d0c3a644c9b1831ddd94de9f47ac51 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Tue, 31 Mar 2020 16:04:37 +0100
Subject: [PATCH 1/4] WIP: Update @gitlab/ui for new badges

See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/481 for more
information.
---
 .../clusters_list/components/clusters.vue     |  2 +-
 .../error_tracking/components/constants.js    |  4 ++--
 .../components/error_details.vue              | 10 ++--------
 .../monitoring/components/alert_widget.vue    |  6 +-----
 .../release_block_milestone_info.vue          |  3 ++-
 .../repository/components/table/row.vue       |  2 +-
 .../stylesheets/bootstrap_migration.scss      |  2 +-
 app/assets/stylesheets/framework/badges.scss  |  2 +-
 .../code_review_analytics/components/app.vue  |  2 +-
 .../dependencies/components/app.vue           |  2 +-
 .../components/dependencies_table.vue         |  5 +----
 .../components/dashboard/environment.vue      |  2 +-
 .../dashboard/environment_header.vue          |  2 +-
 .../license_compliance/components/app.vue     |  4 ++--
 .../components/licenses_table_row.vue         |  3 +--
 .../shared/components/package_tags.vue        | 10 +++++-----
 .../components/project_list.vue               |  2 +-
 .../components/unscanned_projects.vue         |  4 ++--
 .../environment_header_spec.js.snap           |  3 ++-
 .../shared/components/package_tags_spec.js    | 20 ++++++++++---------
 package.json                                  |  4 ++--
 .../__snapshots__/alert_widget_spec.js.snap   |  6 +++---
 yarn.lock                                     |  7 +++----
 23 files changed, 48 insertions(+), 59 deletions(-)

diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index 46dacf30f39bdc..76bf651e171212 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -91,7 +91,7 @@ export default {
       </div>
     </template>
     <template #cell(clusterType)="{value}">
-      <gl-badge variant="light">
+      <gl-badge variant="muted">
         {{ value }}
       </gl-badge>
     </template>
diff --git a/app/assets/javascripts/error_tracking/components/constants.js b/app/assets/javascripts/error_tracking/components/constants.js
index 60b217443de242..41b952e26d85e8 100644
--- a/app/assets/javascripts/error_tracking/components/constants.js
+++ b/app/assets/javascripts/error_tracking/components/constants.js
@@ -8,10 +8,10 @@ export const severityLevel = {
 
 export const severityLevelVariant = {
   [severityLevel.FATAL]: 'danger',
-  [severityLevel.ERROR]: 'dark',
+  [severityLevel.ERROR]: 'neutral',
   [severityLevel.WARNING]: 'warning',
   [severityLevel.INFO]: 'info',
-  [severityLevel.DEBUG]: 'light',
+  [severityLevel.DEBUG]: 'muted',
 };
 
 export const errorStatus = {
diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue
index 148edfe3a51f37..b316d4d8d38a8b 100644
--- a/app/assets/javascripts/error_tracking/components/error_details.vue
+++ b/app/assets/javascripts/error_tracking/components/error_details.vue
@@ -345,16 +345,10 @@ export default {
           <h2 class="text-truncate">{{ error.title }}</h2>
         </tooltip-on-truncate>
         <template v-if="error.tags">
-          <gl-badge
-            v-if="error.tags.level"
-            :variant="errorSeverityVariant"
-            class="rounded-pill mr-2"
-          >
+          <gl-badge v-if="error.tags.level" :variant="errorSeverityVariant" class="mr-2">
             {{ errorLevel }}
           </gl-badge>
-          <gl-badge v-if="error.tags.logger" variant="light" class="rounded-pill"
-            >{{ error.tags.logger }}
-          </gl-badge>
+          <gl-badge v-if="error.tags.logger" variant="muted">{{ error.tags.logger }} </gl-badge>
         </template>
         <ul>
           <li v-if="error.gitlabCommit">
diff --git a/app/assets/javascripts/monitoring/components/alert_widget.vue b/app/assets/javascripts/monitoring/components/alert_widget.vue
index 86a793c854e3b0..5562981fe1c6f8 100644
--- a/app/assets/javascripts/monitoring/components/alert_widget.vue
+++ b/app/assets/javascripts/monitoring/components/alert_widget.vue
@@ -234,11 +234,7 @@ export default {
       class="alert-current-setting cursor-pointer d-flex"
       @click="showModal"
     >
-      <gl-badge
-        :variant="isFiring ? 'danger' : 'secondary'"
-        pill
-        class="d-flex-center text-truncate"
-      >
+      <gl-badge :variant="isFiring ? 'danger' : 'neutral'" class="d-flex-center text-truncate">
         <gl-icon name="warning" :size="16" class="flex-shrink-0" />
         <span class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me">
           <gl-sprintf
diff --git a/app/assets/javascripts/releases/components/release_block_milestone_info.vue b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
index 01ad0cbf732f13..35d1a2254a9e37 100644
--- a/app/assets/javascripts/releases/components/release_block_milestone_info.vue
+++ b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
@@ -148,7 +148,8 @@ export default {
     <div class="d-flex flex-column align-items-start flex-shrink-0 mr-4 mb-3 js-issues-container">
       <span class="mb-1">
         {{ __('Issues') }}
-        <gl-badge pill variant="light" class="font-weight-bold">{{ totalIssuesCount }}</gl-badge>
+        <!-- TODO: check bold works -->
+        <gl-badge variant="muted" class="font-weight-bold">{{ totalIssuesCount }}</gl-badge>
       </span>
       <div class="d-flex">
         <gl-link v-if="openIssuesPath" ref="openIssuesLink" :href="openIssuesPath">
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index f741a6df5d9060..f4d60b7f5dd451 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -148,7 +148,7 @@ export default {
         /><span class="position-relative">{{ fullPath }}</span>
       </component>
       <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
-      <gl-badge v-if="lfsOid" variant="default" class="label-lfs ml-1">LFS</gl-badge>
+      <gl-badge v-if="lfsOid" variant="neutral" class="label-lfs ml-1">LFS</gl-badge>
       <template v-if="isSubmodule">
         @ <gl-link :href="submoduleTreeUrl" class="commit-sha">{{ shortSha }}</gl-link>
       </template>
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index ed5c133950dc24..a717b7fc6db64b 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -187,7 +187,7 @@ h3.popover-header {
 
 // Add to .label so that old system notes that are saved to the db
 // will still receive the correct styling
-.badge,
+.badge:not(.gl-badge),
 .label {
   padding: 4px 5px;
   font-size: 12px;
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
index c036267a7c82e0..ca5528375c499f 100644
--- a/app/assets/stylesheets/framework/badges.scss
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -1,4 +1,4 @@
-.badge.badge-pill {
+.badge.badge-pill:not(.gl-badge) {
   font-weight: $gl-font-weight-normal;
   background-color: $badge-bg;
   color: $gray-800;
diff --git a/ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue b/ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue
index d623fa8be27546..ad7a8ab9a7b0c9 100644
--- a/ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue
+++ b/ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue
@@ -105,7 +105,7 @@ export default {
         <template v-else>
           <div>
             <span class="font-weight-bold">{{ __('Merge Requests in Review') }}</span>
-            <gl-badge pill>{{ totalItems }}</gl-badge>
+            <gl-badge>{{ totalItems }}</gl-badge>
           </div>
           <merge-request-table />
           <gl-pagination
diff --git a/ee/app/assets/javascripts/dependencies/components/app.vue b/ee/app/assets/javascripts/dependencies/components/app.vue
index dfa4e5be2ea3e9..f2edc881ad2677 100644
--- a/ee/app/assets/javascripts/dependencies/components/app.vue
+++ b/ee/app/assets/javascripts/dependencies/components/app.vue
@@ -207,7 +207,7 @@ export default {
       >
         <template #title>
           {{ listType.label }}
-          <gl-badge pill :data-qa-selector="qaCountSelector(listType.label)">
+          <gl-badge :data-qa-selector="qaCountSelector(listType.label)">
             {{ totals[listType.namespace] }}
           </gl-badge>
         </template>
diff --git a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
index d4b68e8cf1909a..91727137790483 100644
--- a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
+++ b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
@@ -138,16 +138,13 @@ export default {
     </template>
 
     <template #cell(isVulnerable)="{ item, toggleDetails }">
-      <!-- This badge usage will be simplified by
-        https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28356 -->
       <gl-badge
         v-if="item.vulnerabilities.length"
         variant="warning"
         href="#"
-        class="d-inline-flex align-items-center bg-warning-100 text-warning-700 bold"
         @click.native="toggleDetails"
       >
-        <gl-icon name="warning" class="text-warning-500 mr-1" />
+        <gl-icon name="warning" class="mr-1" />
         {{
           n__(
             'Dependencies|%d vulnerability detected',
diff --git a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue
index 50c62ef39db9ef..19347ced63e4cb 100644
--- a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue
+++ b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue
@@ -148,7 +148,7 @@ export default {
             >
               {{ buildName }}
             </gl-link>
-            <gl-badge v-else v-gl-tooltip="jobTooltip" variant="primary">{{ buildName }}</gl-badge>
+            <gl-badge v-else v-gl-tooltip="jobTooltip" variant="info">{{ buildName }}</gl-badge>
           </div>
           <commit
             :tag="lastDeployment.tag"
diff --git a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue
index 9f95742647d3bd..d31a2d172ec78b 100644
--- a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue
+++ b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue
@@ -60,7 +60,7 @@ export default {
       >
         <span class="js-environment-name bold"> {{ environment.name }}</span>
       </gl-link>
-      <gl-badge v-if="environment.within_folder" :pill="true" class="dashboard-card-icon">{{
+      <gl-badge v-if="environment.within_folder" class="dashboard-card-icon">{{
         environment.size
       }}</gl-badge>
     </div>
diff --git a/ee/app/assets/javascripts/license_compliance/components/app.vue b/ee/app/assets/javascripts/license_compliance/components/app.vue
index 0d54cb9c627a9d..f31fbb73b2d087 100644
--- a/ee/app/assets/javascripts/license_compliance/components/app.vue
+++ b/ee/app/assets/javascripts/license_compliance/components/app.vue
@@ -124,7 +124,7 @@ export default {
         <gl-tab>
           <template #title>
             {{ s__('Licenses|Detected in Project') }}
-            <gl-badge pill>{{ licenseCount }}</gl-badge>
+            <gl-badge>{{ licenseCount }}</gl-badge>
           </template>
 
           <detected-licenses-table />
@@ -133,7 +133,7 @@ export default {
         <gl-tab>
           <template #title>
             {{ s__('Licenses|Policies') }}
-            <gl-badge pill>{{ policyCount }}</gl-badge>
+            <gl-badge>{{ policyCount }}</gl-badge>
           </template>
 
           <license-management />
diff --git a/ee/app/assets/javascripts/license_compliance/components/licenses_table_row.vue b/ee/app/assets/javascripts/license_compliance/components/licenses_table_row.vue
index 6801bc651a9af7..a1b941f993532f 100644
--- a/ee/app/assets/javascripts/license_compliance/components/licenses_table_row.vue
+++ b/ee/app/assets/javascripts/license_compliance/components/licenses_table_row.vue
@@ -64,8 +64,7 @@ export default {
         <div class="table-mobile-content d-md-flex justify-content-between align-items-center">
           <license-component-links :components="license.components" :title="license.name" />
           <div v-if="isDenied" class="d-inline-block">
-            <!-- This badge usage will be simplified in https://gitlab.com/gitlab-org/gitlab/-/issues/213789 -->
-            <gl-badge variant="warning" class="gl-alert-warning d-flex align-items-center">
+            <gl-badge variant="warning">
               <gl-icon name="warning" :size="16" class="pr-1" />
               <span>{{ s__('Licenses|Policy violation: denied') }}</span>
             </gl-badge>
diff --git a/ee/app/assets/javascripts/packages/shared/components/package_tags.vue b/ee/app/assets/javascripts/packages/shared/components/package_tags.vue
index 14a98c8158d114..83583f175d2584 100644
--- a/ee/app/assets/javascripts/packages/shared/components/package_tags.vue
+++ b/ee/app/assets/javascripts/packages/shared/components/package_tags.vue
@@ -57,8 +57,8 @@ export default {
     tagBadgeClass(index) {
       return {
         'd-none': true,
-        'd-block': this.tagCount === 1,
-        'd-md-block': this.tagCount > 1,
+        'd-flex': this.tagCount === 1,
+        'd-md-flex': this.tagCount > 1,
         'append-right-4': index !== this.tagsToRender.length - 1,
         'prepend-left-8': !this.hideLabel && index === 0,
       };
@@ -87,9 +87,9 @@ export default {
       v-if="moreTagsDisplay"
       ref="moreBadge"
       v-gl-tooltip
-      variant="light"
+      variant="muted"
       :title="moreTagsTooltip"
-      class="d-none d-md-block prepend-left-4"
+      class="d-none d-md-flex prepend-left-4"
       ><gl-sprintf :message="__('+%{tags} more')">
         <template #tags>
           {{ moreTagsDisplay }}
@@ -100,7 +100,7 @@ export default {
     <gl-badge
       v-if="moreTagsDisplay && hideLabel"
       ref="moreBadge"
-      variant="light"
+      variant="muted"
       class="d-md-none prepend-left-4"
       >{{ tagsDisplay }}</gl-badge
     >
diff --git a/ee/app/assets/javascripts/security_dashboard/components/project_list.vue b/ee/app/assets/javascripts/security_dashboard/components/project_list.vue
index 84feaef6d585d4..eea097344b6585 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/project_list.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/project_list.vue
@@ -37,7 +37,7 @@ export default {
     <div>
       <h4 class="h5 font-weight-bold text-secondary border-bottom mb-3 pb-2">
         {{ s__('SecurityReports|Projects added') }}
-        <gl-badge pill class="font-weight-bold">{{ projects.length }}</gl-badge>
+        <gl-badge class="font-weight-bold">{{ projects.length }}</gl-badge>
         <gl-loading-icon v-if="showLoadingIndicator" size="sm" class="float-right" />
       </h4>
       <ul v-if="projects.length" class="list-unstyled">
diff --git a/ee/app/assets/javascripts/security_dashboard/components/unscanned_projects.vue b/ee/app/assets/javascripts/security_dashboard/components/unscanned_projects.vue
index 018680f2f39a17..54e1603ff70706 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/unscanned_projects.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/unscanned_projects.vue
@@ -64,7 +64,7 @@ export default {
         <gl-tab ref="outdatedProjectsTab" title-item-class="ml-3">
           <template #title>
             {{ s__('UnscannedProjects|Out of date') }}
-            <gl-badge v-if="!isLoading" ref="outdatedProjectsCount" pill>{{
+            <gl-badge v-if="!isLoading" ref="outdatedProjectsCount">{{
               outdatedProjectsCount
             }}</gl-badge>
           </template>
@@ -84,7 +84,7 @@ export default {
         <gl-tab ref="untestedProjectsTab" title-item-class="ml-3">
           <template #title>
             {{ s__('UnscannedProjects|Untested') }}
-            <gl-badge v-if="!isLoading" ref="untestedProjectsCount" pill>{{
+            <gl-badge v-if="!isLoading" ref="untestedProjectsCount">{{
               untestedProjectsCount
             }}</gl-badge>
           </template>
diff --git a/ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap b/ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap
index 1a1dc7237b64fd..63765875fcaf34 100644
--- a/ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap
+++ b/ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap
@@ -126,7 +126,8 @@ exports[`Environment Header with environments grouped into a folder matches the
      
     <gl-badge-stub
       class="dashboard-card-icon"
-      pill="true"
+      size="md"
+      variant="neutral"
     >
       5
     </gl-badge-stub>
diff --git a/ee/spec/frontend/packages/shared/components/package_tags_spec.js b/ee/spec/frontend/packages/shared/components/package_tags_spec.js
index 825e361d3e2e71..a2ae569a435b66 100644
--- a/ee/spec/frontend/packages/shared/components/package_tags_spec.js
+++ b/ee/spec/frontend/packages/shared/components/package_tags_spec.js
@@ -73,25 +73,25 @@ describe('PackageTags', () => {
     it('shows tag badge when there is only one', () => {
       createComponent([mockTags[0]]);
 
-      const expectedStyle = [...defaultStyle, 'd-block', 'prepend-left-8'];
+      const expectedStyle = [...defaultStyle, 'd-flex', 'prepend-left-8'];
 
       expect(
         tagBadges()
           .at(0)
           .classes(),
-      ).toEqual(expectedStyle);
+      ).toEqual(expect.arrayContaining(expectedStyle));
     });
 
     it('shows tag badge for medium or heigher resolutions', () => {
       createComponent(mockTags);
 
-      const expectedStyle = [...defaultStyle, 'd-md-block'];
+      const expectedStyle = [...defaultStyle, 'd-md-flex'];
 
       expect(
         tagBadges()
           .at(1)
           .classes(),
-      ).toEqual(expectedStyle);
+      ).toEqual(expect.arrayContaining(expectedStyle));
     });
 
     it('correctly prepends left and appends right when there is more than one tag', () => {
@@ -99,15 +99,17 @@ describe('PackageTags', () => {
         tagDisplayLimit: 4,
       });
 
-      const expectedStyleWithoutAppend = [...defaultStyle, 'd-md-block'];
+      const expectedStyleWithoutAppend = [...defaultStyle, 'd-md-flex'];
       const expectedStyleWithAppend = [...expectedStyleWithoutAppend, 'append-right-4'];
 
       const allBadges = tagBadges();
 
-      expect(allBadges.at(0).classes()).toEqual([...expectedStyleWithAppend, 'prepend-left-8']);
-      expect(allBadges.at(1).classes()).toEqual(expectedStyleWithAppend);
-      expect(allBadges.at(2).classes()).toEqual(expectedStyleWithAppend);
-      expect(allBadges.at(3).classes()).toEqual(expectedStyleWithoutAppend);
+      expect(allBadges.at(0).classes()).toEqual(
+        expect.arrayContaining([...expectedStyleWithAppend, 'prepend-left-8']),
+      );
+      expect(allBadges.at(1).classes()).toEqual(expect.arrayContaining(expectedStyleWithAppend));
+      expect(allBadges.at(2).classes()).toEqual(expect.arrayContaining(expectedStyleWithAppend));
+      expect(allBadges.at(3).classes()).toEqual(expect.arrayContaining(expectedStyleWithoutAppend));
     });
   });
 });
diff --git a/package.json b/package.json
index b5b772601ebf44..3b41c1e1e3449f 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "@babel/preset-env": "^7.8.4",
     "@gitlab/at.js": "1.5.5",
     "@gitlab/svgs": "1.125.0",
-    "@gitlab/ui": "13.9.0",
+    "@gitlab/ui": "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/540491242/artifacts/raw/gitlab-ui.481-style-text-badges.tgz",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.2-2",
     "@sentry/browser": "^5.10.2",
@@ -217,4 +217,4 @@
     "node": ">=10.13.0",
     "yarn": "^1.10.0"
   }
-}
\ No newline at end of file
+}
diff --git a/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap b/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap
index 2179e7b4ab5145..59c17daacff3cb 100644
--- a/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap
+++ b/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap
@@ -3,7 +3,7 @@
 exports[`AlertWidget Alert firing displays a warning icon and matches snapshot 1`] = `
 <gl-badge-stub
   class="d-flex-center text-truncate"
-  pill=""
+  size="md"
   variant="danger"
 >
   <gl-icon-stub
@@ -25,8 +25,8 @@ exports[`AlertWidget Alert firing displays a warning icon and matches snapshot 1
 exports[`AlertWidget Alert not firing displays a warning icon and matches snapshot 1`] = `
 <gl-badge-stub
   class="d-flex-center text-truncate"
-  pill=""
-  variant="secondary"
+  size="md"
+  variant="neutral"
 >
   <gl-icon-stub
     class="flex-shrink-0"
diff --git a/yarn.lock b/yarn.lock
index 0a4ef63d5805fe..7d0a1fb4178b70 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -787,10 +787,9 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.125.0.tgz#59c667dae8f7e4c80b482f5f6cc35367c016387b"
   integrity sha512-MKfFYa8f+9P2tJ/JN/E9oDBSSo/gRz2zuGui4XHQPoaw/DkIMn7EyAzeSpRgbgs1LgMcEqqKsIEx+spCga3jsQ==
 
-"@gitlab/ui@13.9.0":
-  version "13.9.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-13.9.0.tgz#c75c3c6adc92e71a5e7915fe6d1c9fa6e2d5f85d"
-  integrity sha512-fpjjMXAyOGIITR/Jb7zmw7ul5EAwdSdivmJsiQnwb9eetjNgVlguYu0ZZM0YAdgRXeeIRyVaS8OCqTeyD02yFQ==
+"@gitlab/ui@https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/540491242/artifacts/raw/gitlab-ui.481-style-text-badges.tgz":
+  version "14.0.0"
+  resolved "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/540491242/artifacts/raw/gitlab-ui.481-style-text-badges.tgz#1845ef234f8c3b522dfef2a74cf64f6f74ecac16"
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"
-- 
GitLab


From 5efc8350045ce91c233124f6d8046e32289feb1b Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Wed, 6 May 2020 11:24:14 +0100
Subject: [PATCH 2/4] Tweak badge sizes (part of UX review)

---
 .../releases/components/release_block_milestone_info.vue       | 3 +--
 .../analytics/code_review_analytics/components/app.vue         | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/releases/components/release_block_milestone_info.vue b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
index 35d1a2254a9e37..30b5650b19ee75 100644
--- a/app/assets/javascripts/releases/components/release_block_milestone_info.vue
+++ b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
@@ -148,8 +148,7 @@ export default {
     <div class="d-flex flex-column align-items-start flex-shrink-0 mr-4 mb-3 js-issues-container">
       <span class="mb-1">
         {{ __('Issues') }}
-        <!-- TODO: check bold works -->
-        <gl-badge variant="muted" class="font-weight-bold">{{ totalIssuesCount }}</gl-badge>
+        <gl-badge variant="muted" size="sm" class="font-weight-bold">{{ totalIssuesCount }}</gl-badge>
       </span>
       <div class="d-flex">
         <gl-link v-if="openIssuesPath" ref="openIssuesLink" :href="openIssuesPath">
diff --git a/ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue b/ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue
index ad7a8ab9a7b0c9..382351ab05481d 100644
--- a/ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue
+++ b/ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue
@@ -105,7 +105,7 @@ export default {
         <template v-else>
           <div>
             <span class="font-weight-bold">{{ __('Merge Requests in Review') }}</span>
-            <gl-badge>{{ totalItems }}</gl-badge>
+            <gl-badge size="sm">{{ totalItems }}</gl-badge>
           </div>
           <merge-request-table />
           <gl-pagination
-- 
GitLab


From 5bac4ecca34749914aaf92b68a7c00a0d933c0ec Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Wed, 6 May 2020 15:46:10 +0100
Subject: [PATCH 3/4] Tweak more badge sizes/classes

---
 .../releases/components/release_block_milestone_info.vue        | 2 +-
 app/assets/javascripts/repository/components/table/row.vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/releases/components/release_block_milestone_info.vue b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
index 30b5650b19ee75..61b2ed81ebc1d8 100644
--- a/app/assets/javascripts/releases/components/release_block_milestone_info.vue
+++ b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
@@ -148,7 +148,7 @@ export default {
     <div class="d-flex flex-column align-items-start flex-shrink-0 mr-4 mb-3 js-issues-container">
       <span class="mb-1">
         {{ __('Issues') }}
-        <gl-badge variant="muted" size="sm" class="font-weight-bold">{{ totalIssuesCount }}</gl-badge>
+        <gl-badge variant="muted" size="sm">{{ totalIssuesCount }}</gl-badge>
       </span>
       <div class="d-flex">
         <gl-link v-if="openIssuesPath" ref="openIssuesLink" :href="openIssuesPath">
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index f4d60b7f5dd451..8c511abc2b9dc3 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -148,7 +148,7 @@ export default {
         /><span class="position-relative">{{ fullPath }}</span>
       </component>
       <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
-      <gl-badge v-if="lfsOid" variant="neutral" class="label-lfs ml-1">LFS</gl-badge>
+      <gl-badge v-if="lfsOid" variant="muted" size="sm" class="ml-1">LFS</gl-badge>
       <template v-if="isSubmodule">
         @ <gl-link :href="submoduleTreeUrl" class="commit-sha">{{ shortSha }}</gl-link>
       </template>
-- 
GitLab


From 49aec43766d4335bddc1c6a3ce256f4211d8d886 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Wed, 6 May 2020 18:06:44 +0100
Subject: [PATCH 4/4] Use stronger assertion

---
 spec/frontend/error_tracking/components/error_details_spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/spec/frontend/error_tracking/components/error_details_spec.js b/spec/frontend/error_tracking/components/error_details_spec.js
index adbbc04ce78c3e..7fdab606de953b 100644
--- a/spec/frontend/error_tracking/components/error_details_spec.js
+++ b/spec/frontend/error_tracking/components/error_details_spec.js
@@ -235,7 +235,7 @@ describe('ErrorDetails', () => {
             },
           });
           return wrapper.vm.$nextTick().then(() => {
-            expect(wrapper.find(GlBadge).attributes('variant')).toEqual(
+            expect(wrapper.find(GlBadge).props('variant')).toEqual(
               severityLevelVariant[severityLevel[level]],
             );
           });
@@ -249,7 +249,7 @@ describe('ErrorDetails', () => {
           },
         });
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.find(GlBadge).attributes('variant')).toEqual(
+          expect(wrapper.find(GlBadge).props('variant')).toEqual(
             severityLevelVariant[severityLevel.ERROR],
           );
         });
-- 
GitLab