@gitlab/ui 49.11.1 → 50.0.0

package/dist/utils/charts/config.js

@@ -159,38 +159,6 @@ const dataZoomAdjustments = dataZoom => {
     filterMode: 'weakFilter'
   }) : [];
 };
-const getToolboxConfig = function () {
-  let {
-    restoreIconPath = '',
-    saveImageIconPath = '',
-    zoomIconPath = '',
-    backIconPath = ''
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const toolboxConfig = {
-    toolbox: {
-      feature: {}
-    }
-  };
-  if (restoreIconPath.length) {
-    toolboxConfig.toolbox.feature.restore = {
-      icon: restoreIconPath
-    };
-  }
-  if (saveImageIconPath.length) {
-    toolboxConfig.toolbox.feature.saveAsImage = {
-      icon: restoreIconPath
-    };
-  }
-  if (zoomIconPath.length && backIconPath.length) {
-    toolboxConfig.toolbox.feature.dataZoom = {
-      icon: {
-        zoom: zoomIconPath,
-        back: backIconPath
-      }
-    };
-  }
-  return toolboxConfig;
-};
 
 /**
  * Generate eCharts markArea arrays for thresholds and annotations.
@@ -536,4 +504,4 @@ const getDefaultTooltipContent = function (params) {
   };
 };
 
-export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultChartOptions, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getToolboxConfig, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, validRenderers, xAxis, yAxis };
+export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultChartOptions, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, validRenderers, xAxis, yAxis };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "49.11.1",
+  "version": "50.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -85,7 +85,7 @@
     "@babel/preset-env": "^7.20.2",
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.7.0",
+    "@gitlab/svgs": "3.9.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -111,7 +111,7 @@
     "babel-preset-vue": "^2.0.2",
     "bootstrap": "4.5.3",
     "bootstrap-vue-vue3": "npm:bootstrap-vue@2.23.1",
-    "cypress": "^10.11.0",
+    "cypress": "^11.1.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.27.0",
     "eslint-import-resolver-jest": "3.0.2",
@@ -121,9 +121,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.3.0",
-    "jest-circus": "29.3.0",
-    "jest-environment-jsdom": "29.3.0",
+    "jest": "^29.3.1",
+    "jest-circus": "29.3.1",
+    "jest-environment-jsdom": "29.3.1",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "npm-run-all": "^4.1.5",

package/src/components/base/drawer/drawer.scss

@@ -31,8 +31,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
 
   .gl-drawer-header,
   .gl-drawer-body > * {
-    @include gl-px-6;
-    @include gl-py-5;
+    @include gl-p-5;
   }
 }
 
@@ -58,8 +57,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
   @include gl-border-t-solid;
   @include gl-border-t-gray-100;
   @include gl-border-t-1;
-  @include gl-px-6;
-  @include gl-py-5;
+  @include gl-p-5;
 }
 
 .gl-drawer-body-scrim-on-footer {

package/src/components/charts/area/area.stories.js

@@ -155,11 +155,6 @@ export default {
   component: GlAreaChart,
   argTypes: {
     ...disableControls([
-      'showToolbox',
-      'toolboxZoomIconPath',
-      'toolboxBackIconPath',
-      'toolboxRestoreIconPath',
-      'toolboxSaveAsImageIconPath',
       'dataSeries',
       'formatTooltipText',
       'legendAverageText',

package/src/components/charts/area/area.vue

@@ -42,7 +42,6 @@ import {
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
@@ -55,7 +54,6 @@ export default {
     ChartTooltip,
     TooltipDefaultFormat,
   },
-  mixins: [ToolboxMixin],
   inheritAttrs: false,
   props: {
     data: {
@@ -208,8 +206,7 @@ export default {
         defaultChartOptions,
         defaultAreaChartOptions,
         this.option,
-        dataZoomAdjustments(this.option.dataZoom),
-        this.toolboxAdjustments
+        dataZoomAdjustments(this.option.dataZoom)
       );
       // All chart options can be merged but series
       // needs to be handled specially.

package/src/components/charts/bar/bar.stories.js

@@ -1,5 +1,4 @@
 import { GlBarChart } from '../../../charts';
-import { disableControls } from '../../../utils/stories_utils';
 import readme from './bar.md';
 
 const Template = (args, { argTypes }) => ({
@@ -49,15 +48,6 @@ Default.args = generateProps();
 export default {
   title: 'charts/bar-chart',
   component: GlBarChart,
-  argTypes: {
-    ...disableControls([
-      'showToolbox',
-      'toolboxZoomIconPath',
-      'toolboxBackIconPath',
-      'toolboxRestoreIconPath',
-      'toolboxSaveAsImageIconPath',
-    ]),
-  },
   parameters: {
     docs: {
       description: {

package/src/components/charts/bar/bar.vue

@@ -7,7 +7,6 @@ import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { hexToRgba, debounceByAnimationFrame } from '../../../utils/utils';
-import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
@@ -62,7 +61,6 @@ export default {
     ChartTooltip,
     TooltipDefaultFormat,
   },
-  mixins: [ToolboxMixin],
   inheritAttrs: false,
   props: {
     data: {
@@ -156,8 +154,7 @@ export default {
           },
         },
         this.option,
-        dataZoomAdjustments(this.option.dataZoom),
-        this.toolboxAdjustments
+        dataZoomAdjustments(this.option.dataZoom)
       );
       // All chart options can be merged but series
       // needs to be handled specially

package/src/components/charts/column/column.vue

@@ -16,7 +16,6 @@ import { TOOLTIP_LEFT_OFFSET, CHART_TYPE_LINE } from '../../../utils/charts/cons
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
@@ -35,7 +34,6 @@ export default {
     ChartTooltip,
     TooltipDefaultFormat,
   },
-  mixins: [ToolboxMixin],
   inheritAttrs: false,
   props: {
     bars: {
@@ -164,8 +162,7 @@ export default {
           },
         },
         this.option,
-        dataZoomAdjustments(this.option.dataZoom),
-        this.toolboxAdjustments
+        dataZoomAdjustments(this.option.dataZoom)
       );
       // All chart options can be merged but series
       // needs to be handled specially

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -8,7 +8,6 @@ import {
 } from '../../../utils/charts/config';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
@@ -19,7 +18,6 @@ export default {
     ChartTooltip,
     TooltipDefaultFormat,
   },
-  mixins: [ToolboxMixin],
   inheritAttrs: false,
   props: {
     data: {
@@ -117,8 +115,7 @@ export default {
           },
         },
         this.option,
-        dataZoomAdjustments(this.option.dataZoom),
-        this.toolboxAdjustments
+        dataZoomAdjustments(this.option.dataZoom)
       );
       // All chart options can be merged but series
       // needs to be handled specially

package/src/components/charts/gauge/gauge.vue

@@ -2,7 +2,6 @@
 <script>
 import { merge, isFinite, uniq, sortBy } from 'lodash';
 import { gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
-import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import Chart from '../chart/chart.vue';
 
 const AXIS_LABEL_FONT_SIZE_PX = 14;
@@ -53,7 +52,6 @@ export default {
   components: {
     Chart,
   },
-  mixins: [ToolboxMixin],
   props: {
     value: {
       type: Number,
@@ -107,8 +105,7 @@ export default {
             axisColor: this.axisColor,
           }),
         },
-        this.option,
-        this.toolboxAdjustments
+        this.option
       );
 
       return mergedOptions;

package/src/components/charts/heatmap/heatmap.stories.js

@@ -62,11 +62,6 @@ export default {
   component: GlHeatmap,
   argTypes: {
     ...disableControls([
-      'showToolbox',
-      'toolboxZoomIconPath',
-      'toolboxBackIconPath',
-      'toolboxRestoreIconPath',
-      'toolboxSaveAsImageIconPath',
       'dataSeries',
       'formatTooltipText',
       'legendAverageText',

package/src/components/charts/heatmap/heatmap.vue

@@ -7,7 +7,6 @@ import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
@@ -49,7 +48,6 @@ export default {
     ChartTooltip,
     TooltipDefaultFormat,
   },
-  mixins: [ToolboxMixin],
   props: {
     options: {
       type: Object,
@@ -188,7 +186,6 @@ export default {
             },
           },
         },
-        this.toolboxAdjustments,
         this.options
       );
     },

package/src/components/charts/line/line.stories.js

@@ -209,11 +209,6 @@ export default {
   },
   argTypes: {
     ...disableControls([
-      'showToolbox',
-      'toolboxZoomIconPath',
-      'toolboxBackIconPath',
-      'toolboxRestoreIconPath',
-      'toolboxSaveAsImageIconPath',
       'formatTooltipText',
       'legendAverageText',
       'legendMaxText',

package/src/components/charts/line/line.vue

@@ -45,7 +45,6 @@ import {
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
@@ -58,7 +57,6 @@ export default {
     ChartTooltip,
     TooltipDefaultFormat,
   },
-  mixins: [ToolboxMixin],
   inheritAttrs: false,
   props: {
     data: {
@@ -207,8 +205,7 @@ export default {
         defaultChartOptions,
         defaultLineChartOptions,
         this.option,
-        dataZoomAdjustments(this.option.dataZoom),
-        this.toolboxAdjustments
+        dataZoomAdjustments(this.option.dataZoom)
       );
       // All chart options can be merged but series
       // needs to be handled specially

package/src/components/charts/stacked_column/stacked_column.vue

@@ -23,7 +23,6 @@ import {
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
@@ -44,7 +43,6 @@ export default {
     ChartLegend,
     TooltipDefaultFormat,
   },
-  mixins: [ToolboxMixin],
   inheritAttrs: false,
   props: {
     bars: {
@@ -224,8 +222,7 @@ export default {
           },
         },
         this.option,
-        dataZoomAdjustments(this.option.dataZoom),
-        this.toolboxAdjustments
+        dataZoomAdjustments(this.option.dataZoom)
       );
       // All chart options can be merged but series
       // needs to be handled specially

package/src/utils/charts/config.js

@@ -159,42 +159,6 @@ export const dataZoomAdjustments = (dataZoom) => {
   return useSlider ? getDataZoomConfig({ filterMode: 'weakFilter' }) : [];
 };
 
-export const getToolboxConfig = ({
-  restoreIconPath = '',
-  saveImageIconPath = '',
-  zoomIconPath = '',
-  backIconPath = '',
-} = {}) => {
-  const toolboxConfig = {
-    toolbox: {
-      feature: {},
-    },
-  };
-
-  if (restoreIconPath.length) {
-    toolboxConfig.toolbox.feature.restore = {
-      icon: restoreIconPath,
-    };
-  }
-
-  if (saveImageIconPath.length) {
-    toolboxConfig.toolbox.feature.saveAsImage = {
-      icon: restoreIconPath,
-    };
-  }
-
-  if (zoomIconPath.length && backIconPath.length) {
-    toolboxConfig.toolbox.feature.dataZoom = {
-      icon: {
-        zoom: zoomIconPath,
-        back: backIconPath,
-      },
-    };
-  }
-
-  return toolboxConfig;
-};
-
 /**
  * Generate eCharts markArea arrays for thresholds and annotations.
  *

package/dist/components/mixins/toolbox_mixin.js

@@ -1,45 +0,0 @@
-import { getToolboxConfig } from '../../utils/charts/config';
-
-/**
- *  Toolbox mixin for the chart based components
- *  this allows for the toolbox that echarts already includes to be rendered,
- *  the mixin also handles the icon customization for the 4 different default
- *  toolbox options
- */
-const ToolboxMixin = {
-  props: {
-    showToolbox: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    toolboxZoomIconPath: {
-      type: String,
-      required: false
-    },
-    toolboxBackIconPath: {
-      type: String,
-      required: false
-    },
-    toolboxRestoreIconPath: {
-      type: String,
-      required: false
-    },
-    toolboxSaveAsImageIconPath: {
-      type: String,
-      required: false
-    }
-  },
-  computed: {
-    toolboxAdjustments() {
-      return this.showToolbox ? getToolboxConfig({
-        restoreIconPath: this.toolboxRestoreIconPath,
-        saveImageIconPath: this.toolboxSaveAsImageIconPath,
-        zoomIconPath: this.toolboxZoomIconPath,
-        backIconPath: this.toolboxBackIconPath
-      }) : {};
-    }
-  }
-};
-
-export { ToolboxMixin };

package/src/components/mixins/toolbox_mixin.js

@@ -1,46 +0,0 @@
-/**
- *  Toolbox mixin for the chart based components
- *  this allows for the toolbox that echarts already includes to be rendered,
- *  the mixin also handles the icon customization for the 4 different default
- *  toolbox options
- */
-
-import { getToolboxConfig } from '../../utils/charts/config';
-
-export const ToolboxMixin = {
-  props: {
-    showToolbox: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    toolboxZoomIconPath: {
-      type: String,
-      required: false,
-    },
-    toolboxBackIconPath: {
-      type: String,
-      required: false,
-    },
-    toolboxRestoreIconPath: {
-      type: String,
-      required: false,
-    },
-    toolboxSaveAsImageIconPath: {
-      type: String,
-      required: false,
-    },
-  },
-  computed: {
-    toolboxAdjustments() {
-      return this.showToolbox
-        ? getToolboxConfig({
-            restoreIconPath: this.toolboxRestoreIconPath,
-            saveImageIconPath: this.toolboxSaveAsImageIconPath,
-            zoomIconPath: this.toolboxZoomIconPath,
-            backIconPath: this.toolboxBackIconPath,
-          })
-        : {};
-    },
-  },
-};