From 04baa85554ff13bdd4d6f4e6bb24119d17608fee Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Fri, 3 Apr 2020 09:09:31 +0000
Subject: Add latest changes from gitlab-org/gitlab@master

---
 .../vue_shared/components/clipboard_button.vue     |  8 ++++----
 .../date_time_picker/date_time_picker.vue          | 10 +++++-----
 .../components/droplab_dropdown_button.vue         | 16 +++++++++------
 .../vue_shared/components/expand_button.vue        | 12 +++++------
 .../components/filtered_search_dropdown.vue        |  8 ++++----
 .../vue_shared/components/header_ci_component.vue  |  8 ++++----
 .../vue_shared/components/loading_button.vue       |  2 +-
 .../vue_shared/components/markdown/header.vue      |  8 ++++----
 .../components/markdown/suggestion_diff_header.vue |  8 ++++----
 .../vue_shared/components/modal_copy_button.vue    |  8 ++++----
 .../vue_shared/components/notes/system_note.vue    |  8 ++++----
 .../project_selector/project_list_item.vue         |  8 ++++----
 .../sidebar/labels_select_vue/dropdown_button.vue  |  8 ++++----
 .../dropdown_contents_create_view.vue              | 23 ++++++++++++----------
 .../dropdown_contents_labels_view.vue              | 12 +++++------
 .../sidebar/labels_select_vue/dropdown_title.vue   |  8 ++++----
 .../components/user_avatar/user_avatar_list.vue    | 12 +++++++----
 17 files changed, 89 insertions(+), 78 deletions(-)

(limited to 'app/assets/javascripts/vue_shared/components')

diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index 3ff1d9cf48a..d38dd258ce6 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -12,7 +12,7 @@
  *    css-class="btn-transparent"
  * />
  */
-import { GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 export default {
   name: 'ClipboardButton',
@@ -20,7 +20,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlIcon,
   },
   props: {
@@ -65,12 +65,12 @@ export default {
 </script>
 
 <template>
-  <gl-button
+  <gl-deprecated-button
     v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }"
     :class="cssClass"
     :title="title"
     :data-clipboard-text="clipboardText"
   >
     <gl-icon name="copy-to-clipboard" />
-  </gl-button>
+  </gl-deprecated-button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
index 7b09337eb15..cdcd5cdef7f 100644
--- a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
+import { GlDeprecatedButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range';
@@ -28,7 +28,7 @@ export default {
     TooltipOnTruncate,
     DateTimePickerInput,
     GlFormGroup,
-    GlButton,
+    GlDeprecatedButton,
     GlDropdown,
     GlDropdownItem,
   },
@@ -192,10 +192,10 @@ export default {
             />
           </div>
           <gl-form-group>
-            <gl-button @click="closeDropdown">{{ __('Cancel') }}</gl-button>
-            <gl-button variant="success" :disabled="!isValid" @click="setFixedRange()">
+            <gl-deprecated-button @click="closeDropdown">{{ __('Cancel') }}</gl-deprecated-button>
+            <gl-deprecated-button variant="success" :disabled="!isValid" @click="setFixedRange()">
               {{ __('Apply') }}
-            </gl-button>
+            </gl-deprecated-button>
           </gl-form-group>
         </gl-form-group>
         <gl-form-group label-for="group-id-dropdown" class="col-md-5 gl-pl-1 gl-pr-1 m-0">
diff --git a/app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue b/app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue
index 9aca210c1fb..e1f336f5250 100644
--- a/app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue
@@ -1,11 +1,11 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import Icon from './icon.vue';
 
 export default {
   components: {
     Icon,
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     size: {
@@ -59,9 +59,13 @@ export default {
 
 <template>
   <div class="btn-group droplab-dropdown comment-type-dropdown">
-    <gl-button :class="primaryButtonClass" :size="size" @click.prevent="handlePrimaryActionClick">
+    <gl-deprecated-button
+      :class="primaryButtonClass"
+      :size="size"
+      @click.prevent="handlePrimaryActionClick"
+    >
       {{ selectedActionTitle }}
-    </gl-button>
+    </gl-deprecated-button>
     <button
       :class="buttonSizeClass"
       type="button"
@@ -74,13 +78,13 @@ export default {
     <ul :class="dropdownClass" class="dropdown-menu dropdown-open-top">
       <template v-for="(action, index) in actions">
         <li :key="index" :class="{ 'droplab-item-selected': selectedAction === index }">
-          <gl-button class="btn-transparent" @click.prevent="handleActionClick(index)">
+          <gl-deprecated-button class="btn-transparent" @click.prevent="handleActionClick(index)">
             <i aria-hidden="true" class="fa fa-check icon"> </i>
             <div class="description">
               <strong>{{ action.title }}</strong>
               <p>{{ action.description }}</p>
             </div>
-          </gl-button>
+          </gl-deprecated-button>
         </li>
         <li v-if="index === 0" :key="`${index}-separator`" class="divider droplab-item-ignore"></li>
       </template>
diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue
index e2a6e92081f..1f904cd3c6c 100644
--- a/app/assets/javascripts/vue_shared/components/expand_button.vue
+++ b/app/assets/javascripts/vue_shared/components/expand_button.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 
@@ -16,7 +16,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   name: 'ExpandButton',
   components: {
-    GlButton,
+    GlDeprecatedButton,
     Icon,
   },
   data() {
@@ -41,7 +41,7 @@ export default {
 </script>
 <template>
   <span>
-    <gl-button
+    <gl-deprecated-button
       v-show="isCollapsed"
       :aria-label="ariaLabel"
       type="button"
@@ -49,10 +49,10 @@ export default {
       @click="onClick"
     >
       <icon :size="12" name="ellipsis_h" />
-    </gl-button>
+    </gl-deprecated-button>
     <span v-if="isCollapsed"> <slot name="short"></slot> </span>
     <span v-if="!isCollapsed"> <slot name="expanded"></slot> </span>
-    <gl-button
+    <gl-deprecated-button
       v-show="!isCollapsed"
       :aria-label="ariaLabel"
       type="button"
@@ -60,6 +60,6 @@ export default {
       @click="onClick"
     >
       <icon :size="12" name="ellipsis_h" />
-    </gl-button>
+    </gl-deprecated-button>
   </span>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
index 20bcceeb477..58afcebb7b3 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
@@ -1,6 +1,6 @@
 <script>
 import $ from 'jquery';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 /**
@@ -15,7 +15,7 @@ export default {
   name: 'FilteredSearchDropdown',
   components: {
     Icon,
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     title: {
@@ -141,10 +141,10 @@ export default {
 
         <div v-if="shouldRenderCreateButton" class="dropdown-footer">
           <slot name="footer" :filter="filter">
-            <gl-button
+            <gl-deprecated-button
               class="js-dropdown-create-button btn-transparent"
               @click="$emit('createItem', filter)"
-              >{{ computedCreateButtonText }}</gl-button
+              >{{ computedCreateButtonText }}</gl-deprecated-button
             >
           </slot>
         </div>
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index 876eb7b899c..2665bb4aa92 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlDeprecatedButton } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import CiIconBadge from './ci_badge_link.vue';
 import TimeagoTooltip from './time_ago_tooltip.vue';
@@ -18,7 +18,7 @@ export default {
     TimeagoTooltip,
     UserAvatarImage,
     GlLink,
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -108,7 +108,7 @@ export default {
     <section v-if="$slots.default" class="header-action-buttons">
       <slot></slot>
     </section>
-    <gl-button
+    <gl-deprecated-button
       v-if="hasSidebarButton"
       id="toggleSidebar"
       class="d-block d-sm-none
@@ -116,6 +116,6 @@ sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
       @click="onClickSidebarButton"
     >
       <i class="fa fa-angle-double-left" aria-hidden="true" aria-labelledby="toggleSidebar"> </i>
-    </gl-button>
+    </gl-deprecated-button>
   </header>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
index c9286e22f82..3508c557289 100644
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_button.vue
@@ -2,7 +2,7 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 /* eslint-disable vue/require-default-prop */
 /*
-This component will be deprecated in favor of gl-button.
+This component will be deprecated in favor of gl-deprecated-button.
 https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-button--loading-button
 https://gitlab.com/gitlab-org/gitlab/issues/207412
 */
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index bf25ed96f35..665637f3b9e 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,6 +1,6 @@
 <script>
 import $ from 'jquery';
-import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlPopover, GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
 import ToolbarButton from './toolbar_button.vue';
 import Icon from '../icon.vue';
 
@@ -9,7 +9,7 @@ export default {
     ToolbarButton,
     Icon,
     GlPopover,
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -142,9 +142,9 @@ export default {
                   )
                 }}
               </p>
-              <gl-button variant="primary" size="sm" @click="handleSuggestDismissed">
+              <gl-deprecated-button variant="primary" size="sm" @click="handleSuggestDismissed">
                 {{ __('Got it') }}
-              </gl-button>
+              </gl-deprecated-button>
             </gl-popover>
           </template>
           <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" />
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
index 8a8cf09194c..af438ce5619 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
@@ -1,9 +1,9 @@
 <script>
-import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
-  components: { Icon, GlButton, GlLoadingIcon },
+  components: { Icon, GlDeprecatedButton, GlLoadingIcon },
   directives: { 'gl-tooltip': GlTooltipDirective },
   props: {
     canApply: {
@@ -52,7 +52,7 @@ export default {
       <gl-loading-icon class="d-flex-center mr-2" />
       <span>{{ __('Applying suggestion') }}</span>
     </div>
-    <gl-button
+    <gl-deprecated-button
       v-else-if="canApply"
       v-gl-tooltip.viewport="__('This also resolves the discussion')"
       class="btn-inverted js-apply-btn"
@@ -61,6 +61,6 @@ export default {
       @click="applySuggestion"
     >
       {{ __('Apply suggestion') }}
-    </gl-button>
+    </gl-deprecated-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/modal_copy_button.vue b/app/assets/javascripts/vue_shared/components/modal_copy_button.vue
index 271a375ade2..69ba5cb97e2 100644
--- a/app/assets/javascripts/vue_shared/components/modal_copy_button.vue
+++ b/app/assets/javascripts/vue_shared/components/modal_copy_button.vue
@@ -1,13 +1,13 @@
 <script>
 import $ from 'jquery';
-import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
 import Clipboard from 'clipboard';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     Icon,
   },
 
@@ -113,7 +113,7 @@ export default {
 };
 </script>
 <template>
-  <gl-button
+  <gl-deprecated-button
     v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }"
     :class="cssClasses"
     :data-clipboard-target="target"
@@ -123,5 +123,5 @@ export default {
     <slot>
       <icon name="copy-to-clipboard" />
     </slot>
-  </gl-button>
+  </gl-deprecated-button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 4ad382ed888..ec7d7e94e5c 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -18,7 +18,7 @@
  */
 import $ from 'jquery';
 import { mapGetters, mapActions, mapState } from 'vuex';
-import { GlButton, GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui';
+import { GlDeprecatedButton, GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui';
 import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history';
 import noteHeader from '~/notes/components/note_header.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -35,7 +35,7 @@ export default {
     Icon,
     noteHeader,
     TimelineEntryItem,
-    GlButton,
+    GlDeprecatedButton,
     GlSkeletonLoading,
   },
   directives: {
@@ -131,7 +131,7 @@ export default {
             <gl-skeleton-loading />
           </pre>
           <pre v-else class="wrapper mt-2" v-html="descriptionVersion"></pre>
-          <gl-button
+          <gl-deprecated-button
             v-if="canDeleteDescriptionVersion"
             ref="deleteDescriptionVersionButton"
             v-gl-tooltip
@@ -140,7 +140,7 @@ export default {
             @click="deleteDescriptionVersion"
           >
             <icon name="remove" />
-          </gl-button>
+          </gl-deprecated-button>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue b/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue
index a51b2a3ab6d..3d52f4176db 100644
--- a/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue
+++ b/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { isString } from 'lodash';
 import Icon from '~/vue_shared/components/icon.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
@@ -11,7 +11,7 @@ export default {
   components: {
     Icon,
     ProjectAvatar,
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     project: {
@@ -45,7 +45,7 @@ export default {
 };
 </script>
 <template>
-  <gl-button
+  <gl-deprecated-button
     class="d-flex align-items-center btn pt-1 pb-1 border-0 project-list-item"
     @click="onClick"
   >
@@ -70,5 +70,5 @@ export default {
         v-html="highlightedProjectName"
       ></div>
     </div>
-  </gl-button>
+  </gl-deprecated-button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue
index b9c611d2764..55fa1e4ef9c 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue
@@ -1,10 +1,10 @@
 <script>
 import { mapGetters } from 'vuex';
-import { GlButton, GlIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlIcon,
   },
   computed: {
@@ -14,8 +14,8 @@ export default {
 </script>
 
 <template>
-  <gl-button class="labels-select-dropdown-button w-100 text-left">
+  <gl-deprecated-button class="labels-select-dropdown-button w-100 text-left">
     <span class="dropdown-toggle-text">{{ dropdownButtonText }}</span>
     <gl-icon name="chevron-down" class="pull-right" />
-  </gl-button>
+  </gl-deprecated-button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
index 842b2fdbc43..6bb77f6b6f3 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
@@ -2,7 +2,7 @@
 import { mapState, mapActions } from 'vuex';
 import {
   GlTooltipDirective,
-  GlButton,
+  GlDeprecatedButton,
   GlIcon,
   GlFormInput,
   GlLink,
@@ -11,7 +11,7 @@ import {
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlIcon,
     GlFormInput,
     GlLink,
@@ -60,7 +60,7 @@ export default {
 <template>
   <div class="labels-select-contents-create js-labels-create">
     <div class="dropdown-title d-flex align-items-center pt-0 pb-2">
-      <gl-button
+      <gl-deprecated-button
         :aria-label="__('Go back')"
         variant="link"
         size="sm"
@@ -68,9 +68,9 @@ export default {
         @click="toggleDropdownContentsCreateView"
       >
         <gl-icon name="arrow-left" />
-      </gl-button>
+      </gl-deprecated-button>
       <span class="flex-grow-1">{{ labelsCreateTitle }}</span>
-      <gl-button
+      <gl-deprecated-button
         :aria-label="__('Close')"
         variant="link"
         size="sm"
@@ -78,7 +78,7 @@ export default {
         @click="toggleDropdownContents"
       >
         <gl-icon name="close" />
-      </gl-button>
+      </gl-deprecated-button>
     </div>
     <div class="dropdown-input">
       <gl-form-input
@@ -107,7 +107,7 @@ export default {
       </div>
     </div>
     <div class="dropdown-actions clearfix pt-2 px-2">
-      <gl-button
+      <gl-deprecated-button
         :disabled="disableCreate"
         variant="primary"
         class="pull-left d-flex align-items-center"
@@ -115,10 +115,13 @@ export default {
       >
         <gl-loading-icon v-show="labelCreateInProgress" :inline="true" class="mr-1" />
         {{ __('Create') }}
-      </gl-button>
-      <gl-button class="pull-right js-btn-cancel-create" @click="toggleDropdownContentsCreateView">
+      </gl-deprecated-button>
+      <gl-deprecated-button
+        class="pull-right js-btn-cancel-create"
+        @click="toggleDropdownContentsCreateView"
+      >
         {{ __('Cancel') }}
-      </gl-button>
+      </gl-deprecated-button>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
index a3494a9e38f..a8e48bfe1a1 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
@@ -1,13 +1,13 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { GlLoadingIcon, GlButton, GlIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
+import { GlLoadingIcon, GlDeprecatedButton, GlIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
 
 import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 
 export default {
   components: {
     GlLoadingIcon,
-    GlButton,
+    GlDeprecatedButton,
     GlIcon,
     GlSearchBoxByType,
     GlLink,
@@ -125,7 +125,7 @@ export default {
     />
     <div class="dropdown-title d-flex align-items-center pt-0 pb-2">
       <span class="flex-grow-1">{{ labelsListTitle }}</span>
-      <gl-button
+      <gl-deprecated-button
         :aria-label="__('Close')"
         variant="link"
         size="sm"
@@ -133,7 +133,7 @@ export default {
         @click="toggleDropdownContents"
       >
         <gl-icon name="close" />
-      </gl-button>
+      </gl-deprecated-button>
     </div>
     <div class="dropdown-input">
       <gl-search-box-by-type v-model="searchKey" :autofocus="true" />
@@ -160,11 +160,11 @@ export default {
     <div class="dropdown-footer">
       <ul class="list-unstyled">
         <li>
-          <gl-button
+          <gl-deprecated-button
             variant="link"
             class="d-flex w-100 flex-row text-break-word label-item"
             @click="toggleDropdownContentsCreateView"
-            >{{ footerCreateLabelTitle }}</gl-button
+            >{{ footerCreateLabelTitle }}</gl-deprecated-button
           >
         </li>
         <li>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue
index 57f7962dfe1..081c892e09f 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue
@@ -1,10 +1,10 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlLoadingIcon,
   },
   props: {
@@ -27,12 +27,12 @@ export default {
     {{ __('Labels') }}
     <template v-if="allowLabelEdit">
       <gl-loading-icon v-show="labelsSelectInProgress" inline />
-      <gl-button
+      <gl-deprecated-button
         variant="link"
         class="pull-right js-sidebar-dropdown-toggle"
         data-qa-selector="labels_edit_button"
         @click="toggleDropdownContents"
-        >{{ __('Edit') }}</gl-button
+        >{{ __('Edit') }}</gl-deprecated-button
       >
     </template>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue
index 8eaf8386b99..db378d6f977 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue
@@ -1,12 +1,12 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { sprintf, __ } from '~/locale';
 import UserAvatarLink from './user_avatar_link.vue';
 
 export default {
   components: {
     UserAvatarLink,
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     items: {
@@ -82,8 +82,12 @@ export default {
       :img-size="imgSize"
     />
     <template v-if="hasBreakpoint">
-      <gl-button v-if="hasHiddenItems" variant="link" @click="expand"> {{ expandText }} </gl-button>
-      <gl-button v-else variant="link" @click="collapse"> {{ __('show less') }} </gl-button>
+      <gl-deprecated-button v-if="hasHiddenItems" variant="link" @click="expand">
+        {{ expandText }}
+      </gl-deprecated-button>
+      <gl-deprecated-button v-else variant="link" @click="collapse">
+        {{ __('show less') }}
+      </gl-deprecated-button>
     </template>
   </div>
 </template>
-- 
cgit v1.2.3