@gitlab/ui 41.7.1 → 41.8.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [41.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v41.7.1...v41.8.0) (2022-06-14)
+
+
+### Features
+
+* **Tabs:** Use unique href for each tab ([171664d](https://gitlab.com/gitlab-org/gitlab-ui/commit/171664d2b5d74cc0bca174637705d89fc6197344))
+
 ## [41.7.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v41.7.0...v41.7.1) (2022-06-13)
 
 

package/dist/components/base/tabs/tab/tab.js

@@ -23,6 +23,15 @@ var script = {
       type: String,
       required: false,
       default: null
+    },
+
+    /**
+     * Provide an `href` for the tab, for example to associate the tab with the tab panel's ID
+     */
+    href: {
+      type: String,
+      required: false,
+      default: '#'
     }
   },
   computed: {
@@ -51,7 +60,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tab',_vm._g(_vm._b({attrs:{"title-link-class":_vm.linkClass,"query-param-value":_vm.queryParamValue},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-tab',_vm.$attrs,false),_vm.$listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tab',_vm._g(_vm._b({attrs:{"title-link-class":_vm.linkClass,"query-param-value":_vm.queryParamValue,"title-link-attributes":{ href: _vm.href }},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-tab',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "41.7.1",
+  "version": "41.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/tabs/tab/tab.spec.js

@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { BTab } from 'bootstrap-vue';
 import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
 import GlTab from './tab.vue';
 
@@ -6,9 +7,7 @@ describe('Tab component', () => {
   let wrapper;
 
   const createComponent = (options) => {
-    wrapper = shallowMount(GlTab, {
-      ...options,
-    });
+    wrapper = shallowMount(GlTab, { ...options });
   };
 
   it.each`
@@ -22,14 +21,25 @@ describe('Tab component', () => {
     'computed title link class is $expectedProp when titleLinkClass is $titleLinkClass',
     ({ titleLinkClass, expectedProp }) => {
       createComponent({
-        propsData: {
-          titleLinkClass,
-        },
+        propsData: { titleLinkClass },
       });
 
-      expect(wrapper.html()).toBe(
-        `<b-tab-stub tag="div" title="" titlelinkclass="${expectedProp}"></b-tab-stub>`
-      );
+      expect(wrapper.findComponent(BTab).props('titleLinkClass')).toEqual(expectedProp);
     }
   );
+
+  it('passes title-link-attributes to b-tab when href is explicitly passed', () => {
+    const titleLinkAttributes = 'href-example';
+    const expectedProp = { href: titleLinkAttributes };
+    createComponent({
+      propsData: { href: titleLinkAttributes },
+    });
+    expect(wrapper.findComponent(BTab).props('titleLinkAttributes')).toEqual(expectedProp);
+  });
+
+  it('passes # as href to b-tab when href is not passed', () => {
+    const expectedProp = { href: '#' };
+    createComponent();
+    expect(wrapper.findComponent(BTab).props('titleLinkAttributes')).toEqual(expectedProp);
+  });
 });

package/src/components/base/tabs/tab/tab.vue

@@ -24,6 +24,14 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Provide an `href` for the tab, for example to associate the tab with the tab panel's ID
+     */
+    href: {
+      type: String,
+      required: false,
+      default: '#',
+    },
   },
   computed: {
     linkClass() {
@@ -46,6 +54,7 @@ export default {
     :title-link-class="linkClass"
     :query-param-value="queryParamValue"
     v-bind="$attrs"
+    :title-link-attributes="{ href }"
     v-on="$listeners"
   >
     <template v-for="slot in Object.keys($slots)" #[slot]>

package/src/components/base/tabs/tabs/tabs.stories.js

@@ -226,6 +226,20 @@ WithScrollAndGrowing.parameters = {
   storyshots: { disable: true },
 };
 
+export const WithHref = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ...components, GlBadge },
+  template: wrap(`
+    <gl-tab href="#tab-1" title="Tab 1">
+      <h2 id="tab-1">Tab panel 1</h2>
+      <p>Some paragraph text<p>
+    </gl-tab>
+    <gl-tab href="#tab-2" title="Tab 2">
+      <h2 id="tab-2">Tab panel 2</h2>
+      <p>Some paragraph text<p>
+    </gl-tab>`),
+});
+
 export default {
   title: 'base/tabs',
   component: GlTabs,