@gitlab/ui 32.14.0 → 32.18.0

package/documentation/documented_stories.js

@@ -83,6 +83,7 @@ export const setupStorybookReadme = () =>
         'GlPath',
         'GlFriendlyWrap',
         'GlLoadingIcon',
+        'GlDeprecatedSkeletonLoading',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.14.0",
+  "version": "32.18.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@babel/standalone": "^7.0.0",
-    "bootstrap-vue": "2.18.1",
+    "bootstrap-vue": "2.19.0",
     "copy-to-clipboard": "^3.0.8",
     "dompurify": "^2.3.3",
     "echarts": "^4.9.0",
@@ -88,15 +88,15 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.3.6",
-    "@storybook/addon-docs": "6.3.6",
-    "@storybook/addon-essentials": "6.3.6",
-    "@storybook/addon-knobs": "6.2.9",
-    "@storybook/addon-storyshots": "6.3.6",
-    "@storybook/addon-storyshots-puppeteer": "6.3.6",
-    "@storybook/addon-viewport": "6.3.6",
-    "@storybook/theming": "6.3.6",
-    "@storybook/vue": "6.3.6",
+    "@storybook/addon-a11y": "6.3.9",
+    "@storybook/addon-docs": "6.3.9",
+    "@storybook/addon-essentials": "6.3.9",
+    "@storybook/addon-knobs": "6.3.1",
+    "@storybook/addon-storyshots": "6.3.9",
+    "@storybook/addon-storyshots-puppeteer": "6.3.9",
+    "@storybook/addon-viewport": "6.3.9",
+    "@storybook/theming": "6.3.9",
+    "@storybook/vue": "6.3.9",
     "@vue/test-utils": "1.1.3",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",

package/src/components/base/datepicker/datepicker.scss

@@ -72,6 +72,15 @@ $gl-datepicker-width: $grid-size * 30;
     @include gl-bg-size-100p;
     @include gl-w-5;
     @include gl-h-5;
+
+    &:hover {
+      @include gl-rounded-small;
+      @include gl-bg-gray-50;
+    }
+
+    &.is-disabled {
+      @include gl-cursor-not-allowed;
+    }
   }
 
   .pika-next {
@@ -84,8 +93,12 @@ $gl-datepicker-width: $grid-size * 30;
 
   .pika-label {
     @include gl-font-base;
-    @include gl-line-height-normal;
     @include gl-py-0;
+
+    &:hover {
+      @include gl-rounded-small;
+      @include gl-bg-gray-50;
+    }
   }
 
   .pika-select {

package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.spec.js

@@ -257,8 +257,8 @@ describe('GlFormCheckboxTree', () => {
         expect(toggleAllCheckbox.element.indeterminate).toBe(indeterminate);
       });
 
-      it('once toggled, puts all checkboxes in the correct state', () => {
-        toggleAllCheckbox.trigger('click');
+      it('once toggled, puts all checkboxes in the correct state', async () => {
+        await toggleAllCheckbox.trigger('click');
         return wrapper.vm.$nextTick(() => {
           findCheckboxes().wrappers.forEach((checkbox) => {
             expect(findCheckboxInput(checkbox).element.checked).toBe(finallyChecked);

package/src/components/base/skeleton_loading/skeleton_loading.documentation.js

@@ -1,16 +1,5 @@
-import examples from './examples';
 import description from './skeleton_loading.md';
 
 export default {
   description,
-  examples,
-  propsInfo: {
-    lines: {
-      validation: {
-        type: 'range',
-        min: 1,
-        max: 3,
-      },
-    },
-  },
 };

package/src/components/base/skeleton_loading/skeleton_loading.md

@@ -1,5 +1,3 @@
-# (Deprecated) Skeleton Loading
-
 The Skeleton Loading component has been deprecated, please use [Skeleton Loader](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-skeleton-loader--default).
 
 How to replace this component with [Skeleton Loader](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-skeleton-loader--default):

package/src/components/base/skeleton_loading/skeleton_loading.stories.js

@@ -1,5 +1,3 @@
-import { withKnobs, number } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlDeprecatedSkeletonLoading } from '../../../../index';
 import readme from './skeleton_loading.md';
 
@@ -11,22 +9,36 @@ const template = '<gl-deprecated-skeleton-loading :lines="lines" />';
 
 function generateProps() {
   return {
-    lines: {
-      type: Number,
-      default: number('lines', 3, {
-        range: true,
-        min: 1,
-        max: 3,
-        step: 1,
-      }),
-    },
+    lines: 3,
   };
 }
 
-documentedStoriesOf('base/skeleton-loading', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template,
-  }));
+const Template = (args) => ({
+  components,
+  props: Object.keys(args),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'base/skeleton loading',
+  component: GlDeprecatedSkeletonLoading,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+    knobs: { disable: true },
+  },
+  argTypes: {
+    lines: {
+      control: {
+        type: 'select',
+        options: [1, 2, 3],
+      },
+    },
+  },
+};

package/src/components/base/skeleton_loading/skeleton_loading.vue

@@ -1,6 +1,9 @@
 <script>
 export default {
   props: {
+    /**
+     * Controls the number of lines.
+     */
     lines: {
       type: Number,
       required: false,

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

@@ -1,5 +1,261 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`stacked column chart component color palette custom palette matches the snapshot 1`] = `
+Object {
+  "grid": Object {
+    "bottom": 44,
+    "left": 64,
+    "right": 32,
+    "top": 16,
+  },
+  "legend": Object {
+    "show": false,
+  },
+  "series": Array [
+    Object {
+      "barMaxWidth": "50%",
+      "data": Array [
+        58,
+        49,
+        38,
+        23,
+        27,
+        68,
+        38,
+        35,
+        7,
+        64,
+        65,
+        31,
+      ],
+      "emphasis": Object {
+        "itemStyle": Object {
+          "color": "rgba(255, undefined, undefined, 0.4)",
+        },
+      },
+      "itemStyle": Object {
+        "barBorderColor": "#FFFHHH",
+        "barBorderWidth": 1,
+        "color": "rgba(255, undefined, undefined, 0.2)",
+      },
+      "name": "Fun 1",
+      "stack": Array [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ],
+      "type": "bar",
+      "yAxisIndex": 0,
+    },
+    Object {
+      "barMaxWidth": "50%",
+      "data": Array [
+        8,
+        6,
+        34,
+        19,
+        9,
+        7,
+        17,
+        25,
+        14,
+        7,
+        10,
+        32,
+      ],
+      "emphasis": Object {
+        "itemStyle": Object {
+          "color": "rgba(255, undefined, undefined, 0.4)",
+        },
+      },
+      "itemStyle": Object {
+        "barBorderColor": "#FFFJJJ",
+        "barBorderWidth": 1,
+        "color": "rgba(255, undefined, undefined, 0.2)",
+      },
+      "name": "Fun 2",
+      "stack": Array [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ],
+      "type": "bar",
+      "yAxisIndex": 0,
+    },
+    Object {
+      "barMaxWidth": "50%",
+      "data": Array [
+        67,
+        60,
+        66,
+        32,
+        61,
+        54,
+        13,
+        50,
+        16,
+        11,
+        47,
+        28,
+      ],
+      "emphasis": Object {
+        "itemStyle": Object {
+          "color": "rgba(255, undefined, undefined, 0.4)",
+        },
+      },
+      "itemStyle": Object {
+        "barBorderColor": "#FFFIII",
+        "barBorderWidth": 1,
+        "color": "rgba(255, undefined, undefined, 0.2)",
+      },
+      "name": "Fun 3",
+      "stack": Array [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ],
+      "type": "bar",
+      "yAxisIndex": 0,
+    },
+    Object {
+      "barMaxWidth": "50%",
+      "data": Array [
+        8,
+        9,
+        5,
+        40,
+        13,
+        19,
+        58,
+        21,
+        47,
+        59,
+        23,
+        46,
+      ],
+      "emphasis": Object {
+        "itemStyle": Object {
+          "color": "rgba(255, undefined, undefined, 0.4)",
+        },
+      },
+      "itemStyle": Object {
+        "barBorderColor": "#FFFKKK",
+        "barBorderWidth": 1,
+        "color": "rgba(255, undefined, undefined, 0.2)",
+      },
+      "name": "Fun 4",
+      "stack": Array [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ],
+      "type": "bar",
+      "yAxisIndex": 0,
+    },
+  ],
+  "xAxis": Object {
+    "axisLabel": Object {
+      "margin": 20,
+      "verticalAlign": "bottom",
+    },
+    "axisLine": Object {
+      "show": false,
+    },
+    "axisPointer": Object {
+      "label": Object {
+        "formatter": [Function],
+      },
+      "show": true,
+      "type": "none",
+    },
+    "boundaryGap": true,
+    "data": Array [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ],
+    "name": "January - December 2018",
+    "nameLocation": "center",
+    "splitLine": Object {
+      "show": false,
+    },
+    "type": "category",
+  },
+  "yAxis": Array [
+    Object {
+      "axisLabel": Object {
+        "formatter": [Function],
+      },
+      "axisTick": Object {
+        "show": false,
+      },
+      "name": "Commits",
+      "nameGap": 50,
+      "nameLocation": "center",
+      "type": "value",
+    },
+    Object {
+      "axisLabel": Object {
+        "formatter": [Function],
+      },
+      "axisTick": Object {
+        "show": false,
+      },
+      "name": "",
+      "nameGap": 50,
+      "nameLocation": "center",
+      "show": false,
+      "type": "value",
+    },
+  ],
+}
+`;
+
 exports[`stacked column chart component should correctly render the chart 1`] = `
 Object {
   "grid": Object {

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

@@ -7,6 +7,7 @@ import {
 } from '../../../utils/charts/mock_data';
 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';
@@ -73,6 +74,7 @@ describe('stacked column chart component', () => {
 
   afterEach(() => {
     wrapper.destroy();
+    jest.restoreAllMocks();
   });
 
   it('emits `created`, with the chart instance', () => {
@@ -85,6 +87,8 @@ describe('stacked column chart component', () => {
   });
 
   it('should correctly render the chart', () => {
+    createShallowWrapper();
+
     const chart = findChart();
 
     expect(chart.props('options')).toMatchSnapshot();
@@ -256,4 +260,42 @@ describe('stacked column chart component', () => {
       });
     });
   });
+
+  describe('color palette', () => {
+    let paletteSpy;
+
+    describe('default palette', () => {
+      beforeEach(() => {
+        paletteSpy = jest.spyOn(themeUtils, 'colorFromDefaultPalette');
+
+        createShallowWrapper();
+      });
+
+      it('calls colorFromDefaultPalette', () => {
+        expect(paletteSpy).toHaveBeenCalled();
+      });
+    });
+
+    describe('custom palette', () => {
+      beforeEach(() => {
+        paletteSpy = jest.spyOn(themeUtils, 'colorFromDefaultPalette');
+
+        createShallowWrapper({
+          props: {
+            customPalette: ['#FFFHHH', '#FFFJJJ', '#FFFIII', '#FFFKKK'],
+          },
+        });
+      });
+
+      it('does not call colorFromDefaultPalette', () => {
+        expect(paletteSpy).not.toHaveBeenCalled();
+      });
+
+      it('matches the snapshot', () => {
+        const chart = findChart();
+
+        expect(chart.props('options')).toMatchSnapshot();
+      });
+    });
+  });
 });

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

@@ -131,6 +131,11 @@ export default {
       required: false,
       default: null,
     },
+    customPalette: {
+      type: Array,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -152,21 +157,21 @@ export default {
     barSeries() {
       return this.bars.map(({ name, data }, index) => {
         const stack = this.presentation === 'stacked' ? this.groupBy : null;
-        const color = colorFromDefaultPalette(index);
+        const color = this.getColor(index);
         return generateBarSeries({ stack, name, data, color });
       });
     },
     lineSeries() {
       const offset = this.bars.length;
       return this.lines.map(({ name, data }, index) => {
-        const color = colorFromDefaultPalette(offset + index);
+        const color = this.getColor(offset + index);
         return generateLineSeries({ name, data, color });
       });
     },
     secondarySeries() {
       const offset = this.bars.length + this.lines.length;
       return this.secondaryData.map(({ name, data, type, stack = columnOptions.tiled }, index) => {
-        const color = colorFromDefaultPalette(offset + index);
+        const color = this.getColor(offset + index);
         return type === CHART_TYPE_LINE
           ? generateLineSeries({ color, name, data, yAxisIndex: 1 })
           : generateBarSeries({ color, name, data, yAxisIndex: 1, stack });
@@ -235,7 +240,7 @@ export default {
         acc.push({
           name: series.name,
           type: series.type,
-          color: colorFromDefaultPalette(index),
+          color: this.getColor(index),
           data: series.data.map((data) => data),
           yAxisIndex: series.yAxisIndex,
         });
@@ -248,6 +253,9 @@ export default {
     this.chart.getDom().removeEventListener('mouseout', this.debouncedMoveShowTooltip);
   },
   methods: {
+    getColor(index) {
+      return this.customPalette ? this.customPalette?.[index] : colorFromDefaultPalette(index);
+    },
     moveShowTooltip(mouseEvent) {
       this.tooltipPosition = {
         left: `${mouseEvent.zrX}px`,
@@ -264,12 +272,10 @@ export default {
     defaultFormatTooltipText(params) {
       const { tooltipContent } = params.seriesData.reverse().reduce(
         (acc, bar) => {
-          const barColor = colorFromDefaultPalette(bar.seriesIndex);
-
           acc.tooltipContent[bar.seriesName] = {
             value: bar.value,
             index: bar.seriesIndex,
-            color: barColor,
+            color: this.getColor(bar.seriesIndex),
           };
 
           return acc;

package/dist/components/base/skeleton_loading/examples/index.js

@@ -1,19 +0,0 @@
-import SkeletonLoadingBasicExample from './skeleton_loading.basic.example';
-import SkeletonLoadingOneLineExample from './skeleton_loading.one_line.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'skeleton-loader-basic',
-    name: 'Basic',
-    description: 'Basic Skeleton Loader',
-    component: SkeletonLoadingBasicExample
-  }, {
-    id: 'skeleton-loader-single-line',
-    name: 'One Line',
-    description: 'Skeleton Loader with one line',
-    component: SkeletonLoadingOneLineExample
-  }]
-}];
-
-export default index;

package/dist/components/base/skeleton_loading/examples/skeleton_loading.basic.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-deprecated-skeleton-loading')};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/skeleton_loading/examples/skeleton_loading.one_line.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-deprecated-skeleton-loading',{attrs:{"lines":1}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;