@gitlab/ui 32.66.0 → 33.0.1

package/dist/utils/utils.js

@@ -2,7 +2,11 @@ import { COMMA, labelColorOptions, focusableTags } from './constants';
 
 function debounceByAnimationFrame(fn) {
   let requestId;
-  return function debounced(...args) {
+  return function debounced() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     if (requestId) {
       window.cancelAnimationFrame(requestId);
     }
@@ -12,7 +16,11 @@ function debounceByAnimationFrame(fn) {
 }
 function throttle(fn) {
   let frameId = null;
-  return (...args) => {
+  return function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
     if (frameId) {
       return;
     }
@@ -34,7 +42,8 @@ function rgbFromString(color, sub) {
   const [r, g, b] = rgb.map(i => parseInt(i, 10));
   return [r, g, b];
 }
-function hexToRgba(hex, opacity = 1) {
+function hexToRgba(hex) {
+  let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   const [r, g, b] = rgbFromHex(hex);
   return `rgba(${r}, ${g}, ${b}, ${opacity})`;
 }
@@ -103,7 +112,9 @@ function isDev() {
  * @param {string} message message to print to the console
  */
 
-function logWarning(message = '') {
+function logWarning() {
+  let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+
   if (message.length && isDev()) {
     console.warn(message); // eslint-disable-line no-console
   }

package/dist/utils/validation_utils.js

@@ -1,5 +1,7 @@
 // Creates out of validation configurations from .documentation.js files and creates a readable string out of it
-const getValidationInfoText = (validation = {}) => {
+const getValidationInfoText = function () {
+  let validation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
   switch (validation.type) {
     case 'range':
       return `${validation.min}-${validation.max}`;

package/documentation/documented_stories.js

@@ -120,6 +120,8 @@ export const setupStorybookReadme = () =>
         'GlToast',
         'GlPaginatedList',
         'GlIntersectionObserver',
+        'GlInfiniteScroll',
+        'GlColumnChart',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.66.0",
+  "version": "33.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -41,7 +41,7 @@
     "test:unit:watch": "yarn test:unit --watch --notify",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
     "test:visual": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://localhost:9001 'jest ./tests/storyshots.spec.js'",
-    "test:visual:update": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://localhost:9001 'jest ./tests/storyshots.spec.js --updateSnapshot'",
+    "test:visual:update": "NODE_ENV=test IS_VISUAL_TEST=true JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 start-test http-get://localhost:9001 'jest ./tests/storyshots.spec.js --updateSnapshot'",
     "prettier": "prettier --check '**/*.{js,vue}'",
     "prettier:fix": "prettier --write '**/*.{js,vue}'",
     "eslint": "eslint --max-warnings 0 --ext .js,.vue .",
@@ -72,8 +72,8 @@
   },
   "peerDependencies": {
     "@gitlab/svgs": "^1.116.0 || ^2.0.0",
-    "emoji-regex": ">=10.0.0",
     "bootstrap": "4.5.3",
+    "emoji-regex": ">=10.0.0",
     "pikaday": "^1.8.0",
     "vue": "^2.6.10"
   },
@@ -85,20 +85,20 @@
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "10.0.1",
-    "@gitlab/stylelint-config": "2.6.0",
+    "@gitlab/stylelint-config": "3.0.0",
     "@gitlab/svgs": "2.2.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.13",
-    "@storybook/addon-docs": "6.4.13",
-    "@storybook/addon-essentials": "6.4.13",
+    "@storybook/addon-a11y": "6.4.14",
+    "@storybook/addon-docs": "6.4.14",
+    "@storybook/addon-essentials": "6.4.14",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.13",
-    "@storybook/addon-storyshots-puppeteer": "6.4.13",
-    "@storybook/addon-viewport": "6.4.13",
-    "@storybook/theming": "6.4.13",
-    "@storybook/vue": "6.4.13",
+    "@storybook/addon-storyshots": "6.4.14",
+    "@storybook/addon-storyshots-puppeteer": "6.4.14",
+    "@storybook/addon-viewport": "6.4.14",
+    "@storybook/theming": "6.4.14",
+    "@storybook/vue": "6.4.14",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",
@@ -145,8 +145,9 @@
     "sass-true": "^5.0.0",
     "start-server-and-test": "^1.10.6",
     "storybook-readme": "5.0.9",
+    "stylelint": "13.9.0",
     "stylelint-config-prettier": "9.0.3",
-    "stylelint-prettier": "1.2.0",
+    "stylelint-prettier": "2.0.0",
     "vue": "^2.6.11",
     "vue-jest": "4.0.0-rc.0",
     "vue-loader": "^15.8.3",

package/scss_to_js/scss_variables.js

@@ -16,6 +16,7 @@ export const glSpacingScale13 = '6rem'
 export const glSpacingScale15 = '7.5rem'
 export const glSpacingScale20 = '10rem'
 export const glSpacingScale26 = '13rem'
+export const glSpacingScale28 = '14rem'
 export const glSpacingScale62 = '31rem'
 export const breakpointSm = '576px'
 export const breakpointMd = '768px'

package/scss_to_js/scss_variables.json

@@ -90,6 +90,11 @@
       "value": "26 * $grid-size",
       "compiledValue": "13rem"
     },
+    {
+      "name": "$gl-spacing-scale-28",
+      "value": "28 * $grid-size",
+      "compiledValue": "14rem"
+    },
     {
       "name": "$gl-spacing-scale-62",
       "value": "62 * $grid-size",

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

@@ -1,44 +1,6 @@
-import examples from './examples';
 import description from './infinite_scroll.md';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  propsInfo: {
-    totalItems: {
-      additionalInfo: 'Total number of items available',
-    },
-    fetchedItems: {
-      additionalInfo: 'Numbers of items fetched before scrolling',
-    },
-    maxListHeight: {
-      additionalInfo: 'Max height of the list before the scrollbar appears',
-    },
-  },
-  events: [
-    {
-      event: '@topReached',
-      description: 'Emitted when item container is scrolled to the top',
-    },
-    {
-      event: '@bottomReached',
-      description: 'Emitted when item container is scrolled to the bottom',
-    },
-  ],
-  slots: [
-    {
-      name: 'default',
-      description: 'Footer of the list, appears below the items',
-    },
-    {
-      name: 'header',
-      description: 'Header of the list, appears above the items',
-    },
-
-    {
-      name: 'items',
-      description: 'List of items',
-    },
-  ],
 };

package/src/components/base/infinite_scroll/infinite_scroll.md

@@ -1,7 +1,3 @@
-# Infinite Scroll
-
-<!-- STORY -->
-
 ## Usage
 
 The infinite scroll component wraps around a results list and emits a message

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

@@ -1,14 +1,42 @@
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { setStoryTimeout } from '../../../utils/test_utils';
+import { GlInfiniteScroll } from '../../../../index';
 import readme from './infinite_scroll.md';
 
 const ITEMS_BATCH_SIZE = 20;
 
-documentedStoriesOf('base/infinite-scroll', readme).add('default', () => ({
+const template = `
+  <gl-infinite-scroll
+    :max-list-height="285"
+    :fetched-items="fetchedItems"
+    @bottomReached="bottomReached"
+    >
+    <template #items>
+      <ul class="list-group list-group-flushed list-unstyled">
+        <li v-for="item in fetchedItems" :key="item" class="list-group-item">Item #{{ item }}</li>
+      </ul>
+    </template>
+
+    <template #default>
+      <div class="gl-mt-3">
+        <gl-loading-icon v-if="isLoading" />
+        <span v-else>{{ fetchedItems }} items loaded</span>
+      </div>
+    </template>
+  </gl-infinite-scroll>
+`;
+
+const generateProps = ({ isLoading = false, fetchedItems = ITEMS_BATCH_SIZE } = {}) => ({
+  isLoading,
+  fetchedItems,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlInfiniteScroll,
+  },
+  props: Object.keys(argTypes),
   data() {
     return {
-      isLoading: false,
-      fetchedItems: ITEMS_BATCH_SIZE,
       loadTimer: null,
     };
   },
@@ -22,24 +50,21 @@ documentedStoriesOf('base/infinite-scroll', readme).add('default', () => ({
       }, 500);
     },
   },
-  template: `
-      <gl-infinite-scroll
-        :max-list-height="285"
-        :fetched-items="fetchedItems"
-        @bottomReached="bottomReached"
-      >
-        <template #items>
-          <ul class="list-group list-group-flushed list-unstyled">
-            <li v-for="item in fetchedItems" :key="item" class="list-group-item">Item #{{ item }}</li>
-          </ul>
-        </template>
+  template,
+});
 
-        <template #default>
-          <div class="gl-mt-3">
-            <gl-loading-icon v-if="isLoading" />
-            <span v-else>{{ fetchedItems }} items loaded</span>
-          </div>
-        </template>
-      </gl-infinite-scroll>
-    `,
-}));
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'base/infinite-scroll',
+  component: GlInfiniteScroll,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/base/infinite_scroll/infinite_scroll.vue

@@ -10,15 +10,24 @@ export const adjustScrollGap = 5;
 
 export default {
   props: {
+    /**
+     * Total number of items available
+     */
     totalItems: {
       type: Number,
       required: false,
       default: 0,
     },
+    /**
+     * Numbers of items fetched before scrolling
+     */
     fetchedItems: {
       type: Number,
       required: true,
     },
+    /**
+     * Max height of the list before the scrollbar appears
+     */
     maxListHeight: {
       type: Number,
       required: false,
@@ -111,9 +120,15 @@ export default {
     },
 
     topReached: throttle(function topReachedThrottled() {
+      /**
+       * Emitted when item container is scrolled to the top
+       */
       this.$emit('topReached');
     }, throttleDuration),
     bottomReached: throttle(function bottomReachedThrottled() {
+      /**
+       * Emitted when item container is scrolled to the bottom
+       */
       this.$emit('bottomReached');
     }, throttleDuration),
     itemsListHeight() {
@@ -135,6 +150,7 @@ export default {
 
 <template>
   <div>
+    <!-- @slot Header of the list, appears above the items -->
     <slot name="header"></slot>
     <div
       ref="infiniteContainer"
@@ -144,9 +160,11 @@ export default {
       @scroll="handleScroll"
       v-on="$listeners"
     >
+      <!-- @slot List of items -->
       <slot name="items"></slot>
     </div>
     <p class="gl-infinite-scroll-legend">
+      <!-- @slot Footer of the list, appears below the items -->
       <slot :fetched-items="fetchedItems" :total-items="totalItems">
         {{ legendText }}
       </slot>

package/src/components/base/search_box_by_click/search_box_by_click.scss

@@ -56,6 +56,10 @@
 
   .gl-search-box-by-click-input {
     @include gl-pr-7;
+
+    &::-webkit-search-cancel-button {
+      @include gl-display-none;
+    }
   }
 
   .gl-search-box-by-click-clear-button {

package/src/components/base/search_box_by_type/search_box_by_type.scss

@@ -27,6 +27,10 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
   @include gl-h-7;
   @include gl-pr-7;
   padding-left: $gl-search-box-by-type-input-padding;
+
+  &::-webkit-search-cancel-button {
+    @include gl-display-none;
+  }
 }
 
 .gl-search-box-by-type-right-icons {

package/src/components/charts/column/column.documentation.js

@@ -1,8 +1,3 @@
-import description from './column.md';
-import examples from './examples';
-
 export default {
   followsDesignSystem: true,
-  description,
-  examples,
 };

package/src/components/charts/column/column.stories.js

@@ -1,6 +1,4 @@
-import { withKnobs, object, text } from '@storybook/addon-knobs';
 import { GlColumnChart } from '../../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import {
   mockDefaultLineData,
   mockDefaultBarData,
@@ -8,11 +6,6 @@ import {
   mockSecondaryTrendlineData,
 } from '../../../utils/charts/mock_data';
 import { toolbox } from '../../../utils/charts/story_config';
-import readme from './column.md';
-
-const components = {
-  GlColumnChart,
-};
 
 const template = `
   <gl-column-chart
@@ -27,7 +20,7 @@ const template = `
   />
   `;
 
-function generateProps({
+const generateProps = ({
   bars = mockDefaultBarData,
   lines = [],
   option = {},
@@ -36,85 +29,65 @@ function generateProps({
   xAxisType = 'category',
   secondaryData = [],
   secondaryDataTitle = '',
-} = {}) {
-  return {
-    bars: {
-      default: object('Chart Data', bars),
-    },
-    lines: {
-      default: object('Line chart Data', lines),
-    },
-    secondaryData: {
-      default: object('Secondary Data', secondaryData),
-    },
-    option: {
-      default: object('Echart Options', option),
-    },
-    yAxisTitle: {
-      default: text('Y Axis Title', yAxisTitle),
-    },
-    secondaryDataTitle: {
-      default: text('Secondary Y Axis Title', secondaryDataTitle),
-    },
-    xAxisTitle: {
-      default: text('X Axis Title', xAxisTitle),
-    },
-    xAxisType: {
-      default: text('X Axis Type', xAxisType),
-    },
-  };
-}
+} = {}) => ({
+  bars,
+  lines,
+  option,
+  yAxisTitle,
+  xAxisTitle,
+  xAxisType,
+  secondaryData,
+  secondaryDataTitle,
+});
 
-documentedStoriesOf('charts/column-chart', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template,
-  }))
-  .add('with line series', () => ({
-    props: generateProps({ lines: mockDefaultLineData }),
-    components,
-    template,
-  }))
-  .add('with zoom and scroll', () => ({
-    props: generateProps({
-      option: {
-        dataZoom: [
-          {
-            type: 'slider',
-            startValue: 1,
-          },
-        ],
-      },
-    }),
-    components,
-    template,
-  }))
-  .add('with toolbox', () => ({
-    props: generateProps({
-      option: {
-        toolbox,
+const Template = (args, { argTypes }) => ({
+  components: { GlColumnChart },
+  props: Object.keys(argTypes),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const WithLineSeries = Template.bind({});
+WithLineSeries.args = generateProps({
+  lines: mockDefaultLineData,
+});
+
+export const WithZoomAndScroll = Template.bind({});
+WithZoomAndScroll.args = generateProps({
+  option: {
+    dataZoom: [
+      {
+        type: 'slider',
+        startValue: 1,
       },
-    }),
-    components,
-    template,
-  }))
-  .add('secondary Y axis', () => ({
-    props: generateProps({
-      legend: true,
-      secondaryData: mockSecondaryBarData,
-      secondaryDataTitle: 'New bar data',
-    }),
-    components,
-    template,
-  }))
-  .add('secondary Y axis line', () => ({
-    props: generateProps({
-      legend: true,
-      secondaryData: mockSecondaryTrendlineData,
-      secondaryDataTitle: 'New line data',
-    }),
-    components,
-    template,
-  }));
+    ],
+  },
+});
+
+export const WithToolbox = Template.bind({});
+WithToolbox.args = generateProps({
+  option: {
+    toolbox,
+  },
+});
+
+export const SecondaryYAxis = Template.bind({});
+SecondaryYAxis.args = generateProps({
+  legend: true,
+  secondaryData: mockSecondaryBarData,
+  secondaryDataTitle: 'New bar data',
+});
+
+export const SecondaryYAxisLine = Template.bind({});
+SecondaryYAxisLine.args = generateProps({
+  legend: true,
+  secondaryData: mockSecondaryTrendlineData,
+  secondaryDataTitle: 'New line data',
+});
+
+export default {
+  title: 'charts/column-chart',
+  component: GlColumnChart,
+};