@gitlab/ui 126.3.1 → 126.3.2

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

@@ -152,7 +152,10 @@ var script = {
   },
   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);
+      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
+      });
     }
   }
 };

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/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/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/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/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: {

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

@@ -1,6 +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';
 
@@ -67,9 +68,10 @@ var script = {
     }
   },
   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)"');
+    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'
+      });
     }
   }
 };

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.1",
+  "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",

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

@@ -149,8 +149,8 @@ export 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,
+        '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 },
       );
     }
   },

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/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/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/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;
       },
     },

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/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

@@ -3,6 +3,7 @@
 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';
 
@@ -63,10 +64,10 @@ export default {
     },
   },
   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)"',
+    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' },
       );
     }
   },

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
   }
 }