@gitlab/ui 126.3.0 → 126.3.1

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,11 @@ var script = {
         '!gl-px-2': !this.$scopedSlots.default
       }];
     }
+  },
+  mounted() {
+    if (this.hasIconOnly && !this.$attrs['aria-label']) {
+      logWarning('[GlBadge] 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', this.$el);
+    }
   }
 };
 
@@ -161,7 +161,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/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/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/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/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/tabs/tab/tab.js

@@ -1,5 +1,6 @@
 import isPlainObject from 'lodash/isPlainObject';
 import { BTab } from '../../../../vendor/bootstrap-vue/src/components/tabs/tab';
+import GlBadge from '../../badge/badge';
 import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -8,7 +9,8 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 var script = {
   name: 'GlTab',
   components: {
-    BTab
+    BTab,
+    GlBadge
   },
   inheritAttrs: false,
   props: {
@@ -24,6 +26,24 @@ var script = {
       type: String,
       required: false,
       default: null
+    },
+    /**
+     * Display a count badge next to the tab title.
+     */
+    tabCount: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    /**
+     * Screen reader text to provide context for the tab count value.
+     * Should be the result of calling n__() with the count.
+     * Example: :tab-count-sr-text="n__('%d changed file', '%d changed files', count)"
+     */
+    tabCountSrText: {
+      type: String,
+      required: false,
+      default: null
     }
   },
   computed: {
@@ -41,6 +61,15 @@ var script = {
         };
       }
       return `${titleLinkClass} ${DEFAULT_TAB_TITLE_LINK_CLASS}`.trim();
+    },
+    hasTabCount() {
+      return this.tabCount != null && this.tabCount >= 0;
+    }
+  },
+  created() {
+    if (process.env.NODE_ENV !== 'production' && this.hasTabCount && !this.tabCountSrText) {
+      // eslint-disable-next-line no-console
+      console.warn('[GlTab] When using "tab-count", you should also provide "tab-count-sr-text" for screen reader accessibility. Example: :tab-count-sr-text="n__(\'%d item\', \'%d items\', count)"');
     }
   }
 };
@@ -49,7 +78,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('b-tab',_vm._g(_vm._b({attrs:{"title-link-class":_vm.linkClass,"query-param-value":_vm.queryParamValue},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-tab',_vm.$attrs,false),_vm.$listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tab',_vm._g(_vm._b({attrs:{"title":_vm.hasTabCount ? null : _vm.$attrs.title,"title-link-class":_vm.linkClass,"query-param-value":_vm.queryParamValue},scopedSlots:_vm._u([(_vm.hasTabCount)?{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v(_vm._s(_vm.$attrs.title))]}),_vm._v(" "),_c('gl-badge',{staticClass:"gl-ml-2",attrs:{"variant":"neutral","aria-hidden":"true","data-testid":"tab-counter-badge"}},[_vm._v("\n      "+_vm._s(_vm.tabCount)+"\n    ")]),_vm._v(" "),(_vm.tabCountSrText)?_c('span',{staticClass:"gl-sr-only"},[_vm._v(_vm._s(_vm.tabCountSrText))]):_vm._e()]},proxy:true}:null,_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-tab',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/token/token.js

@@ -11,6 +11,9 @@ var script = {
     CloseButton
   },
   props: {
+    /**
+     * When true, hides the close button and makes the token non-removable.
+     */
     viewOnly: {
       type: Boolean,
       required: false,

package/dist/components/dashboards/dashboard_layout/dashboard_layout.js

@@ -34,6 +34,32 @@ var script = {
       type: Boolean,
       required: false,
       default: true
+    },
+    /**
+     * Adjusts the cell height of the grid. Setting this too high can leave unwanted whitespace
+     * between grid panels. Reduce the number to allow for a more compact grid.
+     * For more information, see:
+     * https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/3051
+     */
+    cellHeight: {
+      type: Number,
+      required: false,
+      /* Magic number:
+       * After allowing for padding, and the panel title row, this leaves us with minimum 48px height for the cell content.
+       * This means text/content with our spacing scale can fit up to 49px without scrolling.
+       */
+      default: 137,
+      validator: value => value > 0
+    },
+    /**
+     * Sets a default minimum height for grid panels. This can still be overriden on a per-panel
+     * basis by setting `value.panels[].gridAttributes.minHeight`
+     */
+    minCellHeight: {
+      type: Number,
+      required: false,
+      default: 1,
+      validator: value => value > 0
     }
   },
   computed: {
@@ -56,7 +82,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('div',[_c('section',{staticClass:"gl-my-4 gl-flex gl-items-center"},[_vm._t("header",function(){return [_c('div',{staticClass:"gl-flex gl-w-full gl-flex-col"},[_c('div',{staticClass:"gl-flex gl-items-center"},[_vm._t("title",function(){return [_c('h2',{staticClass:"gl-my-0",attrs:{"data-testid":"title"}},[_vm._v(_vm._s(_vm.config.title))])]})],2),_vm._v(" "),(_vm.dashboardHasDescription)?_c('div',{staticClass:"gl-mt-3 gl-flex"},[_vm._t("description",function(){return [_c('p',{staticClass:"gl-mb-0",attrs:{"data-testid":"description"}},[_vm._v("\n              "+_vm._s(_vm.config.description)+"\n            ")])]})],2):_vm._e()])]}),_vm._v(" "),(_vm.$scopedSlots.actions)?_c('div',{attrs:{"data-testid":"actions-container"}},[_vm._t("actions")],2):_vm._e()],2),_vm._v(" "),_c('div',{staticClass:"gl-flex"},[_c('div',{staticClass:"gl-flex gl-grow gl-flex-col"},[_vm._t("alert"),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('section',{staticClass:"gl-flex gl-flex-row gl-flex-wrap gl-gap-5 gl-pb-3 gl-pt-4",attrs:{"data-testid":"filters-container"}},[_vm._t("filters")],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasPanels)?_c('grid-layout',{staticClass:"-gl-mx-3",attrs:{"value":_vm.config,"is-static-grid":_vm.isStaticGrid},on:{"input":_vm.emitChanges},scopedSlots:_vm._u([{key:"panel",fn:function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('section',{staticClass:"gl-my-4 gl-flex gl-items-center"},[_vm._t("header",function(){return [_c('div',{staticClass:"gl-flex gl-w-full gl-flex-col"},[_c('div',{staticClass:"gl-flex gl-items-center"},[_vm._t("title",function(){return [_c('h2',{staticClass:"gl-my-0",attrs:{"data-testid":"title"}},[_vm._v(_vm._s(_vm.config.title))])]})],2),_vm._v(" "),(_vm.dashboardHasDescription)?_c('div',{staticClass:"gl-mt-3 gl-flex"},[_vm._t("description",function(){return [_c('p',{staticClass:"gl-mb-0",attrs:{"data-testid":"description"}},[_vm._v("\n              "+_vm._s(_vm.config.description)+"\n            ")])]})],2):_vm._e()])]}),_vm._v(" "),(_vm.$scopedSlots.actions)?_c('div',{attrs:{"data-testid":"actions-container"}},[_vm._t("actions")],2):_vm._e()],2),_vm._v(" "),_c('div',{staticClass:"gl-flex"},[_c('div',{staticClass:"gl-flex gl-grow gl-flex-col"},[_vm._t("alert"),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('section',{staticClass:"gl-flex gl-flex-row gl-flex-wrap gl-gap-5 gl-pb-3 gl-pt-4",attrs:{"data-testid":"filters-container"}},[_vm._t("filters")],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasPanels)?_c('grid-layout',{staticClass:"-gl-mx-3",attrs:{"value":_vm.config,"is-static-grid":_vm.isStaticGrid,"cell-height":_vm.cellHeight,"min-cell-height":_vm.minCellHeight},on:{"input":_vm.emitChanges},scopedSlots:_vm._u([{key:"panel",fn:function(ref){
 var panel = ref.panel;
 return [_vm._t("panel",null,null,{ panel: panel })]}}],null,true)}):_vm._t("empty-state")],2)]),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];

package/dist/components/dashboards/dashboard_layout/grid_layout/grid_layout.js

@@ -33,6 +33,32 @@ var script = {
       type: Boolean,
       required: false,
       default: true
+    },
+    /**
+     * Adjusts the cell height of the grid. Setting this too high can leave unwanted whitespace
+     * between grid panels. Reduce the number to allow for a more compact grid.
+     * For more information, see:
+     * https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/3051
+     */
+    cellHeight: {
+      type: Number,
+      required: false,
+      /* Magic number:
+       * After allowing for padding, and the panel title row, this leaves us with minimum 48px height for the cell content.
+       * This means text/content with our spacing scale can fit up to 49px without scrolling.
+       */
+      default: 137,
+      validator: value => value > 0
+    },
+    /**
+     * Sets a default minimum height for grid panels. This can still be overriden on a per-panel
+     * basis by setting `value.panels[].gridAttributes.minHeight`
+     */
+    minCellHeight: {
+      type: Number,
+      required: false,
+      default: 1,
+      validator: value => value > 0
     }
   },
   data() {
@@ -144,11 +170,6 @@ var script = {
         margin: '8px',
         // CSS Selector for finding the drag handle element
         handle: '.grid-stack-item-handle',
-        /* Magic number:
-         * After allowing for padding, and the panel title row, this leaves us with minimum 48px height for the cell content.
-         * This means text/content with our spacing scale can fit up to 49px without scrolling.
-         */
-        cellHeight: '137px',
         // Setting 1 in minRow prevents the grid collapsing when all panels are removed
         minRow: 1,
         // Define the number of columns for anything below a set width, defaults to fill the available space
@@ -158,6 +179,7 @@ var script = {
             c: 1
           }]
         },
+        cellHeight: this.cellHeight,
         alwaysShowResizeHandle: true,
         animate: true,
         float: true,
@@ -206,7 +228,7 @@ var script = {
         y: yPos,
         w: width,
         h: height,
-        minH: minHeight,
+        minH: minHeight || this.minCellHeight,
         minW: minWidth,
         maxH: maxHeight,
         maxW: maxWidth,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "126.3.0",
+  "version": "126.3.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -159,7 +159,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.94.1",
+    "sass": "^1.94.2",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.3",