@gitlab/ui 35.1.0 → 36.3.0

package/src/components/base/filtered_search/filtered_search.vue

@@ -85,6 +85,16 @@ export default {
       required: false,
       default: false,
     },
+    searchButtonAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    searchInputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -253,6 +263,7 @@ export default {
     :value="tokens"
     :history-items="historyItems"
     :clearable="hasValue"
+    :search-button-attributes="searchButtonAttributes"
     data-testid="filtered-search-input"
     @submit="submit"
     @input="applyNewValue"
@@ -278,6 +289,8 @@ export default {
             :index="idx"
             :placeholder="termPlaceholder"
             :show-friendly-text="showFriendlyText"
+            :search-input-attributes="searchInputAttributes"
+            :is-last-token="isLastToken(idx)"
             class="gl-filtered-search-item"
             :class="{
               'gl-filtered-search-last-item': isLastToken(idx),

package/src/components/base/filtered_search/filtered_search_suggestion.stories.js

@@ -1,5 +1,5 @@
 import { withKnobs } from '@storybook/addon-knobs';
-import { GlFilteredSearchSuggestion } from '../../../../index';
+import { GlFilteredSearchSuggestion } from '../../../index';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import readme from './filtered_search_suggestion.md';
 

package/src/components/base/filtered_search/filtered_search_suggestion_list.stories.js

@@ -1,5 +1,5 @@
 import { withKnobs } from '@storybook/addon-knobs';
-import { GlFilteredSearchSuggestionList, GlFilteredSearchSuggestion } from '../../../../index';
+import { GlFilteredSearchSuggestionList, GlFilteredSearchSuggestion } from '../../../index';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { provide } from './common_story_options';
 import readme from './filtered_search_suggestion_list.md';

package/src/components/base/filtered_search/filtered_search_term.documentation.js

@@ -13,6 +13,12 @@ export default {
     value: {
       additionalInfo: 'Current term value',
     },
+    searchInputAttributes: {
+      additionalInfo: 'HTML attributes to add to the search input',
+    },
+    isLastToken: {
+      additionalInfo: 'If this is the last token',
+    },
   },
   events: [
     { event: 'activate', description: 'Emitted when this term token is clicked' },

package/src/components/base/filtered_search/filtered_search_term.spec.js

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import FilteredSearchTerm from './filtered_search_term.vue';
@@ -11,6 +12,8 @@ const availableTokens = [
 describe('Filtered search term', () => {
   let wrapper;
 
+  const searchInputAttributes = { 'data-qa-selector': 'foo-bar' };
+
   const defaultProps = {
     availableTokens: [],
   };
@@ -18,6 +21,7 @@ describe('Filtered search term', () => {
   const segmentStub = {
     name: 'gl-filtered-search-token-segment-stub',
     template: '<div><slot name="view"></slot><slot name="suggestions"></slot></div>',
+    props: ['searchInputAttributes', 'isLastToken'],
   };
 
   const createComponent = (props) => {
@@ -29,6 +33,8 @@ describe('Filtered search term', () => {
     });
   };
 
+  const findTokenSegmentComponent = () => wrapper.findComponent(segmentStub);
+
   it('renders value in inactive mode', () => {
     createComponent({ value: { data: 'test-value' } });
     expect(wrapper.html()).toMatchSnapshot();
@@ -44,11 +50,12 @@ describe('Filtered search term', () => {
     expect(wrapper.find('input').attributes('placeholder')).toBe('placeholder-stub');
   });
 
-  it('filters suggestions by input', () => {
+  it('filters suggestions by input', async () => {
     createComponent({ availableTokens, active: true, value: { data: 'test1' } });
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.findAllComponents(GlFilteredSearchSuggestion)).toHaveLength(2);
-    });
+
+    await nextTick();
+
+    expect(wrapper.findAllComponents(GlFilteredSearchSuggestion)).toHaveLength(2);
   });
 
   it.each`
@@ -61,14 +68,40 @@ describe('Filtered search term', () => {
     ${'backspace'}  | ${'destroy'}
   `(
     'emits $emittedEvent when token segment emits $originalEvent',
-    ({ originalEvent, emittedEvent }) => {
+    async ({ originalEvent, emittedEvent }) => {
       createComponent({ active: true, value: { data: 'something' } });
 
-      wrapper.findComponent(segmentStub).vm.$emit(originalEvent);
+      findTokenSegmentComponent().vm.$emit(originalEvent);
+
+      await nextTick();
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted()[emittedEvent]).toHaveLength(1);
-      });
+      expect(wrapper.emitted()[emittedEvent]).toHaveLength(1);
     }
   );
+
+  it('passes `searchInputAttributes` and `isLastToken` prop to `GlFilteredSearchTokenSegment`', () => {
+    const isLastToken = true;
+
+    createComponent({
+      value: { data: 'something' },
+      searchInputAttributes,
+      isLastToken,
+    });
+
+    expect(findTokenSegmentComponent().props()).toEqual({
+      searchInputAttributes,
+      isLastToken,
+    });
+  });
+
+  it('adds `searchInputAttributes` prop to search term input', () => {
+    createComponent({
+      placeholder: 'placeholder-stub',
+      searchInputAttributes,
+    });
+
+    expect(wrapper.find('input').attributes('data-qa-selector')).toBe(
+      searchInputAttributes['data-qa-selector']
+    );
+  });
 });

package/src/components/base/filtered_search/filtered_search_term.vue

@@ -28,6 +28,16 @@ export default {
       required: false,
       default: '',
     },
+    searchInputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    isLastToken: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     suggestedTokens() {
@@ -54,6 +64,8 @@ export default {
       class="gl-filtered-search-term-token"
       :active="active"
       :class="{ 'gl-w-full': placeholder }"
+      :search-input-attributes="searchInputAttributes"
+      :is-last-token="isLastToken"
       @activate="$emit('activate')"
       @deactivate="$emit('deactivate')"
       @complete="$emit('replace', { type: $event })"
@@ -74,6 +86,7 @@ export default {
       <template #view>
         <input
           v-if="placeholder"
+          v-bind="searchInputAttributes"
           class="gl-filtered-search-term-input"
           :placeholder="placeholder"
           :aria-label="placeholder"

package/src/components/base/filtered_search/filtered_search_token.stories.js

@@ -2,7 +2,7 @@ import { withKnobs, boolean } from '@storybook/addon-knobs';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlIcon } from '../../../../index';
+import { GlIcon } from '../../../index';
 import { provide } from './common_story_options';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import readme from './filtered_search_token.md';

package/src/components/base/filtered_search/filtered_search_token_segment.documentation.js

@@ -19,6 +19,12 @@ export default {
     value: {
       additionalInfo: 'Current term value',
     },
+    searchInputAttributes: {
+      additionalInfo: 'HTML attributes to add to the search input',
+    },
+    isLastToken: {
+      additionalInfo: 'If this is the last token',
+    },
   },
   events: [
     { event: 'activate', description: 'Emitted on mousedown event on the main component' },

package/src/components/base/filtered_search/filtered_search_token_segment.spec.js

@@ -6,6 +6,8 @@ const OPTIONS = [{ value: '=' }, { value: '!=' }];
 describe('Filtered search token segment', () => {
   let wrapper;
 
+  const searchInputAttributes = { 'data-qa-selector': 'foo-bar' };
+
   beforeAll(() => {
     if (!HTMLElement.prototype.scrollIntoView) {
       HTMLElement.prototype.scrollIntoView = jest.fn();
@@ -251,4 +253,55 @@ describe('Filtered search token segment', () => {
       });
     });
   });
+
+  describe('when input is active', () => {
+    it('adds `searchInputAttributes` prop to search token segment input', () => {
+      createComponent({ active: true, value: 'something', searchInputAttributes });
+
+      expect(wrapper.find('input').attributes('data-qa-selector')).toBe(
+        searchInputAttributes['data-qa-selector']
+      );
+    });
+
+    it('does not add `searchInputAttributes` prop to search token segment', () => {
+      createComponent({
+        active: true,
+        value: 'something',
+        searchInputAttributes,
+        isLastToken: true,
+      });
+
+      expect(wrapper.attributes('data-qa-selector')).toBe(undefined);
+    });
+  });
+
+  describe('when input is not active', () => {
+    describe('when `isLastToken` prop is `true`', () => {
+      it('adds `searchInputAttributes` prop to search token segment', () => {
+        createComponent({
+          active: false,
+          value: 'something',
+          searchInputAttributes,
+          isLastToken: true,
+        });
+
+        expect(wrapper.attributes('data-qa-selector')).toBe(
+          searchInputAttributes['data-qa-selector']
+        );
+      });
+    });
+
+    describe('when `isLastToken` prop is `false`', () => {
+      it('does not add `searchInputAttributes` prop to search token segment', () => {
+        createComponent({
+          active: false,
+          value: 'something',
+          searchInputAttributes,
+          isLastToken: false,
+        });
+
+        expect(wrapper.attributes('data-qa-selector')).toBe(undefined);
+      });
+    });
+  });
 });

package/src/components/base/filtered_search/filtered_search_token_segment.stories.js

@@ -1,7 +1,7 @@
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
-import { GlFilteredSearchSuggestion } from '../../../../index';
+import { GlFilteredSearchSuggestion } from '../../../index';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { provide } from './common_story_options';
 import readme from './filtered_search_term.md';

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -49,6 +49,16 @@ export default {
       required: true,
       validator: () => true,
     },
+    searchInputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    isLastToken: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
   data() {
@@ -244,6 +254,7 @@ export default {
 
 <template>
   <div
+    v-bind="isLastToken && !active && searchInputAttributes"
     class="gl-filtered-search-token-segment"
     :class="{ 'gl-filtered-search-token-segment-active': active }"
     data-testid="filtered-search-token-segment"
@@ -252,6 +263,7 @@ export default {
     <template v-if="active">
       <input
         ref="input"
+        v-bind="searchInputAttributes"
         v-model="inputValue"
         class="gl-filtered-search-token-segment-input"
         :aria-label="label"

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

@@ -5,7 +5,7 @@ import {
   GlFormSelect,
   GlFormCheckbox,
   GlButton,
-} from '../../../../index';
+} from '../../../index';
 import { setStoryTimeout } from '../../../utils/test_utils';
 import readme from './form.md';
 

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

@@ -1,4 +1,4 @@
-import { GlFormCheckbox, GlFormCheckboxGroup } from '../../../../../index';
+import { GlFormCheckbox, GlFormCheckboxGroup } from '../../../../index';
 import readme from './form_checkbox.md';
 
 const components = {

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

@@ -1,6 +1,6 @@
 import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
-import { GlFormGroup, GlFormInput, GlFormTextarea } from '../../../../../index';
+import { GlFormGroup, GlFormInput, GlFormTextarea } from '../../../../index';
 import { sizeOptions } from '../../../../utils/constants';
 import readme from './form_group.md';
 

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

@@ -1,4 +1,4 @@
-import { GlFormInput } from '../../../../../index';
+import { GlFormInput } from '../../../../index';
 import { formInputSizes } from '../../../../utils/constants';
 import readme from './form_input.md';
 

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

@@ -1,6 +1,6 @@
 import { withKnobs, boolean, object, text } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
-import { GlFormInputGroup, GlInputGroupText } from '../../../../../index';
+import { GlFormInputGroup, GlInputGroupText } from '../../../../index';
 import readme from './form_input_group.md';
 
 const components = {

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

@@ -1,4 +1,4 @@
-import { GlFormRadio } from '../../../../../index';
+import { GlFormRadio } from '../../../../index';
 import readme from './form_radio.md';
 
 const defaultOptions = [

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

@@ -1,6 +1,6 @@
 import { withKnobs, object, text } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
-import { GlFormRadioGroup, GlFormRadio } from '../../../../../index';
+import { GlFormRadioGroup, GlFormRadio } from '../../../../index';
 import readme from './form_radio_group.md';
 
 const components = {

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

@@ -1,4 +1,4 @@
-import { GlFormSelect } from '../../../../../index';
+import { GlFormSelect } from '../../../../index';
 import { sizeOptions, formStateOptions } from '../../../../utils/constants';
 import { formSelectOptions } from './constants';
 import readme from './form_select.md';

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

@@ -1,3 +1,5 @@
 <script>
-export { BFormText as default } from 'bootstrap-vue';
+import { BFormText } from 'bootstrap-vue';
+
+export default BFormText;
 </script>

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

@@ -1,4 +1,4 @@
-import { GlFormTextarea } from '../../../../../index';
+import { GlFormTextarea } from '../../../../index';
 import readme from './form_textarea.md';
 
 const template = `

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

@@ -1,5 +1,5 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { GlIcon } from '../../../../index';
+import { GlIcon } from '../../../index';
 import { iconSizeOptions } from '../../../utils/constants';
 import readme from './icon.md';
 

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

@@ -1,5 +1,5 @@
 import { setStoryTimeout } from '../../../utils/test_utils';
-import { GlInfiniteScroll } from '../../../../index';
+import { GlInfiniteScroll } from '../../../index';
 import readme from './infinite_scroll.md';
 
 const ITEMS_BATCH_SIZE = 20;

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

@@ -1,4 +1,4 @@
-import { GlLabel } from '../../../../index';
+import { GlLabel } from '../../../index';
 import { labelSizeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './label.md';
 

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

@@ -1,4 +1,4 @@
-import { GlLink } from '../../../../index';
+import { GlLink } from '../../../index';
 import { targetOptions } from '../../../utils/constants';
 import readme from './link.md';
 

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

@@ -1,4 +1,4 @@
-import { GlLoadingIcon } from '../../../../index';
+import { GlLoadingIcon } from '../../../index';
 import { viewModeOptions, loadingIconSizes } from '../../../utils/constants';
 import readme from './loading_icon.md';
 

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

@@ -1,4 +1,4 @@
-import { GlModal, GlModalDirective, GlButton } from '../../../../index';
+import { GlModal, GlModalDirective, GlButton } from '../../../index';
 import { variantOptionsWithNoDefault } from '../../../utils/constants';
 import readme from './modal.md';
 

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

@@ -5,7 +5,7 @@ import {
   GlDropdownItem,
   GlDropdownDivider,
   GlIcon,
-} from '../../../../index';
+} from '../../../index';
 import readme from './nav.md';
 
 export const Default = (_args, { argTypes }) => ({

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

@@ -1,4 +1,4 @@
-import { GlNavbar } from '../../../../index';
+import { GlNavbar } from '../../../index';
 import readme from './navbar.md';
 
 const Template = (args, { argTypes }) => ({

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

@@ -1,4 +1,4 @@
-import { GlPaginatedList, GlButton } from '../../../../index';
+import { GlPaginatedList, GlButton } from '../../../index';
 import readme from './paginated_list.md';
 
 const sampleList = [

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

@@ -1,4 +1,4 @@
-import { GlPath, GlPopover } from '../../../../index';
+import { GlPath, GlPopover } from '../../../index';
 import { glThemes } from '../../../utils/constants';
 import { mockPathItems } from './data';
 import readme from './path.md';

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

@@ -1,28 +1,3 @@
-import examples from './examples';
-
 export default {
   followsDesignSystem: true,
-  examples,
-  bootstrapComponent: 'b-popover',
-  bootstrapPropsInfo: {
-    target: {
-      additionalInfo:
-        'Element string ID, or a reference to an element or component, that you want to trigger the popover.',
-      required: true,
-    },
-    triggers: {
-      enum: 'triggerVariantOptions',
-    },
-    placement: {
-      enum: 'popoverPlacements',
-    },
-    boundary: {
-      additionalInfo:
-        '"scrollParent", "viewport", "window", or a reference to an HTML element. This is the container that the popover will be constrained to visually.You may need to change this if your target element is in a small container with overflow scroll',
-    },
-    container: {
-      additionalInfo:
-        'Specify container as null (default, appends to <body>) to avoid rendering problems in more complex components (like input groups, button groups, etc). You can use container to optionally specify a different element to append the popover to.',
-    },
-  },
 };