@gitlab/ui 32.43.3 → 32.46.0

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_group/form_group.scss

@@ -13,6 +13,10 @@
     }
   }
 
+  .optional-label {
+    @include gl-font-weight-normal;
+  }
+
   .invalid-feedback,
   .text-gl-muted {
     @include gl-font-base;

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

@@ -1,17 +1,17 @@
-import { shallowMount, mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { BFormGroup } from 'bootstrap-vue';
-import GlFormText from '../form_text/form_text.vue';
 import GlFormGroup from './form_group.vue';
 
 describe('Form group component', () => {
   let wrapper;
 
-  const findDescription = () => {
-    return wrapper.find('[data-testid="label-description"]');
-  };
+  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
+
+  const findLabelDescription = () => findByTestId('label-description');
+  const findOptionalLabel = () => findByTestId('optional-label');
 
-  const createComponent = (options, mountFn = shallowMount) => {
-    wrapper = mountFn(GlFormGroup, {
+  const createComponent = (options) => {
+    wrapper = shallowMount(GlFormGroup, {
       ...options,
     });
   };
@@ -35,73 +35,75 @@ describe('Form group component', () => {
     }
   );
 
-  describe('description slot', () => {
-    it('renders text when label-description prop is defined', () => {
-      const labelDescription = 'description via props';
-
-      createComponent(
-        {
-          propsData: {
-            labelDescription,
-          },
-        },
-        mount
-      );
-
-      expect(findDescription().text()).toBe(labelDescription);
-    });
-
-    it('renders a user provided label-description slot', () => {
-      const labelDescription = 'description via slot';
-
-      createComponent(
-        {
-          slots: {
-            'label-description': 'description via slot',
-          },
-          stubs: {
-            GlFormText,
-          },
-        },
-        mount
-      );
-
-      expect(findDescription().text()).toBe(labelDescription);
-    });
+  describe('label-description slot', () => {
+    const labelDescriptionFromPropOptions = {
+      propsData: { labelDescription: 'label-description from props' },
+    };
+    const labelDescriptionFromSlotOptions = {
+      slots: { 'label-description': 'label-description from slots' },
+    };
+
+    it.each`
+      labelDescriptionFrom | options
+      ${'prop'}            | ${labelDescriptionFromPropOptions}
+      ${'prop'}            | ${labelDescriptionFromPropOptions}
+      ${'slot'}            | ${labelDescriptionFromSlotOptions}
+      ${'slot'}            | ${labelDescriptionFromSlotOptions}
+    `(
+      'when label-description is provided from $labelDescriptionFrom',
+      ({ labelDescriptionFrom, options }) => {
+        createComponent({
+          ...options,
+        });
+
+        expect(findLabelDescription().text()).toContain(
+          `label-description from ${labelDescriptionFrom}`
+        );
+      }
+    );
   });
 
   describe('label slot', () => {
-    it('renders text when label prop is defined', () => {
-      const label = 'label via props';
-
-      createComponent(
-        {
+    const labelFromPropOptions = {
+      propsData: { label: 'label from props' },
+    };
+    const labelFromSlotOptions = {
+      slots: { label: 'label from slots' },
+    };
+
+    it.each`
+      labelFrom | options                 | optional | expectedOptional
+      ${'prop'} | ${labelFromPropOptions} | ${true}  | ${true}
+      ${'prop'} | ${labelFromPropOptions} | ${false} | ${false}
+      ${'slot'} | ${labelFromSlotOptions} | ${true}  | ${false}
+      ${'slot'} | ${labelFromSlotOptions} | ${false} | ${false}
+    `(
+      'when label is provided from $labelFrom, `optional` is $optional',
+      ({ labelFrom, options, optional, expectedOptional }) => {
+        createComponent({
+          ...options,
           propsData: {
-            label,
+            ...options.propsData,
+            optional,
           },
-        },
-        mount
-      );
+        });
 
-      expect(wrapper.text()).toBe(label);
-    });
+        expect(wrapper.text()).toContain(`label from ${labelFrom}`);
+        expect(findOptionalLabel().exists()).toBe(expectedOptional);
+      }
+    );
 
-    it('renders a user provided label slot', () => {
-      const label = 'label via slot';
+    it('renders optionalText when `optional` is true', () => {
+      const optionalText = '(not required)';
 
-      createComponent(
-        {
-          slots: {
-            label: 'label via slot',
-          },
-          stubs: {
-            GlFormText,
-          },
+      createComponent({
+        propsData: {
+          optional: true,
+          optionalText,
         },
-        mount
-      );
+      });
 
-      expect(wrapper.text()).toBe(label);
+      expect(findOptionalLabel().text()).toBe(optionalText);
     });
   });
 });

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

@@ -13,6 +13,8 @@ function generateProps({
   label = 'Label Name',
   description = 'form group description',
   labelDescription = 'form label description',
+  optional = GlFormGroup.props.optional.default,
+  optionalText = GlFormGroup.props.optionalText.default,
   horizontal = false,
 } = {}) {
   return {
@@ -36,6 +38,14 @@ function generateProps({
       type: String,
       default: text('label-description', labelDescription),
     },
+    optional: {
+      type: Boolean,
+      default: boolean('optional', optional),
+    },
+    optionalText: {
+      type: String,
+      default: text('optional-text', optionalText),
+    },
     horizontal: {
       type: Boolean,
       default: boolean('horizontal', horizontal),
@@ -53,6 +63,8 @@ documentedStoriesOf('base/form/form-group', readme)
         :id="id"
         :label="label"
         :label-size="labelSize"
+        :optional="optional"
+        :optional-text="optionalText"
         :description="description"
         :horizontal="horizontal"
         label-for="label1"
@@ -69,6 +81,8 @@ documentedStoriesOf('base/form/form-group', readme)
         id="group-id"
         label="Label Name"
         label-size="sm"
+        :optional="optional"
+        :optional-text="optionalText"
         description="This feature is disabled"
         label-for="input1"
       >
@@ -77,14 +91,21 @@ documentedStoriesOf('base/form/form-group', readme)
     `,
   }))
   .add('with textarea', () => ({
+    props: generateProps({ optional: true }),
     template: `
-      <gl-form-group id="group-id-textarea2" label="Label Name" label-for="textarea2">
+      <gl-form-group
+        id="group-id-textarea2"
+        label="Label Name"
+        label-for="textarea2"
+        :optional="optional"
+        :optional-text="optionalText"
+      >
         <gl-form-textarea id="textarea2" placeholder="Enter something" />
       </gl-form-group>
     `,
   }))
   .add('with label description', () => ({
-    props: generateProps(),
+    props: generateProps({ optional: true }),
     components,
     template: `
       <gl-form-group
@@ -93,6 +114,8 @@ documentedStoriesOf('base/form/form-group', readme)
         :label-size="labelSize"
         :description="description"
         :label-description="labelDescription"
+        :optional="optional"
+        :optional-text="optionalText"
         :horizontal="horizontal"
         label-for="label1"
       >
@@ -125,16 +148,16 @@ documentedStoriesOf('base/form/form-group', readme)
       };
     },
     template: `
-    <gl-form-group
-      :id="id"
-      :label="label"
-      :label-size="labelSize"
-      :description="description"
-      :invalid-feedback="invalidFeedback"
-      :state="state"
-      label-for="label1"
-    >
-      <gl-form-input id="input1" :state="state" v-model.trim="name" />
-    </gl-form-group>
+      <gl-form-group
+        :id="id"
+        :label="label"
+        :label-size="labelSize"
+        :description="description"
+        :invalid-feedback="invalidFeedback"
+        :state="state"
+        label-for="label1"
+      >
+        <gl-form-input id="input1" :state="state" v-model.trim="name" />
+      </gl-form-group>
     `,
   }));

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

@@ -20,6 +20,16 @@ export default {
       required: false,
       default: '',
     },
+    optional: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    optionalText: {
+      type: String,
+      required: false,
+      default: '(optional)',
+    },
   },
   computed: {
     actualLabelClass() {
@@ -45,11 +55,14 @@ export default {
 </script>
 <template>
   <b-form-group v-bind="$attrs" class="gl-form-group" :label-class="actualLabelClass">
-    <template v-if="hasLabelDescription" #label>
+    <template #label>
       <slot name="label">
         {{ $attrs.label }}
+        <span v-if="optional" class="optional-label" data-testid="optional-label">{{
+          optionalText
+        }}</span>
       </slot>
-      <gl-form-text data-testid="label-description">
+      <gl-form-text v-if="hasLabelDescription" data-testid="label-description">
         <slot name="label-description">{{ labelDescription }}</slot>
       </gl-form-text>
     </template>

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.