@gitlab/ui 86.11.1 → 86.12.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [86.12.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.12.0...v86.12.1) (2024-07-17)
+
+
+### Bug Fixes
+
+* Properly handle multi-class tailwind migration ([7131ebb](https://gitlab.com/gitlab-org/gitlab-ui/commit/7131ebb48501d1ac962c1b64d7fb45fc07f6fc37))
+
+# [86.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.11.1...v86.12.0) (2024-07-16)
+
+
+### Features
+
+* **Charts:** use options.toolbox.show to show/hide toolbox ([5e8c462](https://gitlab.com/gitlab-org/gitlab-ui/commit/5e8c4624274aa9612b7e7fcf73f0e500ea6446f9))
+
 ## [86.11.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.11.0...v86.11.1) (2024-07-16)
 
 

package/bin/migrate_custom_utils_to_tw.bundled.mjs

@@ -183679,9 +183679,15 @@ var _23 = function() {
 }();
 var lne = { html: rn7("html", gc3, { staticAttrs: ["class"] }), glimmer: rn7("glimmer", oY, { staticAttrs: ["class"] }), lwc: rn7("lwc", gc3, { staticAttrs: ["class"] }), angular: rn7("angular", gc3, { staticAttrs: ["class"], dynamicAttrs: ["[ngClass]"] }), vue: rn7("vue", gc3, { staticAttrs: ["class"], dynamicAttrs: [":class", "v-bind:class"] }), css: rn7("css", Sv), scss: rn7("scss", Sv), less: rn7("less", Sv), babel: rn7("babel", Ls8, { staticAttrs: ["class", "className"] }), "babel-flow": rn7("babel-flow", Ls8, { staticAttrs: ["class", "className"] }), flow: rn7("flow", Ls8, { staticAttrs: ["class", "className"] }), typescript: rn7("typescript", Ls8, { staticAttrs: ["class", "className"] }), "babel-ts": rn7("babel-ts", Ls8, { staticAttrs: ["class", "className"] }), acorn: rn7("acorn", Ls8, { staticAttrs: ["class", "className"] }), meriyah: rn7("meriyah", Ls8, { staticAttrs: ["class", "className"] }), __js_expression: rn7("__js_expression", Ls8, { staticAttrs: ["class", "className"] }), ...si5.parsers.svelte ? { svelte: rn7("svelte", vc3, { staticAttrs: ["class"] }) } : {}, ...si5.parsers.astro ? { astro: rn7("astro", I23, { staticAttrs: ["class", "className"], dynamicAttrs: ["class:list", "className"] }) } : {}, ...si5.parsers.astroExpressionParser ? { astroExpressionParser: rn7("astroExpressionParser", Ls8, { staticAttrs: ["class"], dynamicAttrs: ["class:list"] }) } : {}, ...si5.parsers.marko ? { marko: rn7("marko", cY2, { staticAttrs: ["class"] }) } : {}, ...si5.parsers.melody ? { melody: rn7("melody", O23, { staticAttrs: ["class"] }) } : {}, ...si5.parsers.pug ? { pug: rn7("pug", pY, { staticAttrs: ["class"] }) } : {}, ...si5.parsers["liquid-html"] ? { "liquid-html": rn7("liquid-html", lY, { staticAttrs: ["class"] }) } : {} };
 
-// bin/lib/tailwind_equivalents.js
+// bin/lib/tailwind_equivalents.mjs
 var tailwindEquivalents = {
+  /**
+   * These classes are mapping to multi-classes...
+   */
   "gl-sr-only-focusable": "gl-sr-only focus:gl-not-sr-only",
+  "gl--flex-center": "gl-flex gl-items-center gl-justify-center",
+  "gl-flex-flow-row-wrap": "gl-flex-row gl-flex-wrap",
+  // Normal replacements below
   "gl-spin": "gl-animate-spin",
   "gl-animate-skeleton-loader": null,
   "gl-hover-bg-transparent": "hover:gl-bg-transparent",
@@ -183797,7 +183803,6 @@ var tailwindEquivalents = {
   "gl-hover-text-blue-800": "hover:gl-text-blue-800",
   "gl-hover-text-blue-800!": "hover:!gl-text-blue-800",
   "gl-text-red-500!": "!gl-text-red-500",
-  "gl--flex-center": "gl-flex gl-items-center gl-justify-center",
   "gl-focus--focus": "focus:gl-focus",
   "gl-cursor-default!": "!gl-cursor-default",
   "gl-hover-cursor-pointer": "hover:gl-cursor-pointer",
@@ -183904,7 +183909,6 @@ var tailwindEquivalents = {
   "gl-flex-basis-half": "gl-basis-1/2",
   "gl-flex-basis-full": "gl-basis-full",
   "gl-flex-basis-full!": "!gl-basis-full",
-  "gl-flex-flow-row-wrap": "gl-flex-row gl-flex-wrap",
   "gl-justify-content-center": "gl-justify-center",
   "gl-justify-content-end": "gl-justify-end",
   "gl-justify-content-end!": "!gl-justify-end",
@@ -184208,6 +184212,21 @@ var tailwindEquivalents = {
   "gl-visibility-hidden": "gl-invisible",
   "gl-z-index-200": "gl-z-200",
   "gl-z-index-9999!": "!gl-z-9999",
+  /*
+   Items below have been found by analysing the following projects
+   - jh fork of GitLab
+   - https://gitlab-org.gitlab.io/frontend/playground/gitlab-code-scanner
+   - https://gitlab.com/gitlab-com/gl-infra/gitlab-dedicated/switchboard/
+   - https://gitlab.com/gitlab-org/customers-gitlab-com/
+   - https://gitlab.com/gitlab-org/editor-extensions/gitlab-jetbrains-plugin
+   - https://gitlab.com/gitlab-org/frontend/pajamas-adoption-scanner
+   - https://gitlab.com/gitlab-org/frontend/playground/vue-compat-scanner
+   - https://gitlab.com/gitlab-org/gitlab-docs/
+   - https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com
+   - https://gitlab.com/gitlab-org/gitlab-vscode-extension/
+   - https://gitlab.com/gitlab-org/status-page
+   - https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo
+   */
   "gl-active-bg-t-gray-a-08": "active:gl-bg-alpha-dark-8",
   "gl-inset-border-b-1-gray-200": "gl-shadow-inner-b-1-gray-100",
   "gl-justify-content-center!": "!gl-justify-center",
@@ -184235,18 +184254,87 @@ var tailwindEquivalents = {
   "gl-z-index-1": "gl-z-1",
   "gl-z-index-2": "gl-z-2",
   "gl-z-index-3": "gl-z-3",
-  "gl-z-index-4": "gl-z-4"
+  "gl-z-index-4": "gl-z-4",
+  "gl-bg-data-viz-green-700!": "!gl-bg-data-viz-green-700",
+  "gl-bg-data-viz-magenta-950!": "!gl-bg-data-viz-magenta-950",
+  "gl-inset-border-1-red-300": "gl-shadow-inner-1-red-300",
+  "gl-inset-border-1-red-500": "gl-shadow-inner-1-red-500",
+  "gl-column-gap-3": "gl-gap-x-3"
 };
 
+// bin/lib/tailwind_migrations.mjs
+function legacyClassToImportant(klass) {
+  return klass.endsWith("!") ? klass : `${klass}!`;
+}
+function tailwindClassToImportant(klass) {
+  if (klass.includes(" ")) {
+    return klass.split(" ").map((k9) => tailwindClassToImportant(k9)).join(" ");
+  }
+  if (klass.includes("!gl-")) {
+    return klass;
+  } else {
+    return klass.replace(/(^|:)(-?gl-)/, "$1!$2");
+  }
+}
+function filterOutNonStringValues(rawMigrations) {
+  return Object.entries(rawMigrations).filter(([, to4]) => typeof to4 === "string");
+}
+function addImportantVariants(rawMigrations) {
+  const map2 = rawMigrations.reduce((acc, [from, to4]) => {
+    acc.set(from, to4);
+    if (to4.includes(" ")) {
+      acc.set("\\." + from, "." + to4.replace(/ /g, "."));
+    }
+    const importantFrom = legacyClassToImportant(from);
+    if (!Object.hasOwn(rawMigrations, importantFrom)) {
+      const importantTo = tailwindClassToImportant(to4);
+      acc.set(importantFrom, importantTo);
+      if (to4.includes(" ")) {
+        acc.set("\\." + importantFrom, "." + importantTo.replace(/ /g, "."));
+      }
+    }
+    return acc;
+  }, /* @__PURE__ */ new Map());
+  return Array.from(map2.entries()).map(([from, to4]) => ({ from, to: to4 }));
+}
+function addFromRegExps(rawMigrations) {
+  const classChars = ["-", "\\w", "!", ":"].join("|");
+  return rawMigrations.map((migration) => ({
+    ...migration,
+    fromRegExp: new RegExp(`(?<!${classChars})${migration.from}(?!${classChars})`, "g")
+  }));
+}
+function sortMigrations(unsortedMigrations) {
+  return unsortedMigrations.slice().sort((a3, b6) => {
+    if (a3.from.length < b6.from.length)
+      return 1;
+    if (a3.from.length > b6.from.length)
+      return -1;
+    return 0;
+  });
+}
+async function parseMigrations(obj) {
+  try {
+    return sortMigrations(addFromRegExps(addImportantVariants(filterOutNonStringValues(obj))));
+  } catch (error) {
+    console.error(error.message);
+    return [];
+  }
+}
+function runMigrations(contents, migrationsToDo) {
+  let newContents = contents;
+  for (const { fromRegExp, to: to4 } of migrationsToDo) {
+    newContents = newContents.replaceAll(fromRegExp, to4);
+  }
+  return newContents;
+}
+
 // bin/migrate_custom_utils_to_tw.mjs
 function createRewriter(config, migrationsToDo) {
   const { tailwindConfig, dryRun } = config;
   return async function rewrite(file) {
     const contents = await readFile3(file, { encoding: "utf8" });
-    let newContents = contents;
-    for (const { fromRegExp, to: to4 } of migrationsToDo) {
-      newContents = newContents.replaceAll(fromRegExp, to4);
-    }
+    let newContents = runMigrations(contents, migrationsToDo);
     if (contents === newContents) {
       console.warn(`No changes to ${file}`);
       return;
@@ -184315,50 +184403,6 @@ function validateMigrations(processedMigrations) {
   }
   return true;
 }
-function legacyClassToImportant(klass) {
-  return klass.endsWith("!") ? klass : `${klass}!`;
-}
-function tailwindClassToImportant(klass) {
-  return klass.includes("!gl-") ? klass : klass.replace(/(^|:)(-?gl-)/, "$1!$2");
-}
-function filterOutNonStringValues(rawMigrations) {
-  return Object.entries(rawMigrations).filter(([, to4]) => typeof to4 === "string");
-}
-function addImportantVariants(rawMigrations) {
-  const map2 = rawMigrations.reduce((acc, [from, to4]) => {
-    acc.set(from, to4);
-    const importantFrom = legacyClassToImportant(from);
-    if (!Object.hasOwn(rawMigrations, importantFrom)) {
-      acc.set(importantFrom, tailwindClassToImportant(to4));
-    }
-    return acc;
-  }, /* @__PURE__ */ new Map());
-  return Array.from(map2.entries()).map(([from, to4]) => ({ from, to: to4 }));
-}
-function addFromRegExps(rawMigrations) {
-  const classChars = ["-", "\\w", "!", ":"].join("|");
-  return rawMigrations.map((migration) => ({
-    ...migration,
-    fromRegExp: new RegExp(`(?<!${classChars})${migration.from}(?!${classChars})`, "g")
-  }));
-}
-function sortMigrations(unsortedMigrations) {
-  return unsortedMigrations.slice().sort((a3, b6) => {
-    if (a3.from.length < b6.from.length)
-      return 1;
-    if (a3.from.length > b6.from.length)
-      return -1;
-    return 0;
-  });
-}
-async function parseMigrations(obj) {
-  try {
-    return sortMigrations(addFromRegExps(addImportantVariants(filterOutNonStringValues(obj))));
-  } catch (error) {
-    console.error(error.message);
-    return [];
-  }
-}
 async function getFilesAndDirectories(directories, dryRun) {
   const directoriesPattern = directories.length === 0 ? process.cwd() : directories.length === 1 ? directories[0] : `{${directories.join(",")}}`;
   const extensions = ["haml", "rb", "vue", "js", "snap", "html"];

package/dist/components/charts/chart/chart.js

@@ -12,7 +12,10 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
  * https://echarts.apache.org/en/api.html#echartsInstance.resize
  */
 const sizeValidator = size => Number.isFinite(size) || size === 'auto' || size == null;
-const isChartWithToolbox = options => (options === null || options === void 0 ? void 0 : options.toolbox) !== undefined;
+const isChartWithToolbox = options => {
+  var _options$toolbox;
+  return Boolean(options === null || options === void 0 ? void 0 : (_options$toolbox = options.toolbox) === null || _options$toolbox === void 0 ? void 0 : _options$toolbox.show);
+};
 const increaseChartGridTop = (options, increaseBy) => {
   var _options$grid;
   return {

package/dist/utils/charts/story_config.js

@@ -1,25 +1,7 @@
 import times from 'lodash/times';
 import { SERIES_NAME, SERIES_NAME_SHORT } from '../stories_constants';
-import { marqueeSelectionSvgPath, redoSvgPath, clearAllSvgPath, downloadSvgPath } from '../svgs/svg_paths';
 import { colorFromDefaultPalette } from './theme';
 
-const toolbox = {
-  feature: {
-    dataZoom: {
-      icon: {
-        zoom: marqueeSelectionSvgPath,
-        back: redoSvgPath
-      }
-    },
-    restore: {
-      icon: clearAllSvgPath
-    },
-    saveAsImage: {
-      icon: downloadSvgPath
-    }
-  }
-};
-
 /**
  * Generates series data for usage in chart examples
  *
@@ -39,4 +21,4 @@ const generateSeriesData = function () {
   }));
 };
 
-export { generateSeriesData, toolbox };
+export { generateSeriesData };

package/dist/utils/charts/theme.js

@@ -1,5 +1,5 @@
 import { GRAY_600, GRAY_200, GRAY_50, GRAY_300, GRAY_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_800, GRAY_900, GRAY_500, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_900, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_600, DATA_VIZ_MAGENTA_500, DATA_VIZ_BLUE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_AQUA_700, DATA_VIZ_GREEN_800, DATA_VIZ_MAGENTA_700, DATA_VIZ_ORANGE_950, DATA_VIZ_AQUA_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_900, DATA_VIZ_ORANGE_700, DATA_VIZ_AQUA_600, DATA_VIZ_GREEN_700, DATA_VIZ_MAGENTA_600, DATA_VIZ_ORANGE_900, DATA_VIZ_AQUA_800, DATA_VIZ_GREEN_900, DATA_VIZ_MAGENTA_800, DATA_VIZ_BLUE_950, DATA_VIZ_AQUA_950, DATA_VIZ_GREEN_500, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_400, DATA_VIZ_GREEN_400, DATA_VIZ_BLUE_300, DATA_VIZ_ORANGE_200, DATA_VIZ_AQUA_300, DATA_VIZ_GREEN_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_BLUE_100, DATA_VIZ_ORANGE_50, DATA_VIZ_AQUA_100, DATA_VIZ_GREEN_50, DATA_VIZ_MAGENTA_100, DATA_VIZ_ORANGE_300, DATA_VIZ_AQUA_400, DATA_VIZ_GREEN_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_ORANGE_100, DATA_VIZ_AQUA_200, DATA_VIZ_GREEN_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_BLUE_50, DATA_VIZ_AQUA_50, DATA_VIZ_MAGENTA_50, RED_500, WHITE } from '../../tokens/build/js/tokens';
-import { scrollHandleSvgPath } from '../svgs/svg_paths';
+import { scrollHandleSvgPath, marqueeSelectionSvgPath, redoSvgPath, clearAllSvgPath, downloadSvgPath } from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
 
 const GL_BORDER_RADIUS_BASE = '0.25rem';
@@ -141,14 +141,20 @@ const createTheme = function () {
           title: {
             zoom: 'Click to zoom in on a portion of the graph',
             back: 'Remove selection'
+          },
+          icon: {
+            zoom: marqueeSelectionSvgPath,
+            back: redoSvgPath
           }
         },
         restore: {
-          title: 'Remove all selections and return chart to default state'
+          title: 'Remove all selections and return chart to default state',
+          icon: clearAllSvgPath
         },
         saveAsImage: {
           title: 'Save chart as an image',
-          name: 'graph'
+          name: 'graph',
+          icon: downloadSvgPath
         }
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "86.11.1",
+  "version": "86.12.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/charts/chart/chart.vue

@@ -17,7 +17,7 @@ import { debounceByAnimationFrame } from '../../../utils/utils';
  */
 const sizeValidator = (size) => Number.isFinite(size) || size === 'auto' || size == null;
 
-const isChartWithToolbox = (options) => options?.toolbox !== undefined;
+const isChartWithToolbox = (options) => Boolean(options?.toolbox?.show);
 
 const increaseChartGridTop = (options, increaseBy) => ({
   ...options,

package/src/utils/charts/story_config.js

@@ -1,31 +1,7 @@
 import times from 'lodash/times';
 import { SERIES_NAME, SERIES_NAME_SHORT } from '../stories_constants';
-
-import {
-  marqueeSelectionSvgPath,
-  redoSvgPath,
-  clearAllSvgPath,
-  downloadSvgPath,
-} from '../svgs/svg_paths';
 import { colorFromDefaultPalette } from './theme';
 
-export const toolbox = {
-  feature: {
-    dataZoom: {
-      icon: {
-        zoom: marqueeSelectionSvgPath,
-        back: redoSvgPath,
-      },
-    },
-    restore: {
-      icon: clearAllSvgPath,
-    },
-    saveAsImage: {
-      icon: downloadSvgPath,
-    },
-  },
-};
-
 /**
  * Generates series data for usage in chart examples
  *

package/src/utils/charts/theme.js

@@ -64,7 +64,13 @@ import {
   DATA_VIZ_ORANGE_950,
   DATA_VIZ_ORANGE_900,
 } from '../../tokens/build/js/tokens';
-import { scrollHandleSvgPath } from '../svgs/svg_paths';
+import {
+  scrollHandleSvgPath,
+  marqueeSelectionSvgPath,
+  redoSvgPath,
+  clearAllSvgPath,
+  downloadSvgPath,
+} from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
 
 const GL_BORDER_RADIUS_BASE = '0.25rem';
@@ -285,13 +291,19 @@ export const createTheme = (options = {}) => ({
           zoom: 'Click to zoom in on a portion of the graph',
           back: 'Remove selection',
         },
+        icon: {
+          zoom: marqueeSelectionSvgPath,
+          back: redoSvgPath,
+        },
       },
       restore: {
         title: 'Remove all selections and return chart to default state',
+        icon: clearAllSvgPath,
       },
       saveAsImage: {
         title: 'Save chart as an image',
         name: 'graph',
+        icon: downloadSvgPath,
       },
     },
   },