@gitlab/ui 122.3.0 → 122.5.0

package/dist/utils/charts/config.js

@@ -468,24 +468,44 @@ const generateLineSeries = _ref5 => {
     }
   };
 };
+const getTooltipAxisConfig = dimensionAxis => {
+  if (!['xAxis', 'yAxis'].includes(dimensionAxis)) {
+    throw new Error(`\`dimensionAxis\` must be "xAxis" or "yAxis", received ${dimensionAxis}`);
+  }
+  if (dimensionAxis === 'xAxis') {
+    return {
+      dimensionIndex: 0,
+      metricIndex: 1,
+      valueAxis: 'yAxis'
+    };
+  }
+  return {
+    dimensionIndex: 1,
+    metricIndex: 0,
+    valueAxis: 'xAxis'
+  };
+};
 const getTooltipTitle = function () {
   let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   let titleAxisName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  let dimensionIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   if (!params) return '';
   const title = params.seriesData.reduce((acc, _ref6) => {
     let {
       value
     } = _ref6;
-    if (acc.includes(value[0])) {
+    const dimension = value[dimensionIndex];
+    if (acc.includes(dimension)) {
       return acc;
     }
-    return [...acc, value[0]];
+    return [...acc, dimension];
   }, []).join(', ');
   return titleAxisName ? `${title} (${titleAxisName})` : title;
 };
 const getTooltipContent = function () {
   let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   let valueAxisName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  let metricIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
   if (!params) {
     return {};
   }
@@ -494,12 +514,12 @@ const getTooltipContent = function () {
   } = params;
   if (seriesData.length === 1) {
     const {
-      value: [, yValue],
+      value,
       seriesName
     } = seriesData[0];
     return {
       [valueAxisName || seriesName]: {
-        value: yValue,
+        value: value[metricIndex],
         color: '' // ignore color when showing a single series
       }
     };
@@ -510,9 +530,8 @@ const getTooltipContent = function () {
       seriesName,
       color
     } = _ref7;
-    const yValue = value[1];
     acc[seriesName] = {
-      value: yValue,
+      value: value[metricIndex],
       color
     };
     return acc;
@@ -560,4 +579,4 @@ const getDefaultTooltipContent = function (params) {
   };
 };
 
-export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultChartOptions, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getTooltipContent, getTooltipTitle, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, toolboxHeight, validRenderers, xAxis, yAxis };
+export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultChartOptions, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getTooltipAxisConfig, getTooltipContent, getTooltipTitle, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, toolboxHeight, validRenderers, xAxis, yAxis };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "122.3.0",
+  "version": "122.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -96,7 +96,7 @@
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.3",
+    "@babel/core": "^7.28.4",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-env": "^7.28.3",
@@ -122,9 +122,9 @@
     "@storybook/vue3": "^7.6.20",
     "@storybook/vue3-webpack5": "^7.6.20",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@vue/compat": "^3.5.20",
-    "@vue/compiler-sfc": "^3.5.20",
-    "@vue/server-renderer": "^3.5.20",
+    "@vue/compat": "^3.5.21",
+    "@vue/compiler-sfc": "^3.5.21",
+    "@vue/server-renderer": "^3.5.21",
     "@vue/test-utils": "1.3.6",
     "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.4.6",
     "@vue/vue2-jest": "29.2.6",
@@ -136,7 +136,7 @@
     "axe-playwright": "^2.1.0",
     "babel-loader": "^9.2.1",
     "cypress": "14.5.4",
-    "cypress-real-events": "^1.14.0",
+    "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.5.0",
     "esbuild": "^0.25.9",
@@ -165,7 +165,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.92.0",
+    "sass": "^1.92.1",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.0",

package/src/components/base/alert/alert.scss

@@ -101,7 +101,7 @@ $gl-alert-top-border-size: 2px;
 .gl-alert-actions {
   @apply gl-flex gl-flex-col gl-flex-wrap gl-gap-y-3;
   @apply gl-mt-3;
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @apply gl-flex-row;
   }
 }
@@ -110,7 +110,7 @@ $gl-alert-top-border-size: 2px;
   @apply gl-mr-0 gl-w-full;
   @apply gl-text-base;
   @apply gl-leading-normal;
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @apply gl-mr-3 gl-w-auto;
   }
 }

package/src/components/base/avatar/avatar.scss

@@ -103,109 +103,109 @@ $gl-avatar-identicon-texts: var(--gl-avatar-fallback-text-color-red),
 }
 
 .gl-sm-avatar-s16 {
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @include gl-avatar-s16;
   }
 }
 
 .gl-md-avatar-s16 {
-  @include gl-media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     @include gl-avatar-s16;
   }
 }
 
 .gl-lg-avatar-s16 {
-  @include gl-media-breakpoint-up(lg) {
+  @include gl-container-width-up(lg) {
     @include gl-avatar-s16;
   }
 }
 
 .gl-sm-avatar-s24 {
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @include gl-avatar-s24;
   }
 }
 
 .gl-md-avatar-s24 {
-  @include gl-media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     @include gl-avatar-s24;
   }
 }
 
 .gl-lg-avatar-s24 {
-  @include gl-media-breakpoint-up(lg) {
+  @include gl-container-width-up(lg) {
     @include gl-avatar-s24;
   }
 }
 
 .gl-sm-avatar-s32 {
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @include gl-avatar-s32;
   }
 }
 
 .gl-md-avatar-s32 {
-  @include gl-media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     @include gl-avatar-s32;
   }
 }
 
 .gl-lg-avatar-s32 {
-  @include gl-media-breakpoint-up(lg) {
+  @include gl-container-width-up(lg) {
     @include gl-avatar-s32;
   }
 }
 
 .gl-sm-avatar-s48 {
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @include gl-avatar-s48;
   }
 }
 
 .gl-md-avatar-s48 {
-  @include gl-media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     @include gl-avatar-s48;
   }
 }
 
 .gl-lg-avatar-s48 {
-  @include gl-media-breakpoint-up(lg) {
+  @include gl-container-width-up(lg) {
     @include gl-avatar-s48;
   }
 }
 
 .gl-sm-avatar-s64 {
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @include gl-avatar-s64;
   }
 }
 
 .gl-md-avatar-s64 {
-  @include gl-media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     @include gl-avatar-s64;
   }
 }
 
 .gl-lg-avatar-s64 {
-  @include gl-media-breakpoint-up(lg) {
+  @include gl-container-width-up(lg) {
     @include gl-avatar-s64;
   }
 }
 
 .gl-sm-avatar-s96 {
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @include gl-avatar-s96;
   }
 }
 
 .gl-md-avatar-s96 {
-  @include gl-media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     @include gl-avatar-s96;
   }
 }
 
 .gl-lg-avatar-s96 {
-  @include gl-media-breakpoint-up(lg) {
+  @include gl-container-width-up(lg) {
     @include gl-avatar-s96;
   }
 }

package/src/components/base/banner/banner.scss

@@ -11,7 +11,7 @@
     max-width: $grid-size * 15;
   }
 
-  @include media-breakpoint-down(sm) {
+  @include gl-container-width-down(sm) {
     display: none;
   }
 }

package/src/components/base/drawer/drawer.scss

@@ -28,7 +28,7 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }
 
 .gl-drawer-default {
-  @include media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     width: $gl-drawer-width;
   }
 
@@ -39,7 +39,7 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }
 
 .gl-drawer-sidebar {
-  @include media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     width: $gl-sidebar-width;
   }
 

package/src/components/base/form/form_input/form_input.scss

@@ -64,7 +64,7 @@
   @each $breakpointName, $breakpointSize in $gl-form-input-sizes {
     @if $breakpointName != xs {
       .gl-#{$breakpointName}-form-input-#{$name} {
-        @include gl-media-breakpoint-up($breakpointName) {
+        @include gl-container-width-up($breakpointName) {
           max-width: $size;
         }
       }

package/src/components/base/form/form_select/form_select.scss

@@ -106,7 +106,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   @each $breakpointName, $breakpointSize in $gl-form-input-sizes {
     @if $breakpointName != xs {
       .gl-#{$breakpointName}-form-select-#{$name} {
-        @include gl-media-breakpoint-up($breakpointName) {
+        @include gl-container-width-up($breakpointName) {
           max-width: $size;
         }
       }

package/src/components/charts/bar/bar.vue

@@ -7,7 +7,6 @@ import { CHART_DEFAULT_SERIES_STACK, HEIGHT_AUTO_CLASSES } from '../../../utils/
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { hexToRgba } from '../../../utils/utils';
-import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../shared/tooltip/tooltip.vue';
 import { stackedPresentationOptions } from '../../../utils/constants';
@@ -64,7 +63,6 @@ export default {
   components: {
     Chart,
     ChartTooltip,
-    TooltipDefaultFormat,
   },
   inheritAttrs: false,
   props: {
@@ -113,8 +111,6 @@ export default {
   data() {
     return {
       chart: null,
-      tooltipTitle: '',
-      tooltipContent: {},
     };
   },
   computed: {
@@ -162,13 +158,6 @@ export default {
             axisTick: {
               show: true,
             },
-            axisPointer: {
-              show: true,
-              type: 'none',
-              label: {
-                formatter: this.onLabelChange,
-              },
-            },
           },
         },
         this.option,
@@ -187,46 +176,6 @@ export default {
       this.chart = chart;
       this.$emit('created', chart);
     },
-    onLabelChange(params) {
-      const { yLabels, tooltipContent } = this.getTooltipContent(params, this.xAxisTitle);
-
-      this.$set(this, 'tooltipContent', tooltipContent);
-      this.tooltipTitle = yLabels.join(', ');
-    },
-    /**
-     * For bar charts, the tooltip should be against x-axis values.
-     * This method will be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/issues/674
-     *
-     * @param {Object} params series data
-     * @param {String} xAxisTitle x-axis title
-     * @returns {Object} tooltip title and content
-     */
-    getTooltipContent(params, xAxisTitle = null) {
-      const seriesDataLength = params.seriesData.length;
-      const { yLabels, tooltipContent } = params.seriesData.reduce(
-        (acc, chartItem) => {
-          const [value, title] = chartItem.value || [];
-          // The x axis title is used instead of y axis
-          const seriesName =
-            seriesDataLength === 1 && xAxisTitle ? xAxisTitle : chartItem.seriesName;
-          const color = seriesDataLength === 1 ? '' : chartItem.color;
-          acc.tooltipContent[seriesName] = {
-            value,
-            color,
-          };
-          if (!acc.yLabels.includes(title)) {
-            acc.yLabels.push(title);
-          }
-          return acc;
-        },
-        {
-          yLabels: [],
-          tooltipContent: {},
-        },
-      );
-
-      return { yLabels, tooltipContent };
-    },
   },
   HEIGHT_AUTO_CLASSES,
 };
@@ -242,11 +191,21 @@ export default {
       v-on="$listeners"
       @created="onCreated"
     />
-    <chart-tooltip v-if="chart" :chart="chart">
-      <template #title>
-        <div>{{ tooltipTitle }} ({{ yAxisTitle }})</div>
+    <chart-tooltip
+      v-if="chart"
+      :chart="chart"
+      :use-default-tooltip-formatter="true"
+      dimension-axis="yAxis"
+    >
+      <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>
-      <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
   </div>
 </template>

package/src/components/charts/shared/tooltip/tooltip.vue

@@ -5,7 +5,11 @@ import { uid, debounceByAnimationFrame } from '../../../../utils/utils';
 import GlPopover from '../../../base/popover/popover.vue';
 import { popoverPlacements } from '../../../../utils/constants';
 import { TOOLTIP_LEFT_OFFSET, TOOLTIP_TOP_OFFSET } from '../../../../utils/charts/constants';
-import { getTooltipTitle, getTooltipContent } from '../../../../utils/charts/config';
+import {
+  getTooltipTitle,
+  getTooltipContent,
+  getTooltipAxisConfig,
+} from '../../../../utils/charts/config';
 
 import TooltipDefaultFormat from './tooltip_default_format/tooltip_default_format.vue';
 
@@ -127,6 +131,20 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Specifies which axis contains the dimensional data used in the tooltip.
+     * When `xAxis`, x-axis value becomes the tooltip's title and
+     * y-axis values become the tooltip's values.
+     * When `yAxis`, roles are reversed.
+     */
+    dimensionAxis: {
+      type: String,
+      required: false,
+      default: 'xAxis',
+      validator(value) {
+        return value === 'xAxis' || value === 'yAxis';
+      },
+    },
   },
   data() {
     return {
@@ -208,17 +226,22 @@ export default {
 
     if (this.useDefaultTooltipFormatter) {
       this.chart.setOption({
-        xAxis: {
+        [this.dimensionAxis]: {
           axisPointer: {
             show: true,
             label: {
               formatter: (params) => {
                 const options = this.chart.getOption();
-                const titleAxisName = options.xAxis?.[0]?.name;
-                const valueAxisName = options.yAxis?.[0]?.name;
 
-                this.title = getTooltipTitle(params, titleAxisName);
-                this.content = getTooltipContent(params, valueAxisName);
+                const { dimensionIndex, metricIndex, valueAxis } = getTooltipAxisConfig(
+                  this.dimensionAxis,
+                );
+
+                const titleAxisName = options[this.dimensionAxis]?.[0]?.name;
+                const valueAxisName = options[valueAxis]?.[0]?.name;
+
+                this.title = getTooltipTitle(params, titleAxisName, dimensionIndex);
+                this.content = getTooltipContent(params, valueAxisName, metricIndex);
                 this.params = params;
               },
             },

package/src/components/utilities/truncate_text/truncate_text.scss

@@ -8,7 +8,7 @@
   -webkit-line-clamp: var(--mobile-lines);
   -webkit-box-orient: vertical;
 
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     -webkit-line-clamp: var(--lines);
   }
 }

package/src/scss/mixins.scss

@@ -145,6 +145,77 @@
   }
 }
 
+@mixin gl-container-width-up($name, $containerName: '', $includeMQFallback: true) {
+  $min: map.get($breakpoints, $name);
+  @if $min == null {
+    @error "#{$name} is not a valid breakpoint for this @container query.";
+  }
+  @if $min != 0 {
+    @container #{$containerName} (min-width: #{$min}) {
+      @if & {
+        :where(html.with-gl-container-queries) & {
+          @content
+        }
+      }
+      @else {
+        :where(html.with-gl-container-queries) {
+          @content
+        }
+      }
+    }
+    @if $includeMQFallback {
+      @media (min-width: $min) {
+        @if & {
+          :where(html:not(.with-gl-container-queries)) & {
+            @content;
+          }
+        }
+        @else {
+          :where(html:not(.with-gl-container-queries))  {
+            @content
+          }
+        }
+      }
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin gl-container-width-down($name, $containerName: '', $includeMQFallback: true) {
+  $max: map.get($breakpoints, $name);
+  @if ($max == null or $max == 0) {
+    @error "#{$name} is not a valid breakpoint for this @container query.";
+  }
+
+  @container #{$containerName} (width < #{$max}) {
+    @if & {
+      :where(html.with-gl-container-queries) & {
+        @content;
+      }
+    }
+    @else {
+      :where(html.with-gl-container-queries) {
+        @content;
+      }
+    }
+  }
+  @if $includeMQFallback {
+    @media (width < $max) {
+      @if & {
+        :where(html:not(.with-gl-container-queries)) & {
+          @content;
+        }
+      }
+      @else {
+        :where(html:not(.with-gl-container-queries)) {
+          @content;
+        }
+      }
+    }
+  }
+}
+
 /**
 * Helper function to resolve font-size value from $gl-font-sizes and
 * $gl-font-sizes-fixed maps.

package/src/utils/charts/config.js

@@ -432,22 +432,36 @@ export const generateLineSeries = ({ name, color, data = [], yAxisIndex = 0 }) =
   itemStyle: { color },
 });
 
-export const getTooltipTitle = (params = null, titleAxisName = null) => {
+export const getTooltipAxisConfig = (dimensionAxis) => {
+  if (!['xAxis', 'yAxis'].includes(dimensionAxis)) {
+    throw new Error(`\`dimensionAxis\` must be "xAxis" or "yAxis", received ${dimensionAxis}`);
+  }
+
+  if (dimensionAxis === 'xAxis') {
+    return { dimensionIndex: 0, metricIndex: 1, valueAxis: 'yAxis' };
+  }
+
+  return { dimensionIndex: 1, metricIndex: 0, valueAxis: 'xAxis' };
+};
+
+export const getTooltipTitle = (params = null, titleAxisName = null, dimensionIndex = 0) => {
   if (!params) return '';
 
   const title = params.seriesData
     .reduce((acc, { value }) => {
-      if (acc.includes(value[0])) {
+      const dimension = value[dimensionIndex];
+
+      if (acc.includes(dimension)) {
         return acc;
       }
-      return [...acc, value[0]];
+      return [...acc, dimension];
     }, [])
     .join(', ');
 
   return titleAxisName ? `${title} (${titleAxisName})` : title;
 };
 
-export const getTooltipContent = (params = null, valueAxisName = null) => {
+export const getTooltipContent = (params = null, valueAxisName = null, metricIndex = 1) => {
   if (!params) {
     return {};
   }
@@ -455,22 +469,19 @@ export const getTooltipContent = (params = null, valueAxisName = null) => {
   const { seriesData } = params;
 
   if (seriesData.length === 1) {
-    const {
-      value: [, yValue],
-      seriesName,
-    } = seriesData[0];
+    const { value, seriesName } = seriesData[0];
 
     return {
       [valueAxisName || seriesName]: {
-        value: yValue,
+        value: value[metricIndex],
         color: '', // ignore color when showing a single series
       },
     };
   }
 
   return seriesData.reduce((acc, { value, seriesName, color }) => {
-    const yValue = value[1];
-    acc[seriesName] = { value: yValue, color };
+    acc[seriesName] = { value: value[metricIndex], color };
+
     return acc;
   }, {});
 };

package/src/vendor/bootstrap/scss/mixins/_breakpoints.scss

@@ -81,27 +81,6 @@
   }
 }
 
-// Media that spans multiple breakpoint widths.
-// Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
-  $min: breakpoint-min($lower, $breakpoints);
-  $max: breakpoint-max($upper, $breakpoints);
-
-  @if $min != null and $max != null {
-    @media (min-width: $min) and (max-width: $max) {
-      @content;
-    }
-  } @else if $max == null {
-    @include media-breakpoint-up($lower, $breakpoints) {
-      @content;
-    }
-  } @else if $min == null {
-    @include media-breakpoint-down($upper, $breakpoints) {
-      @content;
-    }
-  }
-}
-
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.

package/src/components/regions/dashboard_skeleton/dashboard_skeleton.md

@@ -1,4 +0,0 @@
-## Dashboard Skeleton
-
-This is a skeleton loading component for a dashboards page. Renders three cards, but can be adjusted
-based on the `cards` prop.