@gitlab/ui 32.38.0 → 32.42.0

package/documentation/documented_stories.js

@@ -90,6 +90,10 @@ export const setupStorybookReadme = () =>
         'GlAccordionItem',
         'GlDaterangePicker',
         'GlBarChart',
+        'GlCarousel',
+        'GlMarkdown',
+        'GlTokenSelector',
+        'GlTooltip',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.38.0",
+  "version": "32.42.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -82,21 +82,21 @@
     "@arkweid/lefthook": "^0.7.6",
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
-    "@gitlab/eslint-plugin": "9.4.0",
+    "@gitlab/eslint-plugin": "10.0.0",
     "@gitlab/stylelint-config": "2.6.0",
-    "@gitlab/svgs": "1.220.0",
+    "@gitlab/svgs": "1.223.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.3.12",
-    "@storybook/addon-docs": "6.3.12",
-    "@storybook/addon-essentials": "6.3.12",
-    "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-storyshots": "6.3.12",
-    "@storybook/addon-storyshots-puppeteer": "6.3.12",
-    "@storybook/addon-viewport": "6.3.12",
-    "@storybook/theming": "6.3.12",
-    "@storybook/vue": "6.3.12",
+    "@storybook/addon-a11y": "6.4.5",
+    "@storybook/addon-docs": "6.4.5",
+    "@storybook/addon-essentials": "6.4.5",
+    "@storybook/addon-knobs": "6.4.0",
+    "@storybook/addon-storyshots": "6.4.5",
+    "@storybook/addon-storyshots-puppeteer": "6.4.5",
+    "@storybook/addon-viewport": "6.4.5",
+    "@storybook/theming": "6.4.5",
+    "@storybook/vue": "6.4.5",
     "@vue/test-utils": "1.1.3",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",
@@ -129,7 +129,7 @@
     "postcss-scss": "^2.1.1",
     "prettier": "2.2.1",
     "pug": "^2.0.3",
-    "puppeteer": "^10.4.0",
+    "puppeteer": "11.0.0",
     "raw-loader": "^0.5.1",
     "rollup": "^2.53.1",
     "rollup-plugin-babel": "^4.4.0",

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

@@ -6,10 +6,6 @@ import GlAccordionItem from './accordion_item.vue';
 describe('GlAccordion', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const createComponent = ({ headerLevel = 3, autoCollapse = false } = {}) => {
     wrapper = mount(
       Vue.extend({

package/src/components/base/accordion/accordion_item.spec.js

@@ -10,10 +10,6 @@ describe('GlAccordionItem', () => {
   const defaultTitle = 'Item 1';
   const defaultSlot = 'Hello';
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const createComponent = (props = {}, { defaultHeaderLevel = 3, accordionSetId = false } = {}) => {
     wrapper = mount(GlAccordionItem, {
       directives: {

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

@@ -26,10 +26,6 @@ describe('Alert component', () => {
   const findActionsContainer = () => wrapper.find('.gl-alert-actions');
   const findActionButtons = () => wrapper.findAll('.gl-alert-action');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('by default', () => {
     beforeEach(() => {
       createComponent({ slots: { default: DummyComponent } });

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

@@ -20,8 +20,6 @@ describe('avatar labeled', () => {
     });
   };
 
-  afterEach(() => wrapper.destroy());
-
   it('sets avatar alt attribute to an empty string', () => {
     const altText = 'alt text';
 

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

@@ -23,8 +23,6 @@ describe('avatars inline', () => {
 
   const findBadgeTooltip = () => wrapper.findComponent(GlTooltip);
 
-  afterEach(() => wrapper.destroy());
-
   it('displays all avatars when component is not collapsed', () => {
     buildWrapper({ avatars, maxVisible: 1, avatarSize: 24, collapsed: false });
 

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

@@ -15,8 +15,6 @@ describe('badge', () => {
     });
   };
 
-  afterEach(() => wrapper.destroy());
-
   describe('with "icon" prop', () => {
     describe.each`
       scenario           | hasSlot  | iconName     | expectedRole

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

@@ -14,10 +14,6 @@ describe('Broadcast message component', () => {
     createComponent({ slots: { default: 'some message' } });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('clicking on dismiss button emits a dismiss event', () => {
     findDismissButton().vm.$emit('click');
 

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

@@ -10,11 +10,6 @@ describe('button component', () => {
   };
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders a button', () => {
     buildWrapper();
 

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

@@ -20,11 +20,6 @@ describe('GlCard', () => {
   const findHeader = () => wrapper.find('.gl-card-header');
   const findFooter = () => wrapper.find('.gl-card-footer');
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('with just the body content', () => {
     beforeEach(() => {
       createWrapper({

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

@@ -1,8 +1,6 @@
 import description from './carousel.md';
-import examples from './examples';
 
 export default {
   description,
-  examples,
   bootstrapComponent: 'b-carousel',
 };

package/src/components/base/carousel/carousel.md

@@ -1,5 +1,3 @@
-## Carousel
-
 The carousel is a slideshow for cycling through a series of content, built with CSS 3D
 transforms. It works with a series of images, text, or custom markup. It also includes support
 for previous/next controls and indicators.

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

@@ -17,10 +17,6 @@ describe('Carousel component', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('renders a BCarousel component', () => {
       expect(wrapper.findComponent(BCarousel).exists()).toBe(true);
     });

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

@@ -1,16 +1,8 @@
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import readme from './carousel.md';
 import GlCarousel from './carousel.vue';
 import GlCarouselSlide from './carousel_slide.vue';
 
-const components = {
-  GlCarousel,
-  GlCarouselSlide,
-};
-
-documentedStoriesOf('base/carousel', readme).add('default carousel', () => ({
-  components,
-  template: `
+const template = `
     <gl-carousel
       :interval="0"
       controls
@@ -34,5 +26,26 @@ documentedStoriesOf('base/carousel', readme).add('default carousel', () => ({
 
       <!-- Slides with image only -->
       <gl-carousel-slide img-src="./img/carousel_slide3.jpg"/>
-    </gl-carousel>`,
-}));
+    </gl-carousel> 
+  `;
+
+const Template = () => ({
+  components: { GlCarousel, GlCarouselSlide },
+  template,
+});
+
+export const Default = Template.bind({});
+
+export default {
+  title: 'base/carousel',
+  component: GlCarousel,
+  parameters: {
+    bootstrapComponent: 'b-carousel',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -17,10 +17,6 @@ describe('Collapse component', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('renders a BCollapse', () => {
       expect(wrapper.findComponent(BCollapse).exists()).toBe(true);
     });

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

@@ -148,10 +148,6 @@ describe('datepicker component', () => {
         clearButton = findClearButton(wrapper);
       };
 
-      afterEach(() => {
-        wrapper.destroy();
-      });
-
       it('renders clear button', async () => {
         await setup();
 

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

@@ -24,11 +24,6 @@ describe('Daterange Picker', () => {
   const findStartPicker = () => wrapper.findAllComponents(Datepicker).at(0);
   const findEndPicker = () => wrapper.findAllComponents(Datepicker).at(1);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders two datepickers', () => {
     factory();
     expect(findStartPicker().exists()).toBe(true);

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

@@ -7,10 +7,6 @@ describe('drawer component', () => {
     wrapper = shallowMount(Drawer, { propsData: props, slots });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default settings', () => {
     describe('when open is true', () => {
       it('makes gl-drawer visible when open is true', () => {

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

@@ -24,8 +24,6 @@ describe('new dropdown', () => {
     });
   };
 
-  afterEach(() => wrapper.destroy());
-
   const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
 
   const findSplitButton = () => wrapper.find('.btn:not(.gl-dropdown-toggle)');

package/src/components/base/dropdown/dropdown_item.spec.js

@@ -14,8 +14,6 @@ describe('dropdown item', () => {
 
   const findCheckbox = () => wrapper.find('[data-testid="dropdown-item-checkbox"]');
 
-  afterEach(() => wrapper.destroy());
-
   describe('checkbox', () => {
     it.each`
       props                                       | shouldExist

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

@@ -39,11 +39,6 @@ describe('Filtered search', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('value manipulation', () => {
     it('creates term when empty', () => {
       createComponent();
@@ -423,11 +418,6 @@ describe('Filtered search integration tests', () => {
     }
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when first term is clicked', () => {
     beforeEach(async () => {
       mountComponent();

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

@@ -253,6 +253,7 @@ export default {
     :value="tokens"
     :history-items="historyItems"
     :clearable="hasValue"
+    data-testid="filtered-search-input"
     @submit="submit"
     @input="applyNewValue"
     @history-item-selected="$emit('history-item-selected', $event)"

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

@@ -25,11 +25,6 @@ describe('Filtered search suggestion component', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   beforeAll(() => {
     if (!HTMLElement.prototype.scrollIntoView) {
       HTMLElement.prototype.scrollIntoView = jest.fn();

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

@@ -12,11 +12,6 @@ describe('Filtered search suggestion list component', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-      wrapper = null;
-    });
-
     it('has expected public methods', () => {
       expect(wrapper.vm.register).toBeInstanceOf(Function);
       expect(wrapper.vm.unregister).toBeInstanceOf(Function);

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

@@ -29,11 +29,6 @@ describe('Filtered search term', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders value in inactive mode', () => {
     createComponent({ value: { data: 'test-value' } });
     expect(wrapper.html()).toMatchSnapshot();

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

@@ -38,11 +38,6 @@ describe('Filtered search token', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when activated', () => {
     it('emits activate when operator segment is clicked', () => {
       createComponent();

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

@@ -189,6 +189,7 @@ export default {
 
       const handlers = {
         Enter: () => {
+          e.preventDefault();
           if (suggestedValue != null) {
             this.applySuggestion(suggestedValue);
           } else {
@@ -197,10 +198,12 @@ export default {
         },
         ':': () => {
           if (suggestedValue != null) {
+            e.preventDefault();
             this.applySuggestion(suggestedValue);
           }
         },
         Escape: () => {
+          e.preventDefault();
           this.$emit('complete');
         },
       };
@@ -217,7 +220,6 @@ export default {
       }
 
       if (Object.keys(handlers).includes(key)) {
-        e.preventDefault();
         handlers[key]();
         return;
       }
@@ -244,6 +246,7 @@ export default {
   <div
     class="gl-filtered-search-token-segment"
     :class="{ 'gl-filtered-search-token-segment-active': active }"
+    data-testid="filtered-search-token-segment"
     @mousedown.left="emitIfInactive"
   >
     <template v-if="active">

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

@@ -108,11 +108,6 @@ describe('GlFormCheckboxTree', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe.each`
     description     | shape               | expected | initiallyChecked    | indeterminateBoxes
     ${'non-nested'} | ${SHAPE.NO_NESTING} | ${5}     | ${['1', '2', '3']}  | ${[]}

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

@@ -48,10 +48,6 @@ describe('GlFormCombobox', () => {
   const setInput = (val) => findInput().setValue(val);
   const arrowDown = () => findInput().trigger('keydown.down');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('match and filter functionality', () => {
     beforeEach(() => {
       createComponent();

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

@@ -14,11 +14,6 @@ describe('GlFormInput', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('size prop', () => {
     // Exclude the default null value
     const sizes = Object.values(formInputSizes).filter(Boolean);

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { BInputGroup } from 'bootstrap-vue';
+import { BInputGroup, BFormInput } from 'bootstrap-vue';
 import GlDropdownItem from '../../dropdown/dropdown_item.vue';
 import InputGroup from './form_input_group.vue';
 
@@ -12,10 +12,6 @@ describe('Input Group', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders without errors', () => {
     createWrapper();
     expect(wrapper.findComponent(BInputGroup).exists()).toBe(true);
@@ -54,6 +50,23 @@ describe('Input Group', () => {
     expect(wrapper.emitted('input')).toBeUndefined();
   });
 
+  describe('`inputClass` prop', () => {
+    it.each`
+      inputClass
+      ${'foo-bar baz'}
+      ${['foo-bar', 'baz']}
+      ${{ 'foo-bar': true, baz: true }}
+    `('correctly adds classes to input when `inputClass` prop is $inputClass', ({ inputClass }) => {
+      createWrapper({
+        propsData: { inputClass },
+      });
+
+      expect(wrapper.findComponent(BFormInput).classes()).toEqual(
+        expect.arrayContaining(['gl-form-input', 'foo-bar', 'baz'])
+      );
+    });
+  });
+
   describe('predefined options', () => {
     const options = [
       { name: 'Foo', value: 'foo.com' },

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

@@ -32,6 +32,11 @@ export default {
       required: false,
       default: undefined,
     },
+    inputClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -73,7 +78,7 @@ export default {
         <b-form-input
           ref="input"
           v-model="localValue"
-          class="gl-form-input"
+          :class="['gl-form-input', inputClass]"
           :aria-label="label"
           v-bind="$attrs"
           v-on="$listeners"

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

@@ -44,10 +44,6 @@ describe('GlFormRadio', () => {
     createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('checks the radio button correctly on mount', () => {
     const radio = findRadio(firstOption.value);
     expect(radio.element.checked).toBe(true);

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

@@ -35,10 +35,6 @@ describe('GlFormRadioGroup', () => {
     createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('checks the radio button correctly on mount', () => {
     const radio = findRadio(firstOption.value);
     expect(radio.element.checked).toBe(true);

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

@@ -15,11 +15,6 @@ describe('GlFormSelect', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('state prop', () => {
     it.each`
       state                       | expectedClasses

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

@@ -13,11 +13,6 @@ describe('GlFormTextArea', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('v-model', () => {
     describe('value binding', () => {
       beforeEach(() => {

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

@@ -29,8 +29,6 @@ describe('Icon component', () => {
   const validateName = (name) => Icon.props.name.validator(name);
 
   afterEach(() => {
-    wrapper.destroy();
-
     if (consoleSpy) {
       consoleSpy.mockRestore();
     }

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

@@ -60,7 +60,6 @@ describe('Infinite Scroll component', () => {
 
   afterEach(() => {
     throttle.mockClear();
-    wrapper.destroy();
   });
 
   it('emits nothing on creation', () => {

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

@@ -17,11 +17,6 @@ describe('GlKeysetPagination', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findPrevButton = () => wrapper.find('[data-testid="prevButton"]');
   const findNextButton = () => wrapper.find('[data-testid="nextButton"]');
 

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

@@ -35,10 +35,6 @@ describe('Label component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findLink = () => wrapper.findComponent(GlLink);
   const findTitle = () => wrapper.find('.gl-label-text');
   const findSubTitle = () => wrapper.find('.gl-label-text-scoped');

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

@@ -8,11 +8,6 @@ describe('link component', () => {
     wrapper = mount(Link, options);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('default settings', () => {
     beforeEach(() => {
       createWrapper();

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

@@ -11,10 +11,6 @@ describe('loading icon component', () => {
   const findSpinnerEl = () => wrapper.find(`.${baseCssClass}`);
   const getSpinnerClasses = () => findSpinnerEl().classes();
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('display', () => {
     it('should render as a block by default', () => {
       createComponent();