@gitlab/ui 123.10.1 → 123.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "123.10.1",
+  "version": "123.11.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -101,10 +101,10 @@
     "@babel/preset-react": "^7.27.1",
     "@cypress/grep": "^4.1.1",
     "@gitlab/fonts": "^1.3.1",
-    "@gitlab/svgs": "3.148.0",
+    "@gitlab/svgs": "*",
     "@jest/test-sequencer": "30.2.0",
     "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.2",
     "@storybook/addon-a11y": "^7.6.20",
     "@storybook/addon-docs": "^7.6.20",
@@ -136,8 +136,8 @@
     "cypress": "14.5.4",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
-    "emoji-regex": "^10.5.0",
-    "esbuild": "^0.25.10",
+    "emoji-regex": "^10.6.0",
+    "esbuild": "^0.25.11",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.0.3",
     "globby": "^14.1.0",
@@ -169,7 +169,7 @@
     "start-server-and-test": "^2.1.2",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.1.0",
+    "style-dictionary": "^5.1.1",
     "style-loader": "^4",
     "tailwindcss": "3.4.18",
     "vue": "2.7.16",

package/src/components/base/filtered_search/filtered_search_token.scss

@@ -47,9 +47,9 @@
 
   &.gl-filtered-search-token-data {
     @apply gl-h-6;
-    @apply gl-rounded-tr-small;
-    @apply gl-rounded-br-small;
     background-color: var(--gl-filtered-search-token-data-background-color-default);
+    border-top-right-radius: var(--gl-token-border-radius);
+    border-bottom-right-radius: var(--gl-token-border-radius);
 
     .gl-filtered-search-token-data-content {
       @apply gl-inline-flex;

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

@@ -67,6 +67,7 @@ export default {
     return {
       fieldDirtyStatuses: {},
       fieldValidations: {},
+      fieldIds: {},
     };
   },
   computed: {
@@ -98,7 +99,7 @@ export default {
     },
     fieldsToRender() {
       return mapValues(this.fields, (field, fieldName) => {
-        const id = uniqueId('gl-form-field-');
+        const id = this.memoizeAndReturnFieldId(field, fieldName);
 
         const inputSlotName = `input(${fieldName})`;
         const groupPassthroughSlotName = `group(${fieldName})-`;
@@ -173,6 +174,18 @@ export default {
 
       return val;
     },
+    memoizeAndReturnFieldId(field, fieldName) {
+      const memoizedId = this.fieldIds[fieldName];
+
+      if (memoizedId) {
+        return memoizedId;
+      }
+
+      const id = field.id || uniqueId('gl-form-field-');
+      this.fieldIds[fieldName] = id;
+
+      return id;
+    },
     onFieldValidationUpdate(fieldName, invalidFeedback) {
       this.fieldValidations = setObjectProperty(this.fieldValidations, fieldName, invalidFeedback);
 
@@ -221,8 +234,7 @@ export default {
 
 <template>
   <div>
-    <template v-for="(field, fieldName) in fieldsToRender">
-      <!-- eslint-disable-next-line vue/valid-v-for -->
+    <div v-for="(field, fieldName) in fieldsToRender" :key="field.id">
       <gl-form-group
         v-bind="field.groupAttrs"
         :label="field.label"
@@ -258,6 +270,6 @@ export default {
       </gl-form-group>
       <!-- @slot Can be used to add content the form group of a field. The name of the slot is `after(<fieldName>)`.-->
       <slot :name="field.afterSlotName"></slot>
-    </template>
+    </div>
   </div>
 </template>

package/src/components/base/token/token.scss

@@ -1,11 +1,11 @@
 .gl-token {
   color: var(--gl-token-foreground-color);
   background-color: var(--gl-token-background-color);
-  @apply gl-rounded-sm;
   @apply gl-pl-3;
   @apply gl-inline-flex;
   @apply gl-flex-col;
   @apply gl-justify-center;
+  border-radius: var(--gl-token-border-radius);
 
   &.gl-token-view-only {
     @apply gl-py-2;

package/src/tokens/build/css/tokens.css

@@ -1123,6 +1123,7 @@
   --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the text of a dropdown option in the active state. */
   --gl-toggle-switch-icon-color-unchecked-focus: var(--gl-action-strong-neutral-background-color-focus); /** Used for the icon color of an unchecked toggle switch in the focus state. */
   --gl-toggle-switch-icon-color-checked-focus: var(--gl-action-strong-confirm-background-color-focus); /** Used for the icon color of a checked toggle switch in the focus state. */
+  --gl-token-border-radius: var(--gl-border-radius-default); /** Used for token border radius. */
   --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected action in the focus state. */
   --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the border of a selected action in the focus state. */
   --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /** Used for the foreground of a strong confirm action in the focus state. */

package/src/tokens/build/css/tokens.dark.css

@@ -1125,6 +1125,7 @@
   --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /** Used for the text of a dropdown option in the active state. */
   --gl-toggle-switch-icon-color-unchecked-focus: var(--gl-action-strong-neutral-background-color-focus); /** Used for the icon color of an unchecked toggle switch in the focus state. */
   --gl-toggle-switch-icon-color-checked-focus: var(--gl-action-strong-confirm-background-color-focus); /** Used for the icon color of a checked toggle switch in the focus state. */
+  --gl-token-border-radius: var(--gl-border-radius-default); /** Used for token border radius. */
   --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /** Used for the foreground of a selected action in the focus state. */
   --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /** Used for the border of a selected action in the focus state. */
   --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /** Used for the foreground of a strong confirm action in the focus state. */

package/src/tokens/build/figma/contextual.tokens.json

@@ -5881,6 +5881,18 @@
     }
   },
   "token": {
+    "border": {
+      "radius": {
+        "$value": "{border.radius.default}",
+        "$type": "dimension",
+        "$description": "Used for token border radius.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        }
+      }
+    },
     "foreground": {
       "color": {
         "$value": "{text.color.default}",

package/src/tokens/build/js/tokens.dark.js

@@ -830,6 +830,7 @@ export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#9dc7f1';
 export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#428fdc';
 export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#28272d';
 export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#626168';
+export const GL_TOKEN_BORDER_RADIUS = '0.25rem';
 export const GL_TOKEN_FOREGROUND_COLOR = '#ececef';
 export const GL_TOKEN_BACKGROUND_COLOR = '#3a383f';
 export const DATA_VIZ_GREEN_50 = '#133a03';

package/src/tokens/build/js/tokens.js

@@ -830,6 +830,7 @@ export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#2f68b4';
 export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#2f5ca0';
 export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#ececef';
 export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#a4a3a8';
+export const GL_TOKEN_BORDER_RADIUS = '0.25rem';
 export const GL_TOKEN_FOREGROUND_COLOR = '#3a383f';
 export const GL_TOKEN_BACKGROUND_COLOR = '#dcdcde';
 export const DATA_VIZ_GREEN_50 = '#ddfab7';

package/src/tokens/build/json/tokens.dark.json

@@ -23559,6 +23559,39 @@
     }
   },
   "token": {
+    "border": {
+      "radius": {
+        "key": "{token.border.radius}",
+        "$value": "0.25rem",
+        "$type": "dimension",
+        "$description": "Used for token border radius.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        },
+        "filePath": "src/tokens/contextual/token.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{border.radius.default}",
+          "$type": "dimension",
+          "$description": "Used for token border radius.",
+          "$extensions": {
+            "com.figma.scope": [
+              "CORNER_RADIUS"
+            ]
+          },
+          "key": "{token.border.radius}"
+        },
+        "name": "TOKEN_BORDER_RADIUS",
+        "attributes": {},
+        "path": [
+          "token",
+          "border",
+          "radius"
+        ]
+      }
+    },
     "foreground": {
       "color": {
         "key": "{token.foreground.color}",

package/src/tokens/build/json/tokens.json

@@ -23559,6 +23559,39 @@
     }
   },
   "token": {
+    "border": {
+      "radius": {
+        "key": "{token.border.radius}",
+        "$value": "0.25rem",
+        "$type": "dimension",
+        "$description": "Used for token border radius.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        },
+        "filePath": "src/tokens/contextual/token.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{border.radius.default}",
+          "$type": "dimension",
+          "$description": "Used for token border radius.",
+          "$extensions": {
+            "com.figma.scope": [
+              "CORNER_RADIUS"
+            ]
+          },
+          "key": "{token.border.radius}"
+        },
+        "name": "TOKEN_BORDER_RADIUS",
+        "attributes": {},
+        "path": [
+          "token",
+          "border",
+          "radius"
+        ]
+      }
+    },
     "foreground": {
       "color": {
         "key": "{token.foreground.color}",

package/src/tokens/build/scss/_tokens.dark.scss

@@ -1123,6 +1123,7 @@ $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus;
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
 $gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
 $gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
+$gl-token-border-radius: $gl-border-radius-default; // Used for token border radius.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
 $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.

package/src/tokens/build/scss/_tokens.scss

@@ -1121,6 +1121,7 @@ $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus;
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
 $gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
 $gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
+$gl-token-border-radius: $gl-border-radius-default; // Used for token border radius.
 $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
 $gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
 $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -744,6 +744,7 @@ $gl-toggle-switch-icon-color-checked-focus: var(--gl-toggle-switch-icon-color-ch
 $gl-toggle-switch-icon-color-checked-active: var(--gl-toggle-switch-icon-color-checked-active);
 $gl-toggle-switch-icon-color-disabled: var(--gl-toggle-switch-icon-color-disabled);
 $gl-token-selector-token-container-token-background-color-focus: var(--gl-token-selector-token-container-token-background-color-focus);
+$gl-token-border-radius: var(--gl-token-border-radius);
 $gl-token-foreground-color: var(--gl-token-foreground-color);
 $gl-token-background-color: var(--gl-token-background-color);
 $data-viz-green-50: var(--data-viz-green-50);

package/src/tokens/contextual/token.tokens.json

@@ -1,5 +1,17 @@
 {
   "token": {
+    "border": {
+      "radius": {
+        "$value": "{border.radius.default}",
+        "$type": "dimension",
+        "$description": "Used for token border radius.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        }
+      }
+    },
     "foreground": {
       "color": {
         "$value": "{text.color.default}",