@gitlab/ui 124.4.0 → 124.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "124.4.0",
+  "version": "124.4.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -120,9 +120,9 @@
     "@storybook/vue3": "^7.6.20",
     "@storybook/vue3-webpack5": "^7.6.20",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@vue/compat": "^3.5.22",
-    "@vue/compiler-sfc": "^3.5.22",
-    "@vue/server-renderer": "^3.5.22",
+    "@vue/compat": "^3.5.24",
+    "@vue/compiler-sfc": "^3.5.24",
+    "@vue/server-renderer": "^3.5.24",
     "@vue/test-utils": "1.3.6",
     "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.4.6",
     "@vue/vue2-jest": "29.2.6",
@@ -137,7 +137,7 @@
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
-    "esbuild": "^0.25.12",
+    "esbuild": "^0.26.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.0.3",
     "globby": "^14.1.0",

package/src/components/base/accordion/accordion.vue

@@ -11,16 +11,16 @@ export default {
     };
   },
   props: {
-    /*
-    When true, will have the effect of closing other accordion items when one accordion item is visible.
+    /**
+     * When true, will have the effect of closing other accordion items when one accordion item is visible.
      */
     autoCollapse: {
       type: Boolean,
       required: false,
       default: false,
     },
-    /*
-    The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.
+    /**
+     * The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.
      */
     headerLevel: {
       type: Number,

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -48,7 +48,8 @@ $breadcrumb-max-width: $grid-size * 16;
   }
 }
 
-.gl-breadcrumb-item:last-child > a {
+.gl-breadcrumb-item:last-child > a,
+.gl-breadcrumb-item:has(+ .gl-breadcrumb-clipboard-button) > a {
   @apply gl-text-default;
   @apply gl-font-bold;
 }

package/src/components/base/collapse/collapse.vue

@@ -7,11 +7,17 @@ export default {
     event: 'input',
   },
   props: {
+    /**
+     * Controls the visibility state of the collapse.
+     */
     visible: {
       type: Boolean,
       default: false,
       required: false,
     },
+    /**
+     * HTML tag to use for the collapse container element.
+     */
     tag: {
       type: String,
       required: false,

package/src/components/base/dropdown/dropdown.vue

@@ -52,119 +52,188 @@ export default {
   mixins: [ButtonMixin],
   inheritAttrs: false,
   props: {
+    /**
+     * Text to display in the dropdown header.
+     */
     headerText: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * When true, hides the border below the dropdown header.
+     */
     hideHeaderBorder: {
       type: Boolean,
       required: false,
       default: true,
     },
+    /**
+     * When true, displays a "Clear all" button in the dropdown.
+     */
     showClearAll: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Text for the "Clear all" button.
+     */
     clearAllText: {
       type: String,
       required: false,
       default: 'Clear all',
     },
+    /**
+     * CSS class(es) to apply to the "Clear all" button text.
+     */
     clearAllTextClass: {
       type: String,
       required: false,
       default: 'gl-px-5',
     },
+    /**
+     * Text to display on the dropdown toggle button.
+     */
     text: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * When true, displays a title above highlighted items.
+     */
     showHighlightedItemsTitle: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Title text to display above highlighted items.
+     */
     highlightedItemsTitle: {
       type: String,
       required: false,
       default: 'Selected',
     },
+    /**
+     * CSS class(es) to apply to the highlighted items title.
+     */
     highlightedItemsTitleClass: {
       type: String,
       required: false,
       default: 'gl-px-5',
     },
+    /**
+     * When true, visually hides the button text but keeps it accessible to screen readers.
+     */
     textSrOnly: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, renders the dropdown as a split button with separate action and toggle areas.
+     */
     split: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Category of the dropdown button.
+     */
     category: {
       type: String,
       required: false,
       default: buttonCategoryOptions.primary,
       validator: (value) => Object.keys(buttonCategoryOptions).includes(value),
     },
+    /**
+     * Visual variant of the dropdown button.
+     */
     variant: {
       type: String,
       required: false,
       default: dropdownVariantOptions.default,
       validator: (value) => Object.keys(dropdownVariantOptions).includes(value),
     },
+    /**
+     * Size of the dropdown button.
+     */
     size: {
       type: String,
       required: false,
       default: 'medium',
       validator: (value) => Object.keys(buttonSizeOptions).includes(value),
     },
+    /**
+     * Icon name to display in the dropdown button.
+     */
     icon: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * When true, renders the dropdown button at 100% width.
+     */
     block: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, disables the dropdown button and prevents interaction.
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, displays a loading indicator in the dropdown button.
+     */
     loading: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * CSS class(es) to apply to the dropdown toggle button.
+     */
     toggleClass: {
       type: [String, Array, Object],
       required: false,
       default: null,
     },
+    /**
+     * When true, aligns the dropdown menu to the right.
+     */
     right: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Custom Popper.js options for dropdown positioning.
+     */
     popperOpts: {
       type: Object,
       required: false,
       default: null,
     },
+    /**
+     * When true, prevents the dropdown from flipping to fit in the viewport.
+     */
     noFlip: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * URL for the split button's main action (when split is true).
+     */
     splitHref: {
       type: String,
       required: false,

package/src/components/base/form/form_group/form_group.vue

@@ -10,21 +10,33 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Additional CSS class(es) to apply to the label element.
+     */
     labelClass: {
       type: [String, Array, Object],
       required: false,
       default: null,
     },
+    /**
+     * Descriptive text to display below the label.
+     */
     labelDescription: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * When true, displays optional text next to the label.
+     */
     optional: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Text to display when the field is optional.
+     */
     optionalText: {
       type: String,
       required: false,

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

@@ -11,7 +11,7 @@ export default {
   inheritAttrs: false,
   props: {
     /**
-     * Maximum width of the Select
+     * Width of the select element.
      */
     width: {
       type: [String, Object],
@@ -23,11 +23,17 @@ export default {
         return widths.every((width) => Object.values(formInputWidths).includes(width));
       },
     },
+    /**
+     * Additional CSS class(es) to apply to the select element.
+     */
     selectClass: {
       type: [String, Object, Array],
       required: false,
       default: '',
     },
+    /**
+     * Number of visible options in the select dropdown. When greater than 1, displays as a scrollable list box.
+     */
     selectSize: {
       type: Number,
       required: false,

package/src/components/base/form/form_textarea/form_textarea.vue

@@ -24,11 +24,17 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * When true, prevents the textarea from being resized by the user (hides the resize handle).
+     */
     noResize: {
       type: Boolean,
       required: false,
       default: true,
     },
+    /**
+     * When true, emits a submit event when Ctrl+Enter or Cmd+Enter is pressed.
+     */
     submitOnEnter: {
       type: Boolean,
       required: false,
@@ -43,13 +49,16 @@ export default {
       default: null,
     },
     /**
-     * Classes for textarea component when `characterCountLimit` is set.
+     * Additional CSS class(es) to apply to the textarea element.
      */
     textareaClasses: {
       type: [String, Object, Array],
       required: false,
       default: null,
     },
+    /**
+     * Number of visible text rows in the textarea.
+     */
     rows: {
       type: [Number, String],
       required: false,

package/src/components/base/loading_icon/loading_icon.vue

@@ -15,13 +15,16 @@ export default {
   name: 'GlLoadingIcon',
   props: {
     /**
-     * Aria-label.
+     * Accessible label for screen readers.
      */
     label: {
       type: String,
       required: false,
       default: 'Loading',
     },
+    /**
+     * Size of the loading icon. Options: 'sm' (16px), 'md' (24px), 'lg' (32px), 'xl' (64px).
+     */
     size: {
       type: String,
       required: false,
@@ -30,6 +33,9 @@ export default {
         return sizes.indexOf(value) !== -1;
       },
     },
+    /**
+     * Color variant of the loading icon. Options: 'dark', 'light'.
+     */
     color: {
       type: String,
       required: false,
@@ -38,6 +44,9 @@ export default {
         return Object.keys(colors).includes(value);
       },
     },
+    /**
+     * Visual variant of the loading icon. Options: 'spinner', 'dots'.
+     */
     variant: {
       type: String,
       required: false,
@@ -47,7 +56,7 @@ export default {
       },
     },
     /**
-     * Wrap in a span or div.
+     * When true, wraps the loading icon in a span instead of a div for inline display.
      */
     inline: {
       type: Boolean,

package/src/components/base/modal/modal.vue

@@ -29,43 +29,67 @@ export default {
     event: 'change',
   },
   props: {
+    /**
+     * Unique identifier for the modal. Used to control the modal programmatically.
+     */
     modalId: {
       type: String,
       required: true,
     },
+    /**
+     * HTML tag to use for the modal title. Options: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'.
+     */
     titleTag: {
       type: String,
       required: false,
       default: 'h4',
     },
+    /**
+     * Title text to display in the modal header.
+     */
     title: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * Additional CSS class(es) to apply to the modal.
+     */
     modalClass: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Configuration object for the primary action button. Should contain 'text' and optionally 'attributes' properties.
+     */
     actionPrimary: {
       type: Object,
       required: false,
       default: null,
       validator: (obj) => validatorHelper(obj),
     },
+    /**
+     * Configuration object for the secondary action button. Should contain 'text' and optionally 'attributes' properties.
+     */
     actionSecondary: {
       type: Object,
       required: false,
       default: null,
       validator: (obj) => validatorHelper(obj),
     },
+    /**
+     * Configuration object for the cancel button. Should contain 'text' and optionally 'attributes' properties.
+     */
     actionCancel: {
       type: Object,
       required: false,
       default: null,
       validator: (obj) => validatorHelper(obj),
     },
+    /**
+     * Size of the modal. Options: 'sm', 'md', 'lg'.
+     */
     size: {
       type: String,
       required: false,
@@ -80,16 +104,25 @@ export default {
       required: false,
       default: () => translate('GlModal.closeButtonTitle', 'Close'),
     },
+    /**
+     * Controls the visibility state of the modal.
+     */
     visible: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Accessible label for the modal. Used for the aria-label attribute.
+     */
     ariaLabel: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * When true, prevents the modal from automatically focusing an element when shown.
+     */
     noFocusOnShow: {
       type: Boolean,
       required: false,

package/src/components/base/pagination/pagination.vue

@@ -22,6 +22,9 @@ export default {
     event: 'input',
   },
   props: {
+    /**
+     * The current page number. Must be greater than 0.
+     */
     value: {
       type: Number,
       required: false,

package/src/components/base/table/table.vue

@@ -20,22 +20,45 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Additional CSS class(es) to apply to the table element.
+     */
     tableClass,
+    /**
+     * Array of items displayed in the table as rows.
+     */
+    items: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    /**
+     * Array of field definitions for table columns. Each field can be a string (column key) or an object with properties like 'key', 'label', 'sortable', 'thClass', etc.
+     */
     fields: {
       type: Array,
       required: false,
       default: null,
     },
+    /**
+     * When true, makes the table header sticky so it remains visible when scrolling.
+     */
     stickyHeader: {
       type: Boolean,
       default: false,
       required: false,
     },
+    /**
+     * The field key to sort by.
+     */
     sortBy: {
       type: String,
       required: false,
       default: undefined,
     },
+    /**
+     * When true, sorts in descending order. When false, sorts in ascending order.
+     */
     sortDesc: {
       type: Boolean,
       required: false,
@@ -114,6 +137,7 @@ export default {
   <b-table
     :table-class="localTableClass"
     :fields="computedFields"
+    :items="items"
     :sort-by.sync="localSortBy"
     :sort-desc.sync="localSortDesc"
     no-sort-reset

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

@@ -11,6 +11,14 @@ export default {
   inheritAttrs: false,
   props: {
     tableClass,
+    /**
+     * Array of items displayed in the table as rows.
+     */
+    items: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     fields: {
       type: Array,
       required: false,
@@ -34,7 +42,13 @@ export default {
 </script>
 
 <template>
-  <b-table-lite :table-class="localTableClass" :fields="fields" v-bind="$attrs" v-on="$listeners">
+  <b-table-lite
+    :table-class="localTableClass"
+    :fields="fields"
+    :items="items"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
     <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
       <!-- @slot See https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-lite-slots for available slots. -->
       <slot :name="slot" v-bind="scope"></slot>