@gitlab/ui 37.1.0 → 37.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [37.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.1.0...v37.2.0) (2022-03-03)
+
+
+### Features
+
+* **GlPath:** allow changing selected index programmatically ([d711441](https://gitlab.com/gitlab-org/gitlab-ui/commit/d71144162363ae62ff4d1aeb3ee3dc956bd04108))
+
 # [37.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.0.0...v37.1.0) (2022-02-28)
 
 

package/dist/components/base/form/form_input_group/form_input_group.documentation.js

@@ -1,32 +1,8 @@
-import examples from './examples';
-
-var description = "# Form Group Input\n\n<!-- STORY -->\n\nThe `GlFormInputGroup` component allows one to build more advanced text\ninput fields than generic `GlFormInput` when one needs that flexibility.\nBasic usage of the component:\n\n```html\n<div>\n  <gl-form-input-group>\n    <template #prepend>\n      <!-- Content to prepend your text input field -->\n    </template>\n    <template #append>\n      <!-- Content to append your text input field -->\n    </template>\n  </gl-form-input-group>\n</div>\n```\n\nOne can use any other component (custom or `<gl-*>`) in both slots or\nnot to use the slots at all. In the latter, the component will fallback\nto simple `GlFormInput`.\n\n## Predefined options\n\nSometimes custom text input from the user isn't desired. Instead, the\nuser should pick one of the predefined options that will automatically\npopulate the input field. Typically, such cases will also include an\nactionable button (like **Copy**) put into the `append` slot.\n\nTo achieve this effect, the `GlFormInputGroup` component accepts an\narray of options in the form of `predefinedOptions` param. For example:\n\n```javascript\nconst optionValues = [\n  { name: 'Option #1', value: 'Option #1 is selected!' },\n  { name: 'Option #2', value: 'Option #2 is selected!' },\n];\n...\n<gl-form-input-group :predefined-options=\"optionValues\" />\n```\n\nThis will tell `GlFormInputGroup` to render a dropdown in the `prepend`\nslot with all of the supplied options' `name`s. When one of the options\nis selected, the input field is automatically populated with the\noption's `value`. Check the \"Examples\" section below for \"With\npredefined options\" example.\n\n### Pro tips\n\nRead some useful tips below about specific usage of the component.\n\n### Readonly input\n\nOften you want to make sure user doesn't mess up the predefined content\npasted into the input field. In this case, you can set `readonly`\nparam to `true`. You can play with `Readonly` knob on the right.\n\n### Preselect the text to copy\n\nIf you set the `readonly` param on the `GlFormInputGroup` component,\nusers will still be able to manually select the text and copy it.\nHowever, it's more user-friendly to preselect the text for the users if\nthey click anywhere in the input field. This can be achieved by setting\nthe `select-on-click` param to `true`. You can play with\n`Select text on click` knob on the right. Even better, try enabling\n`Readonly`, `Select text on click`, and `Switch to predefined input`\naltogether. And, probably, remove `Prepend text`. Or leave it. It's your\ncall. :)\n";
+var description = "The `GlFormInputGroup` component allows one to build more advanced text\ninput fields than generic `GlFormInput` when one needs that flexibility.\nBasic usage of the component:\n\n```html\n<div>\n  <gl-form-input-group>\n    <template #prepend>\n      <!-- Content to prepend your text input field -->\n    </template>\n    <template #append>\n      <!-- Content to append your text input field -->\n    </template>\n  </gl-form-input-group>\n</div>\n```\n\nOne can use any other component (custom or `<gl-*>`) in both slots or\nnot to use the slots at all. In the latter, the component will fallback\nto simple `GlFormInput`.\n\n## Predefined options\n\nSometimes custom text input from the user isn't desired. Instead, the\nuser should pick one of the predefined options that will automatically\npopulate the input field. Typically, such cases will also include an\nactionable button (like **Copy**) put into the `append` slot.\n\nTo achieve this effect, the `GlFormInputGroup` component accepts an\narray of options in the form of `predefinedOptions` param. For example:\n\n```javascript\nconst optionValues = [\n  { name: 'Option #1', value: 'Option #1 is selected!' },\n  { name: 'Option #2', value: 'Option #2 is selected!' },\n];\n...\n<gl-form-input-group :predefined-options=\"optionValues\" />\n```\n\nThis will tell `GlFormInputGroup` to render a dropdown in the `prepend`\nslot with all of the supplied options' `name`s. When one of the options\nis selected, the input field is automatically populated with the\noption's `value`. Check the \"Examples\" section below for \"With\npredefined options\" example.\n\n### Pro tips\n\nRead some useful tips below about specific usage of the component.\n\n### Readonly input\n\nOften you want to make sure user doesn't mess up the predefined content\npasted into the input field. In this case, you can set `readonly`\nparam to `true`. You can play with `Readonly` knob on the right.\n\n### Preselect the text to copy\n\nIf you set the `readonly` param on the `GlFormInputGroup` component,\nusers will still be able to manually select the text and copy it.\nHowever, it's more user-friendly to preselect the text for the users if\nthey click anywhere in the input field. This can be achieved by setting\nthe `select-on-click` param to `true`. You can play with\n`Select text on click` knob on the right. Even better, try enabling\n`Readonly`, `Select text on click`, and `Switch to predefined input`\naltogether. And, probably, remove `Prepend text`. Or leave it. It's your\ncall. :)\n";
 
 var form_input_group_documentation = {
   followsDesignSystem: false,
-  description,
-  examples,
-  bootstrapComponent: 'b-form-input',
-  propsInfo: {
-    'select-on-click': {
-      type: Boolean,
-      additionalInfo: 'Automatically selects the content of the input field on click'
-    },
-    'predefined-options': {
-      type: Array,
-      additionalInfo: 'Array of options. Each option should have `name` and `value` information: {name: "Foo", value: "Bar"})'
-    }
-  },
-  slots: [{
-    name: 'default',
-    description: 'Allows replacement of default input field.'
-  }, {
-    name: 'prepend',
-    description: 'Is rendered in front of the input field.'
-  }, {
-    name: 'append',
-    description: 'Is rendered after the input field.'
-  }]
+  description
 };
 
 export default form_input_group_documentation;

package/dist/components/base/form/form_input_group/form_input_group.js

@@ -16,11 +16,18 @@ var script = {
   },
   mixins: [InputGroupMixin],
   props: {
+    /**
+     * Automatically selects the content of the input field on click.
+     */
     selectOnClick: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * Array of options. Each option should have `name` and `value` information: {name: "Foo", value: "Bar"})
+     */
     predefinedOptions: {
       type: Array,
       required: false,

package/dist/components/base/loading_icon/loading_icon.js

@@ -67,7 +67,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(_vm.rootElementType,{tag:"component",staticClass:"gl-spinner-container",attrs:{"role":"status"}},[_c('span',{staticClass:"align-text-bottom",class:_vm.cssClasses,attrs:{"aria-label":_vm.label}})])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.rootElementType,{tag:"component",staticClass:"gl-spinner-container",attrs:{"role":"status"}},[_c('span',{staticClass:"gl-vertical-align-text-bottom!",class:_vm.cssClasses,attrs:{"aria-label":_vm.label}})])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/pagination/pagination.js

@@ -277,6 +277,26 @@ var script = {
 
     nextPageIsDisabled() {
       return this.pageIsDisabled(this.value + 1);
+    },
+
+    prevPageAriaLabel() {
+      return this.prevPageIsDisabled ? false : this.labelPrevPage || this.labelPage(this.value - 1);
+    },
+
+    nextPageAriaLabel() {
+      return this.nextPageIsDisabled ? false : this.labelNextPage || this.labelPage(this.value + 1);
+    },
+
+    prevPageHref() {
+      if (this.prevPageIsDisabled) return false;
+      if (this.isLinkBased) return this.linkGen(this.value - 1);
+      return '#';
+    },
+
+    nextPageHref() {
+      if (this.nextPageIsDisabled) return false;
+      if (this.isLinkBased) return this.linkGen(this.value + 1);
+      return '#';
     }
 
   },
@@ -392,13 +412,13 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('ul',{staticClass:"pagination gl-pagination text-nowrap",class:_vm.wrapperClasses,attrs:{"role":"navigation","aria-label":"Pagination"}},[_c('li',{staticClass:"page-item",class:{
       disabled: _vm.prevPageIsDisabled,
       'flex-fill': _vm.isFillAlign,
-    }},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"aria-disabled":_vm.prevPageIsDisabled,"aria-label":_vm.labelPrevPage || _vm.labelPage(_vm.value - 1),"href":_vm.isLinkBased ? _vm.linkGen(_vm.value - 1) : '#'},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])],null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
+    },attrs:{"aria-hidden":_vm.prevPageIsDisabled}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])],null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
       disabled: item.disabled,
       'flex-fill': _vm.isFillAlign,
     }},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,[_vm._v(_vm._s(item.content))],null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{staticClass:"page-item",class:{
       disabled: _vm.nextPageIsDisabled,
       'flex-fill': _vm.isFillAlign,
-    }},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-disabled":_vm.nextPageIsDisabled,"aria-label":_vm.labelNextPage || _vm.labelPage(_vm.value + 1),"href":_vm.isLinkBased ? _vm.linkGen(_vm.value + 1) : '#'},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",[_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2):_vm._e()};
+    },attrs:{"aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",[_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/path/path.js

@@ -89,10 +89,16 @@ var script = {
     }
 
   },
+  watch: {
+    items: {
+      immediate: true,
+
+      handler(items) {
+        const selectedIndex = items.findIndex(item => item.selected);
+        this.selectedIndex = selectedIndex > 0 ? selectedIndex : 0;
+      }
 
-  mounted() {
-    const selectedIndex = this.items.findIndex(item => item.selected);
-    this.selectedIndex = selectedIndex > 0 ? selectedIndex : 0;
+    }
   },
 
   beforeCreate() {

package/documentation/documented_stories.js

@@ -137,6 +137,7 @@ export const setupStorybookReadme = () =>
         'GlChartSeriesLabel',
         'GlAreaChart',
         'GlLineChart',
+        'GlFormInputGroup',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

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

package/src/components/base/form/form_input_group/form_input_group.documentation.js

@@ -1,34 +1,6 @@
-import examples from './examples';
 import description from './form_input_group.md';
 
 export default {
   followsDesignSystem: false,
   description,
-  examples,
-  bootstrapComponent: 'b-form-input',
-  propsInfo: {
-    'select-on-click': {
-      type: Boolean,
-      additionalInfo: 'Automatically selects the content of the input field on click',
-    },
-    'predefined-options': {
-      type: Array,
-      additionalInfo:
-        'Array of options. Each option should have `name` and `value` information: {name: "Foo", value: "Bar"})',
-    },
-  },
-  slots: [
-    {
-      name: 'default',
-      description: 'Allows replacement of default input field.',
-    },
-    {
-      name: 'prepend',
-      description: 'Is rendered in front of the input field.',
-    },
-    {
-      name: 'append',
-      description: 'Is rendered after the input field.',
-    },
-  ],
 };

package/src/components/base/form/form_input_group/form_input_group.md

@@ -1,7 +1,3 @@
-# Form Group Input
-
-<!-- STORY -->
-
 The `GlFormInputGroup` component allows one to build more advanced text
 input fields than generic `GlFormInput` when one needs that flexibility.
 Basic usage of the component:

package/src/components/base/form/form_input_group/form_input_group.stories.js

@@ -1,73 +1,95 @@
-import { withKnobs, boolean, object, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { GlFormInputGroup, GlInputGroupText } from '../../../../index';
+import { disableControls } from '../../../../utils/stories_utils';
 import readme from './form_input_group.md';
 
-const components = {
-  GlFormInputGroup,
-  GlInputGroupText,
-};
-const predefinedOptions = [
-  { name: 'Embed', value: 'https://embed.com' },
-  { name: 'Share', value: 'https://share.org' },
-];
+const template = `
+  <gl-form-input-group
+    :readonly="readonly"
+    :select-on-click="selectOnClick"
+    :predefined-options="predefinedOptions"
+    :label="label"
+    :inputClass="inputClass">
+    <template #prepend v-if="prepend">
+      <gl-input-group-text>{{prepend}}</gl-input-group-text>
+    </template>
+    <template #append v-if="append">
+      <gl-input-group-text>{{append}}</gl-input-group-text>
+    </template>
+  </gl-form-input-group>
+`;
 
-documentedStoriesOf('base/form/form-input-group', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: {
-      prepend: {
-        default: text('Prepend text', 'Username'),
-      },
-      append: {
-        default: text('Append text', 'Add'),
-      },
-      readonly: {
-        default: boolean('Readonly', false),
-      },
-      select: {
-        default: boolean('Select text on click', false),
+const defaultValue = (prop) => GlFormInputGroup.props[prop].default;
+
+const generateProps = ({
+  prepend = 'Username',
+  append = 'Add',
+  readonly = false,
+  selectOnClick = false,
+  predefinedOptions = defaultValue('predefinedOptions')(),
+  label = '',
+  inputClass = '',
+} = {}) => ({
+  prepend,
+  append,
+  readonly,
+  selectOnClick,
+  predefinedOptions,
+  label,
+  inputClass,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlFormInputGroup, GlInputGroupText },
+  props: Object.keys(argTypes),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const PredefinedOptions = Template.bind({});
+PredefinedOptions.args = generateProps({
+  prepend: '',
+  predefinedOptions: [
+    { name: 'Embed', value: 'https://embed.com' },
+    { name: 'Share', value: 'https://share.org' },
+  ],
+});
+
+export default {
+  title: 'base/form/form-input-group',
+  component: GlFormInputGroup,
+  knobs: { disabled: true },
+  parameters: {
+    bootstrapComponent: 'b-form-input',
+    docs: {
+      description: {
+        component: readme,
       },
     },
-    template: `
-      <gl-form-input-group :readonly="readonly" :select-on-click="select">
-        <template #prepend v-if="prepend">
-          <gl-input-group-text>{{prepend}}</gl-input-group-text>
-        </template>
-        <template #append v-if="append">
-          <gl-input-group-text>{{append}}</gl-input-group-text>
-        </template>
-      </gl-form-input-group>
-    `,
-  }))
-  .add('with predefined options', () => ({
-    components,
-    props: {
-      prepend: {
-        default: text('Prepend text', ''),
+    knobs: { disabled: true },
+  },
+  argTypes: {
+    ...disableControls(['value']),
+    prepend: {
+      control: {
+        type: 'text',
       },
-      append: {
-        default: text('Append text', 'Add'),
-      },
-      readonly: {
-        default: boolean('Readonly', false),
+    },
+    append: {
+      control: {
+        type: 'text',
       },
-      select: {
-        default: boolean('Select text on click', false),
+    },
+    inputClass: {
+      control: {
+        type: 'text',
       },
-      options: {
-        default: object('Predefined options', predefinedOptions),
+    },
+    label: {
+      control: {
+        type: 'text',
       },
     },
-    template: `
-      <gl-form-input-group :readonly="readonly" :select-on-click="select" :predefined-options="options">
-        <template #prepend v-if="prepend">
-          <gl-input-group-text>{{prepend}}</gl-input-group-text>
-        </template>
-        <template #append v-if="append">
-          <gl-input-group-text>{{append}}</gl-input-group-text>
-        </template>
-      </gl-form-input-group>
-    `,
-  }));
+  },
+};

package/src/components/base/form/form_input_group/form_input_group.vue

@@ -16,11 +16,17 @@ export default {
   },
   mixins: [InputGroupMixin],
   props: {
+    /**
+     * Automatically selects the content of the input field on click.
+     */
     selectOnClick: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Array of options. Each option should have `name` and `value` information: {name: "Foo", value: "Bar"})
+     */
     predefinedOptions: {
       type: Array,
       required: false,
@@ -61,6 +67,7 @@ export default {
   <div>
     <b-input-group>
       <b-input-group-prepend v-if="activeOption || $scopedSlots.prepend">
+        <!-- @slot Is rendered in front of the input field. -->
         <slot name="prepend"></slot>
         <gl-dropdown v-if="activeOption" :text="activeOption">
           <gl-dropdown-item
@@ -74,6 +81,7 @@ export default {
           </gl-dropdown-item>
         </gl-dropdown>
       </b-input-group-prepend>
+      <!-- @slot Allows replacement of default input field. -->
       <slot>
         <b-form-input
           ref="input"
@@ -86,6 +94,7 @@ export default {
         />
       </slot>
       <b-input-group-append v-if="$scopedSlots.append">
+        <!-- @slot Is rendered after the input field. -->
         <slot name="append"></slot>
       </b-input-group-append>
     </b-input-group>

package/src/components/base/loading_icon/loading_icon.vue

@@ -64,6 +64,6 @@ export default {
 </script>
 <template>
   <component :is="rootElementType" class="gl-spinner-container" role="status">
-    <span :class="cssClasses" class="align-text-bottom" :aria-label="label"></span>
+    <span :class="cssClasses" class="gl-vertical-align-text-bottom!" :aria-label="label"></span>
   </component>
 </template>

package/src/components/base/pagination/pagination.spec.js

@@ -16,6 +16,7 @@ const mockResizeWidth = (width) => {
 describe('pagination component', () => {
   let wrapper;
   const findButtons = () => wrapper.findAll('.page-link');
+  const findItems = () => wrapper.findAll('.page-item');
   const propsData = {
     value: 3,
     perPage: 5,
@@ -375,9 +376,12 @@ describe('pagination component', () => {
         value: 1,
         nextPage: 2,
       });
+      const prevItem = findItems().at(0);
+      expect(prevItem.attributes('aria-hidden')).toBe('true');
       const prevButton = findButtons().at(0);
       expect(prevButton.element.tagName).toBe('SPAN');
-      expect(prevButton.attributes('aria-disabled')).toBe('true');
+      expect(prevButton.attributes('href')).toBeUndefined();
+      expect(prevButton.attributes('aria-label')).toBeUndefined();
     });
 
     it('disables next button when on last page', () => {
@@ -386,9 +390,12 @@ describe('pagination component', () => {
         value: 2,
         prevPage: 1,
       });
+      const nextItem = findItems().at(1);
+      expect(nextItem.attributes('aria-hidden')).toBe('true');
       const nextButton = findButtons().at(1);
       expect(nextButton.element.tagName).toBe('SPAN');
-      expect(nextButton.attributes('aria-disabled')).toBe('true');
+      expect(nextButton.attributes('href')).toBeUndefined();
+      expect(nextButton.attributes('aria-label')).toBeUndefined();
     });
   });
 });

package/src/components/base/pagination/pagination.vue

@@ -261,6 +261,22 @@ export default {
     nextPageIsDisabled() {
       return this.pageIsDisabled(this.value + 1);
     },
+    prevPageAriaLabel() {
+      return this.prevPageIsDisabled ? false : this.labelPrevPage || this.labelPage(this.value - 1);
+    },
+    nextPageAriaLabel() {
+      return this.nextPageIsDisabled ? false : this.labelNextPage || this.labelPage(this.value + 1);
+    },
+    prevPageHref() {
+      if (this.prevPageIsDisabled) return false;
+      if (this.isLinkBased) return this.linkGen(this.value - 1);
+      return '#';
+    },
+    nextPageHref() {
+      if (this.nextPageIsDisabled) return false;
+      if (this.isLinkBased) return this.linkGen(this.value + 1);
+      return '#';
+    },
   },
   created() {
     window.addEventListener('resize', debounce(this.setBreakpoint, resizeDebounceTime));
@@ -369,13 +385,13 @@ export default {
         disabled: prevPageIsDisabled,
         'flex-fill': isFillAlign,
       }"
+      :aria-hidden="prevPageIsDisabled"
     >
       <component
         :is="prevPageIsDisabled ? 'span' : 'a'"
         class="gl-link page-link prev-page-item gl-display-flex"
-        :aria-disabled="prevPageIsDisabled"
-        :aria-label="labelPrevPage || labelPage(value - 1)"
-        :href="isLinkBased ? linkGen(value - 1) : '#'"
+        :aria-label="prevPageAriaLabel"
+        :href="prevPageHref"
         @click="handlePrevious($event, value - 1)"
       >
         <!-- 
@@ -432,13 +448,13 @@ export default {
         disabled: nextPageIsDisabled,
         'flex-fill': isFillAlign,
       }"
+      :aria-hidden="nextPageIsDisabled"
     >
       <component
         :is="nextPageIsDisabled ? 'span' : 'a'"
         class="gl-link page-link next-page-item gl-display-flex"
-        :aria-disabled="nextPageIsDisabled"
-        :aria-label="labelNextPage || labelPage(value + 1)"
-        :href="isLinkBased ? linkGen(value + 1) : '#'"
+        :aria-label="nextPageAriaLabel"
+        :href="nextPageHref"
         @click="handleNext($event, value + 1)"
       >
         <!-- 

package/src/components/base/path/path.spec.js

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { mockPathItems } from './data';
 import GlPath from './path.vue';
@@ -143,6 +144,17 @@ describe('Path', () => {
       it('selects the first item', () => {
         expect(pathItemAt(0).classList).toContain(SELECTED_CLASS_INDIGO);
       });
+
+      it('updates the selected item when props change', async () => {
+        const items = JSON.parse(JSON.stringify(mockPathItems));
+        items[3].selected = true;
+
+        wrapper.setProps({ items });
+        await nextTick();
+
+        expect(pathItemAt(0).classList).not.toContain(SELECTED_CLASS_INDIGO);
+        expect(pathItemAt(3).classList).toContain(SELECTED_CLASS_INDIGO);
+      });
     });
 
     describe('with a specifically selected item passed in', () => {

package/src/components/base/path/path.vue

@@ -79,9 +79,14 @@ export default {
       return this.scrollLeft + BOUNDARY_WIDTH;
     },
   },
-  mounted() {
-    const selectedIndex = this.items.findIndex((item) => item.selected);
-    this.selectedIndex = selectedIndex > 0 ? selectedIndex : 0;
+  watch: {
+    items: {
+      immediate: true,
+      handler(items) {
+        const selectedIndex = items.findIndex((item) => item.selected);
+        this.selectedIndex = selectedIndex > 0 ? selectedIndex : 0;
+      },
+    },
   },
   beforeCreate() {
     this.pathUuid = uniqueId('path-');

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

@@ -7,10 +7,8 @@ const components = {
   GlTab,
 };
 
-const defaultValue = (prop) => GlTabs.props[prop].default;
-
 const generateProps = ({
-  justified = defaultValue('justified'),
+  justified,
   actionPrimary = null,
   actionSecondary = null,
   actionTertiary = null,
@@ -238,7 +236,7 @@ WithScrollAndGrowing.parameters = {
 };
 
 export default {
-  title: 'base/tabs/tabs',
+  title: 'base/tabs',
   component: GlTabs,
   subcomponents: { GlTab, GlScrollableTabs },
   parameters: {

package/dist/components/base/form/form_input_group/examples/form_input_group.basic.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-input-group',{scopedSlots:_vm._u([{key:"prepend",fn:function(){return [_c('gl-input-group-text',[_vm._v("Username")])]},proxy:true},{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}])})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/form_input_group/examples/form_input_group.predefined_options.example.js

@@ -1,54 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      optionValues: [{
-        name: 'Embed',
-        value: 'https://embed.com'
-      }, {
-        name: 'Share',
-        value: 'https://share.org'
-      }]
-    };
-  }
-
-};
-
-/* 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('gl-form-input-group',{attrs:{"predefined-options":_vm.optionValues},scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}])})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/form_input_group/examples/form_input_group.predefined_reactive.example.js

@@ -1,55 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      testVal: 'foo',
-      optionValues: [{
-        name: 'Embed',
-        value: 'https://embed.com'
-      }, {
-        name: 'Share',
-        value: 'https://share.org'
-      }]
-    };
-  }
-
-};
-
-/* 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('div',[_c('label',[_vm._v("\n      Data outside of the component\n      "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.testVal),expression:"testVal"}],staticClass:"gl-form-input",attrs:{"type":"text"},domProps:{"value":(_vm.testVal)},on:{"input":function($event){if($event.target.composing){ return; }_vm.testVal=$event.target.value;}}})]),_vm._v(" "),_c('gl-form-input-group',{attrs:{"predefined-options":_vm.optionValues},scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}]),model:{value:(_vm.testVal),callback:function ($$v) {_vm.testVal=$$v;},expression:"testVal"}})],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/form_input_group/examples/form_input_group.reactive.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      testVal: 'foo'
-    };
-  }
-
-};
-
-/* 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('div',[_c('label',[_vm._v("\n    Data outside of the component\n    "),_c('gl-form-input',{attrs:{"type":"text"},model:{value:(_vm.testVal),callback:function ($$v) {_vm.testVal=$$v;},expression:"testVal"}})],1),_vm._v(" "),_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"prepend",fn:function(){return [_c('gl-input-group-text',[_vm._v("Username")])]},proxy:true},{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}]),model:{value:(_vm.testVal),callback:function ($$v) {_vm.testVal=$$v;},expression:"testVal"}})],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/form_input_group/examples/index.js

@@ -1,27 +0,0 @@
-import BasicExample from './form_input_group.basic.example';
-import PredefinedOptionsExample from './form_input_group.predefined_options.example';
-import PredefinedReactiveExample from './form_input_group.predefined_reactive.example';
-import ReactiveExample from './form_input_group.reactive.example';
-
-var index = [{
-  name: 'Text Input Group',
-  items: [{
-    id: 'input-text-group',
-    name: 'Basic',
-    component: BasicExample
-  }, {
-    id: 'input-text-group-reactive',
-    name: 'Reactive update of/from the component',
-    component: ReactiveExample
-  }, {
-    id: 'input-text-group-predefined-options',
-    name: 'With predefined options',
-    component: PredefinedOptionsExample
-  }, {
-    id: 'input-text-group-predefined-reactive',
-    name: 'With predefined options and reactive updates',
-    component: PredefinedReactiveExample
-  }]
-}];
-
-export default index;

package/src/components/base/form/form_input_group/examples/form_input_group.basic.example.vue

@@ -1,10 +0,0 @@
-<template>
-  <gl-form-input-group>
-    <template #prepend>
-      <gl-input-group-text>Username</gl-input-group-text>
-    </template>
-    <template #append>
-      <gl-button variant="success">Add</gl-button>
-    </template>
-  </gl-form-input-group>
-</template>

package/src/components/base/form/form_input_group/examples/form_input_group.predefined_options.example.vue

@@ -1,25 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      optionValues: [
-        { name: 'Embed', value: 'https://embed.com' },
-        { name: 'Share', value: 'https://share.org' },
-      ],
-    };
-  },
-};
-</script>
-<template>
-  <!--
-optionValues = [
-{ name: 'Embed', value: 'https://embed.com' },
-{ name: 'Share', value: 'https://share.org' },
-]
--->
-  <gl-form-input-group :predefined-options="optionValues">
-    <template #append>
-      <gl-button variant="success">Add</gl-button>
-    </template>
-  </gl-form-input-group>
-</template>

package/src/components/base/form/form_input_group/examples/form_input_group.predefined_reactive.example.vue

@@ -1,32 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      testVal: 'foo',
-      optionValues: [
-        { name: 'Embed', value: 'https://embed.com' },
-        { name: 'Share', value: 'https://share.org' },
-      ],
-    };
-  },
-};
-</script>
-<template>
-  <!--
-optionValues = [
-{ name: 'Embed', value: 'https://embed.com' },
-{ name: 'Share', value: 'https://share.org' },
-]
--->
-  <div>
-    <label>
-      Data outside of the component
-      <input v-model="testVal" type="text" class="gl-form-input" />
-    </label>
-    <gl-form-input-group v-model="testVal" :predefined-options="optionValues">
-      <template #append>
-        <gl-button variant="success">Add</gl-button>
-      </template>
-    </gl-form-input-group>
-  </div>
-</template>

package/src/components/base/form/form_input_group/examples/form_input_group.reactive.example.vue

@@ -1,25 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      testVal: 'foo',
-    };
-  },
-};
-</script>
-<template>
-  <div>
-    <label>
-      Data outside of the component
-      <gl-form-input v-model="testVal" type="text" />
-    </label>
-    <gl-form-input-group v-model="testVal">
-      <template #prepend>
-        <gl-input-group-text>Username</gl-input-group-text>
-      </template>
-      <template #append>
-        <gl-button variant="success">Add</gl-button>
-      </template>
-    </gl-form-input-group>
-  </div>
-</template>

package/src/components/base/form/form_input_group/examples/index.js

@@ -1,32 +0,0 @@
-import BasicExample from './form_input_group.basic.example.vue';
-import PredefinedOptionsExample from './form_input_group.predefined_options.example.vue';
-import PredefinedReactiveExample from './form_input_group.predefined_reactive.example.vue';
-import ReactiveExample from './form_input_group.reactive.example.vue';
-
-export default [
-  {
-    name: 'Text Input Group',
-    items: [
-      {
-        id: 'input-text-group',
-        name: 'Basic',
-        component: BasicExample,
-      },
-      {
-        id: 'input-text-group-reactive',
-        name: 'Reactive update of/from the component',
-        component: ReactiveExample,
-      },
-      {
-        id: 'input-text-group-predefined-options',
-        name: 'With predefined options',
-        component: PredefinedOptionsExample,
-      },
-      {
-        id: 'input-text-group-predefined-reactive',
-        name: 'With predefined options and reactive updates',
-        component: PredefinedReactiveExample,
-      },
-    ],
-  },
-];