From d5aed4a47d423ad6b28149bcc78e87330221cdf0 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Tue, 26 May 2020 18:51:24 +0100
Subject: [PATCH] Upgrade to @gitlab/ui@16.0

Part of the [Style text badges issue][1].

This moves most uses of `GlBadge` to `GlDeprecatedBadge`. Some have been
moved to the new `GlBadge`, as they've received UX review.

[1]: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/481
---
 .../components/alert_management_list.vue      |  2 +-
 .../clusters_list/components/clusters.vue     |  8 +++++++-
 .../error_tracking/components/constants.js    |  4 ++--
 .../components/error_details.vue              | 10 ++--------
 .../monitoring/components/alert_widget.vue    |  6 +-----
 .../release_block_milestone_info.vue          |  2 +-
 .../repository/components/table/row.vue       |  7 +++++--
 .../stylesheets/bootstrap_migration.scss      |  2 +-
 app/assets/stylesheets/framework/badges.scss  |  2 +-
 .../gitlab-ui-badge-integration-2.yml         |  5 +++++
 .../code_review_analytics/components/app.vue  |  2 +-
 .../components/dependencies_table.vue         |  9 ++++++++-
 .../components/dashboard/environment.vue      |  2 +-
 .../dashboard/environment_header.vue          |  2 +-
 .../feature_flags/components/form.vue         |  2 +-
 .../geo_node_form/components/app.vue          |  2 +-
 .../license_compliance/components/app.vue     |  2 +-
 .../components/licenses_table_row.vue         |  8 +++++++-
 .../shared/components/package_tags.vue        | 10 +++++-----
 .../components/requirements_tabs.vue          |  2 +-
 .../components/project_list.vue               |  7 ++++++-
 .../components/unscanned_projects.vue         |  2 +-
 .../components/metrics_reports_issue_body.vue |  2 +-
 .../components/remediated_badge.vue           |  2 +-
 .../components/dependencies_table_spec.js     |  2 +-
 .../components/environment_header_spec.js     |  2 +-
 .../geo_node_form/components/app_spec.js      |  2 +-
 .../license_compliance/components/app_spec.js |  9 ++++++++-
 .../components/licenses_table_row_spec.js     |  7 ++++++-
 .../shared/components/package_tags_spec.js    | 20 ++++++++++---------
 .../components/requirements_tabs_spec.js      |  2 +-
 .../components/project_list_spec.js           |  2 +-
 .../vulnerabilities/remediated_badge_spec.js  |  2 +-
 package.json                                  |  2 +-
 spec/features/projects/tree/tree_show_spec.rb |  6 +++---
 .../components/alert_management_list_spec.js  |  2 +-
 .../components/error_details_spec.js          |  4 ++--
 .../__snapshots__/alert_widget_spec.js.snap   |  6 +++---
 yarn.lock                                     |  8 ++++----
 39 files changed, 107 insertions(+), 71 deletions(-)
 create mode 100644 changelogs/unreleased/gitlab-ui-badge-integration-2.yml

diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue
index 74ce76739a2621..04f63c6efd6c63 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -10,7 +10,7 @@ import {
   GlDropdownItem,
   GlTabs,
   GlTab,
-  GlBadge,
+  GlDeprecatedBadge as GlBadge,
 } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index af3f1437c644cf..0b98f9c010191f 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -1,6 +1,12 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlBadge, GlLink, GlLoadingIcon, GlPagination, GlTable } from '@gitlab/ui';
+import {
+  GlDeprecatedBadge as GlBadge,
+  GlLink,
+  GlLoadingIcon,
+  GlPagination,
+  GlTable,
+} from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { CLUSTER_TYPES, STATUSES } from '../constants';
 import { __, sprintf } from '~/locale';
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 da079877c7236d..7e3b5210085888 100644
--- a/app/assets/javascripts/error_tracking/components/error_details.vue
+++ b/app/assets/javascripts/error_tracking/components/error_details.vue
@@ -363,16 +363,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 d9fbd2884b7992..4f75e15a14953e 100644
--- a/app/assets/javascripts/releases/components/release_block_milestone_info.vue
+++ b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
@@ -144,7 +144,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 pill variant="light" 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 344241213904fc..d53630163359b4 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -147,8 +147,11 @@ export default {
           class="mr-1 position-relative text-secondary"
         /><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>
+      <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
+      <gl-badge v-if="lfsOid" variant="muted" size="sm" class="ml-1" data-qa-selector="label-lfs"
+        >LFS</gl-badge
+      >
+      <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
       <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 f819c2dbce10f4..a6d56819140529 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/changelogs/unreleased/gitlab-ui-badge-integration-2.yml b/changelogs/unreleased/gitlab-ui-badge-integration-2.yml
new file mode 100644
index 00000000000000..fef025138d519d
--- /dev/null
+++ b/changelogs/unreleased/gitlab-ui-badge-integration-2.yml
@@ -0,0 +1,5 @@
+---
+title: Update the visual design of badges in some areas
+merge_request: 31646
+author:
+type: other
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..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 pill>{{ totalItems }}</gl-badge>
+            <gl-badge size="sm">{{ totalItems }}</gl-badge>
           </div>
           <merge-request-table />
           <gl-pagination
diff --git a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
index 22e9795ce38307..38ef7dfd73e105 100644
--- a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
+++ b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
@@ -1,6 +1,13 @@
 <script>
 import { cloneDeep } from 'lodash';
-import { GlBadge, GlIcon, GlLink, GlButton, GlSkeletonLoading, GlTable } from '@gitlab/ui';
+import {
+  GlDeprecatedBadge as GlBadge,
+  GlIcon,
+  GlLink,
+  GlButton,
+  GlSkeletonLoading,
+  GlTable,
+} from '@gitlab/ui';
 import { s__ } from '~/locale';
 import DependencyLicenseLinks from './dependency_license_links.vue';
 import DependencyVulnerabilities from './dependency_vulnerabilities.vue';
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..ddc4fe807bac4a 100644
--- a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue
+++ b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue
@@ -1,6 +1,6 @@
 <script>
 import { escape, isEmpty } from 'lodash';
-import { GlTooltipDirective, GlLink, GlBadge } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
 import Alerts from 'ee/vue_shared/dashboards/components/alerts.vue';
 import TimeAgo from 'ee/vue_shared/dashboards/components/time_ago.vue';
 import { STATUS_FAILED } from 'ee/vue_shared/dashboards/constants';
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..d819948fa8b181 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
@@ -1,5 +1,5 @@
 <script>
-import { GlLink, GlBadge, GlTooltipDirective } from '@gitlab/ui';
+import { GlLink, GlDeprecatedBadge as GlBadge, GlTooltipDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
diff --git a/ee/app/assets/javascripts/feature_flags/components/form.vue b/ee/app/assets/javascripts/feature_flags/components/form.vue
index ce9c0097497ded..e9f56ebcdbb47c 100644
--- a/ee/app/assets/javascripts/feature_flags/components/form.vue
+++ b/ee/app/assets/javascripts/feature_flags/components/form.vue
@@ -3,7 +3,7 @@ import Vue from 'vue';
 import { memoize, isString, cloneDeep, isNumber } from 'lodash';
 import {
   GlDeprecatedButton,
-  GlBadge,
+  GlDeprecatedBadge as GlBadge,
   GlTooltip,
   GlTooltipDirective,
   GlFormTextarea,
diff --git a/ee/app/assets/javascripts/geo_node_form/components/app.vue b/ee/app/assets/javascripts/geo_node_form/components/app.vue
index 0a875589d0c1d7..7f2baec7e09854 100644
--- a/ee/app/assets/javascripts/geo_node_form/components/app.vue
+++ b/ee/app/assets/javascripts/geo_node_form/components/app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
 import { __ } from '~/locale';
 import GeoNodeForm from './geo_node_form.vue';
 
diff --git a/ee/app/assets/javascripts/license_compliance/components/app.vue b/ee/app/assets/javascripts/license_compliance/components/app.vue
index 877a2745d033be..348dd39eba7a59 100644
--- a/ee/app/assets/javascripts/license_compliance/components/app.vue
+++ b/ee/app/assets/javascripts/license_compliance/components/app.vue
@@ -7,7 +7,7 @@ import {
   GlIcon,
   GlTab,
   GlTabs,
-  GlBadge,
+  GlDeprecatedBadge as GlBadge,
   GlAlert,
 } from '@gitlab/ui';
 import { LICENSE_LIST } from '../store/constants';
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 355bf818b18592..427453dd826c93 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
@@ -1,5 +1,11 @@
 <script>
-import { GlLink, GlSkeletonLoading, GlBadge, GlIcon, GlFriendlyWrap } from '@gitlab/ui';
+import {
+  GlLink,
+  GlSkeletonLoading,
+  GlDeprecatedBadge as GlBadge,
+  GlIcon,
+  GlFriendlyWrap,
+} from '@gitlab/ui';
 import LicenseComponentLinks from './license_component_links.vue';
 import { LICENSE_APPROVAL_CLASSIFICATION } from 'ee/vue_shared/license_compliance/constants';
 
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/requirements/components/requirements_tabs.vue b/ee/app/assets/javascripts/requirements/components/requirements_tabs.vue
index 3ac8d96578380e..e442e19f6abf00 100644
--- a/ee/app/assets/javascripts/requirements/components/requirements_tabs.vue
+++ b/ee/app/assets/javascripts/requirements/components/requirements_tabs.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink, GlBadge, GlButton } from '@gitlab/ui';
+import { GlLink, GlDeprecatedBadge as GlBadge, GlButton } from '@gitlab/ui';
 
 import { FilterState } from '../constants';
 
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..ac0195384316fe 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/project_list.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/project_list.vue
@@ -1,5 +1,10 @@
 <script>
-import { GlBadge, GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import {
+  GlDeprecatedBadge as GlBadge,
+  GlDeprecatedButton,
+  GlLoadingIcon,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 
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..bebce356b0ac63 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/unscanned_projects.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/unscanned_projects.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge, GlTabs, GlTab, GlLink } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlTabs, GlTab, GlLink } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 
 import Icon from '~/vue_shared/components/icon.vue';
diff --git a/ee/app/assets/javascripts/vue_shared/metrics_reports/components/metrics_reports_issue_body.vue b/ee/app/assets/javascripts/vue_shared/metrics_reports/components/metrics_reports_issue_body.vue
index 730f8c051dc670..c7d9eef2e87513 100644
--- a/ee/app/assets/javascripts/vue_shared/metrics_reports/components/metrics_reports_issue_body.vue
+++ b/ee/app/assets/javascripts/vue_shared/metrics_reports/components/metrics_reports_issue_body.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/remediated_badge.vue b/ee/app/assets/javascripts/vulnerabilities/components/remediated_badge.vue
index 59f34bf4235738..b85f4cd280a9de 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/remediated_badge.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/remediated_badge.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge, GlPopover } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlPopover } from '@gitlab/ui';
 
 export default {
   name: 'RemediatedBadge',
diff --git a/ee/spec/frontend/dependencies/components/dependencies_table_spec.js b/ee/spec/frontend/dependencies/components/dependencies_table_spec.js
index 2c01fec983f7fc..8ff294718817a9 100644
--- a/ee/spec/frontend/dependencies/components/dependencies_table_spec.js
+++ b/ee/spec/frontend/dependencies/components/dependencies_table_spec.js
@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
-import { GlBadge, GlButton, GlLink, GlSkeletonLoading } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlButton, GlLink, GlSkeletonLoading } from '@gitlab/ui';
 import stubChildren from 'helpers/stub_children';
 import DependenciesTable from 'ee/dependencies/components/dependencies_table.vue';
 import DependencyLicenseLinks from 'ee/dependencies/components/dependency_license_links.vue';
diff --git a/ee/spec/frontend/environments_dashboard/components/environment_header_spec.js b/ee/spec/frontend/environments_dashboard/components/environment_header_spec.js
index 96ffe311346372..4f9188107040d8 100644
--- a/ee/spec/frontend/environments_dashboard/components/environment_header_spec.js
+++ b/ee/spec/frontend/environments_dashboard/components/environment_header_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount, mount } from '@vue/test-utils';
-import { GlLink, GlBadge } from '@gitlab/ui';
+import { GlLink, GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
 import component from 'ee/environments_dashboard/components/dashboard/environment_header.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
diff --git a/ee/spec/frontend/geo_node_form/components/app_spec.js b/ee/spec/frontend/geo_node_form/components/app_spec.js
index d9bf33b4a1ef1e..4bbd20f4d50c71 100644
--- a/ee/spec/frontend/geo_node_form/components/app_spec.js
+++ b/ee/spec/frontend/geo_node_form/components/app_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlBadge } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge } from '@gitlab/ui';
 import GeoNodeFormApp from 'ee/geo_node_form/components/app.vue';
 import GeoNodeForm from 'ee/geo_node_form/components/geo_node_form.vue';
 import { MOCK_SELECTIVE_SYNC_TYPES, MOCK_SYNC_SHARDS } from '../mock_data';
diff --git a/ee/spec/frontend/license_compliance/components/app_spec.js b/ee/spec/frontend/license_compliance/components/app_spec.js
index 77d35e8dbc5c37..cf9f8c20f37e83 100644
--- a/ee/spec/frontend/license_compliance/components/app_spec.js
+++ b/ee/spec/frontend/license_compliance/components/app_spec.js
@@ -2,7 +2,14 @@ import { shallowMount, mount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 
-import { GlEmptyState, GlLoadingIcon, GlTab, GlTabs, GlAlert, GlBadge } from '@gitlab/ui';
+import {
+  GlEmptyState,
+  GlLoadingIcon,
+  GlTab,
+  GlTabs,
+  GlAlert,
+  GlDeprecatedBadge as GlBadge,
+} from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import setWindowLocation from 'helpers/set_window_location_helper';
 
diff --git a/ee/spec/frontend/license_compliance/components/licenses_table_row_spec.js b/ee/spec/frontend/license_compliance/components/licenses_table_row_spec.js
index d99bdaeccc4d8c..177cb5b4e05c7e 100644
--- a/ee/spec/frontend/license_compliance/components/licenses_table_row_spec.js
+++ b/ee/spec/frontend/license_compliance/components/licenses_table_row_spec.js
@@ -1,5 +1,10 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlLink, GlSkeletonLoading, GlBadge, GlFriendlyWrap } from '@gitlab/ui';
+import {
+  GlLink,
+  GlSkeletonLoading,
+  GlDeprecatedBadge as GlBadge,
+  GlFriendlyWrap,
+} from '@gitlab/ui';
 import LicenseComponentLinks from 'ee/license_compliance/components/license_component_links.vue';
 import LicensesTableRow from 'ee/license_compliance/components/licenses_table_row.vue';
 import { makeLicense } from './utils';
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/ee/spec/frontend/requirements/components/requirements_tabs_spec.js b/ee/spec/frontend/requirements/components/requirements_tabs_spec.js
index b07cb527ccc5c5..db64a651718745 100644
--- a/ee/spec/frontend/requirements/components/requirements_tabs_spec.js
+++ b/ee/spec/frontend/requirements/components/requirements_tabs_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import { GlLink, GlBadge, GlButton } from '@gitlab/ui';
+import { GlLink, GlDeprecatedBadge as GlBadge, GlButton } from '@gitlab/ui';
 
 import RequirementsTabs from 'ee/requirements/components/requirements_tabs.vue';
 import { FilterState } from 'ee/requirements/constants';
diff --git a/ee/spec/frontend/security_dashboard/components/project_list_spec.js b/ee/spec/frontend/security_dashboard/components/project_list_spec.js
index 45d0c94265a13c..b75ab7ce3408ed 100644
--- a/ee/spec/frontend/security_dashboard/components/project_list_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/project_list_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import { GlBadge, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 import ProjectList from 'ee/security_dashboard/components/project_list.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 
diff --git a/ee/spec/frontend/vulnerabilities/remediated_badge_spec.js b/ee/spec/frontend/vulnerabilities/remediated_badge_spec.js
index 4dd4abdaa20a57..b20e3a8a7754d1 100644
--- a/ee/spec/frontend/vulnerabilities/remediated_badge_spec.js
+++ b/ee/spec/frontend/vulnerabilities/remediated_badge_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlBadge, GlPopover } from '@gitlab/ui';
+import { GlDeprecatedBadge as GlBadge, GlPopover } from '@gitlab/ui';
 import RemediatedBadge from 'ee/vulnerabilities/components/remediated_badge.vue';
 
 const POPOVER_TITLE = 'Vulnerability remediated. Review before resolving.';
diff --git a/package.json b/package.json
index e713a2f502848a..771584d5499a99 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "@babel/preset-env": "^7.8.4",
     "@gitlab/at.js": "1.5.5",
     "@gitlab/svgs": "1.130.0",
-    "@gitlab/ui": "15.6.0",
+    "@gitlab/ui": "16.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3",
     "@sentry/browser": "^5.10.2",
diff --git a/spec/features/projects/tree/tree_show_spec.rb b/spec/features/projects/tree/tree_show_spec.rb
index 2407a9e6ea3c3b..5305936a12f634 100644
--- a/spec/features/projects/tree/tree_show_spec.rb
+++ b/spec/features/projects/tree/tree_show_spec.rb
@@ -24,7 +24,7 @@
     expect(page).to have_selector('.tree-item')
     expect(page).to have_content('add tests for .gitattributes custom highlighting')
     expect(page).not_to have_selector('.flash-alert')
-    expect(page).not_to have_selector('.label-lfs', text: 'LFS')
+    expect(page).not_to have_selector('[data-qa-selector="label-lfs"]', text: 'LFS')
   end
 
   it 'renders tree table for a subtree without errors' do
@@ -33,7 +33,7 @@
 
     expect(page).to have_selector('.tree-item')
     expect(page).to have_content('add spaces in whitespace file')
-    expect(page).not_to have_selector('.label-lfs', text: 'LFS')
+    expect(page).not_to have_selector('[data-qa-selector="label-lfs"]', text: 'LFS')
     expect(page).not_to have_selector('.flash-alert')
   end
 
@@ -86,7 +86,7 @@
     it 'renders LFS badge on blob item' do
       visit project_tree_path(project, File.join('master', 'files/lfs'))
 
-      expect(page).to have_selector('.label-lfs', text: 'LFS')
+      expect(page).to have_selector('[data-qa-selector="label-lfs"]', text: 'LFS')
     end
   end
 
diff --git a/spec/frontend/alert_management/components/alert_management_list_spec.js b/spec/frontend/alert_management/components/alert_management_list_spec.js
index 88dde9f16f7557..baef12d66a1c9b 100644
--- a/spec/frontend/alert_management/components/alert_management_list_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_list_spec.js
@@ -8,7 +8,7 @@ import {
   GlDropdownItem,
   GlIcon,
   GlTab,
-  GlBadge,
+  GlDeprecatedBadge as GlBadge,
 } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
diff --git a/spec/frontend/error_tracking/components/error_details_spec.js b/spec/frontend/error_tracking/components/error_details_spec.js
index 03181e322a196c..d4c99639fa41f7 100644
--- a/spec/frontend/error_tracking/components/error_details_spec.js
+++ b/spec/frontend/error_tracking/components/error_details_spec.js
@@ -248,7 +248,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]],
             );
           });
@@ -262,7 +262,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],
           );
         });
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 dfdb9634700991..0c2d52e6df2b1a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -787,10 +787,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.130.0.tgz#0c2f3cdc0a4b0f54c47b2861c8fa31b2a58c570a"
   integrity sha512-azJ1E9PBk6fGOaP6816BSr8oYrQu3m3BbYZwWOCUp8AfbZuf0ZOZVYmlR9i/eAOhoqqqmwF8hYCK2VjAklbpPA==
 
-"@gitlab/ui@15.6.0":
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-15.6.0.tgz#0fc4ca7fd6ecc3c1be7e127dce3dde78fb4faa06"
-  integrity sha512-drb+f+xcAOtov2mAE3FX49845Fe4o41/jTKDxONDlsescKggZBXaSl1PQtL4EkspllIFb3JYdvL0sXbmp/dz3w==
+"@gitlab/ui@16.0":
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-16.0.0.tgz#0e2d19b85c47f45a052caf6cd0367613cbab8e8e"
+  integrity sha512-xSWXtFWWQzGtL35dGexc5LGqAJXYjLMEFQyPLzCBX3yY9tkI9s9rVMX053tnKYb9kgEmL+R/xGiW7D9nb58VmQ==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"
-- 
GitLab