@gitlab/ui 128.15.0 → 128.15.1

package/dist/tokens/build/js/tokens.js

@@ -1137,7 +1137,7 @@ const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#2f5ca0';
 const GL_CONTROL_BORDER_RADIUS = '0.5rem';
 const GL_CONTROL_TEXT_COLOR_ERROR = '#c02f12';
 const GL_CONTROL_TEXT_COLOR_VALID = '#2f7549';
-const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d';
+const GL_CONTROL_PLACEHOLDER_COLOR = '#737278';
 const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#fff';
 const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#737278';
 const GL_FEEDBACK_BORDER_RADIUS = '0.5rem';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "128.15.0",
+  "version": "128.15.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -132,7 +132,7 @@
     "autoprefixer": "10.4.27",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.10.0",
+    "cypress": "15.11.0",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",

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

@@ -208,6 +208,11 @@ export default {
     },
     computedLocalCheckedWatcher(newValue, oldValue) {
       if (!looseEqual(newValue, oldValue)) {
+        /**
+         * Emitted when checked state is changed.
+         *
+         * @event input
+         */
         this.$emit('input', newValue);
 
         const { input } = this.$refs;
@@ -237,11 +242,20 @@ export default {
 
       // Fire events in a `$nextTick()` to ensure the `v-model` is updated
       this.$nextTick(() => {
-        // Change is only emitted on user interaction
+        /**
+         * Emitted when selected value(s) is changed due to user interaction.
+         *
+         * @event change
+         */
         this.$emit('change', localChecked);
 
         // If this is a child of a group, we emit a change event on it as well
         if (this.isGroup) {
+          /**
+           * Emitted when selected value(s) is changed due to user interaction.
+           *
+           * @event change
+           */
           this.group.$emit('change', localChecked);
         }
 
@@ -285,8 +299,10 @@ export default {
       @change="handleChange"
     />
     <label :for="internalId" class="custom-control-label">
+      <!-- @slot The checkbox content to display. -->
       <slot></slot>
       <p v-if="Boolean($scopedSlots.help)" class="help-text">
+        <!-- @slot The help text to display. -->
         <slot name="help"></slot>
       </p>
     </label>

package/src/components/base/form/form_checkbox/form_checkbox_group.vue

@@ -141,6 +141,11 @@ export default {
     },
     localChecked(newValue, oldValue) {
       if (!looseEqual(newValue, oldValue)) {
+        /**
+         * Emitted when the checked value is changed.
+         *
+         * @event input
+         */
         this.$emit('input', newValue);
       }
     },
@@ -155,6 +160,7 @@ export default {
     tabindex="-1"
     class="gl-form-checkbox-group gl-outline-none"
   >
+    <!-- @slot Slot for GlFormCheckboxes that will appear before checkboxes generated from options prop -->
     <slot name="first"></slot>
     <gl-form-checkbox
       v-for="(option, idx) in formOptions"
@@ -166,6 +172,7 @@ export default {
       <span v-if="option.html" v-safe-html="option.html"></span>
       <span v-else>{{ option.text }}</span>
     </gl-form-checkbox>
+    <!-- @slot Slot for GlFormCheckboxes that will appear after checkboxes generated from options prop -->
     <slot></slot>
   </div>
 </template>

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

@@ -919,6 +919,7 @@
   --gl-control-border-color-selected-default: var(--gl-color-blue-500); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
   --gl-control-border-color-selected-hover: var(--gl-color-blue-700); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
   --gl-control-border-color-selected-focus: var(--gl-color-blue-700); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
+  --gl-control-placeholder-color: var(--gl-color-neutral-500); /** Used for placeholder text within inputs. */
   --gl-control-indicator-color-selected: var(--gl-color-neutral-0); /** Used for checkbox and radio button state indicators. */
   --gl-control-indicator-color-disabled: var(--gl-color-neutral-500); /** Used for disabled checkbox and radio button state indicators. */
   --gl-feedback-strong-background-color: var(--gl-color-neutral-800); /** Used for a background associated with strong feedback like a tooltip or toast message. */
@@ -1190,7 +1191,6 @@
   --gl-control-border-radius: var(--gl-border-radius-lg); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /** Used for the helper text when the input is invalid. */
   --gl-control-text-color-valid: var(--gl-text-color-success); /** Used for the helper text when the input is valid. */
-  --gl-control-placeholder-color: var(--gl-text-color-disabled); /** Used for placeholder text within inputs. */
   --gl-feedback-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a feedback element. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /** Used for the inner neutral portion of the focus ring. */
   --gl-icon-color-default: var(--gl-text-color-default); /** Used for the default icon color. Can be paired with default text. */

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

@@ -936,6 +936,7 @@
   --gl-control-border-color-selected-default: var(--gl-color-blue-400); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
   --gl-control-border-color-selected-hover: var(--gl-color-blue-200); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
   --gl-control-border-color-selected-focus: var(--gl-color-blue-200); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
+  --gl-control-placeholder-color: var(--gl-color-neutral-400); /** Used for placeholder text within inputs. */
   --gl-control-indicator-color-selected: var(--gl-color-neutral-950); /** Used for checkbox and radio button state indicators. */
   --gl-control-indicator-color-disabled: var(--gl-color-neutral-400); /** Used for disabled checkbox and radio button state indicators. */
   --gl-feedback-strong-background-color: var(--gl-color-neutral-800); /** Used for a background associated with strong feedback like a tooltip or toast message. */
@@ -1196,7 +1197,6 @@
   --gl-control-border-radius: var(--gl-border-radius-lg); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /** Used for the helper text when the input is invalid. */
   --gl-control-text-color-valid: var(--gl-text-color-success); /** Used for the helper text when the input is valid. */
-  --gl-control-placeholder-color: var(--gl-text-color-disabled); /** Used for placeholder text within inputs. */
   --gl-feedback-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a feedback element. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /** Used for the inner neutral portion of the focus ring. */
   --gl-icon-color-default: var(--gl-text-color-default); /** Used for the default icon color. Can be paired with default text. */

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

@@ -15655,7 +15655,7 @@
         "$description": "Used when a border needs to be present, but not visibly perceived.",
         "$extensions": {
           "com.figma.scopes": [
-            "ALL_SCOPES"
+            "STROKE_COLOR"
           ]
         },
         "filePath": "src/tokens/constant/border.tokens.json",
@@ -15666,7 +15666,7 @@
           "$description": "Used when a border needs to be present, but not visibly perceived.",
           "$extensions": {
             "com.figma.scopes": [
-              "ALL_SCOPES"
+              "STROKE_COLOR"
             ]
           },
           "key": "{border.color.transparent}"
@@ -32590,7 +32590,7 @@
         "filePath": "src/tokens/semantic/control.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{text.color.disabled}",
+          "$value": "{color.neutral.400}",
           "$type": "color",
           "$description": "Used for placeholder text within inputs.",
           "$extensions": {

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

@@ -15655,7 +15655,7 @@
         "$description": "Used when a border needs to be present, but not visibly perceived.",
         "$extensions": {
           "com.figma.scopes": [
-            "ALL_SCOPES"
+            "STROKE_COLOR"
           ]
         },
         "filePath": "src/tokens/constant/border.tokens.json",
@@ -15666,7 +15666,7 @@
           "$description": "Used when a border needs to be present, but not visibly perceived.",
           "$extensions": {
             "com.figma.scopes": [
-              "ALL_SCOPES"
+              "STROKE_COLOR"
             ]
           },
           "key": "{border.color.transparent}"
@@ -32579,7 +32579,7 @@
     "control": {
       "placeholder": {
         "key": "{control.placeholder.color}",
-        "$value": "#89888d",
+        "$value": "#737278",
         "$type": "color",
         "$description": "Used for placeholder text within inputs.",
         "$extensions": {
@@ -32590,7 +32590,7 @@
         "filePath": "src/tokens/semantic/control.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{text.color.disabled}",
+          "$value": "{color.neutral.500}",
           "$type": "color",
           "$description": "Used for placeholder text within inputs.",
           "$extensions": {

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

@@ -5,7 +5,7 @@
     "$description": "Used when a border needs to be present, but not visibly perceived.",
     "$extensions": {
       "com.figma.scopes": [
-        "ALL_SCOPES"
+        "STROKE_COLOR"
       ]
     }
   },

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

@@ -5,7 +5,7 @@
     "$description": "Used when a border needs to be present, but not visibly perceived.",
     "$extensions": {
       "com.figma.scopes": [
-        "ALL_SCOPES"
+        "STROKE_COLOR"
       ]
     }
   },

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

@@ -78,7 +78,9 @@
     "$value": "{spacing-scale-5}",
     "$type": "dimension",
     "$extensions": {
-      "com.figma.scopes": []
+      "com.figma.scopes": [
+        "PARAGRAPH_SPACING"
+      ]
     }
   },
   "line-height-heading": {
@@ -6055,7 +6057,7 @@
     }
   },
   "control-placeholder-color": {
-    "$value": "{text-color-disabled}",
+    "$value": "{color-neutral-400}",
     "$type": "color",
     "$description": "Used for placeholder text within inputs.",
     "$extensions": {

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

@@ -78,7 +78,9 @@
     "$value": "{spacing-scale-5}",
     "$type": "dimension",
     "$extensions": {
-      "com.figma.scopes": []
+      "com.figma.scopes": [
+        "PARAGRAPH_SPACING"
+      ]
     }
   },
   "line-height-heading": {
@@ -5967,7 +5969,7 @@
     }
   },
   "control-placeholder-color": {
-    "$value": "{text-color-disabled}",
+    "$value": "{color-neutral-500}",
     "$type": "color",
     "$description": "Used for placeholder text within inputs.",
     "$extensions": {

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

@@ -1180,7 +1180,7 @@ export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#2f5ca0';
 export const GL_CONTROL_BORDER_RADIUS = '0.5rem';
 export const GL_CONTROL_TEXT_COLOR_ERROR = '#c02f12';
 export const GL_CONTROL_TEXT_COLOR_VALID = '#2f7549';
-export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d';
+export const GL_CONTROL_PLACEHOLDER_COLOR = '#737278';
 export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#fff';
 export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#737278';
 export const GL_FEEDBACK_BORDER_RADIUS = '0.5rem';

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

@@ -8,7 +8,7 @@
         "$description": "Used when a border needs to be present, but not visibly perceived.",
         "$extensions": {
           "com.figma.scopes": [
-            "ALL_SCOPES"
+            "STROKE_COLOR"
           ]
         },
         "filePath": "src/tokens/constant/border.tokens.json",
@@ -19,7 +19,7 @@
           "$description": "Used when a border needs to be present, but not visibly perceived.",
           "$extensions": {
             "com.figma.scopes": [
-              "ALL_SCOPES"
+              "STROKE_COLOR"
             ]
           },
           "key": "{border.color.transparent}"
@@ -7871,7 +7871,9 @@
           "$value": "1rem",
           "$type": "dimension",
           "$extensions": {
-            "com.figma.scopes": []
+            "com.figma.scopes": [
+              "PARAGRAPH_SPACING"
+            ]
           },
           "filePath": "src/tokens/semantic/heading.tokens.json",
           "isSource": true,
@@ -7879,7 +7881,9 @@
             "$value": "{spacing-scale.5}",
             "$type": "dimension",
             "$extensions": {
-              "com.figma.scopes": []
+              "com.figma.scopes": [
+                "PARAGRAPH_SPACING"
+              ]
             },
             "key": "{heading.default.margin.bottom}"
           },
@@ -35704,7 +35708,7 @@
         "filePath": "src/tokens/semantic/control.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{text.color.disabled}",
+          "$value": "{color.neutral.400}",
           "$type": "color",
           "$description": "Used for placeholder text within inputs.",
           "$extensions": {

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

@@ -8,7 +8,7 @@
         "$description": "Used when a border needs to be present, but not visibly perceived.",
         "$extensions": {
           "com.figma.scopes": [
-            "ALL_SCOPES"
+            "STROKE_COLOR"
           ]
         },
         "filePath": "src/tokens/constant/border.tokens.json",
@@ -19,7 +19,7 @@
           "$description": "Used when a border needs to be present, but not visibly perceived.",
           "$extensions": {
             "com.figma.scopes": [
-              "ALL_SCOPES"
+              "STROKE_COLOR"
             ]
           },
           "key": "{border.color.transparent}"
@@ -7871,7 +7871,9 @@
           "$value": "1rem",
           "$type": "dimension",
           "$extensions": {
-            "com.figma.scopes": []
+            "com.figma.scopes": [
+              "PARAGRAPH_SPACING"
+            ]
           },
           "filePath": "src/tokens/semantic/heading.tokens.json",
           "isSource": true,
@@ -7879,7 +7881,9 @@
             "$value": "{spacing-scale.5}",
             "$type": "dimension",
             "$extensions": {
-              "com.figma.scopes": []
+              "com.figma.scopes": [
+                "PARAGRAPH_SPACING"
+              ]
             },
             "key": "{heading.default.margin.bottom}"
           },
@@ -35693,7 +35697,7 @@
     "placeholder": {
       "color": {
         "key": "{control.placeholder.color}",
-        "$value": "#89888d",
+        "$value": "#737278",
         "$type": "color",
         "$description": "Used for placeholder text within inputs.",
         "$extensions": {
@@ -35704,7 +35708,7 @@
         "filePath": "src/tokens/semantic/control.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{text.color.disabled}",
+          "$value": "{color.neutral.500}",
           "$type": "color",
           "$description": "Used for placeholder text within inputs.",
           "$extensions": {

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

@@ -934,6 +934,7 @@ $gl-control-border-color-disabled: $gl-color-neutral-800; // Used for disabled f
 $gl-control-border-color-selected-default: $gl-color-blue-400; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
 $gl-control-border-color-selected-hover: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
 $gl-control-border-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
+$gl-control-placeholder-color: $gl-color-neutral-400; // Used for placeholder text within inputs.
 $gl-control-indicator-color-selected: $gl-color-neutral-950; // Used for checkbox and radio button state indicators.
 $gl-control-indicator-color-disabled: $gl-color-neutral-400; // Used for disabled checkbox and radio button state indicators.
 $gl-feedback-strong-background-color: $gl-color-neutral-800; // Used for a background associated with strong feedback like a tooltip or toast message.
@@ -1194,7 +1195,6 @@ $gl-control-border-color-error: $gl-feedback-danger-border-color; // Used for in
 $gl-control-border-radius: $gl-border-radius-lg; // Used for form control (input, radio button, checkbox, textarea) default border radius.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
-$gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
 $gl-feedback-border-radius: $gl-border-radius-lg; // Used for the border radius of a feedback element.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
 $gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text.

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

@@ -917,6 +917,7 @@ $gl-control-border-color-disabled: $gl-color-neutral-100; // Used for disabled f
 $gl-control-border-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
 $gl-control-border-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
 $gl-control-border-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
+$gl-control-placeholder-color: $gl-color-neutral-500; // Used for placeholder text within inputs.
 $gl-control-indicator-color-selected: $gl-color-neutral-0; // Used for checkbox and radio button state indicators.
 $gl-control-indicator-color-disabled: $gl-color-neutral-500; // Used for disabled checkbox and radio button state indicators.
 $gl-feedback-strong-background-color: $gl-color-neutral-800; // Used for a background associated with strong feedback like a tooltip or toast message.
@@ -1188,7 +1189,6 @@ $gl-control-border-color-error: $gl-feedback-danger-border-color; // Used for in
 $gl-control-border-radius: $gl-border-radius-lg; // Used for form control (input, radio button, checkbox, textarea) default border radius.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
-$gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
 $gl-feedback-border-radius: $gl-border-radius-lg; // Used for the border radius of a feedback element.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
 $gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text.

package/src/tokens/constant/border.tokens.json

@@ -7,7 +7,7 @@
         "$description": "Used when a border needs to be present, but not visibly perceived.",
         "$extensions": {
           "com.figma.scopes": [
-            "ALL_SCOPES"
+            "STROKE_COLOR"
           ]
         }
       }

package/src/tokens/semantic/control.tokens.json

@@ -247,7 +247,10 @@
     },
     "placeholder": {
       "color": {
-        "$value": "{text.color.disabled}",
+        "$value": {
+          "default": "{color.neutral.500}",
+          "dark": "{color.neutral.400}"
+        },
         "$type": "color",
         "$description": "Used for placeholder text within inputs.",
         "$extensions": {

package/src/tokens/semantic/heading.tokens.json

@@ -13,7 +13,9 @@
           "$value": "{spacing-scale.5}",
           "$type": "dimension",
           "$extensions": {
-            "com.figma.scopes": []
+            "com.figma.scopes": [
+              "PARAGRAPH_SPACING"
+            ]
           }
         }
       }