@gitlab/ui 128.2.3 → 128.3.0

package/dist/components/base/form/form_fields/form_fields.js

@@ -27,11 +27,12 @@ var script = {
      *
      * @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 }}
      */
@@ -130,7 +131,7 @@ var script = {
         return {
           ...field,
           id,
-          label: field.label || fieldName,
+          label: this.getFieldLabel(field, fieldName),
           inputSlot,
           groupPassthroughSlots,
           afterSlotName
@@ -168,6 +169,10 @@ var script = {
       await this.$nextTick();
       return this.hasAllFieldsValid();
     },
+    getFieldLabel(field, fieldName) {
+      if (field.label === null) return undefined;
+      return field.label || fieldName;
+    },
     getMappedValue(fieldName, val) {
       const field = this.fields[fieldName];
       if (isFunction(field === null || field === void 0 ? void 0 : field.mapValue)) {
@@ -248,7 +253,7 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-fields-loop',{attrs:{"fields":_vm.fieldsToRender},scopedSlots:_vm._u([{key:"default",fn:function(ref){
 var field = ref.field;
 var fieldName = ref.fieldName;
-return [_c('gl-form-group',_vm._b({key:field.id,attrs:{"label":field.label,"label-for":field.id,"invalid-feedback":_vm.fieldValidationProps[fieldName].invalidFeedback,"state":_vm.fieldValidationProps[fieldName].state},scopedSlots:_vm._u([_vm._l((field.groupPassthroughSlots),function(ref){
+return [_c('gl-form-group',_vm._b({key:field.id,attrs:{"label":field.label,"label-for":field.fieldset ? undefined : field.id,"invalid-feedback":_vm.fieldValidationProps[fieldName].invalidFeedback,"state":_vm.fieldValidationProps[fieldName].state},scopedSlots:_vm._u([_vm._l((field.groupPassthroughSlots),function(ref){
 var slotName = ref.slotName;
 var childSlotName = ref.childSlotName;
 return {key:childSlotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)},'gl-form-group',field.groupAttrs,false),[_c('gl-form-field-validator',{attrs:{"value":_vm.fieldValues[fieldName],"validators":field.validators,"should-validate":_vm.fieldDirtyStatuses[fieldName]},on:{"update":function($event){return _vm.onFieldValidationUpdate(fieldName, $event)}}}),_vm._v(" "),_vm._v(" "),_vm._t(field.inputSlot.slotName,function(){return [_c('gl-form-input',_vm._b({attrs:{"id":field.id,"value":_vm.fieldValues[fieldName],"state":_vm.fieldValidationProps[fieldName].state},on:{"input":function($event){return _vm.onFieldInput(fieldName, $event)},"blur":function($event){return _vm.onFieldBlur(fieldName)}}},'gl-form-input',field.inputAttrs,false))]},null,field.inputSlot.attrs)],2),_vm._v(" "),_vm._t(field.afterSlotName)]}}],null,true)})};

package/dist/components/base/form/form_group/form_group.js

@@ -77,7 +77,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-form-group',_vm._b({staticClass:"gl-form-group",attrs:{"label-class":_vm.actualLabelClass},scopedSlots:_vm._u([{key:"label",fn:function(){return [_vm._t("label",function(){return [_vm._v("\n      "+_vm._s(_vm.$attrs.label)+"\n      "),(_vm.optional)?_c('span',{staticClass:"optional-label",attrs:{"data-testid":"optional-label"}},[_vm._v(_vm._s(_vm.optionalText))]):_vm._e()]}),_vm._v(" "),(_vm.hasLabelDescription)?_c('div',{staticClass:"label-description",attrs:{"data-testid":"label-description"}},[_vm._t("label-description",function(){return [_vm._v(_vm._s(_vm.labelDescription))]})],2):_vm._e()]},proxy:true},_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-group',_vm.$attrs,false))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-group',_vm._b({staticClass:"gl-form-group",attrs:{"label-class":_vm.actualLabelClass},scopedSlots:_vm._u([(_vm.$attrs.label || _vm.$scopedSlots.label)?{key:"label",fn:function(){return [_vm._t("label",function(){return [_vm._v("\n      "+_vm._s(_vm.$attrs.label)+"\n      "),(_vm.optional)?_c('span',{staticClass:"optional-label",attrs:{"data-testid":"optional-label"}},[_vm._v(_vm._s(_vm.optionalText))]):_vm._e()]}),_vm._v(" "),(_vm.hasLabelDescription)?_c('div',{staticClass:"label-description",attrs:{"data-testid":"label-description"}},[_vm._t("label-description",function(){return [_vm._v(_vm._s(_vm.labelDescription))]})],2):_vm._e()]},proxy:true}:null,_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-group',_vm.$attrs,false))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/popover/popover.js

@@ -92,8 +92,8 @@ var script = {
       }
       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`).
        */
@@ -107,7 +107,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-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title,"placement":_vm.placement,"boundary-padding":_vm.boundaryPadding},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]}),_vm._v(" "),(_vm.showCloseButton)?_c('div',{staticClass:"-gl-mr-3 -gl-mt-2 gl-ml-3 gl-h-0"},[_c('close-button',{class:{ 'gl-float-right gl-mt-2': !_vm.hasTitle },attrs:{"data-testid":"close-button"},on:{"click":_vm.close}})],1):_vm._e()]},proxy:true}:null,(_vm.$scopedSlots.default)?{key:"default",fn:function(){return [_vm._t("default")]},proxy:true}:null],null,true)},'b-popover',_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-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title,"placement":_vm.placement,"boundary-padding":_vm.boundaryPadding},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]}),_vm._v(" "),(_vm.showCloseButton)?_c('div',{staticClass:"-gl-mr-3 -gl-mt-2 gl-ml-3 gl-h-0"},[_c('close-button',{class:{ 'gl-float-right gl-mt-2': !_vm.hasTitle },attrs:{"data-testid":"close-button"},on:{"click":_vm.closePopover}})],1):_vm._e()]},proxy:true}:null,(_vm.$scopedSlots.default)?{key:"default",fn:function(){return [_vm._t("default")]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/token_selector/token_selector.js

@@ -1,4 +1,4 @@
-import { GlUniqueId } from '../../../utils/unique_id';
+import uniqueId from 'lodash/uniqueId';
 import { tokensValidator } from './helpers';
 import GlTokenContainer from './token_container';
 import GlTokenSelectorDropdown from './token_selector_dropdown';
@@ -244,7 +244,7 @@ var script = {
   },
   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/dist/components/mixins/tooltip_mixin.js

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

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.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -165,7 +165,7 @@
     "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/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');
-};