Merge branch '301143-polish-for-top-nav-redesign' into 'master'

Style polish for top nav redesign

See merge request gitlab-org/gitlab!63241

app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue

 <script>
 /* eslint-disable vue/require-default-prop, vue/no-v-html */
+import { GlButton } from '@gitlab/ui';
 import highlight from '~/lib/utils/highlight';
 import { truncateNamespace } from '~/lib/utils/text_utility';
 import { mapVuexModuleState } from '~/lib/utils/vuex_module_mappers';
@@ -11,6 +12,7 @@ const trackingMixin = Tracking.mixin();
 export default {
   components: {
     Identicon,
+    GlButton,
   },
   mixins: [trackingMixin],
   inject: ['vuexModule'],
@@ -56,9 +58,10 @@ export default {
 
 <template>
   <li class="frequent-items-list-item-container">
-    <a
+    <gl-button
+      category="tertiary"
       :href="webUrl"
-      class="clearfix dropdown-item"
+      class="gl-text-left gl-justify-content-start!"
       @click="track('click_link', { label: `${dropdownType}_dropdown_frequent_items_list_item` })"
     >
       <div
@@ -90,6 +93,6 @@ export default {
           {{ truncatedNamespace }}
         </div>
       </div>
-    </a>
+    </gl-button>
   </li>
 </template>

app/assets/javascripts/nav/components/top_nav_menu_item.vue

@@ -42,7 +42,7 @@ export default {
     v-on="$listeners"
   >
     <span class="gl-display-flex">
-      <gl-icon v-if="menuItem.icon" :name="menuItem.icon" :class="{ 'gl-mr-2!': !iconOnly }" />
+      <gl-icon v-if="menuItem.icon" :name="menuItem.icon" :class="{ 'gl-mr-3!': !iconOnly }" />
       <template v-if="!iconOnly">
         {{ menuItem.title }}
         <gl-icon v-if="menuItem.view" name="chevron-right" class="gl-ml-auto" />

app/assets/javascripts/nav/components/top_nav_menu_sections.vue

 <script>
 import TopNavMenuItem from './top_nav_menu_item.vue';
 
-const BORDER_CLASSES = 'gl-pt-3 gl-border-1 gl-border-t-solid gl-border-gray-100';
+const BORDER_CLASSES = 'gl-pt-3 gl-border-1 gl-border-t-solid gl-border-gray-50';
 
 export default {
   components: {

spec/frontend/frequent_items/components/frequent_items_list_item_spec.js

+import { GlButton } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { trimText } from 'helpers/text_helper';
@@ -18,7 +19,7 @@ describe('FrequentItemsListItemComponent', () => {
   const findAvatar = () => wrapper.find({ ref: 'frequentItemsItemAvatar' });
   const findAllTitles = () => wrapper.findAll({ ref: 'frequentItemsItemTitle' });
   const findNamespace = () => wrapper.find({ ref: 'frequentItemsItemNamespace' });
-  const findAllAnchors = () => wrapper.findAll('a');
+  const findAllButtons = () => wrapper.findAllComponents(GlButton);
   const findAllNamespace = () => wrapper.findAll({ ref: 'frequentItemsItemNamespace' });
   const findAvatarContainer = () => wrapper.findAll({ ref: 'frequentItemsItemAvatarContainer' });
   const findAllMetadataContainers = () =>
@@ -109,7 +110,7 @@ describe('FrequentItemsListItemComponent', () => {
 
     it.each`
       name                    | selector                     | expected
-      ${'anchor'}             | ${findAllAnchors}            | ${1}
+      ${'button'}             | ${findAllButtons}            | ${1}
       ${'avatar container'}   | ${findAvatarContainer}       | ${1}
       ${'metadata container'} | ${findAllMetadataContainers} | ${1}
       ${'title'}              | ${findAllTitles}             | ${1}
@@ -119,13 +120,10 @@ describe('FrequentItemsListItemComponent', () => {
     });
 
     it('tracks when item link is clicked', () => {
-      const link = wrapper.find('a');
-      // NOTE: this listener is required to prevent the click from going through and causing:
-      //   `Error: Not implemented: navigation ...`
-      link.element.addEventListener('click', (e) => {
-        e.preventDefault();
-      });
-      link.trigger('click');
+      const link = wrapper.findComponent(GlButton);
+
+      link.vm.$emit('click');
+
       expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_link', {
         label: 'projects_dropdown_frequent_items_list_item',
       });

spec/frontend/nav/components/top_nav_menu_item_spec.js

@@ -73,7 +73,7 @@ describe('~/nav/components/top_nav_menu_item.vue', () => {
       expect(findButtonIcons()).toEqual([
         {
           name: TEST_MENU_ITEM.icon,
-          classes: ['gl-mr-2!'],
+          classes: ['gl-mr-3!'],
         },
         {
           name: 'chevron-right',