@gitlab/ui 52.3.0 → 52.4.0

package/dist/utils/charts/config.js

@@ -15,6 +15,7 @@ const defaultFontSize = 12;
 const defaultHeight = 400;
 const defaultWidth = 300;
 const validRenderers = ['canvas', 'svg'];
+const toolboxHeight = 14;
 const axes = {
   name: 'Value',
   type: 'value',
@@ -504,4 +505,4 @@ const getDefaultTooltipContent = function (params) {
   };
 };
 
-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 };
+export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultChartOptions, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, toolboxHeight, validRenderers, xAxis, yAxis };

package/dist/utils/charts/theme.js

@@ -1,6 +1,7 @@
 import { scrollHandleSvgPath } from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
 
+const white = '#fff';
 const whiteNormal = '#f0f0f0';
 const red500 = '#dd2b0e';
 const gray50 = '#ececef';
@@ -42,6 +43,7 @@ const dataVizOrange700 = '#92430a';
 const dataVizOrange800 = '#6f3500';
 const dataVizOrange900 = '#5e2f05';
 const dataVizOrange950 = '#4b2707';
+const glBorderRadiusBase = '0.25rem';
 
 const themeName = 'gitlab';
 const heatmapHues = [gray100, dataVizBlue200, dataVizBlue400, dataVizBlue600, dataVizBlue800];
@@ -163,7 +165,10 @@ const createTheme = function () {
       emphasis: {
         iconStyle: {
           borderWidth: 0,
-          color: gray900
+          color: gray900,
+          textBackgroundColor: white,
+          textBorderRadius: glBorderRadiusBase,
+          textPadding: [8, 12]
         }
       },
       iconStyle: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "52.3.0",
+  "version": "52.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -91,14 +91,14 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.5.13",
-    "@storybook/addon-docs": "6.5.13",
-    "@storybook/addon-essentials": "6.5.13",
-    "@storybook/addon-storyshots": "6.5.13",
-    "@storybook/addon-storyshots-puppeteer": "6.5.13",
-    "@storybook/addon-viewport": "6.5.13",
-    "@storybook/theming": "6.5.13",
-    "@storybook/vue": "6.5.13",
+    "@storybook/addon-a11y": "6.5.14",
+    "@storybook/addon-docs": "6.5.14",
+    "@storybook/addon-essentials": "6.5.14",
+    "@storybook/addon-storyshots": "6.5.14",
+    "@storybook/addon-storyshots-puppeteer": "6.5.14",
+    "@storybook/addon-viewport": "6.5.14",
+    "@storybook/theming": "6.5.14",
+    "@storybook/vue": "6.5.14",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",

package/src/components/charts/chart/chart.spec.js

@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import * as echarts from 'echarts';
+import { toolboxHeight } from '~/utils/charts/config';
 import { createTheme } from '~/utils/charts/theme';
 import { useMockResizeObserver } from '~helpers/mock_dom_observer';
 import Chart from './chart.vue';
@@ -118,8 +119,11 @@ describe('chart component', () => {
 
     describe('draw method', () => {
       it('sets chart options', () => {
+        expect(wrapper.vm.chart.setOption).toHaveBeenCalledTimes(1);
+
         wrapper.vm.draw();
 
+        expect(wrapper.vm.chart.setOption).toHaveBeenCalledTimes(2);
         expect(wrapper.vm.chart.setOption).toHaveBeenCalledWith(options);
       });
 
@@ -142,4 +146,17 @@ describe('chart component', () => {
       });
     });
   });
+
+  describe('with toolbox in options', () => {
+    it('increases grid top by `toolboxHeight`', async () => {
+      const optionsWithToolbox = { toolbox: {} };
+      wrapper = shallowMount(Chart, { propsData: { options: optionsWithToolbox } });
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.chart.setOption).toHaveBeenCalledWith({
+        ...optionsWithToolbox,
+        grid: { top: toolboxHeight },
+      });
+    });
+  });
 });

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

@@ -1,7 +1,12 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
-import { defaultHeight, defaultWidth, validRenderers } from '../../../utils/charts/config';
+import {
+  defaultHeight,
+  defaultWidth,
+  validRenderers,
+  toolboxHeight,
+} from '../../../utils/charts/config';
 import { createTheme, themeName } from '../../../utils/charts/theme';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 
@@ -11,6 +16,16 @@ import { GlResizeObserverDirective } from '../../../directives/resize_observer/r
  */
 const sizeValidator = (size) => Number.isFinite(size) || size === 'auto' || size == null;
 
+const isChartWithToolbox = (options) => options?.toolbox !== undefined;
+
+const increaseChartGridTop = (options, increaseBy) => ({
+  ...options,
+  grid: {
+    ...options.grid,
+    top: (options?.grid?.top || 0) + increaseBy,
+  },
+});
+
 export default {
   directives: {
     resizeObserver: GlResizeObserverDirective,
@@ -78,6 +93,13 @@ export default {
       chart: null,
     };
   },
+  computed: {
+    normalizedOptions() {
+      return isChartWithToolbox(this.options)
+        ? increaseChartGridTop(this.options, toolboxHeight)
+        : this.options;
+    },
+  },
   watch: {
     options() {
       if (this.chart) {
@@ -123,7 +145,7 @@ export default {
   },
   methods: {
     draw() {
-      this.chart.setOption(this.options);
+      this.chart.setOption(this.normalizedOptions);
       /**
        * Emitted after calling `echarts.setOption`
        */

package/src/scss/utilities.scss

@@ -4939,6 +4939,14 @@
   min-height: $gl-spacing-scale-8 !important;
 }
 
+.gl-max-w-0 {
+  max-width: 0;
+}
+
+.gl-max-w-0\! {
+  max-width: 0 !important;
+}
+
 .gl-max-w-15 {
   max-width: $gl-spacing-scale-15;
 }

package/src/scss/utility-mixins/sizing.scss

@@ -354,6 +354,10 @@
   min-height: $gl-spacing-scale-8;
 }
 
+@mixin gl-max-w-0 {
+  max-width: 0;
+}
+
 @mixin gl-max-w-15 {
   max-width: $gl-spacing-scale-15;
 }

package/src/utils/charts/config.js

@@ -14,6 +14,7 @@ export const defaultFontSize = 12;
 export const defaultHeight = 400;
 export const defaultWidth = 300;
 export const validRenderers = ['canvas', 'svg'];
+export const toolboxHeight = 14;
 
 export const axes = {
   name: 'Value',

package/src/utils/charts/theme.js

@@ -40,6 +40,8 @@ import {
   dataVizOrange800,
   dataVizOrange950,
   dataVizOrange900,
+  glBorderRadiusBase,
+  white,
 } from '../../../scss_to_js/scss_variables';
 import { scrollHandleSvgPath } from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
@@ -209,6 +211,9 @@ export const createTheme = (options = {}) => ({
       iconStyle: {
         borderWidth: 0,
         color: gray900,
+        textBackgroundColor: white,
+        textBorderRadius: glBorderRadiusBase,
+        textPadding: [8, 12],
       },
     },
     iconStyle: {