@gitlab/ui 115.7.0 → 115.9.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.7.0",
+  "version": "115.9.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -138,7 +138,7 @@
     "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/charts/line/line.vue

@@ -130,6 +130,14 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Controls whether the tooltip should be pinned when clicked.
+     */
+    clickToPinTooltip: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     // Part of the tooltip related data can be
@@ -349,6 +357,7 @@ export default {
       ref="dataTooltip"
       :chart="chart"
       :use-default-tooltip-formatter="!formatTooltipText"
+      :click-to-pin="clickToPinTooltip"
     >
       <template v-if="$scopedSlots['tooltip-title']" #title="scope">
         <slot name="tooltip-title" v-bind="scope"></slot>

package/src/components/charts/shared/tooltip/tooltip.vue

@@ -117,11 +117,22 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Set to true to enable click-to-pin functionality.
+     * When enabled, clicking on a chart point will keep the tooltip open, so the user can interact with the tooltip's content.
+     * The tooltip will unpin when clicking again on the chart and not on the tooltip.
+     */
+    clickToPin: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
-      pointerPosition: null,
+      pointerCoords: null,
       isPointerInChart: false,
+      pinnedPosition: null,
 
       debouncedMouseHandler: debounceByAnimationFrame(this.mouseHandler),
 
@@ -144,6 +155,10 @@ export default {
 
         marginLeft: `${-this.xOffset}px`,
         width: `${this.xOffset * 2}px`,
+
+        pointerEvents: this.isPinned ? 'auto' : 'none',
+
+        ...this.tooltipPosition,
       };
     },
     fixedPosition() {
@@ -153,17 +168,44 @@ export default {
       }
       return null;
     },
+    tooltipPosition() {
+      if (this.fixedPosition) {
+        return this.fixedPosition;
+      }
+      if (this.pinnedPosition) {
+        return this.pinnedPosition;
+      }
+      return this.pointerPosition;
+    },
     shouldShowPopover() {
       if (this.show !== null) {
         return this.show;
       }
-      return this.isPointerInChart;
+      return this.isPinned || this.isPointerInChart;
+    },
+    isPinned() {
+      return this.pinnedPosition !== null;
+    },
+    pointerPosition() {
+      if (!this.pointerCoords) {
+        return null;
+      }
+
+      return {
+        left: `${this.pointerCoords.x}px`,
+        top: `${this.pointerCoords.y}px`,
+      };
     },
   },
   created() {
     this.chart.getZr().on('mousemove', this.debouncedMouseHandler);
     this.chart.getZr().on('mouseout', this.debouncedMouseHandler);
 
+    if (this.clickToPin) {
+      document.addEventListener('keydown', this.keyDownHandler);
+      this.chart.getZr().on('click', this.clickHandler);
+    }
+
     if (this.useDefaultTooltipFormatter) {
       this.chart.setOption({
         xAxis: {
@@ -185,24 +227,83 @@ export default {
       });
     }
   },
-
   beforeDestroy() {
     this.chart.getZr().off('mousemove', this.debouncedMouseHandler);
     this.chart.getZr().off('mouseout', this.debouncedMouseHandler);
+
+    if (this.clickToPin) {
+      this.chart.getZr().off('click', this.clickHandler);
+      document.removeEventListener('keydown', this.keyDownHandler);
+    }
   },
   methods: {
+    getEventCoordsWithinChart({ event }) {
+      const { zrX, zrY } = event;
+      const x = Math.round(zrX);
+      const y = Math.round(zrY);
+
+      if (!Number.isFinite(x) || !Number.isFinite(y)) {
+        return null;
+      }
+
+      if (!this.chart.containPixel('grid', [x, y])) {
+        return null;
+      }
+
+      return { x, y };
+    },
     mouseHandler(event) {
-      let { zrX: x, zrY: y } = event.event;
+      const coords = this.getEventCoordsWithinChart(event);
+      if (!coords) {
+        this.isPointerInChart = false;
+        return;
+      }
+
+      this.pointerCoords = coords;
+      this.isPointerInChart = true;
+    },
+    clickHandler(event) {
+      if (!this.getEventCoordsWithinChart(event)) {
+        return;
+      }
+
+      if (!this.isPinned) {
+        this.pinTooltip();
+      } else {
+        this.unpinTooltip(event.event);
+      }
+    },
+    pinTooltip() {
+      this.pinnedPosition = this.pointerPosition;
 
-      if (Number.isFinite(x) && Number.isFinite(y)) {
-        x = Math.round(x);
-        y = Math.round(y);
+      // prevents any axis pointers from being moved to a new position, they should also be pinned
+      this.chart.setOption({
+        tooltip: {
+          triggerOn: 'none',
+        },
+      });
+    },
+    unpinTooltip() {
+      this.pinnedPosition = null;
 
-        this.pointerPosition = {
-          left: `${x}px`,
-          top: `${y}px`,
-        };
-        this.isPointerInChart = this.chart.containPixel('grid', [x, y]);
+      // restores the axis pointers to be unpinned and be triggered by mousemove
+      this.chart.setOption({
+        tooltip: {
+          triggerOn: 'mousemove',
+          show: false,
+        },
+      });
+
+      // shows the tooltip and axis pointer at the position of the click
+      this.chart.dispatchAction({
+        type: 'showTip',
+        x: this.pointerCoords.x,
+        y: this.pointerCoords.y,
+      });
+    },
+    keyDownHandler(event) {
+      if (event.key === 'Escape' && this.isPinned) {
+        this.unpinTooltip();
       }
     },
   },
@@ -210,12 +311,8 @@ export default {
 </script>
 
 <template>
-  <div v-if="chart" class="gl-pointer-events-none">
-    <div
-      :id="targetId"
-      :style="{ ...(fixedPosition || pointerPosition), ...targetStyle }"
-      class="gl-chart-tooltip"
-    ></div>
+  <div v-if="chart">
+    <div :id="targetId" :style="targetStyle" class="gl-chart-tooltip"></div>
     <!--
       Is shown using `show` property directly so
       `triggers` are set to an empty string