@gitlab/ui 126.3.0 → 126.3.2

package/src/components/base/label/label.vue

@@ -16,41 +16,65 @@ export default {
     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,
@@ -98,19 +122,15 @@ export default {
   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/src/components/base/modal/modal.vue

@@ -141,19 +141,19 @@ export default {
     shouldRenderModalFooter() {
       return Boolean(
         this.actionCancel ||
-          this.actionSecondary ||
-          this.actionPrimary ||
-          // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-          this.$slots['modal-footer'],
+        this.actionSecondary ||
+        this.actionPrimary ||
+        // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+        this.$slots['modal-footer'],
       );
     },
   },
   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/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -121,8 +121,8 @@ export default {
       validator: (value) => {
         if (['left', 'center', 'right'].includes(value)) {
           logWarning(
-            `GlDisclosureDropdown/GlCollapsibleListbox: "${value}" placement is deprecated.
-            Use ${dropdownPlacements[value]} instead.`,
+            `"${value}" placement is deprecated. Use ${dropdownPlacements[value]} instead.`,
+            { name: 'GlDisclosureDropdown/GlCollapsibleListbox' },
           );
         }
 
@@ -347,9 +347,12 @@ export default {
     checkToggleFocusable() {
       if (!isElementFocusable(this.toggleElement) && !isElementTabbable(this.toggleElement)) {
         logWarning(
-          `GlDisclosureDropdown/GlCollapsibleListbox: Toggle is missing a 'tabindex' and cannot be focused.
+          `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,
+          {
+            name: 'GlDisclosureDropdown/GlCollapsibleListbox',
+            element: this.$el,
+          },
         );
       }
     },

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

@@ -2,7 +2,7 @@
 <script>
 import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';
-import { stopEvent } from '../../../../utils/utils';
+import { stopEvent, logWarning } from '../../../../utils/utils';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
@@ -587,9 +587,9 @@ export default {
             immediate: true,
             handler(newValue) {
               if (newValue && this.items.some((item) => !isOption(item))) {
-                // eslint-disable-next-line no-console
-                console.warn(
+                logWarning(
                   'When using grouped options infinite scroll can only be used on the last group.',
+                  { name: 'GlCollapsibleListbox' },
                 );
               }
             },

package/src/components/base/popover/popover.vue

@@ -16,6 +16,9 @@ export default {
   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 @@ export default {
       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,
@@ -113,6 +128,7 @@ export default {
     v-on="$listeners"
   >
     <template v-if="shouldShowTitle" #title>
+      <!-- @slot Custom content for the popover title -->
       <slot name="title">
         {{ title }}
       </slot>
@@ -124,6 +140,9 @@ export default {
         />
       </div>
     </template>
-    <template v-if="$scopedSlots.default" #default><slot></slot></template>
+    <template v-if="$scopedSlots.default" #default>
+      <!-- @slot Main content of the popover body-->
+      <slot></slot>
+    </template>
   </b-popover>
 </template>

package/src/components/base/progress_bar/progress_bar.vue

@@ -13,27 +13,42 @@ const backgroundClasses = {
 export default {
   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/src/components/base/search_box_by_type/search_box_by_type.vue

@@ -27,11 +27,17 @@ export default {
       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,
@@ -104,6 +110,10 @@ export default {
       this.$refs.input.$el.focus();
     },
     onInput(value) {
+      /**
+       * Emitted when the input value changes or gets cleared.
+       * @event input
+       */
       this.$emit('input', value);
     },
     onFocusout(event) {
@@ -113,6 +123,10 @@ export default {
         return;
       }
 
+      /**
+       * Emitted when focus leaves the search box (input and clear button).
+       * @event focusout
+       */
       this.$emit('focusout', event);
     },
     onFocusin(event) {
@@ -122,6 +136,10 @@ export default {
         return;
       }
 
+      /**
+       * Emitted when focus enters the search box (input or clear button).
+       * @event focusin
+       */
       this.$emit('focusin', event);
     },
   },

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

@@ -105,7 +105,7 @@ export default {
     // 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: {

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

@@ -2,6 +2,8 @@
 <script>
 import isPlainObject from 'lodash/isPlainObject';
 import { BTab } from '../../../../vendor/bootstrap-vue/src/components/tabs/tab';
+import GlBadge from '../../badge/badge.vue';
+import { logWarning } from '../../../../utils/utils';
 
 import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
 
@@ -9,6 +11,7 @@ export default {
   name: 'GlTab',
   components: {
     BTab,
+    GlBadge,
   },
   inheritAttrs: false,
   props: {
@@ -25,6 +28,24 @@ export default {
       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: {
     linkClass() {
@@ -38,19 +59,43 @@ export default {
       }
       return `${titleLinkClass} ${DEFAULT_TAB_TITLE_LINK_CLASS}`.trim();
     },
+    hasTabCount() {
+      return this.tabCount != null && this.tabCount >= 0;
+    },
+  },
+  created() {
+    if (this.hasTabCount && !this.tabCountSrText) {
+      logWarning(
+        '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)"',
+        { name: 'GlTab' },
+      );
+    }
   },
 };
 </script>
 
 <template>
   <b-tab
+    :title="hasTabCount ? null : $attrs.title"
     :title-link-class="linkClass"
     :query-param-value="queryParamValue"
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
-    <template v-for="slot in Object.keys($slots)" #[slot]>
+    <template v-if="hasTabCount" #title>
+      <slot name="title">{{ $attrs.title }}</slot>
+      <gl-badge
+        class="gl-ml-2"
+        variant="neutral"
+        aria-hidden="true"
+        data-testid="tab-counter-badge"
+      >
+        {{ tabCount }}
+      </gl-badge>
+      <span v-if="tabCountSrText" class="gl-sr-only">{{ tabCountSrText }}</span>
+    </template>
+
+    <template v-for="slot in Object.keys($scopedSlots)" #[slot]>
       <slot :name="slot"></slot>
     </template>
   </b-tab>

package/src/components/base/token/token.vue

@@ -10,6 +10,9 @@ export default {
     CloseButton,
   },
   props: {
+    /**
+     * When true, hides the close button and makes the token non-removable.
+     */
     viewOnly: {
       type: Boolean,
       required: false,
@@ -60,6 +63,7 @@ export default {
 <template>
   <span :class="['gl-token', variantClass, viewOnlyClass]" v-on="$listeners">
     <span class="gl-token-content">
+      <!-- @slot Content to display inside the token -->
       <slot></slot>
       <close-button v-if="!viewOnly" class="gl-token-close" :label="removeLabel" @click="close" />
     </span>

package/src/components/dashboards/dashboard_layout/dashboard_layout.vue

@@ -35,6 +35,33 @@ export default {
       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: {
     dashboardHasPanels() {
@@ -104,6 +131,8 @@ export default {
           v-if="dashboardHasPanels"
           :value="config"
           :is-static-grid="isStaticGrid"
+          :cell-height="cellHeight"
+          :min-cell-height="minCellHeight"
           class="-gl-mx-3"
           @input="emitChanges"
         >

package/src/components/dashboards/dashboard_layout/grid_layout/grid_layout.vue

@@ -35,6 +35,33 @@ export default {
       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() {
     return {
@@ -143,15 +170,11 @@ export default {
           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
           columnOpts: { breakpoints: [{ w: breakpoints.md, c: 1 }] },
+          cellHeight: this.cellHeight,
           alwaysShowResizeHandle: true,
           animate: true,
           float: true,
@@ -194,7 +217,7 @@ export default {
         y: yPos,
         w: width,
         h: height,
-        minH: minHeight,
+        minH: minHeight || this.minCellHeight,
         minW: minWidth,
         maxH: maxHeight,
         maxW: maxWidth,

package/src/utils/utils.js

@@ -173,12 +173,17 @@ export function isDev() {
 
 /**
  * Prints a warning message to the console in non-test and non-production environments.
- * @param {string} message message to print to the console
- * @param {HTMLElement} element component that triggered the warning
+ * @param {string} message Message to print to the console.
+ * @param {Object} [context] Optional object with additional context.
+ * @param {string} [context.name] The name of the context of the message. Usually the component's name.
+ * @param {HTMLElement} [context.element] The element relevant to the message.
  */
-export function logWarning(message = '', element = '') {
-  if (message.length && isDev()) {
-    console.warn(message, element); // eslint-disable-line no-console
+export function logWarning(message, context = {}) {
+  if (isDev()) {
+    const { name, element } = context;
+    const formattedMessage = name ? `[${name}] ${message}` : message;
+    const args = element ? [formattedMessage, element] : [formattedMessage];
+    console.warn(...args); // eslint-disable-line no-console
   }
 }