diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/navigation_tabs.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/navigation_tabs.vue | 37 |
1 files changed, 20 insertions, 17 deletions
diff --git a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue index 3749888ee36..653ee7f20e9 100644 --- a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue +++ b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue @@ -1,5 +1,6 @@ <script> import $ from 'jquery'; +import { GlBadge, GlTabs, GlTab } from '@gitlab/ui'; /** * Given an array of tabs, renders non linked bootstrap tabs. @@ -23,6 +24,11 @@ import $ from 'jquery'; */ export default { name: 'NavigationTabs', + components: { + GlBadge, + GlTabs, + GlTab, + }, props: { tabs: { type: Array, @@ -50,24 +56,21 @@ export default { }; </script> <template> - <ul class="nav-links scrolling-tabs separator"> - <li + <gl-tabs class="gl-display-flex gl-w-full" nav-class="gl-border-0!"> + <gl-tab v-for="(tab, i) in tabs" :key="i" - :class="{ - active: tab.isActive, - }" + :title-link-class="`js-${scope}-tab-${tab.scope} gl-display-inline-flex`" + :title-link-attributes="{ 'data-testid': `${scope}-tab-${tab.scope}` }" + :active="tab.isActive" + @click="onTabClick(tab)" > - <a - :class="`js-${scope}-tab-${tab.scope}`" - :data-testid="`${scope}-tab-${tab.scope}`" - role="button" - @click="onTabClick(tab)" - > - {{ tab.name }} - - <span v-if="shouldRenderBadge(tab.count)" class="badge badge-pill"> {{ tab.count }} </span> - </a> - </li> - </ul> + <template #title> + <span class="gl-mr-2"> {{ tab.name }} </span> + <gl-badge v-if="shouldRenderBadge(tab.count)" size="sm" class="gl-tab-counter-badge">{{ + tab.count + }}</gl-badge> + </template> + </gl-tab> + </gl-tabs> </template> |