From e4580c13ca3cdae6e4ac8b78bb783d236e68bead Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Fri, 18 Jun 2021 00:14:01 +0000
Subject: [PATCH] Style polish for top nav redesign
---
.../components/frequent_items_list_item.vue | 9 ++++++---
.../nav/components/top_nav_menu_item.vue | 2 +-
.../nav/components/top_nav_menu_sections.vue | 2 +-
.../components/frequent_items_list_item_spec.js | 16 +++++++---------
.../nav/components/top_nav_menu_item_spec.js | 2 +-
5 files changed, 16 insertions(+), 15 deletions(-)
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
index d6fcdeb9e1393..7b169b68d2070 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
@@ -1,5 +1,6 @@
<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>
diff --git a/app/assets/javascripts/nav/components/top_nav_menu_item.vue b/app/assets/javascripts/nav/components/top_nav_menu_item.vue
index 08b2fbf2ed1ca..07c6fa7773af4 100644
--- a/app/assets/javascripts/nav/components/top_nav_menu_item.vue
+++ b/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" />
diff --git a/app/assets/javascripts/nav/components/top_nav_menu_sections.vue b/app/assets/javascripts/nav/components/top_nav_menu_sections.vue
index 442af512350a2..b8555df53df10 100644
--- a/app/assets/javascripts/nav/components/top_nav_menu_sections.vue
+++ b/app/assets/javascripts/nav/components/top_nav_menu_sections.vue
@@ -1,7 +1,7 @@
<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: {
diff --git a/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js b/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js
index 9a68115e4f694..a6aa1ece0328f 100644
--- a/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js
+++ b/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js
@@ -1,3 +1,4 @@
+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',
});
diff --git a/spec/frontend/nav/components/top_nav_menu_item_spec.js b/spec/frontend/nav/components/top_nav_menu_item_spec.js
index fd2b4d3b0565e..71154e18915b3 100644
--- a/spec/frontend/nav/components/top_nav_menu_item_spec.js
+++ b/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',
--
GitLab