@gitlab/ui 32.41.0 → 32.43.2

package/documentation/documented_stories.js

@@ -92,6 +92,8 @@ export const setupStorybookReadme = () =>
         'GlBarChart',
         'GlCarousel',
         'GlMarkdown',
+        'GlTokenSelector',
+        'GlTooltip',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.41.0",
+  "version": "32.43.2",
   "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.221.0",
+    "@gitlab/svgs": "1.225.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.8",
+    "@storybook/addon-docs": "6.4.8",
+    "@storybook/addon-essentials": "6.4.8",
+    "@storybook/addon-knobs": "6.4.0",
+    "@storybook/addon-storyshots": "6.4.8",
+    "@storybook/addon-storyshots-puppeteer": "6.4.8",
+    "@storybook/addon-viewport": "6.4.8",
+    "@storybook/theming": "6.4.8",
+    "@storybook/vue": "6.4.8",
     "@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.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/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_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/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_group/examples/form_group/form_group.validation.example.vue

@@ -10,12 +10,12 @@ export default {
       return this.name.length >= 4;
     },
     invalidFeedback() {
-      let feedbackText = 'Please enter something';
+      let feedbackText = 'This field is required.';
 
       if (this.name.length > 4) {
         feedbackText = '';
       } else if (this.name.length > 0) {
-        feedbackText = 'Enter at least 4 characters';
+        feedbackText = 'Enter at least 4 characters.';
       }
 
       return feedbackText;
@@ -26,7 +26,7 @@ export default {
 <template>
   <gl-form-group
     label="Name"
-    description="Please enter your name"
+    description="Enter a first and last name."
     :invalid-feedback="invalidFeedback"
     :state="state"
     label-for="input1"

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

@@ -101,19 +101,19 @@ documentedStoriesOf('base/form/form-group', readme)
     `,
   }))
   .add('with validations', () => ({
-    props: generateProps({ label: 'Name', description: 'Please enter your name' }),
+    props: generateProps({ label: 'Name', description: 'Enter a first and last name.' }),
     components,
     computed: {
       state() {
         return this.name.length >= 4;
       },
       invalidFeedback() {
-        let feedbackText = 'Please enter something';
+        let feedbackText = 'This field is required.';
 
         if (this.name.length > 4) {
           feedbackText = '';
         } else if (this.name.length > 0) {
-          feedbackText = 'Enter at least 4 characters';
+          feedbackText = 'Enter at least 4 characters.';
         }
 
         return feedbackText;

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

@@ -12,10 +12,6 @@ describe('Input Group', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders without errors', () => {
     createWrapper();
     expect(wrapper.findComponent(BInputGroup).exists()).toBe(true);

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();

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

@@ -59,7 +59,6 @@ describe('Modal component', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     jest.clearAllMocks();
   });
 

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

@@ -5,10 +5,6 @@ import GlNavItem from './nav_item.vue';
 describe('GlNav', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Nav style', () => {
     it('renders slot content', () => {
       wrapper = shallowMount(GlNav, {

package/src/components/base/nav/nav_item.spec.js

@@ -4,10 +4,6 @@ import GlNavItem from './nav_item.vue';
 describe('GlNavItem', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the text', () => {
     wrapper = shallowMount(GlNavItem, {
       slots: {

package/src/components/base/nav/nav_item_dropdown.spec.js

@@ -18,10 +18,6 @@ describe('GlNavItemDropdown', () => {
 
   const findBNavItemDropdown = () => wrapper.findComponent(BNavItemDropdown);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     it('renders BNavItemDropdown', () => {
       const expectedText = 'Hello!';

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

@@ -15,12 +15,6 @@ describe('Paginated List', () => {
     `;
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-
-    wrapper = null;
-  });
-
   const createComponent = (props = {}) => {
     wrapper = shallowMount(PaginatedList, {
       scopedSlots: {

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

@@ -35,7 +35,6 @@ describe('pagination component', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     debounce.mockClear();
   });
 

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

@@ -44,11 +44,6 @@ describe('Path', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('matches the snapshot', () => {
     expect(wrapper.element).toMatchSnapshot();
   });

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

@@ -16,11 +16,6 @@ describe('GlPopover', () => {
 
   const findBVPopover = () => wrapper.findComponent({ ref: 'bPopover' });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it.each(tooltipActionEvents)('passes through the %s event to the bvPopover instance', (event) => {
     createWrapper();
     wrapper.vm.$emit(event);

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

@@ -30,10 +30,6 @@ describe('search box by click component', () => {
 
   const findClearIcon = () => wrapper.findComponent(ClearIcon);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('emits input event when input changes', async () => {
     createComponent({ value: 'somevalue' });