Merge branch 'msj-glbutton-219895' into 'master'

Remove deprecated button in project_selector/project_list_item.vue

Closes #219895

See merge request gitlab-org/gitlab!39460

app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue

 <script>
 /* eslint-disable vue/no-v-html */
-import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
+import { GlButton, GlIcon } from '@gitlab/ui';
 import { isString } from 'lodash';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 import highlight from '~/lib/utils/highlight';
@@ -8,7 +8,7 @@ import { truncateNamespace } from '~/lib/utils/text_utility';
 
 export default {
   name: 'ProjectListItem',
-  components: { GlIcon, ProjectAvatar, GlDeprecatedButton },
+  components: { GlIcon, ProjectAvatar, GlButton },
   props: {
     project: {
       type: Object,
@@ -40,17 +40,16 @@ export default {
 };
 </script>
 <template>
-  <gl-deprecated-button
-    class="d-flex align-items-center btn pt-1 pb-1 border-0 project-list-item"
+  <gl-button
+    category="tertiary"
+    class="gl-display-flex gl-align-items-center gl-justify-content-start! gl-mb-2 gl-w-full"
     @click="onClick"
   >
-    <gl-icon
-      class="gl-ml-3 gl-mr-3 flex-shrink-0 position-top-0 js-selected-icon"
-      :class="{ 'js-selected visible': selected, 'js-unselected invisible': !selected }"
-      name="mobile-issue-close"
-    />
-    <project-avatar class="flex-shrink-0 js-project-avatar" :project="project" :size="32" />
-    <div class="d-flex flex-wrap project-namespace-name-container">
+    <div
+      class="gl-display-flex gl-align-items-center gl-flex-wrap project-namespace-name-container"
+    >
+      <gl-icon v-if="selected" class="js-selected-icon" name="mobile-issue-close" />
+      <project-avatar class="gl-flex-shrink-0 js-project-avatar" :project="project" :size="32" />
       <div
         v-if="truncatedNamespace"
         :title="projectNameWithNamespace"
@@ -65,5 +64,5 @@ export default {
         v-html="highlightedProjectName"
       ></div>
     </div>
-  </gl-deprecated-button>
+  </gl-button>
 </template>

app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue

@@ -100,7 +100,7 @@ export default {
         @bottomReached="bottomReached"
       >
         <template v-if="!showLoadingIndicator" #items>
-          <div class="d-flex flex-column">
+          <div class="gl-display-flex gl-flex-direction-column gl-p-3">
             <project-list-item
               v-for="project in projectSearchResults"
               :key="project.id"

spec/frontend/vue_shared/components/project_selector/project_list_item_spec.js

@@ -29,7 +29,7 @@ describe('ProjectListItem component', () => {
   it('does not render a check mark icon if selected === false', () => {
     wrapper = shallowMount(Component, options);
 
-    expect(wrapper.find('.js-selected-icon.js-unselected').exists()).toBe(true);
+    expect(wrapper.find('.js-selected-icon').exists()).toBe(false);
   });
 
   it('renders a check mark icon if selected === true', () => {
@@ -37,7 +37,7 @@ describe('ProjectListItem component', () => {
 
     wrapper = shallowMount(Component, options);
 
-    expect(wrapper.find('.js-selected-icon.js-selected').exists()).toBe(true);
+    expect(wrapper.find('.js-selected-icon').exists()).toBe(true);
   });
 
   it(`emits a "clicked" event when clicked`, () => {