@gitlab/ui 86.11.1 → 86.12.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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/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.0",
   "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,
       },
     },
   },