@gitlab/ui 128.11.0 → 128.13.0

package/dist/vendor/bootstrap-vue/src/components/form-group/form-group.js

@@ -53,6 +53,7 @@ const generateProps = () => makePropsConfigurable(sortKeys({
   label: makeProp(PROP_TYPE_STRING),
   labelClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
   labelFor: makeProp(PROP_TYPE_STRING),
+  labelId: makeProp(PROP_TYPE_STRING),
   labelSize: makeProp(PROP_TYPE_STRING),
   labelSrOnly: makeProp(PROP_TYPE_BOOLEAN, false),
   tooltip: makeProp(PROP_TYPE_BOOLEAN, false),
@@ -209,7 +210,7 @@ const BFormGroup = {
     const isFieldset = !labelFor;
     let $label = h();
     const labelContent = normalizeSlot(SLOT_NAME_LABEL) || this.label;
-    const labelId = labelContent ? safeId('_BV_label_') : null;
+    const labelId = labelContent ? this.labelId || safeId('_BV_label_') : null;
     if (labelContent || isHorizontal) {
       const {
         labelSize,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "128.11.0",
+  "version": "128.13.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -37,6 +37,7 @@
     "prebuild": "yarn build-tokens",
     "copy-fonts": "make copy-fonts",
     "build-tokens": "make tokens",
+    "sync-tokens": "node --env-file=.figma.env bin/figma_sync_tokens.mjs",
     "clean": "rm -r dist storybook",
     "cy:edge": "cypress run --browser edge --env grepTags=-@storybook",
     "cy:run": "cypress run --browser firefox --env grepTags=-@storybook",
@@ -131,7 +132,7 @@
     "autoprefixer": "10.4.24",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.9.0",
+    "cypress": "15.10.0",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
@@ -142,12 +143,12 @@
     "jest-circus": "30.2.0",
     "jest-environment-jsdom": "30.2.0",
     "jest-image-snapshot": "^6.5.1",
-    "merge-cobertura": "^1.0.4",
+    "merge-cobertura": "^1.0.5",
     "mockdate": "^3.0.5",
-    "module-alias": "^2.2.3",
+    "module-alias": "^2.3.4",
     "pikaday": "^1.8.0",
-    "playwright": "^1.58.1",
-    "playwright-core": "^1.58.1",
+    "playwright": "^1.58.2",
+    "playwright-core": "^1.58.2",
     "postcss": "8.5.6",
     "postcss-loader": "8.2.0",
     "postcss-scss": "4.0.9",
@@ -165,7 +166,7 @@
     "start-server-and-test": "^2.1.3",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.2.0",
+    "style-dictionary": "^5.3.0",
     "style-loader": "^4",
     "tailwindcss": "3.4.19",
     "vue": "2.7.16",

package/src/components/base/attribute_list/attribute_list.vue

@@ -37,7 +37,7 @@ export default {
       default: '',
     },
     /**
-     * Layout of label and text: 'horizontal' for inline/flex or 'vertical' for block.
+     * Layout of label and text: 'horizontal' for line or 'vertical' for stacked
      */
     layout: {
       type: String,

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

@@ -1,6 +1,7 @@
 <script>
 import isString from 'lodash/isString';
 import isPlainObject from 'lodash/isPlainObject';
+import { uniqueId } from 'lodash';
 import { BFormGroup } from '../../../../vendor/bootstrap-vue/src/components/form-group/form-group';
 
 export default {
@@ -8,8 +9,11 @@ export default {
   components: {
     BFormGroup,
   },
-  provide: {
-    isInFormGroup: true,
+  provide() {
+    return {
+      // Only for internal use by @gitlab/ui components
+      getFormGroupInstance: () => this,
+    };
   },
   inheritAttrs: false,
   props: {
@@ -46,6 +50,11 @@ export default {
       default: '(optional)',
     },
   },
+  data() {
+    return {
+      labelId: uniqueId('gl-form-group-label-'),
+    };
+  },
   computed: {
     actualLabelClass() {
       const { labelClass } = this;
@@ -70,7 +79,12 @@ export default {
 };
 </script>
 <template>
-  <b-form-group v-bind="$attrs" class="gl-form-group" :label-class="actualLabelClass">
+  <b-form-group
+    v-bind="$attrs"
+    class="gl-form-group"
+    :label-class="actualLabelClass"
+    :label-id="labelId"
+  >
     <template v-if="$attrs.label || $scopedSlots.label" #label>
       <slot name="label">
         {{ $attrs.label }}

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

@@ -1,5 +1,6 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
+import isBoolean from 'lodash/isBoolean';
 import {
   arrow,
   computePosition,
@@ -55,6 +56,11 @@ export default {
     GlIcon,
   },
   directives: { Outside: OutsideDirective },
+  inject: {
+    getFormGroupInstance: {
+      default: () => () => {},
+    },
+  },
   props: {
     toggleText: {
       type: String,
@@ -114,6 +120,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
+     */
+    state: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
     placement: {
       type: String,
       required: false,
@@ -240,6 +254,15 @@ export default {
     isCaretOnly() {
       return !this.noCaret && !this.icon && this.hasNoVisibleToggleText;
     },
+    computedState() {
+      // If not a boolean, ensure that value is null
+      return isBoolean(this.state) ? this.state : null;
+    },
+    stateClass() {
+      if (this.computedState === true) return 'is-valid';
+      if (this.computedState === false) return 'is-invalid';
+      return null;
+    },
     isDefaultToggle() {
       return !this.$scopedSlots.toggle;
     },
@@ -293,21 +316,49 @@ export default {
           'gl-new-dropdown-toggle-no-caret': this.noCaret,
           'gl-new-dropdown-caret-only btn-icon': this.isCaretOnly,
         },
+        this.stateClass,
       ];
     },
     toggleButtonTextClasses() {
       return this.block ? 'gl-w-full' : '';
     },
+    // Set the aria-labelledby property with one or more ID strings
     toggleLabelledBy() {
+      const formGroupLabelId = this.getFormGroupInstance()?.labelId;
+
       if (this.isToggleCombobox) {
+        // Comboboxes announce label and self value when aria-labelledby is label ID.
+        // Tested with VoiceOver, NVDA, JAWS, Narrator and preferred browsers.
+        if (this.ariaLabelledby) {
+          return `${this.ariaLabelledby}`;
+        }
+
+        // Combobox inside GlFormGroup
+        if (formGroupLabelId) {
+          return `${formGroupLabelId} ${this.toggleId}`;
+        }
+
+        // Fallback calculated toggleId value
+        return this.toggleId;
+      }
+
+      if (!this.isToggleCombobox) {
+        // Disclosures or buttons with listbox require both IDs to announce correctly.
+        // Tested with VoiceOver, NVDA, JAWS, Narrator and preferred browsers.
         if (this.ariaLabelledby) {
           return `${this.ariaLabelledby} ${this.toggleId}`;
         }
+
+        // Disclosure or button with listbox inside GlFormGroup
+        if (formGroupLabelId) {
+          return `${formGroupLabelId} ${this.toggleId}`;
+        }
+
+        // Fallback calculated toggleId value
         return this.toggleId;
       }
 
-      // For non-combobox toggles, combine IDs or use the button's own text
-      return this.ariaLabelledby ? `${this.ariaLabelledby} ${this.toggleId}` : undefined;
+      return undefined;
     },
     toggleRole() {
       if (this.isToggleCombobox) {
@@ -558,7 +609,7 @@ export default {
         this.$emit(GL_DROPDOWN_SHOWN);
       } else {
         this.stopFloating();
-        this.$emit(GL_DROPDOWN_HIDDEN);
+        this.$emit(GL_DROPDOWN_HIDDEN, event);
       }
 
       // this is to check whether `toggle` was prevented or not

package/src/components/base/new_dropdowns/dropdown.scss

@@ -35,6 +35,14 @@
         width: auto;
       }
     }
+
+    &.is-invalid {
+      @apply gl-border-control-error;
+
+      &:focus {
+        @apply gl-border-control-error;
+      }
+    }
   }
 
   .gl-new-dropdown-button-text {

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

@@ -67,8 +67,8 @@ export default {
     GlIntersectionObserver,
   },
   inject: {
-    isInFormGroup: {
-      default: false,
+    getFormGroupInstance: {
+      default: () => () => {},
     },
   },
   model: {
@@ -166,6 +166,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
+     */
+    state: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
     /**
      * Set to "true" when dropdown content (items) is loading
      * It will render a small loader in the dropdown toggle and make it disabled
@@ -417,6 +425,9 @@ export default {
       // Fallback. Return a header ID or the toggle button ID.
       return this.listAriaLabelledBy || this.headerId || this.toggleIdComputed;
     },
+    isInFormGroup() {
+      return Boolean(this.getFormGroupInstance());
+    },
     toggleIdComputed() {
       return this.toggleId || uniqueId('dropdown-toggle-btn-');
     },
@@ -684,7 +695,7 @@ export default {
        */
       this.$emit(GL_DROPDOWN_SHOWN);
     },
-    onHide() {
+    onHide(event) {
       /**
        * Emitted when dropdown is hidden
        *
@@ -692,6 +703,8 @@ export default {
        */
       this.$emit(GL_DROPDOWN_HIDDEN);
       this.nextFocusedItemIndex = null;
+      // Emit native blur event for form validation in FormGroup
+      this.$emit('blur', event);
     },
     getNextIndex(currentIndex, keyCode, totalLength) {
       // For UP: move up or wrap to end
@@ -974,6 +987,7 @@ export default {
     :has-searchable-listbox="searchable"
     :has-external-label="isInFormGroup"
     :listbox-id="listboxIdComputed"
+    :state="state"
     :toggle-id="toggleIdComputed"
     :toggle-text="listboxToggleText"
     :toggle-class="toggleButtonClasses"

package/src/vendor/bootstrap-vue/src/components/form-group/form-group.js

@@ -74,6 +74,7 @@ export const generateProps = () =>
       label: makeProp(PROP_TYPE_STRING),
       labelClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
       labelFor: makeProp(PROP_TYPE_STRING),
+      labelId: makeProp(PROP_TYPE_STRING),
       labelSize: makeProp(PROP_TYPE_STRING),
       labelSrOnly: makeProp(PROP_TYPE_BOOLEAN, false),
       tooltip: makeProp(PROP_TYPE_BOOLEAN, false),
@@ -241,7 +242,7 @@ export const BFormGroup = {
 
     let $label = h()
     const labelContent = normalizeSlot(SLOT_NAME_LABEL) || this.label
-    const labelId = labelContent ? safeId('_BV_label_') : null
+    const labelId = labelContent ? this.labelId || safeId('_BV_label_') : null
     if (labelContent || isHorizontal) {
       const { labelSize, labelColProps } = this
       const labelTag = isFieldset ? 'legend' : 'label'