@gitlab/ui 32.43.2 → 32.45.1

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

@@ -1,4 +1,5 @@
-import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
+import Vue from 'vue';
+import { shallowMount, mount } from '@vue/test-utils';
 import GlFilteredSearch from './filtered_search.vue';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
@@ -14,8 +15,7 @@ const FakeToken = {
   render: (h) => h('div'),
 };
 
-const localVue = createLocalVue();
-localVue.directive('GlTooltip', () => {});
+Vue.directive('GlTooltip', () => {});
 
 let wrapper;
 describe('Filtered search', () => {
@@ -23,12 +23,11 @@ describe('Filtered search', () => {
     availableTokens: [{ type: 'faketoken', token: FakeToken }],
   };
 
-  const findSearchBox = () => wrapper.find({ name: 'GlSearchBoxByClickStub' });
+  const findSearchBox = () => wrapper.findComponent({ name: 'GlSearchBoxByClickStub' });
 
   const createComponent = (props) => {
     wrapper = shallowMount(GlFilteredSearch, {
       propsData: { ...defaultProps, ...props },
-      localVue,
       stubs: {
         GlSearchBoxByClick: {
           name: 'GlSearchBoxByClickStub',
@@ -116,11 +115,11 @@ describe('Filtered search', () => {
       });
       await wrapper.vm.$nextTick();
 
-      wrapper.find(FakeToken).vm.$emit('activate');
+      wrapper.findComponent(FakeToken).vm.$emit('activate');
 
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.find(FakeToken).props('active')).toBe(true);
+      expect(wrapper.findComponent(FakeToken).props('active')).toBe(true);
     });
 
     it('deactivates token when requested', async () => {
@@ -129,8 +128,8 @@ describe('Filtered search', () => {
       });
       await wrapper.vm.$nextTick();
 
-      wrapper.find(FakeToken).vm.$emit('activate');
-      wrapper.find(FakeToken).vm.$emit('deactivate');
+      wrapper.findComponent(FakeToken).vm.$emit('activate');
+      wrapper.findComponent(FakeToken).vm.$emit('deactivate');
 
       await wrapper.vm.$nextTick();
 
@@ -148,12 +147,12 @@ describe('Filtered search', () => {
       });
       await wrapper.vm.$nextTick();
 
-      wrapper.find(FakeToken).vm.$emit('activate');
+      wrapper.findComponent(FakeToken).vm.$emit('activate');
       wrapper.findAllComponents(FakeToken).at(1).vm.$emit('deactivate');
 
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.find(FakeToken).props('active')).toBe(true);
+      expect(wrapper.findComponent(FakeToken).props('active')).toBe(true);
     });
 
     it('removes empty term tokens on deactivate', async () => {
@@ -187,7 +186,7 @@ describe('Filtered search', () => {
       });
       await wrapper.vm.$nextTick();
 
-      wrapper.find(FakeToken).vm.$emit('destroy');
+      wrapper.findComponent(FakeToken).vm.$emit('destroy');
 
       await wrapper.vm.$nextTick();
 
@@ -203,16 +202,16 @@ describe('Filtered search', () => {
       });
       await wrapper.vm.$nextTick();
 
-      wrapper.find(FakeToken).vm.$emit('destroy');
+      wrapper.findComponent(FakeToken).vm.$emit('destroy');
 
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.find(GlFilteredSearchTerm).props('active')).toBe(true);
+      expect(wrapper.findComponent(GlFilteredSearchTerm).props('active')).toBe(true);
     });
 
     it('does not destroy last token', async () => {
       createComponent();
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('destroy');
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('destroy');
 
       await wrapper.vm.$nextTick();
 
@@ -224,7 +223,7 @@ describe('Filtered search', () => {
     it('replaces token when requested', async () => {
       createComponent();
       wrapper
-        .find(GlFilteredSearchTerm)
+        .findComponent(GlFilteredSearchTerm)
         .vm.$emit('replace', { type: 'faketoken', value: { data: 'test' } });
 
       await wrapper.vm.$nextTick();
@@ -245,7 +244,7 @@ describe('Filtered search', () => {
       await wrapper.vm.$nextTick();
 
       wrapper
-        .find(GlFilteredSearchTerm)
+        .findComponent(GlFilteredSearchTerm)
         .vm.$emit('replace', { type: 'faketoken', value: { data: 'test' } });
 
       await wrapper.vm.$nextTick();
@@ -258,8 +257,8 @@ describe('Filtered search', () => {
 
     it('inserts single token when requested', async () => {
       createComponent({ value: ['one'] });
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('activate');
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('split');
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('activate');
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('split');
 
       await wrapper.vm.$nextTick();
 
@@ -273,8 +272,8 @@ describe('Filtered search', () => {
       createComponent({ value: ['one', 'two'] });
       await wrapper.vm.$nextTick();
 
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('activate');
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('split');
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('activate');
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('split');
 
       await wrapper.vm.$nextTick();
 
@@ -288,11 +287,11 @@ describe('Filtered search', () => {
 
     it('inserts multiple tokens when requested', async () => {
       createComponent({ value: ['one'] });
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('activate');
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('activate');
 
       await wrapper.vm.$nextTick();
 
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('split', ['foo', 'bar']);
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('split', ['foo', 'bar']);
 
       await wrapper.vm.$nextTick();
 
@@ -306,7 +305,7 @@ describe('Filtered search', () => {
 
     it('submits entire search when submit is requested', () => {
       createComponent();
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('submit');
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('submit');
       expect(wrapper.emitted().submit).toBeDefined();
     });
   });
@@ -315,7 +314,7 @@ describe('Filtered search', () => {
     createComponent({
       value: ['one'],
     });
-    wrapper.find(GlFilteredSearchTerm).vm.$emit('submit');
+    wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('submit');
     expect(wrapper.emitted().submit).toBeDefined();
     expect(wrapper.emitted().submit[0][0]).toStrictEqual(['one']);
   });
@@ -324,7 +323,7 @@ describe('Filtered search', () => {
     createComponent({
       value: ['one', 'two', { type: 'faketoken', value: { data: 'smth' } }, 'four', 'five'],
     });
-    wrapper.find(GlFilteredSearchTerm).vm.$emit('submit');
+    wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('submit');
     expect(wrapper.emitted().submit).toBeDefined();
     expect(wrapper.emitted().submit[0][0]).toStrictEqual([
       'one two',
@@ -339,7 +338,7 @@ describe('Filtered search', () => {
     });
     await wrapper.vm.$nextTick();
 
-    const fakeTokenInstance = wrapper.find(FakeToken);
+    const fakeTokenInstance = wrapper.findComponent(FakeToken);
     expect(fakeTokenInstance.exists()).toBe(true);
     expect(Object.keys(fakeTokenInstance.attributes())).toEqual(
       expect.arrayContaining(['current-value', 'index', 'config', 'value'])
@@ -383,7 +382,6 @@ describe('Filtered search integration tests', () => {
 
   const mountComponent = (props) => {
     wrapper = mount(GlFilteredSearch, {
-      localVue,
       propsData: {
         availableTokens: testTokens,
         ...props,
@@ -432,7 +430,7 @@ describe('Filtered search integration tests', () => {
     });
 
     it('displays suggestions list', () => {
-      const suggestions = wrapper.find(GlFilteredSearchSuggestionList);
+      const suggestions = wrapper.findComponent(GlFilteredSearchSuggestionList);
       expect(suggestions.exists()).toBe(true);
       expect(suggestions.findAllComponents(GlFilteredSearchSuggestion)).toHaveLength(
         testTokens.filter((t) => !t.disabled).length
@@ -445,7 +443,7 @@ describe('Filtered search integration tests', () => {
 
       await wrapper.vm.$nextTick();
 
-      const suggestions = wrapper.find(GlFilteredSearchSuggestionList);
+      const suggestions = wrapper.findComponent(GlFilteredSearchSuggestionList);
       expect(suggestions.exists()).toBe(true);
       expect(suggestions.findAllComponents(GlFilteredSearchSuggestion)).toHaveLength(1);
     });
@@ -456,7 +454,7 @@ describe('Filtered search integration tests', () => {
 
       await wrapper.vm.$nextTick();
 
-      const suggestions = wrapper.find(GlFilteredSearchSuggestionList);
+      const suggestions = wrapper.findComponent(GlFilteredSearchSuggestionList);
       expect(suggestions.exists()).toBe(true);
       expect(suggestions.findAllComponents(GlFilteredSearchSuggestion)).toHaveLength(3);
     });
@@ -467,7 +465,7 @@ describe('Filtered search integration tests', () => {
 
       await wrapper.vm.$nextTick();
 
-      const suggestions = wrapper.find(GlFilteredSearchSuggestionList);
+      const suggestions = wrapper.findComponent(GlFilteredSearchSuggestionList);
       expect(suggestions.exists()).toBe(false);
     });
 
@@ -481,7 +479,7 @@ describe('Filtered search integration tests', () => {
 
       await wrapper.vm.$nextTick();
 
-      const token = wrapper.find(GlFilteredSearchToken);
+      const token = wrapper.findComponent(GlFilteredSearchToken);
       expect(token.exists()).toBe(true);
     });
 
@@ -518,7 +516,7 @@ describe('Filtered search integration tests', () => {
 
     await wrapper.vm.$nextTick();
 
-    const suggestions = wrapper.find(GlFilteredSearchSuggestionList);
+    const suggestions = wrapper.findComponent(GlFilteredSearchSuggestionList);
     expect(suggestions.exists()).toBe(true);
     expect(suggestions.findAllComponents(GlFilteredSearchSuggestion)).toHaveLength(2);
   });
@@ -549,7 +547,9 @@ describe('Filtered search integration tests', () => {
 
     await wrapper.vm.$nextTick();
 
-    expect(document.activeElement).toBe(wrapper.find(GlFilteredSearchTerm).find('input').element);
+    expect(document.activeElement).toBe(
+      wrapper.findComponent(GlFilteredSearchTerm).find('input').element
+    );
   });
 
   it('clicking clear button clears component input', async () => {

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

@@ -64,7 +64,7 @@ describe('Filtered search term', () => {
     ({ originalEvent, emittedEvent }) => {
       createComponent({ active: true, value: { data: 'something' } });
 
-      wrapper.find(segmentStub).vm.$emit(originalEvent);
+      wrapper.findComponent(segmentStub).vm.$emit(originalEvent);
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted()[emittedEvent]).toHaveLength(1);

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

@@ -1,37 +1,6 @@
-import examples from './examples/form_input';
 import description from './form_input.md';
 
 export default {
   description,
-  examples,
-  bootstrapComponent: 'b-form-input',
   followsDesignSystem: true,
-  propsInfo: {
-    size: {
-      additionalInfo: 'Maximum width of the input',
-      enum: 'formInputSizes',
-    },
-  },
-  events: [
-    {
-      event: 'input',
-      args: [
-        {
-          arg: 'value',
-          description: '(String)',
-        },
-      ],
-      description: 'Emitted to update the v-model',
-    },
-    {
-      event: 'update',
-      args: [
-        {
-          arg: 'value',
-          description: '(String)',
-        },
-      ],
-      description: `Triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props). Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.`,
-    },
-  ],
 };

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

@@ -1,3 +1 @@
-# Form Input
-
 General user input to be used in forms.

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

@@ -1,13 +1,7 @@
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { GlFormInput } from '../../../../../index';
 import { formInputSizes } from '../../../../utils/constants';
 import readme from './form_input.md';
 
-const components = {
-  GlFormInput,
-};
-
 const template = `
   <gl-form-input
     type="text"
@@ -16,51 +10,65 @@ const template = `
     :size="size"
   />`;
 
-function generateProps({
+const generateProps = ({
   size = GlFormInput.props.size.default,
   value = '',
   disabled = false,
-} = {}) {
-  return {
-    size: {
-      type: String,
-      default: select('size', formInputSizes, size),
-    },
-    value: {
-      type: String,
-      default: text('value', value),
-    },
-    disabled: {
-      type: Boolean,
-      default: boolean('disabled', disabled),
-    },
-  };
-}
+} = {}) => ({
+  size,
+  value,
+  disabled,
+});
+
+const Template = (args) => ({
+  components: { GlFormInput },
+  props: Object.keys(args),
+  template,
+});
 
-documentedStoriesOf('base/form/form-input', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    template,
-  }))
-  .add('disabled', () => ({
-    components,
-    props: generateProps({ value: 'some text', disabled: true }),
-    template,
-  }))
-  .add('sizes', () => ({
-    components,
-    data: () => ({
-      formInputSizes,
-    }),
-    template: `
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const Disabled = Template.bind({});
+Disabled.args = generateProps({ value: 'some text', disabled: true });
+
+export const Sizes = (args, { argTypes }) => ({
+  components: { GlFormInput },
+  props: Object.keys(argTypes),
+  data: () => ({
+    formInputSizes,
+  }),
+  template: `
       <div>
         <gl-form-input
           v-for="(size, name) in formInputSizes"
+          :key="size"
           :size="size"
           :value="name"
         />
       </div>
     `,
-  }));
+});
+Sizes.args = {};
+
+export default {
+  title: 'base/form/form-input',
+  component: GlFormInput,
+  parameters: {
+    bootstrapComponent: 'b-form-input',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      options: formInputSizes,
+      control: {
+        type: 'select',
+      },
+    },
+  },
+};

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

@@ -2,18 +2,22 @@
 import { BFormInput } from 'bootstrap-vue';
 import { formInputSizes } from '../../../../utils/constants';
 
-const model = {
-  prop: 'value',
-  event: 'input',
-};
+const MODEL_PROP = 'value';
+const MODEL_EVENT = 'input';
 
 export default {
   components: {
     BFormInput,
   },
   inheritAttrs: false,
-  model,
+  model: {
+    prop: MODEL_PROP,
+    event: MODEL_EVENT,
+  },
   props: {
+    /**
+     * Maximum width of the input
+     */
     size: {
       type: String,
       required: false,
@@ -33,10 +37,23 @@ export default {
         // Swap purpose of input and update events from underlying BFormInput.
         // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
         input: (...args) => {
+          /**
+           * Emitted to update the v-model
+           *
+           * @event update
+           * @property {string} value new value
+           */
           this.$emit('update', ...args);
         },
         update: (...args) => {
-          this.$emit(model.event, ...args);
+          /**
+           * Triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props).
+           * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
+           *
+           * @event input
+           * @property {string} value new value
+           */
+          this.$emit(MODEL_EVENT, ...args);
         },
       };
     },

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

@@ -15,7 +15,7 @@ describe('Input Group', () => {
   it('renders without errors', () => {
     createWrapper();
     expect(wrapper.findComponent(BInputGroup).exists()).toBe(true);
-    expect(global.console.error).not.toHaveBeenCalled();
+    expect(wrapper).not.toHaveLoggedVueErrors();
   });
 
   it('renders prepend and append texts properly in the slots', () => {
@@ -87,8 +87,6 @@ describe('Input Group', () => {
       });
 
       expect(global.console).toHaveLoggedVueErrors();
-
-      global.console.error.mockReset();
     });
 
     it('are rendered when supplied', () => {

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

@@ -1,9 +1,7 @@
-import examples from './examples';
 import * as description from './form_text.md';
 
 export default {
   description,
-  examples,
   bootstrapComponent: 'b-form-text',
   propsInfo: {},
 };

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

@@ -1,6 +1,4 @@
-# FormText
-
-<!-- STORY -->
+# Usage
 
 The component used to render form group descriptions. Useful for when you need
 to add additional form text elements to a form group.

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

@@ -1,16 +1,28 @@
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import readme from './form_text.md';
 import GlFormText from './form_text.vue';
 
-const components = {
-  GlFormText,
-};
-
-documentedStoriesOf('base/form/form-text', readme).add('default', () => ({
-  components,
+const Template = (args) => ({
+  components: { GlFormText },
+  props: Object.keys(args),
   template: `
       <div class="gl-form-group">
         <gl-form-text>Some form text</gl-form-text>
       </div>
     `,
-}));
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export default {
+  title: 'base/form/form-text',
+  component: GlFormText,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -1,30 +1,5 @@
-import examples from './examples';
 import description from './form_textarea.md';
 
 export default {
   description,
-  examples,
-  bootstrapComponent: 'b-form-textarea',
-  events: [
-    {
-      event: 'input',
-      args: [
-        {
-          arg: 'value',
-          description: '(String)',
-        },
-      ],
-      description: 'Emitted to update the v-model',
-    },
-    {
-      event: 'update',
-      args: [
-        {
-          arg: 'value',
-          description: '(String)',
-        },
-      ],
-      description: `Triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props). Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.`,
-    },
-  ],
 };

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

@@ -1,12 +1,6 @@
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { GlFormTextarea } from '../../../../../index';
 import readme from './form_textarea.md';
 
-const components = {
-  GlFormTextarea,
-};
-
 const template = `
   <gl-form-textarea
     v-model="model"
@@ -16,28 +10,35 @@ const template = `
   />
 `;
 
-function generateProps({ noResize = GlFormTextarea.props.noResize.default } = {}) {
-  return {
-    model: {
-      type: String,
-      default:
-        'We take inspiration from other companies, and we always go for the boring solutions. Just like the rest of our work, we continually adjust our values and strive always to make them better. We used to have more values, but it was difficult to remember them all, so we condensed them and gave sub-values and created an acronym. Everyone is welcome to suggest improvements.',
-    },
-    placeholder: {
-      type: String,
-      default: 'hello',
-    },
-    noResize: {
-      type: Boolean,
-      default: boolean('no-resize', noResize),
-    },
-  };
-}
+const generateProps = ({
+  model = 'We take inspiration from other companies, and we always go for the boring solutions. Just like the rest of our work, we continually adjust our values and strive always to make them better. We used to have more values, but it was difficult to remember them all, so we condensed them and gave sub-values and created an acronym. Everyone is welcome to suggest improvements.',
+  placeholder = 'hello',
+  noResize = GlFormTextarea.props.noResize.default,
+} = {}) => ({
+  model,
+  placeholder,
+  noResize,
+});
 
-documentedStoriesOf('base/form/form-textarea', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    template,
-  }));
+const Template = (args) => ({
+  components: { GlFormTextarea },
+  props: Object.keys(args),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'base/form/form-textarea',
+  component: GlFormTextarea,
+  parameters: {
+    bootstrapComponent: 'b-form-textarea',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -38,9 +38,17 @@ export default {
         // Swap purpose of input and update events from underlying BFormTextarea.
         // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
         input: (...args) => {
+          /**
+           * Emitted to update the v-model
+           */
           this.$emit('update', ...args);
         },
         update: (...args) => {
+          /**
+           * Triggered by user interaction.
+           * Emitted after any formatting (not including 'trim' or 'number' props).
+           * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
+           */
           this.$emit(model.event, ...args);
         },
       };