@gitlab/ui 126.3.0 → 126.3.2

package/dist/components/base/avatars_inline/avatars_inline.js

@@ -12,33 +12,54 @@ var script = {
     GlTooltip
   },
   props: {
+    /**
+     * Array of avatar objects to display
+     */
     avatars: {
       type: Array,
       required: true
     },
+    /**
+     * Maximum number of avatars to display before collapsing
+     */
     maxVisible: {
       type: Number,
       required: true
     },
+    /**
+     * Size of each avatar in pixels
+     */
     avatarSize: {
       type: Number,
       required: true,
       validator: value => avatarsInlineSizeOptions.includes(value)
     },
+    /**
+     * Whether to show the avatars in collapsed state
+     */
     collapsed: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Screen reader text for the collapsed avatars badge
+     */
     badgeSrOnlyText: {
       type: String,
       required: true
     },
+    /**
+     * Property name to extract tooltip text from each hidden avatar object
+     */
     badgeTooltipProp: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Maximum number of characters to display in the badge tooltip
+     */
     badgeTooltipMaxChars: {
       type: Number,
       required: false,

package/dist/components/base/badge/badge.js

@@ -1,6 +1,7 @@
 import GlLink from '../link/link';
 import { badgeVariantOptions, badgeIconSizeOptions, linkVariantUnstyled } from '../../../utils/constants';
 import GlIcon from '../icon/icon';
+import { logWarning } from '../../../utils/utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
@@ -116,12 +117,6 @@ var script = {
     role() {
       return this.hasIconOnly ? 'img' : undefined;
     },
-    ariaLabel() {
-      if (this.$attrs['aria-label']) {
-        return this.$attrs['aria-label'];
-      }
-      return this.role === 'img' ? this.icon : undefined;
-    },
     iconSizeComputed() {
       return badgeIconSizeOptions[this.iconSize];
     },
@@ -154,6 +149,14 @@ var script = {
         '!gl-px-2': !this.$scopedSlots.default
       }];
     }
+  },
+  mounted() {
+    if (this.hasIconOnly && !this.$attrs['aria-label']) {
+      logWarning('Icon-only badges require an aria-label for accessibility. The label should describe the metadata (e.g., "Due date", "Open issue"), not the icon name. See https://design.gitlab.com/components/badge#using-icon-only-badges', {
+        name: 'GlBadge',
+        element: this.$el
+      });
+    }
   }
 };
 
@@ -161,7 +164,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.computedTag,_vm._g(_vm._b({tag:"component",class:_vm.classes,attrs:{"role":_vm.role,"aria-label":_vm.ariaLabel}},'component',_vm.computedProps,false),_vm.$listeners),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2': _vm.isCircularIcon },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),(_vm.$slots.default)?_c('span',{staticClass:"gl-badge-content"},[_vm._t("default")],2):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.computedTag,_vm._g(_vm._b({tag:"component",class:_vm.classes,attrs:{"role":_vm.role}},'component',_vm.computedProps,false),_vm.$listeners),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2': _vm.isCircularIcon },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),(_vm.$slots.default)?_c('span',{staticClass:"gl-badge-content"},[_vm._t("default")],2):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/button/button.js

@@ -364,7 +364,10 @@ var script = {
   mounted() {
     // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
     if (!this.$slots.default && !this.$attrs['aria-label'] && !this.$props.label) {
-      logWarning('[gl-button]: Accessible name missing. Please add inner text or aria-label.', this.$el);
+      logWarning('Accessible name missing. Please add inner text or aria-label.', {
+        name: 'GlButton',
+        element: this.$el
+      });
     }
   },
   methods: {

package/dist/components/base/drawer/drawer.js

@@ -11,25 +11,40 @@ var script = {
     GlButton
   },
   props: {
+    /**
+     * Controls the visibility state of the drawer.
+     */
     open: {
       type: Boolean,
       required: true
     },
+    /**
+     * Height of the header element (e.g., '64px'). Used to position the drawer below a fixed header.
+     */
     headerHeight: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * When true, makes the drawer header sticky so it remains visible when scrolling the drawer content.
+     */
     headerSticky: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Z-index value for the drawer. Useful for controlling stacking order with other elements.
+     */
     zIndex: {
       type: Number,
       required: false,
       default: maxZIndex
     },
+    /**
+     * Visual variant of the drawer.
+     */
     variant: {
       type: String,
       required: false,
@@ -91,6 +106,10 @@ var script = {
     handleEscape(e) {
       const ESC = 27;
       if (this.open && e.keyCode === ESC) {
+        /**
+         * Emits when drawer gets closed (by pressing ESC or clicking the close button).
+         * @event close
+         */
         this.$emit('close');
       }
     }

package/dist/components/base/dropdown/dropdown_item.js

@@ -15,51 +15,81 @@ var script = {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * URL for the avatar image to display
+     */
     avatarUrl: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Color variant for the icon on the left side
+     */
     iconColor: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Name of the icon to display on the left side
+     */
     iconName: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Aria label for the right icon button
+     */
     iconRightAriaLabel: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Name of the icon to display on the right side
+     */
     iconRightName: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Whether the dropdown item is checked
+     */
     isChecked: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Whether to show a check icon for this item
+     */
     isCheckItem: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Whether to center the check icon vertically
+     */
     isCheckCentered: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Secondary text to display below the main content
+     */
     secondaryText: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * ARIA role for the dropdown item
+     */
     role: {
       type: String,
       required: false,
@@ -97,6 +127,10 @@ var script = {
   },
   methods: {
     handleClickIconRight() {
+      /**
+       * Emitted when right icon is clicked.
+       * @event handleClickIconRight
+       */
       this.$emit('click-icon-right');
     }
   }

package/dist/components/base/filtered_search/filtered_search.js

@@ -2,6 +2,7 @@ import isEqual from 'lodash/isEqual';
 import cloneDeep from 'lodash/cloneDeep';
 import { PortalTarget } from 'portal-vue';
 import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
+import { logWarning } from '../../../utils/utils';
 import GlIcon from '../icon/icon';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click';
 import GlFilteredSearchTerm from './filtered_search_term';
@@ -67,8 +68,9 @@ var script = {
           return !token || token.__v_skip;
         });
         if (!isOk) {
-          // eslint-disable-next-line no-console
-          console.warn('You are using Vue3. In Vue3 each token component passed to filtered search must be wrapped into markRaw');
+          logWarning('You are using Vue3. In Vue3 each token component passed to filtered search must be wrapped into markRaw', {
+            name: 'GlFilteredSearch'
+          });
         }
         return isOk;
       }

package/dist/components/base/form/form_input_group/form_input_group.js

@@ -34,11 +34,17 @@ var script = {
       }],
       validator: options => options.every(opt => Object.keys(opt).includes('name', 'value'))
     },
+    /**
+     * Accessible label for the input field. Used for the aria-label attribute.
+     */
     label: {
       type: String,
       required: false,
       default: undefined
     },
+    /**
+     * Additional CSS class(es) to apply to the input element.
+     */
     inputClass: {
       type: [String, Array, Object],
       required: false,

package/dist/components/base/icon/icon.js

@@ -1,5 +1,6 @@
 import iconsPath from '@gitlab/svgs/dist/icons.svg';
 import iconsInfo from '@gitlab/svgs/dist/icons.json';
+import { logWarning } from '../../../utils/utils';
 import { iconSizeOptions, iconVariantOptions } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -37,8 +38,9 @@ var script = {
         if (knownIcons.has(value)) {
           return true;
         }
-        // eslint-disable-next-line no-console
-        console.warn(`Icon '${value}' is not a known icon of @gitlab/svgs`);
+        logWarning(`Icon '${value}' is not a known icon of @gitlab/svgs`, {
+          name: 'GlIcon'
+        });
         return false;
       }
     },

package/dist/components/base/illustration/illustration.js

@@ -1,5 +1,6 @@
 import illustrationsPath from '@gitlab/svgs/dist/illustrations.svg';
 import illustrationsInfo from '@gitlab/svgs/dist/illustrations.json';
+import { logWarning } from '../../../utils/utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
@@ -25,8 +26,9 @@ var script = {
         if (knownIllustrations.some(obj => obj.name === value)) {
           return true;
         }
-        // eslint-disable-next-line no-console
-        console.warn(`Illustration '${value}' is not a known illustration of @gitlab/svgs`);
+        logWarning(`Illustration '${value}' is not a known illustration of @gitlab/svgs`, {
+          name: 'GlIllustration'
+        });
         return false;
       }
     }

package/dist/components/base/label/label.js

@@ -17,41 +17,65 @@ var script = {
     GlTooltip
   },
   props: {
+    /**
+     * Background color of the label in hex, rgb, or rgba format
+     */
     backgroundColor: {
       type: String,
       required: true,
       validator: value => /^(#|rgb|rgba)/.test(value)
     },
+    /**
+     * Title text of the label
+     */
     title: {
       type: String,
       required: true,
       default: ''
     },
+    /**
+     * Description text shown in tooltip
+     */
     description: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Placement of the tooltip
+     */
     tooltipPlacement: {
       type: String,
       required: false,
       default: 'top'
     },
+    /**
+     * Target URL for the label link
+     */
     target: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Whether the label is scoped (uses :: separator)
+     */
     scoped: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Whether to show the close button
+     */
     showCloseButton: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Whether the label is disabled
+     */
     disabled: {
       type: Boolean,
       required: false,
@@ -99,19 +123,15 @@ var script = {
   methods: {
     onClick(e) {
       /**
-       * Emitted when label is clicked
-       *
+       * Emitted when the label is clicked.
        * @event click
-       * @type {object}
        */
       this.$emit('click', e);
     },
     onClose(e) {
       /**
-       * Emitted when x is clicked
-       *
+       * Emitted when the close button is clicked.
        * @event close
-       * @type {object}
        */
       this.$emit('close', e);
     }

package/dist/components/base/modal/modal.js

@@ -141,7 +141,10 @@ var script = {
   },
   mounted() {
     if (!this.ariaLabel && !this.title) {
-      logWarning('[gl-modal]: Accessible name for modal missing. Please add title prop or aria-label.', this.$el);
+      logWarning('Accessible name for modal missing. Please add title prop or aria-label.', {
+        name: 'GlModal',
+        element: this.$el
+      });
     }
   },
   methods: {

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -90,8 +90,9 @@ var script = {
       default: 'bottom-start',
       validator: value => {
         if (['left', 'center', 'right'].includes(value)) {
-          logWarning(`GlDisclosureDropdown/GlCollapsibleListbox: "${value}" placement is deprecated.
-            Use ${dropdownPlacements[value]} instead.`);
+          logWarning(`"${value}" placement is deprecated. Use ${dropdownPlacements[value]} instead.`, {
+            name: 'GlDisclosureDropdown/GlCollapsibleListbox'
+          });
         }
         return Object.keys(dropdownPlacements).includes(value);
       }
@@ -307,8 +308,11 @@ var script = {
   methods: {
     checkToggleFocusable() {
       if (!isElementFocusable(this.toggleElement) && !isElementTabbable(this.toggleElement)) {
-        logWarning(`GlDisclosureDropdown/GlCollapsibleListbox: Toggle is missing a 'tabindex' and cannot be focused.
-          Use 'a' or 'button' element instead or make sure to add 'role="button"' along with 'tabindex' otherwise.`, this.$el);
+        logWarning(`Toggle is missing a 'tabindex' and cannot be focused.
+          Use 'a' or 'button' element instead or make sure to add 'role="button"' along with 'tabindex' otherwise.`, {
+          name: 'GlDisclosureDropdown/GlCollapsibleListbox',
+          element: this.$el
+        });
       }
     },
     getArrowOffsets(actualPlacement) {

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -1,6 +1,6 @@
 import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';
-import { stopEvent } from '../../../../utils/utils';
+import { logWarning, stopEvent } from '../../../../utils/utils';
 import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_CONTENTS_CLASS, ARROW_UP, ENTER, ARROW_DOWN, END, HOME } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
 import GlButton from '../../button/button';
@@ -550,8 +550,9 @@ var script = {
         immediate: true,
         handler(newValue) {
           if (newValue && this.items.some(item => !isOption(item))) {
-            // eslint-disable-next-line no-console
-            console.warn('When using grouped options infinite scroll can only be used on the last group.');
+            logWarning('When using grouped options infinite scroll can only be used on the last group.', {
+              name: 'GlCollapsibleListbox'
+            });
           }
         }
       }

package/dist/components/base/popover/popover.js

@@ -16,6 +16,9 @@ var script = {
   mixins: [tooltipMixin(popoverRefName)],
   inheritAttrs: false,
   props: {
+    /**
+     * Additional CSS class(es) to apply to the popover.
+     */
     cssClasses: {
       type: [Array, String, Object],
       required: false,
@@ -31,21 +34,33 @@ var script = {
       required: false,
       default: 'hover focus'
     },
+    /**
+     * Title text to display in the popover header.
+     */
     title: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * When true, displays a close button in the popover header.
+     */
     showCloseButton: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Placement of the popover relative to the target element.
+     */
     placement: {
       type: String,
       required: false,
       default: popoverPlacements.top
     },
+    /**
+     * Padding (in pixels) between the popover and the viewport boundary.
+     */
     boundaryPadding: {
       type: [Number, String],
       required: false,

package/dist/components/base/progress_bar/progress_bar.js

@@ -12,27 +12,42 @@ const backgroundClasses = {
 var script = {
   name: 'GlProgressBar',
   props: {
+    /**
+     * Accessible label for the progress bar. Used for the aria-label attribute.
+     */
     ariaLabel: {
       type: String,
       required: false,
       default: translate('GlProgressBar.ariaLabel', 'Progress bar')
     },
+    /**
+     * Current progress value. Should be between 0 and the max value.
+     */
     value: {
       type: [Number, String],
       required: false,
       default: 0
     },
+    /**
+     * Visual variant of the progress bar.
+     */
     variant: {
       type: String,
       required: false,
       default: 'primary',
       validator: value => Object.keys(progressBarVariantOptions).includes(value)
     },
+    /**
+     * Maximum value for the progress bar. The value prop is calculated as a percentage of this.
+     */
     max: {
       type: [Number, String],
       required: false,
       default: 100
     },
+    /**
+     * Custom height for the progress bar (e.g., '8px', '1rem').
+     */
     height: {
       type: String,
       required: false,

package/dist/components/base/search_box_by_type/search_box_by_type.js

@@ -27,11 +27,17 @@ var script = {
       required: false,
       default: ''
     },
+    /**
+     * Whether to render the search box without borders
+     */
     borderless: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Title text for the clear button
+     */
     clearButtonTitle: {
       type: String,
       required: false,
@@ -102,6 +108,10 @@ var script = {
       this.$refs.input.$el.focus();
     },
     onInput(value) {
+      /**
+       * Emitted when the input value changes or gets cleared.
+       * @event input
+       */
       this.$emit('input', value);
     },
     onFocusout(event) {
@@ -111,6 +121,11 @@ var script = {
       if (this.isInputOrClearButton(relatedTarget)) {
         return;
       }
+
+      /**
+       * Emitted when focus leaves the search box (input and clear button).
+       * @event focusout
+       */
       this.$emit('focusout', event);
     },
     onFocusin(event) {
@@ -120,6 +135,11 @@ var script = {
       if (this.isInputOrClearButton(relatedTarget)) {
         return;
       }
+
+      /**
+       * Emitted when focus enters the search box (input or clear button).
+       * @event focusin
+       */
       this.$emit('focusin', event);
     }
   }

package/dist/components/base/table/table.js

@@ -109,7 +109,10 @@ var script = {
     // logWarning will call isDev before logging any message
     // this additional call to isDev is being made to exit the condition early when run in production
     if (isDev() && !shouldUseFullTable(this)) {
-      logWarning(glTableLiteWarning, this.$el);
+      logWarning(glTableLiteWarning, {
+        name: 'GlTable',
+        element: this.$el
+      });
     }
   },
   methods: {