@gitlab/ui 128.12.0 → 128.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "128.12.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/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,
@@ -119,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,
@@ -245,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;
     },
@@ -298,6 +316,7 @@ export default {
           'gl-new-dropdown-toggle-no-caret': this.noCaret,
           'gl-new-dropdown-caret-only btn-icon': this.isCaretOnly,
         },
+        this.stateClass,
       ];
     },
     toggleButtonTextClasses() {
@@ -590,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

@@ -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
@@ -687,7 +695,7 @@ export default {
        */
       this.$emit(GL_DROPDOWN_SHOWN);
     },
-    onHide() {
+    onHide(event) {
       /**
        * Emitted when dropdown is hidden
        *
@@ -695,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
@@ -977,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"