@gitlab/ui 128.2.3 → 128.4.0

package/dist/vendor/bootstrap-vue/src/components/tooltip/tooltip.js

@@ -1,6 +1,6 @@
 import { extend } from '../../vue';
 import { NAME_TOOLTIP } from '../../constants/components';
-import { EVENT_NAME_OPEN, EVENT_NAME_CLOSE, EVENT_NAME_DISABLE, EVENT_NAME_ENABLE, EVENT_NAME_SHOW, EVENT_NAME_SHOWN, EVENT_NAME_HIDE, EVENT_NAME_HIDDEN, EVENT_NAME_DISABLED, EVENT_NAME_ENABLED, MODEL_EVENT_NAME_PREFIX } from '../../constants/events';
+import { EVENT_NAME_DISABLE, EVENT_NAME_ENABLE, EVENT_NAME_SHOW, EVENT_NAME_SHOWN, EVENT_NAME_HIDE, EVENT_NAME_HIDDEN, EVENT_NAME_DISABLED, EVENT_NAME_ENABLED, EVENT_NAME_OPEN, EVENT_NAME_CLOSE, MODEL_EVENT_NAME_PREFIX } from '../../constants/events';
 import { PROP_TYPE_OBJECT, PROP_TYPE_STRING, PROP_TYPE_NUMBER_STRING, PROP_TYPE_NUMBER_OBJECT_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_ARRAY_STRING, PROP_TYPE_FUNCTION } from '../../constants/props';
 import { HTMLElement, SVGElement } from '../../constants/safe-types';
 import { useParentMixin } from '../../mixins/use-parent';
@@ -103,9 +103,9 @@ const BTooltip = /*#__PURE__*/extend({
     },
     [MODEL_PROP_NAME_ENABLED](newValue) {
       if (newValue) {
-        this.doDisable();
+        this[EVENT_NAME_DISABLE]();
       } else {
-        this.doEnable();
+        this[EVENT_NAME_ENABLE]();
       }
     },
     localShow(newValue) {
@@ -134,11 +134,6 @@ const BTooltip = /*#__PURE__*/extend({
     this.$nextTick(this.updateContent);
   },
   beforeDestroy() {
-    // Shutdown our local event listeners
-    this.$off(EVENT_NAME_OPEN, this.doOpen);
-    this.$off(EVENT_NAME_CLOSE, this.doClose);
-    this.$off(EVENT_NAME_DISABLE, this.doDisable);
-    this.$off(EVENT_NAME_ENABLE, this.doEnable);
     // Destroy the tip instance
     if (this.$_toolpop) {
       this.$_toolpop.$destroy();
@@ -174,16 +169,8 @@ const BTooltip = /*#__PURE__*/extend({
       // Initially disabled?
       if (this[MODEL_PROP_NAME_ENABLED]) {
         // Initially disabled
-        this.doDisable();
+        this[EVENT_NAME_DISABLE]();
       }
-      // Listen to open signals from others
-      this.$on(EVENT_NAME_OPEN, this.doOpen);
-      // Listen to close signals from others
-      this.$on(EVENT_NAME_CLOSE, this.doClose);
-      // Listen to disable signals from others
-      this.$on(EVENT_NAME_DISABLE, this.doDisable);
-      // Listen to enable signals from others
-      this.$on(EVENT_NAME_ENABLE, this.doEnable);
       // Initially show tooltip?
       if (this.localShow) {
         $toolpop.show();
@@ -255,17 +242,17 @@ const BTooltip = /*#__PURE__*/extend({
         this.$emit(EVENT_NAME_ENABLED, bvEvent);
       }
     },
-    // --- Local event listeners ---
-    doOpen() {
+    // --- Public methods for programmatic control ---
+    [EVENT_NAME_OPEN]() {
       !this.localShow && this.$_toolpop && this.$_toolpop.show();
     },
-    doClose() {
+    [EVENT_NAME_CLOSE]() {
       this.localShow && this.$_toolpop && this.$_toolpop.hide();
     },
-    doDisable() {
+    [EVENT_NAME_DISABLE]() {
       this.$_toolpop && this.$_toolpop.disable();
     },
-    doEnable() {
+    [EVENT_NAME_ENABLE]() {
       this.$_toolpop && this.$_toolpop.enable();
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "128.2.3",
+  "version": "128.4.0",
   "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.57.0",
-    "playwright-core": "^1.57.0",
+    "playwright": "^1.58.0",
+    "playwright-core": "^1.58.0",
     "postcss": "8.5.6",
     "postcss-loader": "8.2.0",
     "postcss-scss": "4.0.9",
@@ -159,13 +159,13 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.97.2",
+    "sass": "^1.97.3",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.3",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.1.4",
+    "style-dictionary": "^5.2.0",
     "style-loader": "^4",
     "tailwindcss": "3.4.19",
     "vue": "2.7.16",

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -60,8 +60,10 @@ $breadcrumb-max-width: $grid-size * 16;
 
 .gl-breadcrumb-item-md {
   @apply gl-text-base;
+}
 
-  /**
+.gl-breadcrumb-item {
+/**
    * If the last/only item, which is always visible, has a very long title,
    * it could overflow the breadcrumb component. This CSS makes sure it
    * shows an ellipsis instead.
@@ -69,7 +71,8 @@ $breadcrumb-max-width: $grid-size * 16;
    * would then not take the real unshrunk width of that item into account.
    */
   &.gl-breadcrumb-only-item {
-    @apply gl-max-w-full gl-shrink;
+    @apply gl-shrink;
+    max-width: var(--gl-breadcrumb-truncated-item-max-width, 100%);
 
     a {
       @apply gl-max-w-full gl-overflow-hidden gl-text-ellipsis gl-text-nowrap;

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -151,14 +151,22 @@ export default {
     } else {
       this.resizeDone = true;
     }
-    this.clipboardButtonWidth = this.showClipboardButton
-      ? this.$refs.clipboardButton.$el.clientWidth
-      : 0;
+    this.updateClipboardButtonWidth();
   },
   beforeDestroy() {
     this.disableAutoResize();
   },
   methods: {
+    updateClipboardButtonWidth() {
+      if (!this.showClipboardButton) {
+        this.clipboardButtonWidth = 0;
+        return;
+      }
+
+      const element = this.$refs.clipboardButton.$el;
+      const marginLeft = parseInt(getComputedStyle(element).marginLeft, 10);
+      this.clipboardButtonWidth = element.offsetWidth + marginLeft;
+    },
     resetItems() {
       this.fittingItems = [...this.items];
       this.overflowingItems = [];
@@ -214,6 +222,15 @@ export default {
         }
       }
 
+      const truncatedItemMaxWidth = Math.max(
+        0,
+        containerWidth - (this.dropdownWidth + this.clipboardButtonWidth),
+      );
+      this.$el.style.setProperty(
+        '--gl-breadcrumb-truncated-item-max-width',
+        `${truncatedItemMaxWidth}px`,
+      );
+
       this.resizeDone = true;
     },
     isLastItem(index) {

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

@@ -27,11 +27,12 @@ export default {
      *
      * @typedef {object} FieldDefinition
      * @template TValue=string
-     * @property {string} label - Label text to show for this field.
+     * @property {string | null | undefined} label - Label text to show for this field. When explicitly set to null, the label is suppressed. When undefined or not provided, the field name is used as the label.
      * @property {undefined | Object} groupAttrs - Properties that are passed to the group wrapping this field.
      * @property {undefined | Object} inputAttrs - Properties that are passed to the actual input for this field.
      * @property {undefined | function(string): TValue} mapValue - Function that maps the inputted string value to the field's actual value (e.g. a Number).
      * @property {undefined | Array<function(TValue): string | undefined>=} validators - Collection of validator functions.
+     * @property {undefined | boolean} fieldset - When true, renders the form group as a fieldset with legend instead of div with label.
      *
      * @type {{ [key: string]: FieldDefinition }}
      */
@@ -140,7 +141,7 @@ export default {
         return {
           ...field,
           id,
-          label: field.label || fieldName,
+          label: this.getFieldLabel(field, fieldName),
           inputSlot,
           groupPassthroughSlots,
           afterSlotName,
@@ -179,6 +180,10 @@ export default {
 
       return this.hasAllFieldsValid();
     },
+    getFieldLabel(field, fieldName) {
+      if (field.label === null) return undefined;
+      return field.label || fieldName;
+    },
     getMappedValue(fieldName, val) {
       const field = this.fields[fieldName];
 
@@ -271,7 +276,7 @@ export default {
         v-bind="field.groupAttrs"
         :key="field.id"
         :label="field.label"
-        :label-for="field.id"
+        :label-for="field.fieldset ? undefined : field.id"
         :invalid-feedback="fieldValidationProps[fieldName].invalidFeedback"
         :state="fieldValidationProps[fieldName].state"
       >

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

@@ -71,7 +71,7 @@ export default {
 </script>
 <template>
   <b-form-group v-bind="$attrs" class="gl-form-group" :label-class="actualLabelClass">
-    <template #label>
+    <template v-if="$attrs.label || $scopedSlots.label" #label>
       <slot name="label">
         {{ $attrs.label }}
         <span v-if="optional" class="optional-label" data-testid="optional-label">{{

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

@@ -103,8 +103,8 @@ export default {
 
       return [];
     },
-    close(e) {
-      this.$refs[popoverRefName].doClose();
+    closePopover(e) {
+      this.$refs[popoverRefName].close();
       /**
        * Emitted when the close button is clicked (requires showCloseButton to be `true`).
        */
@@ -135,7 +135,7 @@ export default {
         <close-button
           :class="{ 'gl-float-right gl-mt-2': !hasTitle }"
           data-testid="close-button"
-          @click="close"
+          @click="closePopover"
         />
       </div>
     </template>

package/src/components/base/token_selector/token_selector.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlUniqueId } from '../../../utils/unique_id';
+import uniqueId from 'lodash/uniqueId';
 import { tokensValidator } from './helpers';
 import GlTokenContainer from './token_container.vue';
 import GlTokenSelectorDropdown from './token_selector_dropdown.vue';
@@ -252,7 +252,7 @@ export default {
   },
   created() {
     // Each instance must have a unique ID for proper ARIA relationships
-    this.uniqueId = `token-selector-${GlUniqueId()}`;
+    this.uniqueId = uniqueId('token-selector-');
   },
   methods: {
     handleFocus(event) {

package/src/components/mixins/tooltip_mixin.js

@@ -12,7 +12,7 @@ export default (tooltipRefName) => ({
      * https://bootstrap-vue.org/docs/components/tooltip#programmatically-show-and-hide-tooltip
      */
     tooltipActionEvents.forEach((event) =>
-      this.$on(event, () => this.$refs[tooltipRefName].$emit(event)),
+      this.$on(event, () => this.$refs[tooltipRefName][event]()),
     );
   },
   beforeDestroy() {

package/src/vendor/bootstrap-vue/src/components/tooltip/tooltip.js

@@ -141,9 +141,9 @@ export const BTooltip = /*#__PURE__*/ extend({
     },
     [MODEL_PROP_NAME_ENABLED](newValue) {
       if (newValue) {
-        this.doDisable()
+        this[EVENT_NAME_DISABLE]()
       } else {
-        this.doEnable()
+        this[EVENT_NAME_ENABLE]()
       }
     },
     localShow(newValue) {
@@ -172,11 +172,6 @@ export const BTooltip = /*#__PURE__*/ extend({
     this.$nextTick(this.updateContent)
   },
   beforeDestroy() {
-    // Shutdown our local event listeners
-    this.$off(EVENT_NAME_OPEN, this.doOpen)
-    this.$off(EVENT_NAME_CLOSE, this.doClose)
-    this.$off(EVENT_NAME_DISABLE, this.doDisable)
-    this.$off(EVENT_NAME_ENABLE, this.doEnable)
     // Destroy the tip instance
     if (this.$_toolpop) {
       this.$_toolpop.$destroy()
@@ -212,16 +207,8 @@ export const BTooltip = /*#__PURE__*/ extend({
       // Initially disabled?
       if (this[MODEL_PROP_NAME_ENABLED]) {
         // Initially disabled
-        this.doDisable()
+        this[EVENT_NAME_DISABLE]()
       }
-      // Listen to open signals from others
-      this.$on(EVENT_NAME_OPEN, this.doOpen)
-      // Listen to close signals from others
-      this.$on(EVENT_NAME_CLOSE, this.doClose)
-      // Listen to disable signals from others
-      this.$on(EVENT_NAME_DISABLE, this.doDisable)
-      // Listen to enable signals from others
-      this.$on(EVENT_NAME_ENABLE, this.doEnable)
       // Initially show tooltip?
       if (this.localShow) {
         $toolpop.show()
@@ -293,17 +280,17 @@ export const BTooltip = /*#__PURE__*/ extend({
         this.$emit(EVENT_NAME_ENABLED, bvEvent)
       }
     },
-    // --- Local event listeners ---
-    doOpen() {
+    // --- Public methods for programmatic control ---
+    [EVENT_NAME_OPEN]() {
       !this.localShow && this.$_toolpop && this.$_toolpop.show()
     },
-    doClose() {
+    [EVENT_NAME_CLOSE]() {
       this.localShow && this.$_toolpop && this.$_toolpop.hide()
     },
-    doDisable() {
+    [EVENT_NAME_DISABLE]() {
       this.$_toolpop && this.$_toolpop.disable()
     },
-    doEnable() {
+    [EVENT_NAME_ENABLE]() {
       this.$_toolpop && this.$_toolpop.enable()
     }
   },

package/dist/utils/unique_id.js

@@ -1,18 +0,0 @@
-/**
- * Function uses browser native crypto to return a sixteen
- * character base16 encoded string. It is often used to
- * generate collision-resistant IDs for aria markup such
- * as aria-activedescendant and aria-controls.
- *
- * @returns String
- */
-const GlUniqueId = () => {
-  if (typeof window !== 'undefined' && window.crypto) {
-    const arr32 = new Uint32Array(2);
-    window.crypto.getRandomValues(arr32);
-    return Array.from(arr32, id => id.toString(16)).join('');
-  }
-  throw new Error('Cannot generate a unique ID');
-};
-
-export { GlUniqueId };

package/src/utils/unique_id.js

@@ -1,17 +0,0 @@
-/**
- * Function uses browser native crypto to return a sixteen
- * character base16 encoded string. It is often used to
- * generate collision-resistant IDs for aria markup such
- * as aria-activedescendant and aria-controls.
- *
- * @returns String
- */
-export const GlUniqueId = () => {
-  if (typeof window !== 'undefined' && window.crypto) {
-    const arr32 = new Uint32Array(2);
-    window.crypto.getRandomValues(arr32);
-    return Array.from(arr32, (id) => id.toString(16)).join('');
-  }
-
-  throw new Error('Cannot generate a unique ID');
-};