@gitlab/ui 32.33.0 → 32.36.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.33.0",
+  "version": "32.36.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.219.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/scss/utilities.scss

@@ -4201,6 +4201,18 @@
   }
 }
 
+.gl-lg-w-1px {
+  @media (min-width: $breakpoint-lg) {
+    width: 1px;
+  }
+}
+
+.gl-lg-w-1px\! {
+  @media (min-width: $breakpoint-lg) {
+    width: 1px !important;
+  }
+}
+
 .gl-md-w-50p {
   @include gl-media-breakpoint-up(md) {
     width: 50%;
@@ -4352,6 +4364,18 @@
     max-width: 30% !important;
   }
 }
+
+.gl-md-max-w-50p {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 50%;
+  }
+}
+
+.gl-md-max-w-50p\! {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 50% !important;
+  }
+}
 .gl-p-0 {
   padding: 0;
 }

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

@@ -212,6 +212,12 @@
   }
 }
 
+@mixin gl-lg-w-1px {
+  @media (min-width: $breakpoint-lg) {
+    width: 1px;
+  }
+}
+
 @mixin gl-md-w-50p {
   @include gl-media-breakpoint-up(md) {
     width: 50%;
@@ -302,3 +308,9 @@
     max-width: 30%;
   }
 }
+
+@mixin gl-md-max-w-50p {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 50%;
+  }
+}

package/src/utils/charts/config.js

@@ -12,6 +12,7 @@ import { ANNOTATIONS_SERIES_NAME, arrowSymbol, CHART_TYPE_BAR, CHART_TYPE_LINE }
 export const defaultAreaOpacity = 0.2;
 export const defaultFontSize = 12;
 export const defaultHeight = 400;
+export const defaultWidth = 300;
 export const validRenderers = ['canvas', 'svg'];
 
 export const axes = {
@@ -433,8 +434,8 @@ export const generateBarSeries = ({
   yAxisIndex,
   itemStyle: {
     color: hexToRgba(color, 0.2),
-    barBorderColor: color,
-    barBorderWidth: 1,
+    borderColor: color,
+    borderWidth: 1,
   },
   emphasis: {
     itemStyle: {

package/src/utils/charts/mock_data.js

@@ -43,6 +43,9 @@ export const mockDefaultChartOptions = {
     axisPointer: {
       show: true,
       label: {},
+      lineStyle: {
+        type: 'solid',
+      },
     },
   },
   yAxis: {
@@ -204,8 +207,8 @@ export const mockDefaultBarChartConfig = {
   yAxisIndex: 0,
   itemStyle: {
     color: hexToRgba(color, 0.2),
-    barBorderColor: color,
-    barBorderWidth: 1,
+    borderColor: color,
+    borderWidth: 1,
   },
   emphasis: {
     itemStyle: {