@gitlab/ui 37.1.0 → 37.4.0

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/search_box_by_click/search_box_by_click.documentation.js

@@ -1,96 +1,6 @@
-import examples from './examples';
 import description from './search_box_by_click.md';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  propsInfo: {
-    value: {
-      additionalInfo: 'If provided, used as value of search input',
-    },
-    historyItems: {
-      type: Array,
-      required: false,
-      additionalInfo: 'If provided, used as history items for this component',
-    },
-    placeholder: {
-      type: String,
-      required: false,
-      additionalInfo: 'If provided, used as history items for this component',
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      additionalInfo: 'If provided and true, disables the input and controls',
-    },
-    recentSearchesHeader: {
-      type: String,
-      required: false,
-      default: 'Recent searches',
-      additionalInfo: 'i18n for recent searches title within history dropdown',
-    },
-    clearButtonTitle: {
-      type: String,
-      required: false,
-      default: 'Clear',
-      additionalInfo: 'i18n for clear button title',
-    },
-    closeButtonTitle: {
-      type: String,
-      required: false,
-      default: 'Close',
-      additionalInfo: 'i18n for close button title within history dropdown',
-    },
-    clearRecentSearchesText: {
-      type: String,
-      required: false,
-      default: 'Clear recent searches',
-      additionalInfo: 'i18n for recent searches clear text',
-    },
-    tooltipContainer: {
-      additionalInfo:
-        'Container for tooltip. Valid values: DOM node, selector string or `false` for default',
-    },
-    searchButtonAttributes: {
-      additionalInfo: 'HTML attributes to add to the search button',
-    },
-  },
-  events: [
-    {
-      event: 'clear',
-      description: 'Emitted when search is cleared',
-    },
-    {
-      event: 'submit',
-      args: [
-        {
-          arg: 'value',
-          description: 'Search value',
-        },
-      ],
-      description: 'Emitted when search is submitted',
-    },
-    {
-      event: 'history-item-selected',
-      args: [
-        {
-          arg: 'value',
-          description: 'History item',
-        },
-      ],
-      description: 'Emitted when item from history is selected',
-    },
-    {
-      event: 'clear-history',
-      description: 'Emitted when clear history button is clicked',
-    },
-  ],
-  slots: [
-    {
-      name: 'history-item',
-      description:
-        'Slot to customize history item in history dropdown. Used only with history-items prop',
-    },
-  ],
 };

package/src/components/base/search_box_by_click/search_box_by_click.md

@@ -1,3 +1 @@
-# Search Box By Click
-
 Provides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).

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

@@ -1,57 +1,100 @@
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlSearchBoxByClick } from '../../../index';
+import { disableControls } from '../../../utils/stories_utils';
 import readme from './search_box_by_click.md';
 
-const components = {
-  GlSearchBoxByClick,
-};
+const template = `
+  <gl-search-box-by-click
+    :value="value"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :history-items="currentHistoryItems"
+    :clearable="clearable"
+    :recent-searches-header="recentSearchesHeader"
+    :clear-button-title="clearButtonTitle"
+    :close-button-title="closeButtonTitle"
+    :clear-recent-searches-text="clearRecentSearchesText"
+    :no-recent-searches-text="noRecentSearchesText"
+    :search-button-attributes="searchButtonAttributes"
+    @clear-history="clearCurrentHistory"
+  />
+`;
 
-function generateProps({ disabled = false, value = '', placeholder = 'Search' } = {}) {
-  return {
-    disabled: {
-      type: Boolean,
-      default: boolean('disabled', disabled),
-    },
-    value: {
-      type: String,
-      default: text('value', value),
+const defaultValue = (prop) => GlSearchBoxByClick.props[prop].default;
+
+const generateProps = ({
+  disabled = defaultValue('disabled'),
+  value = defaultValue('value'),
+  placeholder = defaultValue('placeholder'),
+  historyItems = defaultValue('historyItems'),
+  clearable = defaultValue('clearable'),
+  recentSearchesHeader = defaultValue('recentSearchesHeader'),
+  clearButtonTitle = defaultValue('clearButtonTitle'),
+  closeButtonTitle = defaultValue('closeButtonTitle'),
+  clearRecentSearchesText = defaultValue('clearRecentSearchesText'),
+  noRecentSearchesText = defaultValue('noRecentSearchesText'),
+  searchButtonAttributes = defaultValue('searchButtonAttributes')(),
+} = {}) => ({
+  disabled,
+  value,
+  placeholder,
+  historyItems,
+  clearable,
+  recentSearchesHeader,
+  clearButtonTitle,
+  closeButtonTitle,
+  clearRecentSearchesText,
+  noRecentSearchesText,
+  searchButtonAttributes,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlSearchBoxByClick,
+  },
+  props: Object.keys(argTypes),
+  template,
+  data() {
+    return {
+      currentHistoryItems: this.historyItems,
+    };
+  },
+  watch: {
+    historyItems(historyItems) {
+      this.currentHistoryItems = historyItems;
     },
-    placeholder: {
-      type: String,
-      default: text('placeholder', placeholder),
+  },
+  methods: {
+    clearCurrentHistory() {
+      this.currentHistoryItems = [];
     },
-  };
-}
+  },
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
 
-documentedStoriesOf('base/search-box-by-click', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template: `
-      <gl-search-box-by-click
-        :value="value"
-        :disabled="disabled"
-        :placeholder="placeholder"
-      />
-    `,
-  }))
-  .add('with history', () => ({
-    props: {
-      ...generateProps(),
-      history: {
-        type: Array,
-        default: ['author:@admin', 'assignee:@admin milestone:%12.5', 'label:~test'],
+export const History = Template.bind({});
+History.args = generateProps({
+  historyItems: ['author:@admin', 'assignee:@admin milestone:%12.5', 'label:~test'],
+});
+
+export default {
+  title: 'base/search-box-by-click',
+  component: GlSearchBoxByClick,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    ...disableControls(['tooltipContainer']),
+    historyItems: {
+      control: {
+        type: 'object',
       },
     },
-    components,
-    template: `
-      <gl-search-box-by-click
-        :value="value"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :history-items="history"
-      />
-    `,
-  }));
+  },
+};

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -26,6 +26,9 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
+    /**
+     * If provided, used as value of search input
+     */
     value: {
       required: false,
       default: '',
@@ -33,11 +36,17 @@ export default {
       // so we should not force any specific type for value here
       validator: () => true,
     },
+    /**
+     * If provided, used as history items for this component
+     */
     historyItems: {
       type: Array,
       required: false,
       default: null,
     },
+    /**
+     * If provided, used as a placeholder for this component
+     */
     placeholder: {
       type: String,
       required: false,
@@ -48,26 +57,41 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * If provided and true, disables the input and controls
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * i18n for recent searches title within history dropdown
+     */
     recentSearchesHeader: {
       type: String,
       required: false,
       default: 'Recent searches',
     },
+    /**
+     * i18n for clear button title
+     */
     clearButtonTitle: {
       type: String,
       required: false,
       default: 'Clear',
     },
+    /**
+     * i18n for close button title within history dropdown
+     */
     closeButtonTitle: {
       type: String,
       required: false,
       default: 'Close',
     },
+    /**
+     * i18n for recent searches clear text
+     */
     clearRecentSearchesText: {
       type: String,
       required: false,
@@ -78,12 +102,18 @@ export default {
       required: false,
       default: "You don't have any recent searches",
     },
+    /**
+     * Container for tooltip. Valid values: DOM node, selector string or `false` for default
+     */
     tooltipContainer: {
       required: false,
       default: false,
       validator: (value) =>
         value === false || typeof value === 'string' || value instanceof HTMLElement,
     },
+    /**
+     * HTML attributes to add to the search button
+     */
     searchButtonAttributes: {
       type: Object,
       required: false,
@@ -130,10 +160,19 @@ export default {
       this.$refs.historyDropdown.hide();
     },
     search(value) {
+      /**
+       * Emitted when search is submitted
+       * @property {*} value Search value
+       */
       this.$emit('submit', value);
     },
     selectHistoryItem(item) {
       this.currentValue = item;
+
+      /**
+       * Emitted when item from history is selected
+       * @property {*} item History item
+       */
       this.$emit('history-item-selected', item);
       setTimeout(() => {
         document.activeElement.blur();
@@ -141,11 +180,20 @@ export default {
     },
     clearInput() {
       this.currentValue = '';
+      /**
+       * Emitted when search is cleared
+       */
       this.$emit('clear');
       if (this.$refs.input) {
         this.$refs.input.$el.focus();
       }
     },
+    emitClearHistory() {
+      /**
+       * Emitted when clear history button is clicked
+       */
+      this.$emit('clear-history');
+    },
   },
 };
 </script>
@@ -187,10 +235,11 @@ export default {
             class="gl-search-box-by-click-history-item"
             @click="selectHistoryItem(item)"
           >
+            <!-- @slot Slot to customize history item in history dropdown. Used only with history-items prop -->
             <slot name="history-item" :historyItem="item">{{ item }}</slot>
           </gl-dropdown-item>
           <gl-dropdown-divider />
-          <gl-dropdown-item ref="clearHistory" @click="$emit('clear-history')">{{
+          <gl-dropdown-item ref="clearHistory" @click="emitClearHistory">{{
             clearRecentSearchesText
           }}</gl-dropdown-item>
         </template>

package/src/components/base/search_box_by_type/search_box_by_type.documentation.js

@@ -1,24 +1,6 @@
-import examples from './examples';
 import description from './search_box_by_type.md';
 
 export default {
   followsDesignSystem: true,
   description,
-  propsInfo: {
-    value: {
-      additionalInfo: 'If provided, used as value of search input',
-    },
-    disabled: {
-      additionalInfo: 'If provided and true, disables the input and controls',
-    },
-    isLoading: {
-      additionalInfo: 'Puts search box into loading state, rendering spinner',
-    },
-    tooltipContainer: {
-      additionalInfo:
-        'Container for tooltip. Valid values: DOM node, selector string or `false` for default',
-    },
-  },
-  examples,
-  bootstrapComponent: 'b-form-input',
 };

package/src/components/base/search_box_by_type/search_box_by_type.md

@@ -1,3 +1 @@
-# Search Box By Type
-
 Provides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).

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

@@ -1,49 +1,55 @@
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlSearchBoxByType } from '../../../index';
+import { disableControls } from '../../../utils/stories_utils';
 import readme from './search_box_by_type.md';
 
-const components = {
-  GlSearchBoxByType,
-};
+const template = `
+  <gl-search-box-by-type
+    v-model="searchQuery"
+    :clear-button-title="clearButtonTitle"
+    :disabled="disabled"
+    :is-loading="isLoading"
+    :placeholder="placeholder"
+  />
+`;
+
+const defaultValue = (prop) => GlSearchBoxByType.props[prop].default;
 
-function generateProps({
-  disabled = false,
-  value = '',
+const generateProps = ({
+  clearButtonTitle = defaultValue('clearButtonTitle'),
+  disabled = defaultValue('disabled'),
   placeholder = 'Search',
-  isLoading = false,
-} = {}) {
-  return {
-    disabled: {
-      type: Boolean,
-      default: boolean('disabled', disabled),
-    },
-    value: {
-      type: String,
-      default: text('value', value),
-    },
-    placeholder: {
-      type: String,
-      default: text('placeholder', placeholder),
-    },
-    isLoading: {
-      type: Boolean,
-      default: boolean('isLoading', isLoading),
-    },
-  };
-}
+  isLoading = defaultValue('isLoading'),
+} = {}) => ({
+  clearButtonTitle,
+  disabled,
+  placeholder,
+  isLoading,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlSearchBoxByType,
+  },
+  props: Object.keys(argTypes),
+  data: () => ({ searchQuery: '' }),
+  template,
+});
+export const Default = Template.bind({});
+Default.args = generateProps();
 
-documentedStoriesOf('base/search-box-by-type', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template: `
-      <gl-search-box-by-type
-        :value="value" 
-        :disabled="disabled"
-        :is-loading="isLoading"
-        :placeholder="placeholder"
-      />
-    `,
-  }));
+export default {
+  title: 'base/search-box-by-type',
+  component: GlSearchBoxByType,
+  parameters: {
+    knobs: { disable: true },
+    bootstrapComponent: 'b-form-input',
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    ...disableControls(['value']),
+  },
+};

package/src/components/base/search_box_by_type/search_box_by_type.vue

@@ -4,11 +4,6 @@ import GlFormInput from '../form/form_input/form_input.vue';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 
-const model = {
-  prop: 'value',
-  event: 'input',
-};
-
 export default {
   components: {
     GlClearIconButton,
@@ -17,8 +12,14 @@ export default {
     GlLoadingIcon,
   },
   inheritAttrs: false,
-  model,
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
   props: {
+    /**
+     * If provided, used as value of search input
+     */
     value: {
       type: String,
       required: false,
@@ -29,16 +30,25 @@ export default {
       required: false,
       default: 'Clear',
     },
+    /**
+     * If provided and true, disables the input and controls
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Puts search box into loading state, rendering spinner
+     */
     isLoading: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Container for tooltip. Valid values: DOM node, selector string or `false` for default
+     */
     tooltipContainer: {
       required: false,
       default: false,