@gitlab/ui 72.6.0 → 72.8.0

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/charts/line/line.stories.js

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

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

@@ -55,14 +55,14 @@ Default.args = generateProps();
 
 export const WithoutLastYValue = Template.bind({});
 WithoutLastYValue.args = generateProps({ showLastYValue: false });
-WithoutLastYValue.parameters = { storyshots: { disable: true } };
+WithoutLastYValue.tags = ['skip-visual-test'];
 
 export const WithChartColorGradient = Template.bind({});
 WithChartColorGradient.args = generateProps({ gradient: customGradient });
 
 export const WithSmoothing = Template.bind({});
 WithSmoothing.args = generateProps({ smooth: 0.5 });
-WithSmoothing.parameters = { storyshots: { disable: true } };
+WithSmoothing.tags = ['skip-visual-test'];
 
 export const AutoHeight = Template.bind({});
 Object.assign(AutoHeight, {

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/experimental/duo/user_feedback/user_feedback.stories.js

@@ -98,8 +98,8 @@ Slots.parameters = { controls: { disable: true } };
 export default {
   title: 'experimental/duo/duo-user-feedback',
   component: GlDuoUserFeedback,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/experimental/experiment_badge/experiment_badge.stories.js

@@ -46,8 +46,8 @@ CustomPlacement.args = {
 export default {
   title: 'experimental/experiment_badge',
   component: GlExperimentBadge,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/regions/empty_state/empty_state.vue

@@ -131,7 +131,6 @@ export default {
         v-if="svgPath"
         :src="svgPath"
         alt=""
-        role="img"
         :class="{ 'gl-dark-invert-keep-hue': invertInDarkMode }"
         class="gl-max-w-full"
         :height="height"

package/src/components/utilities/animated_number/animated_number.stories.js

@@ -72,4 +72,5 @@ export default {
     },
   },
   argTypes: {},
+  tags: ['skip-visual-test'],
 };

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/intersection_observer/intersection_observer.stories.js

@@ -151,8 +151,8 @@ export const InfiniteScrolling = () => ({
 export default {
   title: 'utilities/intersection-observer',
   component: GlIntersectionObserver,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

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.stories.js

@@ -35,7 +35,7 @@ Object.assign(SentenceWithLink, {
   args: generateProps({
     message: 'Click %{linkStart}here%{linkEnd} to reticulate splines.',
   }),
-  parameters: { storyshots: { disable: true } },
+  tags: ['skip-visual-test'],
 });
 
 export const SentenceWithLinkWithCustomPlaceholders = makeStory({
@@ -54,7 +54,7 @@ Object.assign(SentenceWithLinkWithCustomPlaceholders, {
     message: 'Click %{my_custom_start}here%{my_custom_end} to reticulate splines.',
     placeholders: { link: ['my_custom_start', 'my_custom_end'] },
   }),
-  parameters: { storyshots: { disable: true } },
+  tags: ['skip-visual-test'],
 });
 
 export const BasicPlaceholder = makeStory({
@@ -71,7 +71,7 @@ export const BasicPlaceholder = makeStory({
 });
 Object.assign(BasicPlaceholder, {
   args: generateProps(),
-  parameters: { storyshots: { disable: true } },
+  tags: ['skip-visual-test'],
 });
 
 export const BasicButtonPlaceholder = makeStory({
@@ -88,7 +88,7 @@ export const BasicButtonPlaceholder = makeStory({
 });
 Object.assign(BasicButtonPlaceholder, {
   args: generateProps(),
-  parameters: { storyshots: { disable: true } },
+  tags: ['skip-visual-test'],
 });
 
 export default {

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/components/utilities/truncate/truncate.stories.js

@@ -27,8 +27,8 @@ Default.args = generateProps();
 export default {
   title: 'utilities/truncate',
   component: GlTruncate,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/utilities/truncate_text/truncate_text.stories.js

@@ -34,8 +34,8 @@ Default.args = generateProps();
 export default {
   title: 'utilities/truncate-text',
   component: GlTruncateText,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/directives/hover_load/hover_load.stories.js

@@ -40,8 +40,8 @@ Default.args = generateProps();
 export default {
   title: 'directives/hover-load-directive',
   component: GlHoverLoadDirective,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/directives/outside/outside.stories.js

@@ -20,9 +20,7 @@ export const Default = () => ({
   template: `<gl-button v-outside="onClick">Clicks outside me: {{ clicks }}</gl-button>`,
 });
 
-Default.parameters = {
-  storyshots: { disable: true },
-};
+Default.tags = ['skip-visual-test'];
 
 export default {
   title: 'directives/outside-directive',

package/src/directives/resize_observer/resize_observer.stories.js

@@ -61,8 +61,8 @@ const makeControl = () => ({
 export default {
   title: 'directives/resize-observer-directive',
   component: GlResizeObserver,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/directives/safe_html/safe_html.stories.js

@@ -49,8 +49,8 @@ Default.args = generateProps();
 export default {
   title: 'directives/safe-html-directive',
   component: GlSafeHtml,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/directives/safe_link/safe_link.stories.js

@@ -28,8 +28,8 @@ Default.args = generateProps();
 export default {
   title: 'directives/safe-link-directive',
   component: SafeLink,
+  tags: ['skip-visual-test'],
   parameters: {
-    storyshots: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/scss/utilities.scss

@@ -5577,6 +5577,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   max-width: 0 !important;
 }
 
+.gl-max-w-12 {
+  max-width: $gl-spacing-scale-12;
+}
+
+.gl-max-w-12\! {
+  max-width: $gl-spacing-scale-12 !important;
+}
+
 .gl-max-w-15 {
   max-width: $gl-spacing-scale-15;
 }

package/src/scss/utility-mixins/sizing.scss

@@ -451,6 +451,10 @@
   max-width: 0;
 }
 
+@mixin gl-max-w-12 {
+  max-width: $gl-spacing-scale-12;
+}
+
 @mixin gl-max-w-15 {
   max-width: $gl-spacing-scale-15;
 }

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