@gitlab/ui 123.11.1 → 123.11.3

package/dist/tokens/scss/_tokens.scss

@@ -570,6 +570,10 @@ $gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); // Used for t
 $gl-text-primary: #28272d; // Use text.color.default instead.
 $gl-text-secondary: #737278; // Use text.color.subtle instead.
 $gl-text-tertiary: #89888d; // Use text.color.disabled instead.
+$gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
+$gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
+$gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
+$gl-border-color-strong: $gl-color-neutral-200; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-radius-none: $gl-spacing-scale-0;
 $gl-border-radius-xs: $gl-spacing-scale-px;
 $gl-border-radius-sm: $gl-spacing-scale-1;
@@ -578,10 +582,6 @@ $gl-border-radius-lg: $gl-spacing-scale-3;
 $gl-border-radius-xl: $gl-spacing-scale-4;
 $gl-border-radius-2xl: $gl-spacing-scale-5;
 $gl-border-radius-3xl: $gl-spacing-scale-6;
-$gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
-$gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
-$gl-border-color-strong: $gl-color-neutral-200; // Used for a distinct border that emphasizes an edge or boundaries.
-$gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-font-size-base: $gl-font-size-md;
 $gl-shadow-color-default: $gl-color-alpha-dark-16; // Used for the default shadow color.
 $gl-alert-neutral-border-top-color: $gl-color-alpha-0; // Used for the border center color of a neutral alert.
@@ -934,8 +934,8 @@ $gl-text-color-warning: $gl-color-orange-600; // Used for text that requires cau
 $gl-text-color-danger: $gl-color-red-600; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
 $gl-text-color-success: $gl-color-green-600; // Used for text indicating success, completion, approval, addition, or validity.
 $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
-$gl-border-radius-default: $gl-border-radius-md;
 $gl-border-color-section: $gl-border-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
+$gl-border-radius-default: $gl-border-radius-md;
 $gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
 $gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
 $gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -2,6 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 
+$gl-border-color-transparent: var(--gl-border-color-transparent);
+$gl-border-color-default: var(--gl-border-color-default);
+$gl-border-color-subtle: var(--gl-border-color-subtle);
+$gl-border-color-strong: var(--gl-border-color-strong);
+$gl-border-color-section: var(--gl-border-color-section);
 $gl-border-radius-none: var(--gl-border-radius-none);
 $gl-border-radius-xs: var(--gl-border-radius-xs);
 $gl-border-radius-sm: var(--gl-border-radius-sm);
@@ -12,11 +17,6 @@ $gl-border-radius-2xl: var(--gl-border-radius-2xl);
 $gl-border-radius-3xl: var(--gl-border-radius-3xl);
 $gl-border-radius-full: var(--gl-border-radius-full);
 $gl-border-radius-default: var(--gl-border-radius-default);
-$gl-border-color-default: var(--gl-border-color-default);
-$gl-border-color-subtle: var(--gl-border-color-subtle);
-$gl-border-color-strong: var(--gl-border-color-strong);
-$gl-border-color-section: var(--gl-border-color-section);
-$gl-border-color-transparent: var(--gl-border-color-transparent);
 $gl-color-alpha-0: var(--gl-color-alpha-0);
 $gl-color-alpha-dark-2: var(--gl-color-alpha-dark-2);
 $gl-color-alpha-dark-4: var(--gl-color-alpha-dark-4);

package/dist/tokens/tailwind/tokens.cjs

@@ -239,11 +239,11 @@ const backgroundColors = {
   overlay: 'var(--gl-background-color-overlay)',
 };
 const borderColors = {
+  transparent: 'var(--gl-border-color-transparent)',
   default: 'var(--gl-border-color-default)',
   subtle: 'var(--gl-border-color-subtle)',
   strong: 'var(--gl-border-color-strong)',
   section: 'var(--gl-border-color-section)',
-  transparent: 'var(--gl-border-color-transparent)',
 };
 const iconColors = {
   default: 'var(--gl-icon-color-default)',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "123.11.1",
+  "version": "123.11.3",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -94,16 +94,16 @@
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
+    "@babel/core": "^7.28.5",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
     "@cypress/grep": "^4.1.1",
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/svgs": "*",
     "@jest/test-sequencer": "30.2.0",
-    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-commonjs": "^28.0.8",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.2",
     "@storybook/addon-a11y": "^7.6.20",

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

@@ -67,7 +67,6 @@ export default {
     return {
       fieldDirtyStatuses: {},
       fieldValidations: {},
-      fieldIds: {},
     };
   },
   computed: {
@@ -99,7 +98,7 @@ export default {
     },
     fieldsToRender() {
       return mapValues(this.fields, (field, fieldName) => {
-        const id = this.memoizeAndReturnFieldId(field, fieldName);
+        const id = uniqueId('gl-form-field-');
 
         const inputSlotName = `input(${fieldName})`;
         const groupPassthroughSlotName = `group(${fieldName})-`;
@@ -174,18 +173,6 @@ 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);
 
@@ -234,7 +221,8 @@ export default {
 
 <template>
   <div>
-    <div v-for="(field, fieldName) in fieldsToRender" :key="field.id">
+    <template v-for="(field, fieldName) in fieldsToRender">
+      <!-- eslint-disable-next-line vue/valid-v-for -->
       <gl-form-group
         v-bind="field.groupAttrs"
         :label="field.label"
@@ -270,6 +258,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>
-    </div>
+    </template>
   </div>
 </template>

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

@@ -572,6 +572,10 @@
   --gl-text-primary: #28272d; /** Use text.color.default instead. */
   --gl-text-secondary: #737278; /** Use text.color.subtle instead. */
   --gl-text-tertiary: #89888d; /** Use text.color.disabled instead. */
+  --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
+  --gl-border-color-default: var(--gl-color-neutral-100); /** Used for the default border color. */
+  --gl-border-color-subtle: var(--gl-color-neutral-50); /** Used for a subtle border in combination with the default background. */
+  --gl-border-color-strong: var(--gl-color-neutral-200); /** Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-radius-none: var(--gl-spacing-scale-0);
   --gl-border-radius-xs: var(--gl-spacing-scale-px);
   --gl-border-radius-sm: var(--gl-spacing-scale-1);
@@ -580,10 +584,6 @@
   --gl-border-radius-xl: var(--gl-spacing-scale-4);
   --gl-border-radius-2xl: var(--gl-spacing-scale-5);
   --gl-border-radius-3xl: var(--gl-spacing-scale-6);
-  --gl-border-color-default: var(--gl-color-neutral-100); /** Used for the default border color. */
-  --gl-border-color-subtle: var(--gl-color-neutral-50); /** Used for a subtle border in combination with the default background. */
-  --gl-border-color-strong: var(--gl-color-neutral-200); /** Used for a distinct border that emphasizes an edge or boundaries. */
-  --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
   --gl-font-size-base: var(--gl-font-size-md);
   --gl-shadow-color-default: var(--gl-color-alpha-dark-16); /** Used for the default shadow color. */
   --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /** Used for the border center color of a neutral alert. */
@@ -936,8 +936,8 @@
   --gl-text-color-danger: var(--gl-color-red-600); /** Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
   --gl-text-color-success: var(--gl-color-green-600); /** Used for text indicating success, completion, approval, addition, or validity. */
   --gl-text-color-disabled: var(--gl-color-neutral-400); /** Used for disabled text. */
-  --gl-border-radius-default: var(--gl-border-radius-md);
   --gl-border-color-section: var(--gl-border-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
+  --gl-border-radius-default: var(--gl-border-radius-md);
   --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
   --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
   --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */

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

@@ -583,6 +583,10 @@
   --gl-text-primary: #ececef; /** Use text.color.default instead. */
   --gl-text-secondary: #89888d; /** Use text.color.subtle instead. */
   --gl-text-tertiary: #737278; /** Use text.color.disabled instead. */
+  --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
+  --gl-border-color-default: var(--gl-color-neutral-700); /** Used for the default border color. */
+  --gl-border-color-subtle: var(--gl-color-neutral-800); /** Used for a subtle border in combination with the default background. */
+  --gl-border-color-strong: var(--gl-color-neutral-600); /** Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-radius-none: var(--gl-spacing-scale-0);
   --gl-border-radius-xs: var(--gl-spacing-scale-px);
   --gl-border-radius-sm: var(--gl-spacing-scale-1);
@@ -591,10 +595,6 @@
   --gl-border-radius-xl: var(--gl-spacing-scale-4);
   --gl-border-radius-2xl: var(--gl-spacing-scale-5);
   --gl-border-radius-3xl: var(--gl-spacing-scale-6);
-  --gl-border-color-default: var(--gl-color-neutral-700); /** Used for the default border color. */
-  --gl-border-color-subtle: var(--gl-color-neutral-800); /** Used for a subtle border in combination with the default background. */
-  --gl-border-color-strong: var(--gl-color-neutral-600); /** Used for a distinct border that emphasizes an edge or boundaries. */
-  --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
   --gl-font-size-base: var(--gl-font-size-md);
   --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /** Used for the default shadow color. */
   --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /** Used for the border center color of a neutral alert. */
@@ -953,8 +953,8 @@
   --gl-text-color-danger: var(--gl-color-red-300); /** Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
   --gl-text-color-success: var(--gl-color-green-300); /** Used for text indicating success, completion, approval, addition, or validity. */
   --gl-text-color-disabled: var(--gl-color-neutral-400); /** Used for disabled text. */
-  --gl-border-radius-default: var(--gl-border-radius-md);
   --gl-border-color-section: var(--gl-background-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
+  --gl-border-radius-default: var(--gl-border-radius-md);
   --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
   --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
   --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */

package/src/tokens/build/docs/tokens-tailwind-docs.dark.json

@@ -15613,6 +15613,38 @@
       "cssWithValue": "var(--black)"
     },
     "color": {
+      "transparent": {
+        "key": "{border.color.transparent}",
+        "$value": "transparent",
+        "$type": "color",
+        "$description": "Used when a border needs to be present, but not visibly perceived.",
+        "$extensions": {
+          "com.figma.scope": [
+            "ALL_SCOPES"
+          ]
+        },
+        "filePath": "src/tokens/constant/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{color.alpha.0}",
+          "$type": "color",
+          "$description": "Used when a border needs to be present, but not visibly perceived.",
+          "$extensions": {
+            "com.figma.scope": [
+              "ALL_SCOPES"
+            ]
+          },
+          "key": "{border.color.transparent}"
+        },
+        "name": "BORDER_COLOR_TRANSPARENT",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "transparent"
+        ],
+        "cssWithValue": "var(--gl-border-color-transparent)"
+      },
       "default": {
         "key": "{border.color.default}",
         "$value": "#4c4b51",
@@ -15740,38 +15772,6 @@
           "section"
         ],
         "cssWithValue": "var(--gl-border-color-section)"
-      },
-      "transparent": {
-        "key": "{border.color.transparent}",
-        "$value": "transparent",
-        "$type": "color",
-        "$description": "Used when a border needs to be present, but not visibly perceived.",
-        "$extensions": {
-          "com.figma.scope": [
-            "ALL_SCOPES"
-          ]
-        },
-        "filePath": "src/tokens/semantic/border.tokens.json",
-        "isSource": true,
-        "original": {
-          "$value": "{color.alpha.0}",
-          "$type": "color",
-          "$description": "Used when a border needs to be present, but not visibly perceived.",
-          "$extensions": {
-            "com.figma.scope": [
-              "ALL_SCOPES"
-            ]
-          },
-          "key": "{border.color.transparent}"
-        },
-        "name": "BORDER_COLOR_TRANSPARENT",
-        "attributes": {},
-        "path": [
-          "border",
-          "color",
-          "transparent"
-        ],
-        "cssWithValue": "var(--gl-border-color-transparent)"
       }
     },
     "dropdown": {

package/src/tokens/build/docs/tokens-tailwind-docs.json

@@ -15613,6 +15613,38 @@
       "cssWithValue": "var(--black)"
     },
     "color": {
+      "transparent": {
+        "key": "{border.color.transparent}",
+        "$value": "transparent",
+        "$type": "color",
+        "$description": "Used when a border needs to be present, but not visibly perceived.",
+        "$extensions": {
+          "com.figma.scope": [
+            "ALL_SCOPES"
+          ]
+        },
+        "filePath": "src/tokens/constant/border.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": "{color.alpha.0}",
+          "$type": "color",
+          "$description": "Used when a border needs to be present, but not visibly perceived.",
+          "$extensions": {
+            "com.figma.scope": [
+              "ALL_SCOPES"
+            ]
+          },
+          "key": "{border.color.transparent}"
+        },
+        "name": "BORDER_COLOR_TRANSPARENT",
+        "attributes": {},
+        "path": [
+          "border",
+          "color",
+          "transparent"
+        ],
+        "cssWithValue": "var(--gl-border-color-transparent)"
+      },
       "default": {
         "key": "{border.color.default}",
         "$value": "#dcdcde",
@@ -15740,38 +15772,6 @@
           "section"
         ],
         "cssWithValue": "var(--gl-border-color-section)"
-      },
-      "transparent": {
-        "key": "{border.color.transparent}",
-        "$value": "transparent",
-        "$type": "color",
-        "$description": "Used when a border needs to be present, but not visibly perceived.",
-        "$extensions": {
-          "com.figma.scope": [
-            "ALL_SCOPES"
-          ]
-        },
-        "filePath": "src/tokens/semantic/border.tokens.json",
-        "isSource": true,
-        "original": {
-          "$value": "{color.alpha.0}",
-          "$type": "color",
-          "$description": "Used when a border needs to be present, but not visibly perceived.",
-          "$extensions": {
-            "com.figma.scope": [
-              "ALL_SCOPES"
-            ]
-          },
-          "key": "{border.color.transparent}"
-        },
-        "name": "BORDER_COLOR_TRANSPARENT",
-        "attributes": {},
-        "path": [
-          "border",
-          "color",
-          "transparent"
-        ],
-        "cssWithValue": "var(--gl-border-color-transparent)"
       }
     },
     "dropdown": {

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

@@ -1,5 +1,17 @@
 {
   "border": {
+    "color": {
+      "transparent": {
+        "$value": "{color.alpha.0}",
+        "$type": "color",
+        "$description": "Used when a border needs to be present, but not visibly perceived.",
+        "$extensions": {
+          "com.figma.scope": [
+            "ALL_SCOPES"
+          ]
+        }
+      }
+    },
     "radius": {
       "none": {
         "$value": "{spacing-scale.0}",

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

@@ -1164,16 +1164,6 @@
             "STROKE_COLOR"
           ]
         }
-      },
-      "transparent": {
-        "$value": "{color.alpha.0}",
-        "$type": "color",
-        "$description": "Used when a border needs to be present, but not visibly perceived.",
-        "$extensions": {
-          "com.figma.scope": [
-            "ALL_SCOPES"
-          ]
-        }
       }
     },
     "radius": {

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

@@ -2,6 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 
+export const GL_BORDER_COLOR_TRANSPARENT = 'transparent';
+export const GL_BORDER_COLOR_DEFAULT = '#4c4b51';
+export const GL_BORDER_COLOR_SUBTLE = '#3a383f';
+export const GL_BORDER_COLOR_STRONG = '#626168';
+export const GL_BORDER_COLOR_SECTION = '#18171d';
 export const GL_BORDER_RADIUS_NONE = '0';
 export const GL_BORDER_RADIUS_XS = '1px';
 export const GL_BORDER_RADIUS_SM = '0.125rem';
@@ -12,11 +17,6 @@ export const GL_BORDER_RADIUS_2XL = '1rem';
 export const GL_BORDER_RADIUS_3XL = '1.5rem';
 export const GL_BORDER_RADIUS_FULL = '9999px';
 export const GL_BORDER_RADIUS_DEFAULT = '0.25rem';
-export const GL_BORDER_COLOR_DEFAULT = '#4c4b51';
-export const GL_BORDER_COLOR_SUBTLE = '#3a383f';
-export const GL_BORDER_COLOR_STRONG = '#626168';
-export const GL_BORDER_COLOR_SECTION = '#18171d';
-export const GL_BORDER_COLOR_TRANSPARENT = 'transparent';
 export const GL_COLOR_ALPHA_0 = 'transparent';
 export const GL_COLOR_ALPHA_DARK_2 = 'rgba(05, 05, 06, 0.02)';
 export const GL_COLOR_ALPHA_DARK_4 = 'rgba(05, 05, 06, 0.04)';

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

@@ -2,6 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 
+export const GL_BORDER_COLOR_TRANSPARENT = 'transparent';
+export const GL_BORDER_COLOR_DEFAULT = '#dcdcde';
+export const GL_BORDER_COLOR_SUBTLE = '#ececef';
+export const GL_BORDER_COLOR_STRONG = '#bfbfc3';
+export const GL_BORDER_COLOR_SECTION = '#dcdcde';
 export const GL_BORDER_RADIUS_NONE = '0';
 export const GL_BORDER_RADIUS_XS = '1px';
 export const GL_BORDER_RADIUS_SM = '0.125rem';
@@ -12,11 +17,6 @@ export const GL_BORDER_RADIUS_2XL = '1rem';
 export const GL_BORDER_RADIUS_3XL = '1.5rem';
 export const GL_BORDER_RADIUS_FULL = '9999px';
 export const GL_BORDER_RADIUS_DEFAULT = '0.25rem';
-export const GL_BORDER_COLOR_DEFAULT = '#dcdcde';
-export const GL_BORDER_COLOR_SUBTLE = '#ececef';
-export const GL_BORDER_COLOR_STRONG = '#bfbfc3';
-export const GL_BORDER_COLOR_SECTION = '#dcdcde';
-export const GL_BORDER_COLOR_TRANSPARENT = 'transparent';
 export const GL_COLOR_ALPHA_0 = 'transparent';
 export const GL_COLOR_ALPHA_DARK_2 = 'rgba(05, 05, 06, 0.02)';
 export const GL_COLOR_ALPHA_DARK_4 = 'rgba(05, 05, 06, 0.04)';