@gitlab/ui 126.3.0 → 126.3.2

package/dist/components/base/tabs/tab/tab.js

@@ -1,5 +1,7 @@
 import isPlainObject from 'lodash/isPlainObject';
 import { BTab } from '../../../../vendor/bootstrap-vue/src/components/tabs/tab';
+import GlBadge from '../../badge/badge';
+import { logWarning } from '../../../../utils/utils';
 import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -8,7 +10,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 +27,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 +62,16 @@ var script = {
         };
       }
       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'
+      });
     }
   }
 };
@@ -49,7 +80,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/dist/utils/utils.js

@@ -157,14 +157,21 @@ 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.
  */
-function logWarning() {
-  let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  if (message.length && isDev()) {
-    console.warn(message, element); // eslint-disable-line no-console
+function logWarning(message) {
+  let context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  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
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "126.3.0",
+  "version": "126.3.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -146,8 +146,8 @@
     "mockdate": "^3.0.5",
     "module-alias": "^2.2.3",
     "pikaday": "^1.8.0",
-    "playwright": "^1.55.1",
-    "playwright-core": "^1.55.1",
+    "playwright": "^1.57.0",
+    "playwright-core": "^1.57.0",
     "postcss": "8.5.6",
     "postcss-loader": "8.2.0",
     "postcss-scss": "4.0.9",
@@ -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",

package/src/components/base/avatars_inline/avatars_inline.vue

@@ -12,33 +12,54 @@ export default {
     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,
@@ -88,6 +109,7 @@ export default {
 <template>
   <div class="gl-avatars-inline" :class="`gl-avatars-inline-${badgeSize}`">
     <div v-for="(avatar, index) in visibleAvatars" :key="index" class="gl-avatars-inline-child">
+      <!-- @slot Custom avatar rendering. Provide avatar object as slot prop. -->
       <slot name="avatar" :avatar="avatar">
         <gl-avatar v-bind="avatar" :size="avatarSize" />
       </slot>

package/src/components/base/badge/badge.vue

@@ -7,6 +7,7 @@ import {
   linkVariantUnstyled,
 } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';
+import { logWarning } from '../../../utils/utils';
 
 const variantClass = {
   [badgeVariantOptions.neutral]: 'badge-neutral',
@@ -120,13 +121,6 @@ export default {
     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];
     },
@@ -152,6 +146,14 @@ export 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 },
+      );
+    }
+  },
 };
 </script>
 
@@ -161,7 +163,6 @@ export default {
     v-bind="computedProps"
     :class="classes"
     :role="role"
-    :aria-label="ariaLabel"
     v-on="$listeners"
   >
     <gl-icon

package/src/components/base/button/button.vue

@@ -369,10 +369,10 @@ export default {
   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/src/components/base/drawer/drawer.vue

@@ -10,25 +10,40 @@ export default {
     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,
@@ -93,6 +108,10 @@ export default {
       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');
       }
     },
@@ -108,6 +127,7 @@ export default {
         :class="{ 'gl-drawer-header-sticky': headerSticky }"
       >
         <div class="gl-drawer-title">
+          <!-- @slot Content for the drawer title area in the header. -->
           <slot name="title"></slot>
           <gl-button
             category="tertiary"
@@ -118,6 +138,7 @@ export default {
             @click="$emit('close')"
           />
         </div>
+        <!-- @slot Additional content below the title in the header section. -->
         <slot name="header"></slot>
       </div>
       <div
@@ -127,6 +148,7 @@ export default {
           'gl-drawer-body-scrim': !shouldRenderFooter,
         }"
       >
+        <!-- @slot Main content of the drawer body. -->
         <slot></slot>
       </div>
       <div
@@ -134,6 +156,7 @@ export default {
         class="gl-drawer-footer gl-drawer-footer-sticky gl-drawer-body-scrim-on-footer"
         :style="{ zIndex }"
       >
+        <!-- @slot Content for the sticky footer at the bottom of the drawer. -->
         <slot name="footer"></slot>
       </div>
     </aside>

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

@@ -247,8 +247,8 @@ export default {
     isIconOnly() {
       return Boolean(
         this.icon &&
-          (!this.text?.length || this.textSrOnly) &&
-          !this.hasSlotContents('button-text'),
+        (!this.text?.length || this.textSrOnly) &&
+        !this.hasSlotContents('button-text'),
       );
     },
     isIconWithText() {

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

@@ -15,51 +15,81 @@ export default {
   },
   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,
@@ -93,6 +123,10 @@ export default {
   },
   methods: {
     handleClickIconRight() {
+      /**
+       * Emitted when right icon is clicked.
+       * @event handleClickIconRight
+       */
       this.$emit('click-icon-right');
     },
   },
@@ -115,6 +149,7 @@ export default {
     <gl-icon v-if="iconName" :name="iconName" :class="['gl-dropdown-item-icon', iconColorCss]" />
     <gl-avatar v-if="avatarUrl" :size="32" :src="avatarUrl" />
     <div class="gl-dropdown-item-text-wrapper">
+      <!-- @slot Main content of the dropdown item. -->
       <p class="gl-dropdown-item-text-primary"><slot></slot></p>
       <p v-if="secondaryText" class="gl-dropdown-item-text-secondary">{{ secondaryText }}</p>
     </div>

package/src/components/base/filtered_search/filtered_search.vue

@@ -3,6 +3,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.vue';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click.vue';
 import GlFilteredSearchTerm from './filtered_search_term.vue';
@@ -72,9 +73,9 @@ export default {
         // eslint-disable-next-line no-underscore-dangle
         const isOk = Array.isArray(value) && value.every(({ token }) => !token || token.__v_skip);
         if (!isOk) {
-          // eslint-disable-next-line no-console
-          console.warn(
+          logWarning(
             'You are using Vue3. In Vue3 each token component passed to filtered search must be wrapped into markRaw',
+            { name: 'GlFilteredSearch' },
           );
         }
 

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

@@ -31,11 +31,17 @@ export default {
       default: () => [{ value: '', name: '' }],
       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/src/components/base/icon/icon.vue

@@ -2,6 +2,7 @@
 <script>
 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';
 
 const knownIcons = new Set(iconsInfo.icons);
@@ -36,8 +37,7 @@ export default {
         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/src/components/base/illustration/illustration.vue

@@ -2,6 +2,7 @@
 <script>
 import illustrationsPath from '@gitlab/svgs/dist/illustrations.svg';
 import illustrationsInfo from '@gitlab/svgs/dist/illustrations.json';
+import { logWarning } from '../../../utils/utils';
 
 const knownIllustrations = illustrationsInfo.icons;
 
@@ -24,8 +25,9 @@ export default {
         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;
       },
     },