@gitlab/ui 134.9.0 → 135.0.0

package/src/components/charts/heatmap/heatmap.vue

@@ -48,50 +48,80 @@ export default {
     TooltipDefaultFormat,
   },
   props: {
+    /**
+     * Additional ECharts option overrides.
+     */
     option: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    /**
+     * The heatmap data series to render.
+     */
     dataSeries: {
       type: Array,
       required: true,
     },
+    /**
+     * Labels for the X axis categories.
+     */
     xAxisLabels: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Labels for the Y axis categories.
+     */
     yAxisLabels: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Name/label for the X axis.
+     */
     xAxisName: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Name/label for the Y axis.
+     */
     yAxisName: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Custom function to format tooltip text.
+     */
     formatTooltipText: {
       type: Function,
       required: false,
       default: null,
     },
+    /**
+     * Custom text for the average value in the legend.
+     */
     legendAverageText: {
       type: String,
       required: false,
       default: 'Avg',
     },
+    /**
+     * Custom text for the maximum value in the legend.
+     */
     legendMaxText: {
       type: String,
       required: false,
       default: 'Max',
     },
+    /**
+     * When true, the chart automatically resizes to fit its container.
+     */
     responsive: {
       type: Boolean,
       required: false,
@@ -105,6 +135,9 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * When true, enables the tooltip on hover.
+     */
     showTooltip: {
       type: Boolean,
       default: true,

package/src/components/charts/legend/legend.vue

@@ -20,6 +20,9 @@ export default {
     GlTruncate,
   },
   props: {
+    /**
+     * Reference to the ECharts instance.
+     */
     chart: {
       type: Object,
       required: true,
@@ -27,6 +30,9 @@ export default {
         return Object.is(chart, echarts.getInstanceByDom(chart.getDom()));
       },
     },
+    /**
+     * Array of series information for the legend.
+     */
     seriesInfo: {
       type: Array,
       required: true,
@@ -34,6 +40,9 @@ export default {
         return seriesInfo.every((series) => series.type && series.name && series.color);
       },
     },
+    /**
+     * Text style configuration for the legend labels.
+     */
     textStyle: {
       type: Object,
       required: false,
@@ -47,11 +56,17 @@ export default {
       required: false,
       default: LEGEND_AVERAGE_TEXT,
     },
+    /**
+     * Custom text for the current value label.
+     */
     currentText: {
       type: String,
       required: false,
       default: LEGEND_CURRENT_TEXT,
     },
+    /**
+     * Custom text for the minimum value label.
+     */
     minText: {
       type: String,
       required: false,

package/src/components/charts/line/line.vue

@@ -53,25 +53,40 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * The chart data series to render.
+     */
     data: {
       type: Array,
       required: true,
     },
+    /**
+     * Additional ECharts option overrides.
+     */
     option: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    /**
+     * Array of threshold configurations for coloring the line.
+     */
     thresholds: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Array of annotation configurations.
+     */
     annotations: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * When true, includes average and maximum values in the legend.
+     */
     includeLegendAvgMax: {
       type: Boolean,
       required: false,
@@ -88,26 +103,41 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Custom text for the average value in the legend.
+     */
     legendAverageText: {
       type: String,
       required: false,
       default: LEGEND_AVERAGE_TEXT,
     },
+    /**
+     * Custom text for the maximum value in the legend.
+     */
     legendMaxText: {
       type: String,
       required: false,
       default: LEGEND_MAX_TEXT,
     },
+    /**
+     * Custom text for the minimum value label.
+     */
     legendMinText: {
       type: String,
       required: false,
       default: LEGEND_MIN_TEXT,
     },
+    /**
+     * Custom text for the current value label.
+     */
     legendCurrentText: {
       type: String,
       required: false,
       default: LEGEND_CURRENT_TEXT,
     },
+    /**
+     * Layout configuration for the legend.
+     */
     legendLayout: {
       type: String,
       required: false,
@@ -116,6 +146,9 @@ export default {
         return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
       },
     },
+    /**
+     * When true, displays the legend.
+     */
     showLegend: {
       type: Boolean,
       required: false,

package/src/components/charts/series_label/series_label.vue

@@ -6,10 +6,16 @@ const makePathRect = (startX, startY, width, height) =>
 export default {
   name: 'GlChartSeriesLabel',
   props: {
+    /**
+     * Color of the series label indicator.
+     */
     color: {
       type: String,
       required: true,
     },
+    /**
+     * Type of the series label (e.g., 'line', 'bar').
+     */
     type: {
       type: String,
       required: false,

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

@@ -21,6 +21,9 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Reference to the ECharts instance.
+     */
     chart: {
       type: Object,
       required: true,
@@ -28,6 +31,9 @@ export default {
         return Object.is(chart, echarts.getInstanceByDom(chart.getDom()));
       },
     },
+    /**
+     * Unique identifier for the tooltip.
+     */
     id: {
       type: String,
       required: false,

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

@@ -7,6 +7,9 @@ export default {
     SeriesLabel,
   },
   props: {
+    /**
+     * The tooltip content object to format.
+     */
     tooltipContent: {
       type: Object,
       required: true,

package/src/components/charts/single_stat/single_stat.vue

@@ -19,14 +19,23 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
+    /**
+     * Title text for the single stat.
+     */
     title: {
       type: String,
       required: true,
     },
+    /**
+     * The numeric value to display.
+     */
     value: {
       type: [String, Number],
       required: true,
     },
+    /**
+     * Unit text to display after the value.
+     */
     unit: {
       type: String,
       required: false,
@@ -40,12 +49,18 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Visual variant of the single stat display.
+     */
     variant: {
       type: String,
       required: false,
       default: badgeVariantOptions.neutral,
       validator: (variant) => Object.values(badgeVariantOptions).includes(variant),
     },
+    /**
+     * Name of the icon to show next to the title.
+     */
     titleIcon: {
       type: String,
       required: false,
@@ -59,11 +74,17 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * Name of the icon to show next to the meta text.
+     */
     metaIcon: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * Meta text displayed below the main value.
+     */
     metaText: {
       type: String,
       required: false,
@@ -77,16 +98,25 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * When true, animates the value change.
+     */
     shouldAnimate: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Number of decimal places for the animated value.
+     */
     animationDecimalPlaces: {
       type: Number,
       required: false,
       default: 0,
     },
+    /**
+     * Description text for the single stat.
+     */
     description: {
       type: String,
       required: false,

package/src/components/charts/stacked_column/stacked_column.vue

@@ -47,84 +47,136 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Array of bar series data for stacked columns.
+     */
     bars: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Array of line series data to overlay on the columns.
+     */
     lines: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Secondary data series for an additional axis.
+     */
     secondaryData: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Additional ECharts option overrides.
+     */
     option: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    /**
+     * Presentation mode (e.g., 'absolute', 'percent').
+     */
     presentation: {
       type: String,
       required: false,
       default: stackedPresentationOptions.stacked,
       validator: (value) => Object.values(stackedPresentationOptions).indexOf(value) !== -1,
     },
+    /**
+     * Category labels for the X axis (passed to ECharts `xAxis.data`).
+     * Only used when `xAxisType` is 'category'.
+     */
     groupBy: {
       type: Array,
       required: true,
     },
+    /**
+     * Type of the X axis (e.g., 'category', 'value').
+     */
     xAxisType: {
       type: String,
       required: true,
       validator: (value) => ['value', 'category', 'time', 'log'].indexOf(value) !== -1,
     },
+    /**
+     * Title text for the X axis.
+     */
     xAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Title text for the Y axis.
+     */
     yAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Title text for the secondary data axis.
+     */
     secondaryDataTitle: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Array of names for each data series.
+     */
     seriesNames: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * When true, includes average and maximum values in the legend.
+     */
     includeLegendAvgMax: {
       type: Boolean,
       required: false,
       default: true,
     },
+    /**
+     * Custom text for the average value in the legend.
+     */
     legendAverageText: {
       type: String,
       required: false,
       default: LEGEND_AVERAGE_TEXT,
     },
+    /**
+     * Custom text for the maximum value in the legend.
+     */
     legendMaxText: {
       type: String,
       required: false,
       default: LEGEND_MAX_TEXT,
     },
+    /**
+     * Custom text for the minimum value label.
+     */
     legendMinText: {
       type: String,
       required: false,
       default: LEGEND_MIN_TEXT,
     },
+    /**
+     * Custom text for the current value label.
+     */
     legendCurrentText: {
       type: String,
       required: false,
       default: LEGEND_CURRENT_TEXT,
     },
+    /**
+     * Layout configuration for the legend.
+     */
     legendLayout: {
       type: String,
       required: false,
@@ -144,6 +196,9 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Custom color palette for the chart series.
+     */
     customPalette: {
       type: Array,
       required: false,

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

@@ -102,6 +102,9 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * When true, inverts the empty state illustration colors in dark mode.
+     */
     invertInDarkMode: {
       type: Boolean,
       required: false,

package/src/components/shared_components/clear_icon_button/clear_icon_button.vue

@@ -12,11 +12,17 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
+    /**
+     * The title attribute for the clear button.
+     */
     title: {
       type: String,
       required: false,
       default: () => translate('ClearIconButton.title', 'Clear'),
     },
+    /**
+     * Container element for the tooltip.
+     */
     tooltipContainer: {
       required: false,
       default: false,

package/src/components/shared_components/close_button/close_button.vue

@@ -8,6 +8,9 @@ export default {
     GlButton,
   },
   props: {
+    /**
+     * The aria-label for the close button.
+     */
     label: {
       type: String,
       required: false,

package/src/components/utilities/animated_number/animated_number.vue

@@ -4,6 +4,9 @@ import { formatNumberToLocale } from '../../../utils/number_utils';
 export default {
   name: 'AnimatedNumber',
   props: {
+    /**
+     * The numeric value to animate.
+     */
     number: {
       type: Number,
       required: true,
@@ -24,11 +27,17 @@ export default {
       required: false,
       default: 0,
     },
+    /**
+     * When true, formats the number with digit group separators.
+     */
     useDelimiters: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, animates the number when the component is mounted.
+     */
     animateOnMount: {
       type: Boolean,
       required: false,

package/src/components/utilities/intersperse/intersperse.vue

@@ -44,11 +44,17 @@ export default {
   name: 'GlIntersperse',
   functional: true,
   props: {
+    /**
+     * The separator content to place between items.
+     */
     separator: {
       type: String,
       default: ', ',
       required: false,
     },
+    /**
+     * The separator content to place before the last item.
+     */
     lastSeparator: {
       type: String,
       default: '',