@gitlab/ui 32.40.0 → 32.41.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [32.41.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.40.0...v32.41.0) (2021-11-23)
+
+
+### Features
+
+* **SearchBoxBy*:** add type search to improve on accessibility ([8d77905](https://gitlab.com/gitlab-org/gitlab-ui/commit/8d779051a8028aad12bbc39ccaa335d10637a225))
+
 # [32.40.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.39.0...v32.40.0) (2021-11-22)
 
 

package/dist/components/base/search_box_by_click/search_box_by_click.js

@@ -95,6 +95,7 @@ var script = {
   computed: {
     inputAttributes() {
       const attributes = {
+        type: 'search',
         placeholder: this.placeholder,
         ...this.$attrs
       };

package/dist/components/base/search_box_by_type/search_box_by_type.js

@@ -47,7 +47,7 @@ var script = {
   computed: {
     inputAttributes() {
       const attributes = {
-        type: 'text',
+        type: 'search',
         placeholder: 'Search',
         ...this.$attrs
       };

package/dist/components/charts/column/column.js

@@ -219,7 +219,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left}},[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")]),_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})],1):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")])]},proxy:true}],null,false,643259221)},[_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})],1):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.40.0",
+  "version": "32.41.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -94,6 +94,7 @@ export default {
   computed: {
     inputAttributes() {
       const attributes = {
+        type: 'search',
         placeholder: this.placeholder,
         ...this.$attrs,
       };

package/src/components/base/search_box_by_type/search_box_by_type.vue

@@ -49,7 +49,7 @@ export default {
   computed: {
     inputAttributes() {
       const attributes = {
-        type: 'text',
+        type: 'search',
         placeholder: 'Search',
         ...this.$attrs,
       };

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

@@ -207,8 +207,9 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
-      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-      <div slot="title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
+      <template #title>
+        <div>{{ tooltipTitle }} ({{ xAxisTitle }})</div>
+      </template>
       <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
   </div>

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

@@ -6,6 +6,13 @@ import {
 } from '../../../utils/charts/mock_data';
 import Chart from '../chart/chart.vue';
 import ColumnChart from './column.vue';
+import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+
+let mockChartInstance;
+
+jest.mock('echarts', () => ({
+  getInstanceByDom: () => mockChartInstance,
+}));
 
 describe('column chart component', () => {
   const defaultChartProps = {
@@ -16,35 +23,32 @@ describe('column chart component', () => {
   };
   let wrapper;
 
-  const TooltipStub = {
-    name: 'chart-tooltip',
-    template: '<div />',
-  };
-
   const chartItemClickedSpy = jest.fn();
   const findChart = () => wrapper.findComponent(Chart);
+  const findTooltip = () => wrapper.findComponent(ChartTooltipStub);
+  const getChartOptions = () => findChart().props('options');
 
-  const factory = (props = defaultChartProps) => {
+  const factory = (props = defaultChartProps, slots) => {
     wrapper = shallowMount(ColumnChart, {
       propsData: { ...props },
       stubs: {
-        chart: true,
-        'chart-tooltip': TooltipStub,
+        'chart-tooltip': ChartTooltipStub,
       },
       listeners: {
         chartItemClicked: chartItemClickedSpy,
       },
+      data() {
+        return {
+          chart: mockChartInstance,
+        };
+      },
+      slots,
     });
-    const chart = {
-      getDom: jest.fn(() => ({
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-      })),
-    };
-    wrapper.setData({ chart });
   };
 
   beforeEach(() => {
+    mockChartInstance = createMockChartInstance();
+
     factory();
   });
 
@@ -104,4 +108,20 @@ describe('column chart component', () => {
       expect(chart.props('options').yAxis[1].name).toEqual(secondaryDataTitle);
     });
   });
+
+  describe('tooltip', () => {
+    it('displays the generic tooltip content', async () => {
+      const params = {
+        seriesData: [{ seriesIndex: '0', seriesName: 'Full', value: ['Mary', 934] }],
+      };
+
+      getChartOptions().xAxis.axisPointer.label.formatter(params);
+
+      await wrapper.vm.$nextTick();
+
+      const expectedTooltipTitle = `${params.seriesData[0].value[0]} (${defaultChartProps.xAxisTitle})`;
+
+      expect(findTooltip().text()).toContain(expectedTooltipTitle);
+    });
+  });
 });

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

@@ -9,9 +9,9 @@ import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
 import * as themeUtils from '../../../utils/charts/theme';
 import StackedColumnChart from './stacked_column.vue';
-import ChartTooltip from '~/components/charts/tooltip/tooltip.vue';
 import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
 
+import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
 import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
 
 let mockChartInstance;
@@ -29,18 +29,8 @@ const defaultChartProps = {
   yAxisTitle: 'Commits',
 };
 
-const ChartTooltipStub = {
-  props: ChartTooltip.props,
-  template: `
-     <div>
-       <slot name="title" />
-       <slot />
-     </div>`,
-};
-
 describe('stacked column chart component', () => {
   let wrapper;
-  let options;
 
   const findChart = () => wrapper.findComponent(Chart);
   const findLegend = () => wrapper.findComponent(ChartLegend);
@@ -62,24 +52,7 @@ describe('stacked column chart component', () => {
   };
 
   beforeEach(() => {
-    options = {
-      series: [],
-    };
-
-    mockChartInstance = {
-      getDom: () => {
-        return {
-          addEventListener: jest.fn(),
-          removeEventListener: jest.fn(),
-        };
-      },
-      on: jest.fn(),
-      off: jest.fn(),
-      convertToPixel: jest.fn(),
-      getOption: () => {
-        return options;
-      },
-    };
+    mockChartInstance = createMockChartInstance();
   });
 
   afterEach(() => {