@gitlab/ui 122.4.0 → 122.6.0

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

@@ -237,6 +237,38 @@ $gl-line-height-36: 2.25rem;
 $gl-line-height-42: 2.625rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-52: 3.25rem;
+$gl-spacing-scale-0: 0;
+$gl-spacing-scale-1: 0.125rem;
+$gl-spacing-scale-2: 0.25rem;
+$gl-spacing-scale-3: 0.5rem;
+$gl-spacing-scale-4: 0.75rem;
+$gl-spacing-scale-5: 1rem;
+$gl-spacing-scale-6: 1.5rem;
+$gl-spacing-scale-7: 2rem;
+$gl-spacing-scale-8: 2.5rem;
+$gl-spacing-scale-9: 3rem;
+$gl-spacing-scale-10: 3.5rem;
+$gl-spacing-scale-11: 4rem;
+$gl-spacing-scale-12: 5rem;
+$gl-spacing-scale-13: 6rem;
+$gl-spacing-scale-15: 7.5rem;
+$gl-spacing-scale-18: 9rem;
+$gl-spacing-scale-20: 10rem;
+$gl-spacing-scale-26: 13rem;
+$gl-spacing-scale-28: 14rem;
+$gl-spacing-scale-30: 15rem;
+$gl-spacing-scale-31: 15.5rem;
+$gl-spacing-scale-33: 16.5rem;
+$gl-spacing-scale-34: 17rem;
+$gl-spacing-scale-37: 18.5rem;
+$gl-spacing-scale-48: 24rem;
+$gl-spacing-scale-62: 31rem;
+$gl-spacing-scale-75: 37.5rem;
+$gl-spacing-scale-80: 40rem;
+$gl-spacing-scale-88: 44rem;
+$gl-spacing-scale-px: 1px;
+$gl-spacing-scale-2-5: 0.375rem;
+$gl-spacing-scale-11-5: 4.5rem;
 $gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.

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

@@ -237,6 +237,38 @@ $gl-line-height-36: 2.25rem;
 $gl-line-height-42: 2.625rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-52: 3.25rem;
+$gl-spacing-scale-0: 0;
+$gl-spacing-scale-1: 0.125rem;
+$gl-spacing-scale-2: 0.25rem;
+$gl-spacing-scale-3: 0.5rem;
+$gl-spacing-scale-4: 0.75rem;
+$gl-spacing-scale-5: 1rem;
+$gl-spacing-scale-6: 1.5rem;
+$gl-spacing-scale-7: 2rem;
+$gl-spacing-scale-8: 2.5rem;
+$gl-spacing-scale-9: 3rem;
+$gl-spacing-scale-10: 3.5rem;
+$gl-spacing-scale-11: 4rem;
+$gl-spacing-scale-12: 5rem;
+$gl-spacing-scale-13: 6rem;
+$gl-spacing-scale-15: 7.5rem;
+$gl-spacing-scale-18: 9rem;
+$gl-spacing-scale-20: 10rem;
+$gl-spacing-scale-26: 13rem;
+$gl-spacing-scale-28: 14rem;
+$gl-spacing-scale-30: 15rem;
+$gl-spacing-scale-31: 15.5rem;
+$gl-spacing-scale-33: 16.5rem;
+$gl-spacing-scale-34: 17rem;
+$gl-spacing-scale-37: 18.5rem;
+$gl-spacing-scale-48: 24rem;
+$gl-spacing-scale-62: 31rem;
+$gl-spacing-scale-75: 37.5rem;
+$gl-spacing-scale-80: 40rem;
+$gl-spacing-scale-88: 44rem;
+$gl-spacing-scale-px: 1px;
+$gl-spacing-scale-2-5: 0.375rem;
+$gl-spacing-scale-11-5: 4.5rem;
 $gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.

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

@@ -238,6 +238,38 @@ $gl-line-height-36: var(--gl-line-height-36);
 $gl-line-height-42: var(--gl-line-height-42);
 $gl-line-height-44: var(--gl-line-height-44);
 $gl-line-height-52: var(--gl-line-height-52);
+$gl-spacing-scale-0: var(--gl-spacing-scale-0);
+$gl-spacing-scale-1: var(--gl-spacing-scale-1);
+$gl-spacing-scale-2: var(--gl-spacing-scale-2);
+$gl-spacing-scale-3: var(--gl-spacing-scale-3);
+$gl-spacing-scale-4: var(--gl-spacing-scale-4);
+$gl-spacing-scale-5: var(--gl-spacing-scale-5);
+$gl-spacing-scale-6: var(--gl-spacing-scale-6);
+$gl-spacing-scale-7: var(--gl-spacing-scale-7);
+$gl-spacing-scale-8: var(--gl-spacing-scale-8);
+$gl-spacing-scale-9: var(--gl-spacing-scale-9);
+$gl-spacing-scale-10: var(--gl-spacing-scale-10);
+$gl-spacing-scale-11: var(--gl-spacing-scale-11);
+$gl-spacing-scale-12: var(--gl-spacing-scale-12);
+$gl-spacing-scale-13: var(--gl-spacing-scale-13);
+$gl-spacing-scale-15: var(--gl-spacing-scale-15);
+$gl-spacing-scale-18: var(--gl-spacing-scale-18);
+$gl-spacing-scale-20: var(--gl-spacing-scale-20);
+$gl-spacing-scale-26: var(--gl-spacing-scale-26);
+$gl-spacing-scale-28: var(--gl-spacing-scale-28);
+$gl-spacing-scale-30: var(--gl-spacing-scale-30);
+$gl-spacing-scale-31: var(--gl-spacing-scale-31);
+$gl-spacing-scale-33: var(--gl-spacing-scale-33);
+$gl-spacing-scale-34: var(--gl-spacing-scale-34);
+$gl-spacing-scale-37: var(--gl-spacing-scale-37);
+$gl-spacing-scale-48: var(--gl-spacing-scale-48);
+$gl-spacing-scale-62: var(--gl-spacing-scale-62);
+$gl-spacing-scale-75: var(--gl-spacing-scale-75);
+$gl-spacing-scale-80: var(--gl-spacing-scale-80);
+$gl-spacing-scale-88: var(--gl-spacing-scale-88);
+$gl-spacing-scale-px: var(--gl-spacing-scale-px);
+$gl-spacing-scale-2-5: var(--gl-spacing-scale-2-5);
+$gl-spacing-scale-11-5: var(--gl-spacing-scale-11-5);
 $gl-alert-neutral-title-color: var(--gl-alert-neutral-title-color);
 $gl-alert-neutral-background-color: var(--gl-alert-neutral-background-color);
 $gl-alert-neutral-border-top-color: var(--gl-alert-neutral-border-top-color);

package/src/tokens/build/tailwind/tokens.cjs

@@ -352,6 +352,40 @@ const feedbackIconColors = {
   'feedback-warning': 'var(--gl-feedback-warning-icon-color, var(--gl-color-orange-600, #995715))',
   'feedback-danger': 'var(--gl-feedback-danger-icon-color, var(--gl-color-red-600, #c02f12))',
 };
+const spacingScale = {
+  0: 'var(--gl-spacing-scale-0, 0)',
+  1: 'var(--gl-spacing-scale-1, 0.125rem)',
+  2: 'var(--gl-spacing-scale-2, 0.25rem)',
+  3: 'var(--gl-spacing-scale-3, 0.5rem)',
+  4: 'var(--gl-spacing-scale-4, 0.75rem)',
+  5: 'var(--gl-spacing-scale-5, 1rem)',
+  6: 'var(--gl-spacing-scale-6, 1.5rem)',
+  7: 'var(--gl-spacing-scale-7, 2rem)',
+  8: 'var(--gl-spacing-scale-8, 2.5rem)',
+  9: 'var(--gl-spacing-scale-9, 3rem)',
+  10: 'var(--gl-spacing-scale-10, 3.5rem)',
+  11: 'var(--gl-spacing-scale-11, 4rem)',
+  12: 'var(--gl-spacing-scale-12, 5rem)',
+  13: 'var(--gl-spacing-scale-13, 6rem)',
+  15: 'var(--gl-spacing-scale-15, 7.5rem)',
+  18: 'var(--gl-spacing-scale-18, 9rem)',
+  20: 'var(--gl-spacing-scale-20, 10rem)',
+  26: 'var(--gl-spacing-scale-26, 13rem)',
+  28: 'var(--gl-spacing-scale-28, 14rem)',
+  30: 'var(--gl-spacing-scale-30, 15rem)',
+  31: 'var(--gl-spacing-scale-31, 15.5rem)',
+  33: 'var(--gl-spacing-scale-33, 16.5rem)',
+  34: 'var(--gl-spacing-scale-34, 17rem)',
+  37: 'var(--gl-spacing-scale-37, 18.5rem)',
+  48: 'var(--gl-spacing-scale-48, 24rem)',
+  62: 'var(--gl-spacing-scale-62, 31rem)',
+  75: 'var(--gl-spacing-scale-75, 37.5rem)',
+  80: 'var(--gl-spacing-scale-80, 40rem)',
+  88: 'var(--gl-spacing-scale-88, 44rem)',
+  px: 'var(--gl-spacing-scale-px, 1px)',
+  '2-5': 'var(--gl-spacing-scale-2-5, 0.375rem)',
+  '11-5': 'var(--gl-spacing-scale-11-5, 4.5rem)',
+};
 
 const colors = {
   inherit: 'inherit',
@@ -433,4 +467,5 @@ module.exports = {
   outlineColor,
   textColor,
   fill,
+  spacing: spacingScale,
 };

package/src/tokens/constant/spacing_scale.tokens.json

@@ -0,0 +1,228 @@
+{
+  "spacing-scale": {
+    "0": {
+      "$value": "0",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "px": {
+      "$value": "1px",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "1": {
+      "$value": "0.125rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "2": {
+      "$value": "0.25rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "2-5": {
+      "$value": "0.375rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "3": {
+      "$value": "0.5rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "4": {
+      "$value": "0.75rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "5": {
+      "$value": "1rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "6": {
+      "$value": "1.5rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "7": {
+      "$value": "2rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "8": {
+      "$value": "2.5rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "9": {
+      "$value": "3rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "10": {
+      "$value": "3.5rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "11": {
+      "$value": "4rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "11-5": {
+      "$value": "4.5rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "12": {
+      "$value": "5rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "13": {
+      "$value": "6rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "15": {
+      "$value": "7.5rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "18": {
+      "$value": "9rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "20": {
+      "$value": "10rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "26": {
+      "$value": "13rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "28": {
+      "$value": "14rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "30": {
+      "$value": "15rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "31": {
+      "$value": "15.5rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "33": {
+      "$value": "16.5rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "34": {
+      "$value": "17rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "37": {
+      "$value": "18.5rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "48": {
+      "$value": "24rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "62": {
+      "$value": "31rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "75": {
+      "$value": "37.5rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "80": {
+      "$value": "40rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    },
+    "88": {
+      "$value": "44rem",
+      "$type": "dimension",
+      "$extensions": {
+        "com.figma.scope": []
+      }
+    }
+  }
+}

package/src/utils/charts/config.js

@@ -432,22 +432,36 @@ export const generateLineSeries = ({ name, color, data = [], yAxisIndex = 0 }) =
   itemStyle: { color },
 });
 
-export const getTooltipTitle = (params = null, titleAxisName = null) => {
+export const getTooltipAxisConfig = (dimensionAxis) => {
+  if (!['xAxis', 'yAxis'].includes(dimensionAxis)) {
+    throw new Error(`\`dimensionAxis\` must be "xAxis" or "yAxis", received ${dimensionAxis}`);
+  }
+
+  if (dimensionAxis === 'xAxis') {
+    return { dimensionIndex: 0, metricIndex: 1, valueAxis: 'yAxis' };
+  }
+
+  return { dimensionIndex: 1, metricIndex: 0, valueAxis: 'xAxis' };
+};
+
+export const getTooltipTitle = (params = null, titleAxisName = null, dimensionIndex = 0) => {
   if (!params) return '';
 
   const title = params.seriesData
     .reduce((acc, { value }) => {
-      if (acc.includes(value[0])) {
+      const dimension = value[dimensionIndex];
+
+      if (acc.includes(dimension)) {
         return acc;
       }
-      return [...acc, value[0]];
+      return [...acc, dimension];
     }, [])
     .join(', ');
 
   return titleAxisName ? `${title} (${titleAxisName})` : title;
 };
 
-export const getTooltipContent = (params = null, valueAxisName = null) => {
+export const getTooltipContent = (params = null, valueAxisName = null, metricIndex = 1) => {
   if (!params) {
     return {};
   }
@@ -455,22 +469,19 @@ export const getTooltipContent = (params = null, valueAxisName = null) => {
   const { seriesData } = params;
 
   if (seriesData.length === 1) {
-    const {
-      value: [, yValue],
-      seriesName,
-    } = seriesData[0];
+    const { value, seriesName } = seriesData[0];
 
     return {
       [valueAxisName || seriesName]: {
-        value: yValue,
+        value: value[metricIndex],
         color: '', // ignore color when showing a single series
       },
     };
   }
 
   return seriesData.reduce((acc, { value, seriesName, color }) => {
-    const yValue = value[1];
-    acc[seriesName] = { value: yValue, color };
+    acc[seriesName] = { value: value[metricIndex], color };
+
     return acc;
   }, {});
 };

package/tailwind.defaults.js

@@ -8,48 +8,11 @@ const {
   outlineColor,
   fill,
   textColor,
+  spacing,
 } = require('./src/tokens/build/tailwind/tokens.cjs');
 
 const buildCQs = Boolean(process.env.USE_TAILWIND_CONTAINER_QUERIES);
 
-const gridSize = 0.5; // rem
-const spacing = {
-  0: '0',
-  px: '1px',
-  ...Object.fromEntries(
-    Object.entries({
-      1: 0.25,
-      2: 0.5,
-      3: 1,
-      4: 1.5,
-      5: 2,
-      6: 3,
-      7: 4,
-      8: 5,
-      9: 6,
-      10: 7,
-      11: 8,
-      '11-5': 9,
-      12: 10,
-      13: 12,
-      15: 15,
-      20: 20,
-      26: 26,
-      28: 28,
-      30: 30,
-      31: 31,
-      34: 34,
-      48: 48,
-      62: 62,
-      75: 75,
-      80: 80,
-      88: 88,
-    }).map(([scale, factor]) => {
-      return [scale, `${factor * gridSize}rem`];
-    }),
-  ),
-};
-
 function addCustomDefinitions({ addComponents, addUtilities }) {
   addComponents({
     '.action-neutral-colors': {