@gitlab/ui 115.6.1 → 115.8.0

package/dist/tokens/docs/tokens-tailwind-docs.json

@@ -8724,6 +8724,160 @@
         "color"
       ],
       "cssWithValue": "var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))"
+    },
+    "control": {
+      "default": {
+        "key": "{control.background.color.default}",
+        "$value": "#fff",
+        "$type": "color",
+        "$description": "Used for form control (input, radio button, checkbox, textarea) default background.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.alpha.dark.40}"
+          },
+          "$type": "color",
+          "$description": "Used for form control (input, radio button, checkbox, textarea) default background.",
+          "$extensions": {
+            "com.figma.scope": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          },
+          "key": "{control.background.color.default}"
+        },
+        "name": "CONTROL_BACKGROUND_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "control",
+          "background",
+          "color",
+          "default"
+        ],
+        "cssWithValue": "var(--gl-control-background-color-default, var(--gl-color-neutral-0, #fff))"
+      },
+      "disabled": {
+        "key": "{control.background.color.disabled}",
+        "$value": "#fbfafd",
+        "$type": "color",
+        "$description": "Used for disabled form control (checkbox, input, radio button, textarea) background.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": {
+            "default": "{color.neutral.10}",
+            "dark": "{color.alpha.light.4}"
+          },
+          "$type": "color",
+          "$description": "Used for disabled form control (checkbox, input, radio button, textarea) background.",
+          "$extensions": {
+            "com.figma.scope": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          },
+          "key": "{control.background.color.disabled}"
+        },
+        "name": "CONTROL_BACKGROUND_COLOR_DISABLED",
+        "attributes": {},
+        "path": [
+          "control",
+          "background",
+          "color",
+          "disabled"
+        ],
+        "cssWithValue": "var(--gl-control-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))"
+      },
+      "concatenation": {
+        "key": "{control.background.color.concatenation}",
+        "$value": "#fbfafd",
+        "$type": "color",
+        "$description": "Used for the background of static content that prepends or appends a text input.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": {
+            "default": "{color.neutral.10}",
+            "dark": "{color.alpha.light.4}"
+          },
+          "$type": "color",
+          "$description": "Used for the background of static content that prepends or appends a text input.",
+          "$extensions": {
+            "com.figma.scope": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          },
+          "key": "{control.background.color.concatenation}"
+        },
+        "name": "CONTROL_BACKGROUND_COLOR_CONCATENATION",
+        "attributes": {},
+        "path": [
+          "control",
+          "background",
+          "color",
+          "concatenation"
+        ],
+        "cssWithValue": "var(--gl-control-background-color-concatenation, var(--gl-color-neutral-10, #fbfafd))"
+      },
+      "readonly": {
+        "key": "{control.background.color.readonly}",
+        "$value": "rgba(05, 05, 06, 0.02)",
+        "$type": "color",
+        "$description": "Used for the background of static content that prepends or appends a text input.",
+        "$extensions": {
+          "com.figma.scope": [
+            "FRAME_FILL",
+            "SHAPE_FILL"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": {
+            "default": "{color.alpha.dark.2}",
+            "dark": "{color.alpha.light.8}"
+          },
+          "$type": "color",
+          "$description": "Used for the background of static content that prepends or appends a text input.",
+          "$extensions": {
+            "com.figma.scope": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          },
+          "key": "{control.background.color.readonly}"
+        },
+        "name": "CONTROL_BACKGROUND_COLOR_READONLY",
+        "attributes": {},
+        "path": [
+          "control",
+          "background",
+          "color",
+          "readonly"
+        ],
+        "cssWithValue": "var(--gl-control-background-color-readonly, var(--gl-color-alpha-dark-2, rgba(05, 05, 06, 0.02)))"
+      }
     }
   },
   "border": {
@@ -16947,6 +17101,116 @@
         "color"
       ],
       "cssWithValue": "var(--gl-dropdown-divider-color, var(--gl-border-color-default, #dcdcde))"
+    },
+    "control": {
+      "default": {
+        "key": "{control.border.color.default}",
+        "$value": "#89888d",
+        "$type": "color",
+        "$description": "Used for form control (input, radio button, checkbox, textarea) default border.",
+        "$extensions": {
+          "com.figma.scope": [
+            "STROKE_COLOR"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": {
+            "default": "{color.neutral.400}",
+            "dark": "{color.neutral.500}"
+          },
+          "$type": "color",
+          "$description": "Used for form control (input, radio button, checkbox, textarea) default border.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "key": "{control.border.color.default}"
+        },
+        "name": "CONTROL_BORDER_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "control",
+          "border",
+          "color",
+          "default"
+        ],
+        "cssWithValue": "var(--gl-control-border-color-default, var(--gl-color-neutral-400, #89888d))"
+      },
+      "disabled": {
+        "key": "{control.border.color.disabled}",
+        "$value": "#dcdcde",
+        "$type": "color",
+        "$description": "Used for disabled form control (input, radio button, checkbox, textarea) border.",
+        "$extensions": {
+          "com.figma.scope": [
+            "STROKE_COLOR"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": {
+            "default": "{color.neutral.100}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "$description": "Used for disabled form control (input, radio button, checkbox, textarea) border.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "key": "{control.border.color.disabled}"
+        },
+        "name": "CONTROL_BORDER_COLOR_DISABLED",
+        "attributes": {},
+        "path": [
+          "control",
+          "border",
+          "color",
+          "disabled"
+        ],
+        "cssWithValue": "var(--gl-control-border-color-disabled, var(--gl-color-neutral-100, #dcdcde))"
+      },
+      "error": {
+        "key": "{control.border.color.error}",
+        "$value": "#dd2b0e",
+        "$type": "color",
+        "$description": "Used for invalid form control (input, textarea) border.",
+        "$extensions": {
+          "com.figma.scope": [
+            "STROKE_COLOR"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": {
+            "default": "{color.red.500}",
+            "dark": "{color.red.300}"
+          },
+          "$type": "color",
+          "$description": "Used for invalid form control (input, textarea) border.",
+          "$extensions": {
+            "com.figma.scope": [
+              "STROKE_COLOR"
+            ]
+          },
+          "key": "{control.border.color.error}"
+        },
+        "name": "CONTROL_BORDER_COLOR_ERROR",
+        "attributes": {},
+        "path": [
+          "control",
+          "border",
+          "color",
+          "error"
+        ],
+        "cssWithValue": "var(--gl-control-border-color-error, var(--gl-color-red-500, #dd2b0e))"
+      }
     }
   },
   "fill": {
@@ -34523,6 +34787,106 @@
         "tertiary"
       ],
       "cssWithValue": "var(--gl-text-tertiary, #89888d)"
+    },
+    "control": {
+      "placeholder": {
+        "key": "{control.placeholder.color}",
+        "$value": "#89888d",
+        "$type": "color",
+        "$description": "Used for placeholder text within inputs.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{text.color.disabled}",
+          "$type": "color",
+          "$description": "Used for placeholder text within inputs.",
+          "$extensions": {
+            "com.figma.scope": [
+              "TEXT_FILL"
+            ]
+          },
+          "key": "{control.placeholder.color}"
+        },
+        "name": "CONTROL_PLACEHOLDER_COLOR",
+        "attributes": {},
+        "path": [
+          "control",
+          "placeholder",
+          "color"
+        ],
+        "cssWithValue": "var(--gl-control-placeholder-color, var(--gl-text-color-disabled, #89888d))"
+      },
+      "error": {
+        "key": "{control.text.color.error}",
+        "$value": "#c02f12",
+        "$type": "color",
+        "$description": "Used for the helper text when the input is invalid.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{text.color.danger}",
+          "$type": "color",
+          "$description": "Used for the helper text when the input is invalid.",
+          "$extensions": {
+            "com.figma.scope": [
+              "TEXT_FILL"
+            ]
+          },
+          "key": "{control.text.color.error}"
+        },
+        "name": "CONTROL_TEXT_COLOR_ERROR",
+        "attributes": {},
+        "path": [
+          "control",
+          "text",
+          "color",
+          "error"
+        ],
+        "cssWithValue": "var(--gl-control-text-color-error, var(--gl-text-color-danger, #c02f12))"
+      },
+      "valid": {
+        "key": "{control.text.color.valid}",
+        "$value": "#2f7549",
+        "$type": "color",
+        "$description": "Used for the helper text when the input is valid.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        },
+        "filePath": "src/tokens/semantic/control.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{text.color.success}",
+          "$type": "color",
+          "$description": "Used for the helper text when the input is valid.",
+          "$extensions": {
+            "com.figma.scope": [
+              "TEXT_FILL"
+            ]
+          },
+          "key": "{control.text.color.valid}"
+        },
+        "name": "CONTROL_TEXT_COLOR_VALID",
+        "attributes": {},
+        "path": [
+          "control",
+          "text",
+          "color",
+          "valid"
+        ],
+        "cssWithValue": "var(--gl-control-text-color-valid, var(--gl-text-color-success, #2f7549))"
+      }
     }
   },
   "outline": {

package/dist/tokens/tailwind/tokens.cjs

@@ -44,6 +44,12 @@
     ...statusBackgroundColors,
     ...feedbackBackgroundColors,
     dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))',
+    control: {
+      default: 'var(--gl-control-background-color-default, var(--gl-color-neutral-0, #fff))',
+      disabled: 'var(--gl-control-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
+      concatenation: 'var(--gl-control-background-color-concatenation, var(--gl-color-neutral-10, #fbfafd))',
+      readonly: 'var(--gl-control-background-color-readonly, var(--gl-color-alpha-dark-2, rgba(05, 05, 06, 0.02)))',
+    },
   };
 
   const borderColor  = {
@@ -51,6 +57,11 @@
     ...borderColors,
     dropdown: 'var(--gl-dropdown-border-color, var(--gl-border-color-strong, #bfbfc3))',
     'dropdown-divider': 'var(--gl-dropdown-divider-color, var(--gl-border-color-default, #dcdcde))',
+    control: {
+      default: 'var(--gl-control-border-color-default, var(--gl-color-neutral-400, #89888d))',
+      disabled: 'var(--gl-control-border-color-disabled, var(--gl-color-neutral-100, #dcdcde))',
+      error: 'var(--gl-control-border-color-error, var(--gl-color-red-500, #dd2b0e))',
+    },
   };
 
   const outlineColor = {
@@ -74,6 +85,11 @@
     primary: 'var(--gl-text-primary, #28272d)',
     secondary: 'var(--gl-text-secondary, #737278)',
     tertiary: 'var(--gl-text-tertiary, #89888d)',
+    control: {
+      placeholder: 'var(--gl-control-placeholder-color, var(--gl-text-color-disabled, #89888d))',
+      error: 'var(--gl-control-text-color-error, var(--gl-text-color-danger, #c02f12))',
+      valid: 'var(--gl-control-text-color-valid, var(--gl-text-color-success, #2f7549))',
+    },
   };
 
   module.exports = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "115.6.1",
+  "version": "115.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -102,7 +102,7 @@
     "@babel/preset-react": "^7.27.1",
     "@cypress/grep": "^4.1.0",
     "@gitlab/fonts": "^1.3.0",
-    "@gitlab/svgs": "3.136.0",
+    "@gitlab/svgs": "3.141.0",
     "@jest/test-sequencer": "30.0.4",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
@@ -134,11 +134,11 @@
     "autoprefixer": "10.4.21",
     "axe-playwright": "^2.1.0",
     "babel-loader": "^9.2.1",
-    "cypress": "14.5.1",
+    "cypress": "14.5.2",
     "cypress-real-events": "^1.14.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.4.0",
-    "esbuild": "^0.25.6",
+    "esbuild": "^0.25.7",
     "fuse.js": "^7.1.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.0.3",

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -67,7 +67,7 @@ It's possible to close the disclosure dropdown programmatically by calling the `
 `close` methods on the disclosure dropdown via a template ref. For example:
 
 ```js
-this.$refs.disclosureDropdown.closeAndFocus()
+this.$refs.disclosureDropdown.closeAndFocus();
 ```
 
 The `closeAndFocus` method is preferred in most cases, especially when triggering it from some action
@@ -79,7 +79,8 @@ some other element. For example, closing the disclosure dropdown to focus a newl
 ## Setting disclosure dropdown items
 
 Use the `items` prop to provide actions/links to the disclosure dropdown. Each
-item can be either an item or a group. For `Item`s, provide an `href` or `to` string to
+item can be either an item or a group. For `Item`s, provide an `href` or `to` string or
+[`to` location descriptor object](https://v3.router.vuejs.org/api/#to) to
 make them render as links. Otherwise, they will be buttons. Provide an `action`
 function to items to be called when they are pressed, or, listen for the
 `action` event on the top-level component. Both will receive the given item as
@@ -96,7 +97,8 @@ type Item = {
   // href link
   href?: string;
   // or, a Vue router link with `to`
-  to?: string;
+  // See https://github.com/vuejs/vue-router/blob/v3.6.5/types/router.d.ts#L400-L408 for Location definition
+  to?: string | Location;
   // Item action
   action?: (item: Item) => void;
   // Set of extra attributes applied directly to the element

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue

@@ -33,7 +33,7 @@ export default {
   },
   computed: {
     isLink() {
-      return typeof this.item?.href === 'string' || typeof this.item?.to === 'string';
+      return typeof this.item?.href === 'string' || typeof this.item?.to !== 'undefined';
     },
     isCustomContent() {
       return Boolean(this.$scopedSlots.default);

package/src/components/base/new_dropdowns/disclosure/mock_data.js

@@ -23,6 +23,10 @@ export const mockItems = [
       'data-uuid': '1234',
     },
   },
+  {
+    text: 'Lock discussion',
+    to: { path: '/lock', query: { show: 1234 } },
+  },
   {
     text: 'Close merge request',
     variant: 'danger',