@gitlab/ui 72.6.0 → 72.8.0

package/dist/utils/is_slot_empty.js

@@ -13,10 +13,12 @@ function isEmpty(vnode) {
     return true;
   }
   if (Array.isArray(vnode)) {
+    // eslint-disable-next-line unicorn/no-array-callback-reference
     return vnode.every(isEmpty);
   }
   if (Fragment && vnode.type === Fragment) {
     // Vue.js 3 fragment, check children
+    // eslint-disable-next-line unicorn/no-array-callback-reference
     return vnode.children.every(isEmpty);
   }
   return false;
@@ -28,6 +30,8 @@ function isSlotEmpty(vueInstance, slot, slotArgs) {
   // we need to check both $slots and $scopedSlots due to https://github.com/vuejs/core/issues/8869
   // additionally, in @vue/compat $slot might be a function instead of array of vnodes (sigh)
   callIfNeeded(vueInstance.$slots[slot] || vueInstance.$scopedSlots[slot], slotArgs) : (_vueInstance$$scopedS = (_vueInstance$$scopedS2 = vueInstance.$scopedSlots)[slot]) === null || _vueInstance$$scopedS === void 0 ? void 0 : _vueInstance$$scopedS.call(_vueInstance$$scopedS2, slotArgs);
+
+  // eslint-disable-next-line unicorn/no-array-callback-reference
   return isEmpty(slotContent);
 }
 

package/dist/utils/number_utils.js

@@ -14,7 +14,7 @@ const sum = function () {
     numbers[_key] = arguments[_key];
   }
   return numbers.reduce(addition);
-};
+}; // eslint-disable-line unicorn/no-array-callback-reference
 
 /**
  * Returns the average of all arguments

package/dist/utils/utils.js

@@ -171,7 +171,7 @@ function stopEvent(event) {
  * Return an Array of visible items
  */
 function filterVisible(els) {
-  return (els || []).filter(isVisible);
+  return (els || []).filter(el => isVisible(el));
 }
 
 export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, relativeLuminance, rgbFromHex, rgbFromString, stopEvent, throttle, toSrgb, uid };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "72.6.0",
+  "version": "72.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -38,15 +38,15 @@
     "pretest:unit": "yarn build-tokens",
     "test": "run-s test:unit test:visual",
     "test:integration": "NODE_ENV=test start-server-and-test start http://${STORYBOOK_HOST:-localhost}:9001/iframe.html 'yarn cy:run && yarn cy:edge && yarn cy:a11y'",
-    "test:unit": "NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
+    "test:unit": "NODE_ENV=test jest",
     "test:unit:watch": "yarn test:unit --watch",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
-    "test:unit-vue3": "VUE_VERSION=3 NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
+    "test:unit-vue3": "VUE_VERSION=3 NODE_ENV=test jest",
     "test:unit-vue3:watch": "VUE_VERSION=3 yarn test:unit --watch",
     "test:unit-vue3:debug": "VUE_VERSION=3 NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
-    "test:visual": "./bin/run-visual-tests.sh 'jest ./tests/storyshots.spec.js'",
+    "test:visual": "./bin/run-visual-tests.sh 'test-storybook --browsers firefox --verbose --url http://localhost:9001'",
     "test:visual:minimal": "node ./bin/run_minimal_visual_tests.js",
-    "test:visual:update": "./bin/run-visual-tests.sh 'JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 jest ./tests/storyshots.spec.js --updateSnapshot'",
+    "test:visual:update": "./bin/run-visual-tests.sh 'test-storybook -u --browsers firefox --verbose --url http://localhost:9001'",
     "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
     "prettier": "prettier --check '**/*.{js,vue}'",
     "prettier:fix": "prettier --write '**/*.{js,vue}'",
@@ -88,28 +88,31 @@
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.23.7",
-    "@babel/preset-env": "^7.23.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/preset-env": "^7.23.8",
     "@babel/preset-react": "^7.23.3",
     "@cypress/grep": "^4.0.1",
-    "@gitlab/eslint-plugin": "19.2.0",
+    "@gitlab/eslint-plugin": "19.4.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "5.0.1",
-    "@gitlab/svgs": "3.74.0",
+    "@gitlab/svgs": "3.75.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
     "@storybook/addon-a11y": "7.6.7",
     "@storybook/addon-docs": "7.6.7",
     "@storybook/addon-essentials": "7.6.7",
-    "@storybook/addon-storyshots": "7.6.7",
-    "@storybook/addon-storyshots-puppeteer": "7.6.7",
     "@storybook/addon-viewport": "7.6.7",
     "@storybook/builder-webpack5": "7.6.7",
+    "@storybook/test-runner": "0.16.0",
     "@storybook/theming": "7.6.7",
     "@storybook/vue": "7.6.7",
     "@storybook/vue-webpack5": "7.6.7",
     "@storybook/vue3": "7.6.7",
     "@storybook/vue3-webpack5": "7.6.7",
+    "@types/jest": "^29.5.11",
+    "@types/jest-image-snapshot": "^6.4.0",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -120,7 +123,6 @@
     "axe-core": "^4.2.3",
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
-    "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
     "cypress": "13.6.2",
     "cypress-axe": "^1.4.0",
@@ -137,6 +139,7 @@
     "jest": "^29.7.0",
     "jest-circus": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "jest-image-snapshot": "^6.4.0",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "module-alias": "^2.2.2",
@@ -147,7 +150,6 @@
     "postcss-loader": "^7.0.2",
     "postcss-scss": "4.0.4",
     "prettier": "2.6.2",
-    "puppeteer": "15.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^2.53.1",

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

@@ -40,8 +40,8 @@ export default {
   title: 'base/accordion/accordion-item',
   component: GlAccordionItem,
   bootstrapComponent: 'b-collapse',
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -81,9 +81,7 @@ export const CustomActions = () => ({
       </template>
     </gl-alert>`,
 });
-CustomActions.parameters = {
-  storyshots: { disable: true },
-};
+CustomActions.tags = ['skip-visual-test'];
 
 export const TextLinks = () => ({
   components: { GlAlert },
@@ -92,9 +90,7 @@ export const TextLinks = () => ({
       Lorem ipsum dolor sit <a class="gl-link" href="#">text link</a> amet
     </gl-alert>`,
 });
-TextLinks.parameters = {
-  storyshots: { disable: true },
-};
+TextLinks.tags = ['skip-visual-test'];
 
 export const NoIcon = () => ({
   components: { GlAlert },
@@ -103,9 +99,7 @@ export const NoIcon = () => ({
       Lorem ipsum dolor sit amet
     </gl-alert>`,
 });
-NoIcon.parameters = {
-  storyshots: { disable: true },
-};
+NoIcon.tags = ['skip-visual-test'];
 
 export const Variants = () => ({
   components: { GlAlert },
@@ -126,9 +120,7 @@ export const Variants = () => ({
     </gl-alert>
   </div>`,
 });
-Variants.parameters = {
-  storyshots: { disable: true },
-};
+Variants.tags = ['skip-visual-test'];
 
 export const Sticky = () => ({
   components: { GlAlert },

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

@@ -44,9 +44,7 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({});
 Default.args = generateProps();
-Default.parameters = {
-  storyshots: { disable: true },
-};
+Default.tags = ['skip-visual-test'];
 
 export const Variants = (args, { argTypes }) => ({
   components: { GlBadge },
@@ -95,9 +93,7 @@ Actionable.args = generateProps({
   href: '#foo',
   variant: badgeVariantOptions.warning,
 });
-Actionable.parameters = {
-  storyshots: { disable: true },
-};
+Actionable.tags = ['skip-visual-test'];
 Actionable.argTypes = disableControls(['content', 'variant']);
 
 export const Sizes = (args, { argTypes }) => ({

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

@@ -69,13 +69,12 @@ const StackedStory = (args, { argTypes }) => ({
     GlBroadcastMessage,
   },
   props: Object.keys(argTypes),
+  // eslint-disable-next-line unicorn/no-array-callback-reference
   template: `<div>${Object.keys(colorThemes).map(templateWithTheme).join('')}</div>`,
 });
 export const Stacked = StackedStory.bind({});
 Stacked.args = generateProps();
-Stacked.parameters = {
-  storyshots: { disable: true },
-};
+Stacked.tags = ['skip-visual-test'];
 
 export const IncreasedSpacing = (args, { argTypes }) => ({
   components: {

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

@@ -98,6 +98,7 @@ describe('drawer component', () => {
       },
     });
 
+    // eslint-disable-next-line unicorn/no-array-callback-reference
     expect(wrapper.find(parentSelector).find(`[data-testid="${slot}"]`).exists()).toBe(true);
   });
 

package/src/components/base/dropdown/dropdown.vue

@@ -2,24 +2,20 @@
 <script>
 import Vue from 'vue';
 import { BDropdown } from 'bootstrap-vue';
-import { isVisible, selectAll } from 'bootstrap-vue/src/utils/dom';
+import { selectAll } from 'bootstrap-vue/src/utils/dom';
 import merge from 'lodash/merge';
 import {
   buttonCategoryOptions,
   buttonSizeOptions,
   dropdownVariantOptions,
 } from '../../../utils/constants';
+import { filterVisible } from '../../../utils/utils';
 import { ButtonMixin } from '../../mixins/button_mixin';
 import GlButton from '../button/button.vue';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import GlDropdownDivider from './dropdown_divider.vue';
 
-// Return an Array of visible items
-function filterVisible(els) {
-  return (els || []).filter(isVisible);
-}
-
 const Selector = {
   ITEM_SELECTOR:
     '.dropdown-item:not(.disabled):not([disabled]),.form-control:not(.disabled):not([disabled])',

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

@@ -59,6 +59,7 @@ describe('Filtered search', () => {
   describe('value manipulation', () => {
     it('creates term when empty', () => {
       createComponent();
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       expect(wrapper.emitted().input[0][0].map(stripId)).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: '' } },
       ]);
@@ -202,6 +203,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: 'faketoken', value: { data: '' } },
         { type: TERM_TOKEN_TYPE, value: { data: 'one' } },
@@ -220,6 +222,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: 'one' } },
         { type: TERM_TOKEN_TYPE, value: { data: '' } },
@@ -335,6 +338,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: '' } },
       ]);
@@ -348,6 +352,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: 'faketoken', value: { data: 'test' } },
         { type: TERM_TOKEN_TYPE, value: { data: '' } },
@@ -369,6 +374,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: 'faketoken', value: { data: 'test' } },
         { type: TERM_TOKEN_TYPE, value: { data: '' } },
@@ -382,6 +388,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: 'one' } },
         { type: TERM_TOKEN_TYPE, value: { data: '' } },
@@ -398,6 +405,7 @@ describe('Filtered search', () => {
       await nextTick();
 
       expect(wrapper.findAllComponents(GlFilteredSearchTerm).at(2).props('active')).toBe(true);
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: 'one' } },
         { type: TERM_TOKEN_TYPE, value: { data: 'two' } },
@@ -415,6 +423,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: 'one' } },
         { type: TERM_TOKEN_TYPE, value: { data: 'foo' } },
@@ -445,6 +454,7 @@ describe('Filtered search', () => {
     });
     wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('submit');
     expect(wrapper.emitted('submit')).toBeDefined();
+    // eslint-disable-next-line unicorn/no-array-callback-reference
     expect(wrapper.emitted().submit[0][0].map(stripId)).toStrictEqual([
       'one two',
       { type: 'faketoken', value: { data: 'smth' } },
@@ -505,6 +515,7 @@ describe('Filtered search', () => {
     });
     await nextTick();
 
+    // eslint-disable-next-line unicorn/no-array-callback-reference
     expect(wrapper.findComponent(GlFilteredSearchTerm).props('currentValue').map(stripId)).toEqual([
       { type: 'filtered-search-term', value: { data: 'one' } },
       { type: 'filtered-search-term', value: { data: '' } },

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

@@ -108,6 +108,7 @@ export default {
         });
       }
 
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       return tokens.map(tokenToOption);
     },
     internalValue: {

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

@@ -109,6 +109,7 @@ export default {
 
     availableTokensWithSelf() {
       return [this.config, ...this.availableTokens.filter((token) => token !== this.config)].map(
+        // eslint-disable-next-line unicorn/no-array-callback-reference
         tokenToOption
       );
     },

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

@@ -24,7 +24,8 @@ const isVNodeEmpty = (vnode) => {
   if (isVue3Fragment(vnode)) {
     // vnode.children might be an array or single node in edge cases
     return Array.isArray(vnode.children)
-      ? vnode.children.every(isVNodeEmpty)
+      ? // eslint-disable-next-line unicorn/no-array-callback-reference
+        vnode.children.every(isVNodeEmpty)
       : isVNodeEmpty(vnode.children);
   }
 
@@ -41,6 +42,7 @@ const isSlotNotEmpty = (slot) => {
   }
 
   const vnodes = typeof slot === 'function' ? slot() : slot;
+  // eslint-disable-next-line unicorn/no-array-callback-reference
   return !(Array.isArray(vnodes) ? vnodes.every(isVNodeEmpty) : isVNodeEmpty(vnodes));
 };
 

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

@@ -78,6 +78,7 @@ describe('GlFormFields', () => {
     };
   };
   const findFormGroups = () => wrapper.findAllComponents(GlFormGroup).wrappers;
+  // eslint-disable-next-line unicorn/no-array-callback-reference
   const findFormGroupsAsData = () => findFormGroups().map(mapFormGroupToData);
   const findFormGroupFromLabel = (label) =>
     wrapper.findAllComponents(GlFormGroup).wrappers.find((x) => x.attributes('label') === label);

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

@@ -32,13 +32,13 @@ Default.args = generateProps();
 export default {
   title: 'base/icon',
   component: GlIcon,
+  tags: ['skip-visual-test'],
   parameters: {
     docs: {
       description: {
         component: readme,
       },
     },
-    storyshots: { disable: true },
   },
   argTypes: {
     ...disableControls(['useDeprecatedSizes']),

package/src/components/base/new_dropdowns/disclosure/utils.js

@@ -9,8 +9,10 @@ const isGroup = (group) =>
   Boolean(group) &&
   Array.isArray(group.items) &&
   Boolean(group.items.length) &&
+  // eslint-disable-next-line unicorn/no-array-callback-reference
   group.items.every(isItem);
 
+// eslint-disable-next-line unicorn/no-array-callback-reference
 const itemsValidator = (items) => items.every(isItem) || items.every(isGroup);
 
 const isListItem = (tag) =>

package/src/components/base/new_dropdowns/listbox/listbox.spec.js

@@ -48,6 +48,7 @@ describe('GlCollapsibleListbox', () => {
   const findListContainer = () => wrapper.find('[role="listbox"]');
   const findListboxItems = (root = wrapper) => root.findAllComponents(GlListboxItem);
   const findListboxGroups = () => wrapper.findAllComponents(GlListboxGroup);
+  // eslint-disable-next-line unicorn/no-array-callback-reference
   const findListItem = (index) => findListboxItems().at(index).find(ITEM_SELECTOR);
   const findHeaderText = () => wrapper.find("[data-testid='listbox-header-text']");
   const findSearchBox = () => wrapper.find("[data-testid='listbox-search-input']");
@@ -241,6 +242,7 @@ describe('GlCollapsibleListbox', () => {
 
     it('should focus the first selected item', async () => {
       await showDropdown();
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       expect(findListboxItems().at(1).find(ITEM_SELECTOR).element).toHaveFocus();
     });
 

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -388,9 +388,13 @@ export const Groups = makeGroupedExample({
       const isSelected = (option) => this.selected.includes(option.value);
       const notSelected = (option) => !isSelected(option);
 
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       const selectedBranches = mockGroups[0].options.filter(isSelected);
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       const availableBranches = mockGroups[0].options.filter(notSelected);
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       const selectedTags = mockGroups[1].options.filter(isSelected);
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       const availableTags = mockGroups[1].options.filter(notSelected);
 
       return [
@@ -788,9 +792,7 @@ export const InfiniteScroll = (
 InfiniteScroll.argTypes = {
   ...disableControls(['infiniteScroll', 'infiniteScrollLoading', 'items']),
 };
-InfiniteScroll.parameters = {
-  storyshots: { disable: true },
-};
+InfiniteScroll.tags = ['skip-visual-test'];
 InfiniteScroll.args = generateProps();
 InfiniteScroll.decorators = [makeContainer({ height: LISTBOX_CONTAINER_HEIGHT })];
 

package/src/components/base/new_dropdowns/listbox/utils.js

@@ -3,17 +3,20 @@ import isString from 'lodash/isString';
 
 const isOption = (item) => Boolean(item) && (isString(item.value) || isNumber(item.value));
 
+// eslint-disable-next-line unicorn/no-array-callback-reference
 const isGroup = ({ options } = {}) => Array.isArray(options) && options.every(isOption);
 
 const hasNoDuplicates = (array) => array.length === new Set(array).size;
 
 const flattenedOptions = (items) => items.flatMap((item) => (isOption(item) ? item : item.options));
 
+// eslint-disable-next-line unicorn/no-array-callback-reference
 const isAllOptionsOrAllGroups = (items) => items.every(isOption) || items.every(isGroup);
 
 const hasUniqueValues = (items) =>
   hasNoDuplicates(flattenedOptions(items).map(({ value }) => value));
 
+// eslint-disable-next-line unicorn/no-array-callback-reference
 const hasUniqueGroups = (items) => hasNoDuplicates(items.filter(isGroup).map(({ text }) => text));
 
 const itemsValidator = (items) =>

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

@@ -74,9 +74,7 @@ export const OnClick = (_args, { viewMode, argTypes }) => ({
 OnClick.args = generateProps({
   triggers: 'click',
 });
-OnClick.parameters = {
-  storyshots: { disable: true },
-};
+OnClick.tags = ['skip-visual-test'];
 
 export default {
   title: 'base/popover',

package/src/components/base/sorting/sorting.vue

@@ -34,6 +34,7 @@ export default {
       type: Array,
       required: false,
       default: null,
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       validator: (sortOptions) => sortOptions.every(isOption),
     },
     /**

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

@@ -225,9 +225,7 @@ export const WithScrollAndGrowing = (_args, { argTypes }) => ({
   },
   template: '<scrollable-tabs-generator :count="count" />',
 });
-WithScrollAndGrowing.parameters = {
-  storyshots: { disable: true },
-};
+WithScrollAndGrowing.tags = ['skip-visual-test'];
 
 export default {
   title: 'base/tabs',

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

@@ -88,7 +88,7 @@ const Template = (args, { argTypes }) => ({
 });
 
 export const Default = Template.bind({});
-Default.parameters = { storyshots: { disable: true } };
+Default.tags = ['skip-visual-test'];
 Default.args = generateProps();
 
 export default {

package/src/components/charts/area/area.stories.js

@@ -189,9 +189,7 @@ export const WithCustomTooltip = (_args, { argTypes }) => ({
   `),
 });
 WithCustomTooltip.args = generateProps();
-WithCustomTooltip.parameters = {
-  storyshots: { disable: true },
-};
+WithCustomTooltip.tags = ['skip-visual-test'];
 
 export default {
   title: 'charts/area-chart',

package/src/components/charts/chart/chart.stories.js

@@ -95,9 +95,7 @@ export const Connected = Template.bind(
       `,
   }
 );
-Connected.parameters = {
-  storyshots: { disable: true },
-};
+Connected.tags = ['skip-visual-test'];
 
 export default {
   title: 'charts/chart',

package/src/components/charts/column/__snapshots__/column_chart.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`column chart component should correctly render the chart 1`] = `
+exports[`column chart component mounted should correctly render the chart 1`] = `
 Object {
   "grid": Object {
     "bottom": 44,

package/src/components/charts/column/column.stories.js

@@ -7,7 +7,7 @@ import {
 } from '../../../utils/charts/mock_data';
 import { toolbox } from '../../../utils/charts/story_config';
 
-const template = `
+const template = (content = '') => `
   <gl-column-chart
     :bars="bars"
     :lines="lines"
@@ -18,7 +18,9 @@ const template = `
     :x-axis-title="xAxisTitle"
     :x-axis-type="xAxisType"
     :height="height"
-  />
+  >
+    ${content}
+  </gl-column-chart>
   `;
 
 const generateProps = ({
@@ -46,7 +48,7 @@ const generateProps = ({
 const Template = (args, { argTypes }) => ({
   components: { GlColumnChart },
   props: Object.keys(argTypes),
-  template,
+  template: template(),
 });
 
 export const Default = Template.bind({});
@@ -90,6 +92,19 @@ SecondaryYAxisLine.args = generateProps({
   secondaryDataTitle: 'New line data',
 });
 
+export const WithCustomTooltip = (args, { argTypes }) => ({
+  components: { GlColumnChart },
+  props: Object.keys(argTypes),
+  template: template(`
+    <template #tooltip-title="{ params }">Custom tooltip title: {{params && params.value}}</template>
+    <template #tooltip-content="{ params }">
+      <div v-for="p in params && params.seriesData">Wow so custom: {{p.seriesName}}: {{p.value[1]}}</div>
+    </template>
+  `),
+});
+WithCustomTooltip.args = generateProps();
+WithCustomTooltip.tags = ['skip-visual-test'];
+
 export default {
   title: 'charts/column-chart',
   component: GlColumnChart,

package/src/components/charts/column/column.vue

@@ -184,6 +184,21 @@ export default {
       v-on="$listeners"
       @created="onCreated"
     />
-    <chart-tooltip v-if="chart" :chart="chart" :use-default-tooltip-formatter="true" />
+    <chart-tooltip
+      v-if="chart"
+      ref="dataTooltip"
+      :chart="chart"
+      :use-default-tooltip-formatter="true"
+    >
+      <template v-if="$scopedSlots['tooltip-title']" #title="scope">
+        <slot name="tooltip-title" v-bind="scope"></slot>
+      </template>
+      <template v-if="$scopedSlots['tooltip-content']" #default="scope">
+        <slot name="tooltip-content" v-bind="scope"></slot>
+      </template>
+      <template v-if="$scopedSlots['tooltip-value']" #tooltip-value="scope">
+        <slot name="tooltip-value" v-bind="scope"></slot>
+      </template>
+    </chart-tooltip>
   </div>
 </template>