@gitlab/ui 134.9.0 → 135.0.1

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -61,59 +61,92 @@ export default {
     },
   },
   props: {
+    /**
+     * Text displayed on the dropdown toggle button.
+     */
     toggleText: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * When true, visually hides the toggle text while keeping it accessible to screen readers.
+     */
     textSrOnly: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, renders the dropdown at 100% width of its parent container.
+     */
     block: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Visual category of the dropdown toggle button.
+     */
     category: {
       type: String,
       required: false,
       default: buttonCategoryOptions.primary,
       validator: (value) => Object.keys(buttonCategoryOptions).includes(value),
     },
+    /**
+     * Visual variant of the dropdown toggle button.
+     */
     variant: {
       type: String,
       required: false,
       default: dropdownVariantOptions.default,
       validator: (value) => Object.keys(dropdownVariantOptions).includes(value),
     },
+    /**
+     * Size of the dropdown toggle button.
+     */
     size: {
       type: String,
       required: false,
       default: 'medium',
       validator: (value) => Object.keys(buttonSizeOptions).includes(value),
     },
+    /**
+     * Name of the icon to display in the toggle button.
+     */
     icon: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * When true, disables the dropdown.
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, shows a loading state on the toggle button.
+     */
     loading: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Additional CSS classes to apply to the toggle element.
+     */
     toggleClass: {
       type: [String, Array, Object],
       required: false,
       default: null,
     },
+    /**
+     * When true, hides the caret icon on the toggle button.
+     */
     noCaret: {
       type: Boolean,
       required: false,
@@ -127,6 +160,9 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Placement for the dropdown menu.
+     */
     placement: {
       type: String,
       required: false,
@@ -143,6 +179,9 @@ export default {
       },
     },
     // ARIA props
+    /**
+     * ARIA haspopup attribute value for accessibility.
+     */
     ariaHaspopup: {
       type: [String, Boolean],
       required: false,
@@ -151,21 +190,33 @@ export default {
         return ['menu', 'listbox', 'tree', 'grid', 'dialog', true, false].includes(value);
       },
     },
+    /**
+     * ID of the currently active item for accessibility.
+     */
     activeItemId: {
       type: String,
       required: false,
       default: undefined,
     },
+    /**
+     * When true, indicates the dropdown has an external label for accessibility.
+     */
     hasExternalLabel: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, renders a searchable listbox.
+     */
     hasSearchableListbox: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, renders as a disclosure dropdown.
+     */
     isDisclosure: {
       type: Boolean,
       required: false,
@@ -212,6 +263,9 @@ export default {
       required: false,
       default: () => ({ mainAxis: DEFAULT_OFFSET }),
     },
+    /**
+     * When true, allows the dropdown to take the full width available.
+     */
     fluidWidth: {
       type: Boolean,
       required: false,

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue

@@ -14,6 +14,9 @@ export default {
   ITEM_CLASS,
   components: { GlLink, GlIcon },
   props: {
+    /**
+     * The item object to render as a disclosure dropdown item.
+     */
     item: {
       type: Object,
       required: false,

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -380,6 +380,9 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Screen-reader-only label for results count.
+     */
     srOnlyResultsLabel: {
       type: Function,
       required: false,

package/src/components/base/new_dropdowns/listbox/listbox_group.vue

@@ -4,10 +4,16 @@ import { uniqueId } from 'lodash-es';
 export default {
   name: 'GlListboxGroup',
   props: {
+    /**
+     * The display name of the listbox group.
+     */
     name: {
       type: String,
       required: true,
     },
+    /**
+     * When true, visually hides the group name while keeping it accessible to screen readers.
+     */
     textSrOnly: {
       type: Boolean,
       required: false,

package/src/components/base/new_dropdowns/listbox/listbox_item.vue

@@ -9,26 +9,41 @@ export default {
     GlIcon,
   },
   props: {
+    /**
+     * When true, marks the item as selected.
+     */
     isSelected: {
       type: Boolean,
       default: false,
       required: false,
     },
+    /**
+     * When true, marks the item as focused.
+     */
     isFocused: {
       type: Boolean,
       default: false,
       required: false,
     },
+    /**
+     * When true, centers the check icon.
+     */
     isCheckCentered: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, highlights the item.
+     */
     isHighlighted: {
       type: Boolean,
       default: false,
       required: false,
     },
+    /**
+     * When true, disables the item.
+     */
     isDisabled: {
       type: Boolean,
       default: false,

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,