@gitlab/ui 72.7.0 → 72.8.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [72.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.7.0...v72.8.0) (2024-01-16)
+
+
+### Features
+
+* **GlColumnChart:** allow customising chart tooltip ([ed6ee9e](https://gitlab.com/gitlab-org/gitlab-ui/commit/ed6ee9e3139cba2793d90d955c39c41f6ab2b5af))
+
 # [72.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.6.0...v72.7.0) (2024-01-14)
 
 

package/dist/components/base/dropdown/dropdown.js

@@ -1,8 +1,9 @@
 import Vue from 'vue';
 import { BDropdown } from 'bootstrap-vue/esm/index.js';
-import { selectAll, isVisible } from 'bootstrap-vue/esm/utils/dom';
+import { selectAll } from 'bootstrap-vue/esm/utils/dom';
 import merge from 'lodash/merge';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions } from '../../../utils/constants';
+import { filterVisible } from '../../../utils/utils';
 import { ButtonMixin } from '../../mixins/button_mixin';
 import GlButton from '../button/button';
 import GlIcon from '../icon/icon';
@@ -11,11 +12,6 @@ import GlDropdownDivider from './dropdown_divider';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
-
-// 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/dist/components/base/filtered_search/filtered_search_term.js

@@ -102,6 +102,8 @@ var script = {
           title: this.searchTextOptionLabel
         });
       }
+
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       return tokens.map(tokenToOption);
     },
     internalValue: {

package/dist/components/base/filtered_search/filtered_search_token.js

@@ -109,7 +109,9 @@ var script = {
       return hasData || this.isSegmentActive(SEGMENT_DATA);
     },
     availableTokensWithSelf() {
-      return [this.config, ...this.availableTokens.filter(token => token !== this.config)].map(tokenToOption);
+      return [this.config, ...this.availableTokens.filter(token => token !== this.config)].map(
+      // eslint-disable-next-line unicorn/no-array-callback-reference
+      tokenToOption);
     },
     operatorDescription() {
       const operator = this.operators.find(op => op.value === this.tokenValue.operator);

package/dist/components/base/filtered_search/filtered_search_token_segment.js

@@ -28,7 +28,9 @@ const isVue3Fragment = vnode => {
 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) : isVNodeEmpty(vnode.children);
+    return Array.isArray(vnode.children) ?
+    // eslint-disable-next-line unicorn/no-array-callback-reference
+    vnode.children.every(isVNodeEmpty) : isVNodeEmpty(vnode.children);
   }
   if (isVue3Comment(vnode)) {
     return true;
@@ -40,6 +42,7 @@ const isSlotNotEmpty = slot => {
     return false;
   }
   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));
 };
 var script = {

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

@@ -6,7 +6,11 @@ const itemValidator = item => {
   return (item === null || item === void 0 ? void 0 : (_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.length) > 0 && !Array.isArray(item === null || item === void 0 ? void 0 : item.items);
 };
 const isItem = item => Boolean(item) && itemValidator(item);
-const isGroup = group => Boolean(group) && Array.isArray(group.items) && Boolean(group.items.length) && group.items.every(isItem);
+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 => ['gl-disclosure-dropdown-group', 'gl-disclosure-dropdown-item', 'li'].includes(tag);
 const isValidSlotTagVue2 = vNode => {

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

@@ -2,6 +2,8 @@ import isNumber from 'lodash/isNumber';
 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 = function () {
   let {
     options
@@ -10,6 +12,8 @@ const isGroup = function () {
 };
 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(_ref => {
   let {
@@ -17,6 +21,8 @@ const hasUniqueValues = items => hasNoDuplicates(flattenedOptions(items).map(_re
   } = _ref;
   return value;
 }));
+
+// eslint-disable-next-line unicorn/no-array-callback-reference
 const hasUniqueGroups = items => hasNoDuplicates(items.filter(isGroup).map(_ref2 => {
   let {
     text

package/dist/components/base/sorting/sorting.js

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

package/dist/components/charts/column/column.js

@@ -191,7 +191,7 @@ const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {
 var _obj;
-var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":true}}):_vm._e()],1)};
+var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":true},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-title'])?{key:"title",fn:function(scope){return [_vm._t("tooltip-title",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-content'])?{key:"default",fn:function(scope){return [_vm._t("tooltip-content",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(scope){return [_vm._t("tooltip-value",null,null,scope)]}}:null],null,true)}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.js

@@ -5,6 +5,8 @@ const i18n = {
   CONVERSATION_NEW_CHAT: 'New chat'
 };
 const isMessage = item => Boolean(item) && (item === null || item === void 0 ? void 0 : item.role);
+
+// eslint-disable-next-line unicorn/no-array-callback-reference
 const itemsValidator = items => items.every(isMessage);
 var script = {
   name: 'GlDuoChatConversation',

package/dist/components/experimental/duo/chat/duo_chat.js

@@ -48,6 +48,8 @@ const slashCommands = [{
   description: 'Explain the selected snippet.'
 }];
 const isMessage = item => Boolean(item) && (item === null || item === void 0 ? void 0 : item.role);
+
+// eslint-disable-next-line unicorn/no-array-callback-reference
 const itemsValidator = items => items.every(isMessage);
 var script = {
   name: 'GlDuoChat',

package/dist/components/utilities/sprintf/sprintf.js

@@ -63,7 +63,9 @@ var script = {
       type: Object,
       required: false,
       default: undefined,
-      validator: value => Object.values(value).every(tagPair => Array.isArray(tagPair) && tagPair.length === 2 && tagPair.every(isString))
+      validator: value => Object.values(value).every(
+      // eslint-disable-next-line unicorn/no-array-callback-reference
+      tagPair => Array.isArray(tagPair) && tagPair.length === 2 && tagPair.every(isString))
     }
   },
   /**

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 14 Jan 2024 23:39:36 GMT
+ * Generated on Mon, 15 Jan 2024 23:51:36 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 14 Jan 2024 23:39:37 GMT
+ * Generated on Mon, 15 Jan 2024 23:51:36 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 14 Jan 2024 23:39:37 GMT
+ * Generated on Mon, 15 Jan 2024 23:51:36 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 14 Jan 2024 23:39:36 GMT
+ * Generated on Mon, 15 Jan 2024 23:51:36 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Sun, 14 Jan 2024 23:39:37 GMT
+// Generated on Mon, 15 Jan 2024 23:51:36 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Sun, 14 Jan 2024 23:39:37 GMT
+// Generated on Mon, 15 Jan 2024 23:51:36 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

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.7.0",
+  "version": "72.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -93,10 +93,10 @@
     "@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",

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

@@ -69,6 +69,7 @@ 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({});

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/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 [

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/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/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>

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

@@ -1,5 +1,10 @@
+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
-import { createMockChartInstance } from '~helpers/chart_stubs';
+import {
+  createMockChartInstance,
+  ChartTooltipStub,
+  chartTooltipStubData,
+} from '~helpers/chart_stubs';
 import { expectHeightAutoClasses } from '~helpers/chart_height';
 import {
   mockDefaultLineData,
@@ -8,7 +13,6 @@ import {
   mockDefaultStackedBarData,
 } from '../../../utils/charts/mock_data';
 import Chart from '../chart/chart.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
 import ColumnChart from './column.vue';
 
 let mockChartInstance;
@@ -28,42 +32,45 @@ describe('column chart component', () => {
 
   const chartItemClickedSpy = jest.fn();
   const findChart = () => wrapper.findComponent(Chart);
-  const findChartTooltip = () => wrapper.findComponent(ChartTooltip);
+  const findChartTooltip = () => wrapper.findComponent({ ref: 'dataTooltip' });
 
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
-  const factory = (props = defaultChartProps, slots = {}) => {
+  const factory = (props = defaultChartProps, options = {}) => {
     wrapper = shallowMount(ColumnChart, {
       propsData: { ...props },
       listeners: {
         chartItemClicked: chartItemClickedSpy,
       },
-      slots,
+      ...options,
     });
   };
 
-  beforeEach(() => {
-    factory();
+  describe('mounted', () => {
+    beforeEach(() => {
+      factory();
 
-    mockChartInstance = createMockChartInstance();
-    emitChartCreated();
-  });
+      mockChartInstance = createMockChartInstance();
+      emitChartCreated();
+    });
 
-  it('emits "created" when onCreated is called', () => {
-    expect(wrapper.emitted('created')).toHaveLength(1);
-  });
+    it('emits "created" when onCreated is called', () => {
+      expect(wrapper.emitted('created')).toHaveLength(1);
+    });
 
-  it('calls event listener when "chartItemClicked" is emitted on the Chart component', () => {
-    findChart().vm.$emit('chartItemClicked');
+    it('calls event listener when "chartItemClicked" is emitted on the Chart component', () => {
+      findChart().vm.$emit('chartItemClicked');
 
-    expect(chartItemClickedSpy).toHaveBeenCalled();
-  });
+      expect(chartItemClickedSpy).toHaveBeenCalled();
+    });
 
-  it('should correctly render the chart', () => {
-    const chart = findChart();
+    it('should correctly render the chart', () => {
+      const chart = findChart();
 
-    expect(chart.props('options')).toMatchSnapshot();
+      expect(chart.props('options')).toMatchSnapshot();
+    });
   });
+
   describe('with line data provided', () => {
     beforeEach(() => {
       factory({
@@ -120,11 +127,90 @@ describe('column chart component', () => {
 
   describe('tooltip', () => {
     it('configures chart tooltip', async () => {
+      factory(defaultChartProps, {
+        stubs: {
+          'chart-tooltip': ChartTooltipStub,
+        },
+      });
+      mockChartInstance = createMockChartInstance();
+      emitChartCreated();
+      await nextTick();
+
       expect(findChartTooltip().props()).toMatchObject({
         chart: mockChartInstance,
         useDefaultTooltipFormatter: true,
       });
     });
+
+    describe('custom tooltip slots', () => {
+      const { params, title, content } = chartTooltipStubData;
+
+      it('customizes value', async () => {
+        const tooltipValueSlot = jest.fn().mockReturnValue('Custom tooltip value');
+
+        factory(defaultChartProps, {
+          stubs: {
+            'chart-tooltip': ChartTooltipStub,
+          },
+          scopedSlots: {
+            'tooltip-value': tooltipValueSlot,
+          },
+        });
+
+        mockChartInstance = createMockChartInstance();
+        emitChartCreated();
+        await nextTick();
+
+        expect(tooltipValueSlot).toHaveBeenCalledWith({ value: 9 });
+        expect(findChartTooltip().text()).toBe('Custom tooltip value');
+      });
+
+      it('customizes title', async () => {
+        const tooltipTitleSlot = jest.fn().mockReturnValue('Custom tooltip title');
+
+        factory(defaultChartProps, {
+          stubs: {
+            'chart-tooltip': ChartTooltipStub,
+          },
+          scopedSlots: {
+            'tooltip-title': tooltipTitleSlot,
+          },
+        });
+
+        mockChartInstance = createMockChartInstance();
+        emitChartCreated();
+        await nextTick();
+
+        expect(tooltipTitleSlot).toHaveBeenCalledWith({
+          params,
+          title,
+        });
+        expect(findChartTooltip().text()).toBe('Custom tooltip title');
+      });
+
+      it('customizes content', async () => {
+        const tooltipContentSlot = jest.fn().mockReturnValue('Custom tooltip content');
+
+        factory(defaultChartProps, {
+          stubs: {
+            'chart-tooltip': ChartTooltipStub,
+          },
+          scopedSlots: {
+            'tooltip-content': tooltipContentSlot,
+          },
+        });
+
+        mockChartInstance = createMockChartInstance();
+        emitChartCreated();
+        await nextTick();
+
+        expect(tooltipContentSlot).toHaveBeenCalledWith({
+          params,
+          content,
+        });
+        expect(findChartTooltip().text()).toBe('Custom tooltip content');
+      });
+    });
   });
 
   describe('height', () => {

package/src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.vue

@@ -7,6 +7,7 @@ const i18n = {
 
 const isMessage = (item) => Boolean(item) && item?.role;
 
+// eslint-disable-next-line unicorn/no-array-callback-reference
 const itemsValidator = (items) => items.every(isMessage);
 
 export default {

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -62,6 +62,7 @@ export const slashCommands = [
 
 const isMessage = (item) => Boolean(item) && item?.role;
 
+// eslint-disable-next-line unicorn/no-array-callback-reference
 const itemsValidator = (items) => items.every(isMessage);
 
 export default {

package/src/components/utilities/intersection_observer/intersection_observer.spec.js

@@ -98,6 +98,7 @@ describe('IntersectionObserver', () => {
       triggerIntersectionObserver(entry);
 
       expect(allWrappers).toHaveLength(2);
+      // eslint-disable-next-line unicorn/no-array-callback-reference
       expect(allWrappers.map((x) => x.emitted())).toEqual(allWrappers.map(createExpectation));
     });
   });

package/src/components/utilities/intersperse/intersperse.spec.js

@@ -23,6 +23,7 @@ describe('Intersperse Component', () => {
       createComponent(defaultSlotContent);
 
       selectorsToCheck.forEach((selector) => {
+        // eslint-disable-next-line unicorn/no-array-callback-reference
         expect(wrapper.find(selector).exists()).toBe(true);
       });
     }

package/src/components/utilities/sprintf/sprintf.vue

@@ -68,6 +68,7 @@ export default {
       default: undefined,
       validator: (value) =>
         Object.values(value).every(
+          // eslint-disable-next-line unicorn/no-array-callback-reference
           (tagPair) => Array.isArray(tagPair) && tagPair.length === 2 && tagPair.every(isString)
         ),
     },

package/src/utils/is_slot_empty.js

@@ -13,11 +13,13 @@ function isEmpty(vnode) {
   }
 
   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);
   }
 
@@ -33,5 +35,6 @@ export function isSlotEmpty(vueInstance, slot, slotArgs) {
       callIfNeeded(vueInstance.$slots[slot] || vueInstance.$scopedSlots[slot], slotArgs)
     : vueInstance.$scopedSlots[slot]?.(slotArgs);
 
+  // eslint-disable-next-line unicorn/no-array-callback-reference
   return isEmpty(slotContent);
 }

package/src/utils/number_utils.js

@@ -9,7 +9,7 @@ export const addition = (a, b) => a + b;
  * Returns the sum of all arguments
  * @param  {...Number} numbers
  */
-export const sum = (...numbers) => numbers.reduce(addition);
+export const sum = (...numbers) => numbers.reduce(addition); // eslint-disable-line unicorn/no-array-callback-reference
 
 /**
  * Returns the average of all arguments

package/src/utils/utils.js

@@ -182,5 +182,5 @@ export function stopEvent(
  * Return an Array of visible items
  */
 export function filterVisible(els) {
-  return (els || []).filter(isVisible);
+  return (els || []).filter((el) => isVisible(el));
 }