@gitlab/ui 32.32.0 → 32.35.0

package/dist/utils/charts/config.js

@@ -13,6 +13,7 @@ const blue500 = '#1f75cb';
 const defaultAreaOpacity = 0.2;
 const defaultFontSize = 12;
 const defaultHeight = 400;
+const defaultWidth = 300;
 const validRenderers = ['canvas', 'svg'];
 const axes = {
   name: 'Value',
@@ -441,8 +442,8 @@ const generateBarSeries = ({
   yAxisIndex,
   itemStyle: {
     color: hexToRgba(color, 0.2),
-    barBorderColor: color,
-    barBorderWidth: 1
+    borderColor: color,
+    borderWidth: 1
   },
   emphasis: {
     itemStyle: {
@@ -526,4 +527,4 @@ var config = {
 };
 
 export default config;
-export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultFontSize, defaultHeight, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getToolboxConfig, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, validRenderers, xAxis, yAxis };
+export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getToolboxConfig, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, validRenderers, xAxis, yAxis };

package/dist/utils/charts/mock_data.js

@@ -39,7 +39,10 @@ const mockDefaultChartOptions = {
     },
     axisPointer: {
       show: true,
-      label: {}
+      label: {},
+      lineStyle: {
+        type: 'solid'
+      }
     }
   },
   yAxis: {
@@ -182,8 +185,8 @@ const mockDefaultBarChartConfig = {
   yAxisIndex: 0,
   itemStyle: {
     color: hexToRgba(color, 0.2),
-    barBorderColor: color,
-    barBorderWidth: 1
+    borderColor: color,
+    borderWidth: 1
   },
   emphasis: {
     itemStyle: {

package/dist/utils/charts/theme.js

@@ -63,15 +63,14 @@ const axes = {
     margin: 8,
     show: true,
     color: gray600,
-    textStyle: {
-      color: gray600
-    }
+    hideOverlap: true
   },
   axisLine: {
     show: false
   },
   axisPointer: {
     lineStyle: {
+      type: 'solid',
       color: gray600
     },
     label: {
@@ -131,6 +130,7 @@ const createTheme = (options = {}) => ({
   dataZoom: {
     borderColor: 'transparent',
     filterMode: 'none',
+    brushSelect: false,
     dataBackground: {
       lineStyle: {
         width: 2,
@@ -139,14 +139,18 @@ const createTheme = (options = {}) => ({
       },
       // render unfilled zoom-graph if the series is a line chart without area styles
       // more details: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2364#note_666637306
-      areaStyle: isLineChartWithoutArea(options) ? null : {
+      areaStyle: isLineChartWithoutArea(options) ? {} // Use empty object instead of null, see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2185#note_707711029 for more context
+      : {
         color: gray50,
         opacity: 1
       }
     },
     fillerColor: hexToRgba(gray200, 0.23),
     handleIcon: scrollHandleSvgPath,
-    handleColor: gray500,
+    handleStyle: {
+      borderColor: 'transparent',
+      color: gray500
+    },
     handleSize: '50%',
     labelFormatter: () => null,
     textStyle: {
@@ -157,14 +161,16 @@ const createTheme = (options = {}) => ({
     top: '-5',
     left: 'center',
     itemSize: 14,
-    iconStyle: {
-      color: gray200,
-      borderWidth: 0,
-      emphasis: {
+    emphasis: {
+      iconStyle: {
         borderWidth: 0,
         color: gray700
       }
     },
+    iconStyle: {
+      color: gray200,
+      borderWidth: 0
+    },
     itemGap: 8,
     feature: {
       dataZoom: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.32.0",
+  "version": "32.35.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -61,7 +61,7 @@
     "bootstrap-vue": "2.20.1",
     "copy-to-clipboard": "^3.0.8",
     "dompurify": "^2.3.3",
-    "echarts": "^4.9.0",
+    "echarts": "^5.2.1",
     "highlight.js": "^10.6.0",
     "js-beautify": "^1.8.8",
     "lodash": "^4.17.20",
@@ -84,7 +84,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "9.4.0",
     "@gitlab/stylelint-config": "2.6.0",
-    "@gitlab/svgs": "1.218.0",
+    "@gitlab/svgs": "1.220.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/filtered_search/filtered_search_suggestion_list.spec.js

@@ -82,8 +82,8 @@ describe('Filtered search suggestion list component', () => {
       },
       template: `
         <div>
-          <gl-filtered-search-suggestion value="1">1</gl-filtered-search-suggestion>
-          <gl-filtered-search-suggestion value="2">2</gl-filtered-search-suggestion>
+          <gl-filtered-search-suggestion value="One">One</gl-filtered-search-suggestion>
+          <gl-filtered-search-suggestion value="Two">Two</gl-filtered-search-suggestion>
         </div>
       `,
     };
@@ -112,7 +112,7 @@ describe('Filtered search suggestion list component', () => {
     it('selects first suggestion', () => {
       wrapper.vm.nextItem();
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('1');
+        expect(wrapper.vm.getValue()).toBe('One');
       });
     });
 
@@ -120,7 +120,7 @@ describe('Filtered search suggestion list component', () => {
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('2');
+        expect(wrapper.vm.getValue()).toBe('Two');
       });
     });
 
@@ -146,7 +146,7 @@ describe('Filtered search suggestion list component', () => {
       wrapper.vm.prevItem();
       wrapper.vm.prevItem();
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('2');
+        expect(wrapper.vm.getValue()).toBe('Two');
       });
     });
 
@@ -156,14 +156,21 @@ describe('Filtered search suggestion list component', () => {
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('1');
+        expect(wrapper.vm.getValue()).toBe('One');
       });
     });
 
     it('highlights suggestion if initial-value is provided', () => {
-      wrapper.setProps({ initialValue: '2' });
+      wrapper.setProps({ initialValue: 'Two' });
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('2');
+        expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Two');
+      });
+    });
+
+    it('highlights suggestion if initial-value is provided, regardless of case sensitivity', async () => {
+      wrapper.setProps({ initialValue: 'two' });
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Two');
       });
     });
 

package/src/components/base/filtered_search/filtered_search_suggestion_list.vue

@@ -33,14 +33,23 @@ export default {
 
   watch: {
     initialValue(newValue) {
-      this.activeIdx = this.registeredItems.findIndex((item) => item.value === newValue);
+      this.activeIdx = this.registeredItems.findIndex((item) =>
+        this.valuesMatch(item.value, newValue)
+      );
     },
   },
 
   methods: {
+    valuesMatch(firstValue, secondValue) {
+      if (!firstValue || !secondValue) return false;
+
+      return typeof firstValue === 'string'
+        ? firstValue.toLowerCase() === secondValue.toLowerCase()
+        : firstValue === secondValue;
+    },
     register(item) {
       this.registeredItems.push(item);
-      if (item.value === this.initialValue) {
+      if (this.valuesMatch(item.value, this.initialValue)) {
         this.activeIdx = this.registeredItems.length - 1;
       }
     },

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

@@ -184,6 +184,9 @@ export default {
         xAxis: {
           axisPointer: {
             show: true,
+            lineStyle: {
+              type: 'solid',
+            },
             label: {
               formatter: this.onLabelChange,
             },

package/src/components/charts/bar/__snapshots__/bar.spec.js.snap

@@ -34,8 +34,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#5772ff",
-        "barBorderWidth": 1,
+        "borderColor": "#5772ff",
+        "borderWidth": 1,
         "color": "rgba(87, 114, 255, 0.2)",
       },
       "name": "Office",

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

@@ -112,8 +112,8 @@ export default {
           stack: 'chart',
           itemStyle: {
             color: hexToRgba(barColor, 0.2),
-            barBorderColor: barColor,
-            barBorderWidth: 1,
+            borderColor: barColor,
+            borderWidth: 1,
           },
           emphasis: {
             itemStyle: {

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import echarts from 'echarts';
+import * as echarts from 'echarts';
 import Chart from './chart.vue';
 import createTheme from '~/utils/charts/theme';
 
@@ -35,6 +35,8 @@ describe('chart component', () => {
       themeName,
       {
         renderer: wrapper.props().renderer,
+        width: 300,
+        height: 400,
       }
     );
   });

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

@@ -1,6 +1,6 @@
 <script>
-import echarts from 'echarts';
-import { defaultHeight, validRenderers } from '../../../utils/charts/config';
+import * as echarts from 'echarts';
+import { defaultHeight, defaultWidth, validRenderers } from '../../../utils/charts/config';
 import createTheme, { themeName } from '../../../utils/charts/theme';
 
 export default {
@@ -66,25 +66,27 @@ export default {
       echarts.registerTheme(themeName, createTheme(this.options));
     }
   },
-  mounted() {
-    /* eslint-disable promise/catch-or-return, promise/always-return */
-    this.$nextTick().then(() => {
-      this.chart = echarts.init(this.$refs.chart, this.disableTheme ? null : themeName, {
-        renderer: this.renderer,
-      });
-      if (this.groupId.length) {
-        this.chart.group = this.groupId;
-        echarts.connect(this.groupId);
-      }
-      this.chart.on('click', this.clickHandler);
-      /**
-       * Emitted after calling `echarts.init`
-       */
-      this.$emit('created', this.chart);
-      this.draw();
-      this.setChartSize();
+  async mounted() {
+    await this.$nextTick();
+
+    this.chart = echarts.init(this.$refs.chart, this.disableTheme ? null : themeName, {
+      renderer: this.renderer,
+      width: defaultWidth,
+      height: defaultHeight,
     });
-    /* eslint-enable */
+
+    if (this.groupId.length) {
+      this.chart.group = this.groupId;
+      echarts.connect(this.groupId);
+    }
+
+    this.chart.on('click', this.clickHandler);
+    /**
+     * Emitted after calling `echarts.init`
+     */
+    this.$emit('created', this.chart);
+    this.draw();
+    this.setChartSize();
   },
   beforeDestroy() {
     this.chart.off('click', this.clickHandler);

package/src/components/charts/column/__snapshots__/column_chart.spec.js.snap

@@ -50,8 +50,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#5772ff",
-        "barBorderWidth": 1,
+        "borderColor": "#5772ff",
+        "borderWidth": 1,
         "color": "rgba(87, 114, 255, 0.2)",
       },
       "name": "Full",
@@ -240,8 +240,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#5772ff",
-        "barBorderWidth": 1,
+        "borderColor": "#5772ff",
+        "borderWidth": 1,
         "color": "rgba(87, 114, 255, 0.2)",
       },
       "name": "Full",
@@ -271,8 +271,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#b24800",
-        "barBorderWidth": 1,
+        "borderColor": "#b24800",
+        "borderWidth": 1,
         "color": "rgba(178, 72, 0, 0.2)",
       },
       "name": "Secondary 1",

package/src/components/charts/legend/legend.vue

@@ -1,5 +1,5 @@
 <script>
-import echarts from 'echarts';
+import * as echarts from 'echarts';
 import { gray200 } from '../../../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
 import { defaultFontSize } from '../../../utils/charts/config';
 import {

package/src/components/charts/stacked_column/__snapshots__/stacked_column.spec.js.snap

@@ -34,8 +34,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#FFFHHH",
-        "barBorderWidth": 1,
+        "borderColor": "#FFFHHH",
+        "borderWidth": 1,
         "color": "rgba(255, undefined, undefined, 0.2)",
       },
       "name": "Fun 1",
@@ -78,8 +78,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#FFFJJJ",
-        "barBorderWidth": 1,
+        "borderColor": "#FFFJJJ",
+        "borderWidth": 1,
         "color": "rgba(255, undefined, undefined, 0.2)",
       },
       "name": "Fun 2",
@@ -122,8 +122,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#FFFIII",
-        "barBorderWidth": 1,
+        "borderColor": "#FFFIII",
+        "borderWidth": 1,
         "color": "rgba(255, undefined, undefined, 0.2)",
       },
       "name": "Fun 3",
@@ -166,8 +166,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#FFFKKK",
-        "barBorderWidth": 1,
+        "borderColor": "#FFFKKK",
+        "borderWidth": 1,
         "color": "rgba(255, undefined, undefined, 0.2)",
       },
       "name": "Fun 4",
@@ -290,8 +290,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#5772ff",
-        "barBorderWidth": 1,
+        "borderColor": "#5772ff",
+        "borderWidth": 1,
         "color": "rgba(87, 114, 255, 0.2)",
       },
       "name": "Fun 1",
@@ -334,8 +334,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#b24800",
-        "barBorderWidth": 1,
+        "borderColor": "#b24800",
+        "borderWidth": 1,
         "color": "rgba(178, 72, 0, 0.2)",
       },
       "name": "Fun 2",
@@ -378,8 +378,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#0094b6",
-        "barBorderWidth": 1,
+        "borderColor": "#0094b6",
+        "borderWidth": 1,
         "color": "rgba(0, 148, 182, 0.2)",
       },
       "name": "Fun 3",
@@ -422,8 +422,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#366800",
-        "barBorderWidth": 1,
+        "borderColor": "#366800",
+        "borderWidth": 1,
         "color": "rgba(54, 104, 0, 0.2)",
       },
       "name": "Fun 4",
@@ -651,8 +651,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#5772ff",
-        "barBorderWidth": 1,
+        "borderColor": "#5772ff",
+        "borderWidth": 1,
         "color": "rgba(87, 114, 255, 0.2)",
       },
       "name": "Fun 1",
@@ -695,8 +695,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#b24800",
-        "barBorderWidth": 1,
+        "borderColor": "#b24800",
+        "borderWidth": 1,
         "color": "rgba(178, 72, 0, 0.2)",
       },
       "name": "Fun 2",
@@ -739,8 +739,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#0094b6",
-        "barBorderWidth": 1,
+        "borderColor": "#0094b6",
+        "borderWidth": 1,
         "color": "rgba(0, 148, 182, 0.2)",
       },
       "name": "Fun 3",
@@ -783,8 +783,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#366800",
-        "barBorderWidth": 1,
+        "borderColor": "#366800",
+        "borderWidth": 1,
         "color": "rgba(54, 104, 0, 0.2)",
       },
       "name": "Fun 4",
@@ -827,8 +827,8 @@ Object {
         },
       },
       "itemStyle": Object {
-        "barBorderColor": "#950943",
-        "barBorderWidth": 1,
+        "borderColor": "#950943",
+        "borderWidth": 1,
         "color": "rgba(149, 9, 67, 0.2)",
       },
       "name": "Secondary 1",

package/src/components/charts/tooltip/tooltip.vue

@@ -1,5 +1,5 @@
 <script>
-import echarts from 'echarts';
+import * as echarts from 'echarts';
 import { uid } from '../../../utils/utils';
 import GlPopover from '../../base/popover/popover.vue';
 

package/src/components/utilities/truncate/truncate.documentation.js

@@ -12,5 +12,8 @@ export default {
       additionalInfo: 'Ellipsis position',
       enum: 'truncateOptions',
     },
+    withTooltip: {
+      additionalInfo: 'Display the full text in a tooltip only if it is being truncated',
+    },
   },
 };

package/src/components/utilities/truncate/truncate.spec.js

@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { POSITION } from './constants';
 import Truncate from './truncate.vue';
+import { createMockDirective, getBinding } from '~helpers/vue_mock_directive';
 
 const removeSpecialChar = (text) => {
   return text.replace(/‎|\u200E/gi, '');
@@ -18,6 +19,9 @@ describe('Truncate component', () => {
   const createComponent = (props) => {
     wrapper = shallowMount(Truncate, {
       propsData: { ...defaultProps, ...props },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
     });
   };
 
@@ -45,6 +49,10 @@ describe('Truncate component', () => {
     it('should have the default position', () => {
       expect(wrapper.props('position')).toBe('end');
     });
+
+    it('disables the tooltip by default', () => {
+      expect(getBinding(wrapper.element, 'gl-tooltip').value.disabled).toBe(true);
+    });
   });
 
   describe('start truncation', () => {

package/src/components/utilities/truncate/truncate.stories.js

@@ -1,4 +1,4 @@
-import { withKnobs, text, select } from '@storybook/addon-knobs';
+import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlTruncate } from '../../../../index';
 import { POSITION } from './constants';
@@ -8,11 +8,12 @@ const components = {
   GlTruncate,
 };
 
-const template = '<gl-truncate :text="text" :position="position" />';
+const template = '<gl-truncate :text="text" :position="position" :with-tooltip="withTooltip" />';
 
 function generateProps({
   longText = 'src/thisIs/AVeryLongFilePath/that/needs/to/be/smartly/truncated/from/the/middle/so/we/dont/lose/important/information/here.vue',
   position = 'middle',
+  withTooltip = false,
 } = {}) {
   return {
     text: {
@@ -23,6 +24,9 @@ function generateProps({
       type: String,
       default: select('position', Object.values(POSITION), position),
     },
+    withTooltip: {
+      default: boolean('withTooltip', withTooltip),
+    },
   };
 }