@gitlab/ui 134.9.0 → 135.0.0

package/src/components/base/pagination/pagination.scss

@@ -5,6 +5,7 @@
   ul {
     border-radius: var(--gl-action-border-radius);
     @apply gl-flex;
+    @apply gl-m-0;
     @apply gl-pl-0;
     @apply gl-list-none;
   }

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -47,6 +47,9 @@ export default {
       required: false,
       default: 'Search',
     },
+    /**
+     * When true, shows a clear button to reset the search.
+     */
     clearable: {
       type: Boolean,
       required: false,
@@ -92,6 +95,9 @@ export default {
       required: false,
       default: 'Clear recent searches',
     },
+    /**
+     * Text displayed when there are no recent searches.
+     */
     noRecentSearchesText: {
       type: String,
       required: false,

package/src/components/base/segmented_control/segmented_control.vue

@@ -24,11 +24,17 @@ export default {
     GlButton,
   },
   props: {
+    /**
+     * Array of option objects for the segmented control.
+     */
     options: {
       type: Array,
       required: true,
       validator: validateOptionsProp,
     },
+    /**
+     * The currently selected value.
+     */
     value: {
       type: [String, Number, Boolean],
       required: true,

package/src/components/base/table_lite/table_lite.vue

@@ -10,6 +10,9 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Additional CSS classes to apply to the table element.
+     */
     tableClass,
     /**
      * Array of items displayed in the table as rows.
@@ -19,11 +22,17 @@ export default {
       required: false,
       default: () => [],
     },
+    /**
+     * Array of field definitions for table columns.
+     */
     fields: {
       type: Array,
       required: false,
       default: null,
     },
+    /**
+     * When true, makes the table header sticky.
+     */
     stickyHeader: {
       type: Boolean,
       default: false,

package/src/components/base/tabs/tab/tab.vue

@@ -14,6 +14,9 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Additional CSS classes to apply to the tab title link.
+     */
     titleLinkClass: {
       type: [String, Array, Object],
       required: false,

package/src/components/base/tabs/tabs/tabs.vue

@@ -14,34 +14,52 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Configuration for the primary action button in the tabs.
+     */
     actionPrimary: {
       type: Object,
       required: false,
       default: null,
       validator: (obj) => validatorHelper(obj),
     },
+    /**
+     * Configuration for the secondary action button in the tabs.
+     */
     actionSecondary: {
       type: Object,
       required: false,
       default: null,
       validator: (obj) => validatorHelper(obj),
     },
+    /**
+     * Configuration for the tertiary action button in the tabs.
+     */
     actionTertiary: {
       type: Object,
       required: false,
       default: null,
       validator: (obj) => validatorHelper(obj),
     },
+    /**
+     * Additional CSS classes to apply to the tab content area.
+     */
     contentClass: {
       type: [String, Array, Object],
       required: false,
       default: null,
     },
+    /**
+     * Additional CSS classes to apply to the tab navigation.
+     */
     navClass: {
       type: [String, Array, Object],
       required: false,
       default: null,
     },
+    /**
+     * When true, makes the tabs stretch to fill the available width.
+     */
     justified: {
       type: Boolean,
       required: false,
@@ -63,6 +81,9 @@ export default {
       required: false,
       default: 'tab',
     },
+    /**
+     * The currently active tab value.
+     */
     value: {
       type: Number,
       required: false,

package/src/components/base/toast/toast.vue

@@ -11,19 +11,31 @@ export default {
     CloseButton,
   },
   props: {
+    /**
+     * Unique identifier for the toast notification.
+     */
     toastId: {
       type: String,
       required: true,
     },
+    /**
+     * The message text to display in the toast.
+     */
     message: {
       type: String,
       required: true,
     },
+    /**
+     * Action button configuration for the toast.
+     */
     action: {
       type: Object,
       required: false,
       default: null,
     },
+    /**
+     * Delay in milliseconds before auto-hiding the toast.
+     */
     autoHideDelay: {
       type: Number,
       required: false,

package/src/components/base/toggle/toggle.vue

@@ -18,6 +18,9 @@ export default {
     event: 'change',
   },
   props: {
+    /**
+     * The name attribute for the hidden input element.
+     */
     name: {
       type: String,
       required: false,

package/src/components/base/token_selector/token_container.vue

@@ -7,21 +7,33 @@ export default {
   name: 'GlTokenContainer',
   components: { GlToken, GlButton },
   props: {
+    /**
+     * Array of token objects to display.
+     */
     tokens: {
       type: Array,
       // All tokens need to have an `id` key
       validator: tokensValidator,
       required: true,
     },
+    /**
+     * Function to register focus handling on tokens.
+     */
     registerFocusOnToken: {
       type: Function,
       required: true,
     },
+    /**
+     * When true, renders tokens in a non-interactive view-only mode.
+     */
     viewOnly: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, shows a button to clear all tokens.
+     */
     showClearAllButton: {
       type: Boolean,
       required: false,

package/src/components/base/token_selector/token_selector_dropdown.vue

@@ -7,42 +7,69 @@ export default {
   name: 'GlTokenSelectorDropdown',
   components: { GlDropdownItem },
   props: {
+    /**
+     * When true, shows the dropdown.
+     */
     show: {
       type: Boolean,
       required: true,
     },
+    /**
+     * Additional CSS classes for the dropdown menu.
+     */
     menuClass: {
       type: [String, Array, Object],
       required: false,
       default: '',
     },
+    /**
+     * When true, shows a loading state in the dropdown.
+     */
     loading: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Array of items to display in the dropdown.
+     */
     dropdownItems: {
       type: Array,
       // All items need to have an `id` key
       validator: tokensValidator,
       required: true,
     },
+    /**
+     * Current text in the search input.
+     */
     inputText: {
       type: String,
       required: true,
     },
+    /**
+     * When true, allows user-defined tokens to be added.
+     */
     userDefinedTokenCanBeAdded: {
       type: Boolean,
       required: true,
     },
+    /**
+     * Unique identifier for the component.
+     */
     componentId: {
       type: String,
       required: true,
     },
+    /**
+     * Function to register event handlers for the dropdown.
+     */
     registerDropdownEventHandlers: {
       type: Function,
       required: true,
     },
+    /**
+     * Function to register reset of focused dropdown item.
+     */
     registerResetFocusedDropdownItem: {
       type: Function,
       required: true,

package/src/components/charts/area/area.vue

@@ -51,30 +51,48 @@ 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 line configurations.
+     */
     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,
       default: true,
     },
+    /**
+     * Custom function to format annotation tooltip text.
+     */
     formatAnnotationsTooltipText: {
       type: Function,
       required: false,
@@ -91,26 +109,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 in the legend.
+     */
     legendMinText: {
       type: String,
       required: false,
       default: LEGEND_MIN_TEXT,
     },
+    /**
+     * Custom text for the current value in the legend.
+     */
     legendCurrentText: {
       type: String,
       required: false,
       default: LEGEND_CURRENT_TEXT,
     },
+    /**
+     * Layout configuration for the legend.
+     */
     legendLayout: {
       type: String,
       required: false,
@@ -127,6 +160,9 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Series information for the legend.
+     */
     legendSeriesInfo: {
       type: Array,
       required: false,

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

@@ -64,23 +64,38 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * The chart data series to render.
+     */
     data: {
       type: Object,
       required: true,
     },
+    /**
+     * Additional ECharts option overrides.
+     */
     option: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    /**
+     * Title text for the Y axis.
+     */
     yAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Title text for the X axis.
+     */
     xAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Type of the X axis (e.g., 'category', 'value').
+     */
     xAxisType: {
       type: String,
       required: false,

package/src/components/charts/chart/chart.vue

@@ -31,6 +31,9 @@ export default {
       type: Object,
       required: true,
     },
+    /**
+     * Width of the chart in pixels. Set to "auto" to use the width of the container.
+     */
     width: {
       type: [Number, String],
       required: false,
@@ -38,7 +41,7 @@ export default {
       validator: sizeValidator,
     },
     /**
-     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
+     * Height of the chart in pixels. Set to "auto" to use the height of the container.
      */
     height: {
       type: [Number, String],
@@ -67,6 +70,9 @@ export default {
         return validRenderers.includes(renderer);
       },
     },
+    /**
+     * When true, the chart automatically resizes to fit its container.
+     */
     responsive: {
       type: Boolean,
       required: false,

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

@@ -36,39 +36,63 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Array of bar series data.
+     */
     bars: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Array of line series data.
+     */
     lines: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Secondary data series for the chart.
+     */
     secondaryData: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Additional ECharts option overrides.
+     */
     option: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    /**
+     * Title text for the Y axis.
+     */
     yAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Title text for the secondary data axis.
+     */
     secondaryDataTitle: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Title text for the X axis.
+     */
     xAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Type of the X axis (e.g., 'category', 'value').
+     */
     xAxisType: {
       type: String,
       required: true,

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -20,33 +20,54 @@ 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: () => ({}),
     },
+    /**
+     * Title text for the Y axis.
+     */
     yAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Title text for the X axis.
+     */
     xAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Size of the scatter symbols.
+     */
     symbolSize: {
       type: Number,
       required: false,
       default: 8,
     },
+    /**
+     * Custom function to format tooltip text.
+     */
     formatTooltipText: {
       type: Function,
       required: false,
       default: null,
     },
+    /**
+     * When true, disables the tooltip.
+     */
     disableTooltip: {
       type: Boolean,
       required: false,

package/src/components/charts/gauge/gauge.vue

@@ -53,20 +53,32 @@ export default {
     Chart,
   },
   props: {
+    /**
+     * The current gauge value.
+     */
     value: {
       type: Number,
       required: true,
     },
+    /**
+     * Minimum value of the gauge scale.
+     */
     min: {
       type: Number,
       required: false,
       default: 0,
     },
+    /**
+     * Maximum value of the gauge scale.
+     */
     max: {
       type: Number,
       required: false,
       default: 100,
     },
+    /**
+     * Array of threshold configurations for coloring the gauge.
+     */
     thresholds: {
       type: Array,
       required: false,
@@ -75,16 +87,25 @@ export default {
         return value?.length ? value.every((item) => Number.isFinite(item)) : true;
       },
     },
+    /**
+     * Text label to display on the gauge.
+     */
     text: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Number of split segments on the gauge scale.
+     */
     splitNumber: {
       type: Number,
       required: false,
       default: 10,
     },
+    /**
+     * Additional ECharts option overrides.
+     */
     option: {
       type: Object,
       required: false,