@gitlab/ui 33.0.0 → 33.1.2

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": "33.0.0",
+  "version": "33.1.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -41,6 +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:minimal": "node ./bin/run_minimal_visual_tests.js",
     "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}'",
@@ -60,7 +61,7 @@
     "@babel/standalone": "^7.0.0",
     "bootstrap-vue": "2.20.1",
     "copy-to-clipboard": "^3.0.8",
-    "dompurify": "^2.3.4",
+    "dompurify": "^2.3.5",
     "echarts": "^5.2.1",
     "highlight.js": "^10.6.0",
     "iframe-resizer": "^4.3.2",
@@ -72,8 +73,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 +86,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",
@@ -113,6 +114,7 @@
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "file-loader": "^4.2.0",
+    "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
     "jest": "^26.6.3",
@@ -145,8 +147,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/src/components/base/accordion/accordion.vue

@@ -4,9 +4,12 @@ import { uniqueId } from 'lodash';
 export default {
   name: 'GlAccordion',
   provide() {
+    const accordionId = uniqueId('accordion-set-');
+    // temporary fix for this issue: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2019#note_514671251
+    // MR for the upstream pending: https://github.com/vuejs/apollo/pull/1153
     return {
-      defaultHeaderLevel: this.headerLevel,
-      accordionSetId: this.autoCollapse && uniqueId('accordion-set-'),
+      defaultHeaderLevel: () => this.headerLevel,
+      accordionSetId: () => this.autoCollapse && accordionId,
     };
   },
   props: {

package/src/components/base/accordion/accordion_item.spec.js

@@ -16,8 +16,8 @@ describe('GlAccordionItem', () => {
         GlCollapseToggle: GlCollapseToggleDirective,
       },
       provide: {
-        defaultHeaderLevel,
-        accordionSetId,
+        defaultHeaderLevel: () => defaultHeaderLevel,
+        accordionSetId: () => accordionSetId,
       },
       propsData: {
         title: defaultTitle,

package/src/components/base/accordion/accordion_item.stories.js

@@ -26,8 +26,8 @@ const Template = (args) => ({
   props: Object.keys(args),
   template,
   provide: {
-    defaultHeaderLevel: defaultValue('headerLevel'),
-    accordionSetId: '1',
+    defaultHeaderLevel: () => defaultValue('headerLevel'),
+    accordionSetId: () => '1',
   },
 });
 

package/src/components/base/accordion/accordion_item.vue

@@ -51,11 +51,11 @@ When set, it will ensure the accordion item is initially visible
   },
   computed: {
     headerComponent() {
-      const level = this.headerLevel || this.defaultHeaderLevel;
+      const level = this.headerLevel || this.defaultHeaderLevel();
       return `h${level}`;
     },
     accordion() {
-      return this.accordionSetId || undefined;
+      return this.accordionSetId() || undefined;
     },
     icon() {
       return this.isVisible ? 'chevron-down' : 'chevron-right';

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/popover/popover.scss

@@ -67,11 +67,6 @@ $gl-popover-max-width: $grid-size * 35;
     @include gl-font-sm;
     @include gl-font-weight-bold;
     @include gl-m-0;
-
-    .gl-button.close {
-      margin-top: -$gl-spacing-scale-3;
-      margin-right: -$gl-spacing-scale-4;
-    }
   }
 
   .popover-body {

package/src/components/base/popover/popover.spec.js

@@ -5,16 +5,18 @@ import GlPopover from './popover.vue';
 describe('GlPopover', () => {
   let wrapper;
 
-  const createWrapper = (props) => {
+  const createWrapper = (props, stubs = {}) => {
     wrapper = shallowMount(GlPopover, {
       propsData: {
         target: document.body,
         ...props,
       },
+      stubs,
     });
   };
 
   const findBVPopover = () => wrapper.findComponent({ ref: 'bPopover' });
+  const findCloseButton = () => findBVPopover().find('[data-testid="close-button"]');
 
   it.each(tooltipActionEvents)('passes through the %s event to the bvPopover instance', (event) => {
     createWrapper();
@@ -46,4 +48,43 @@ describe('GlPopover', () => {
       expect(findBVPopover().props('title')).toBe(title);
     });
   });
+
+  describe('close button', () => {
+    let doCloseMock;
+
+    beforeEach(() => {
+      doCloseMock = jest.fn();
+      createWrapper(
+        { showCloseButton: true },
+        {
+          BPopover: {
+            template: `
+              <div>
+                <slot name="title" />
+              </div>
+            `,
+            methods: {
+              doClose: doCloseMock,
+            },
+          },
+        }
+      );
+    });
+
+    it('renders a close button', () => {
+      expect(findCloseButton().exists()).toBe(true);
+    });
+
+    it("calls BPopover's doClose method when clicking on the close button", () => {
+      findCloseButton().vm.$emit('click');
+
+      expect(doCloseMock).toHaveBeenCalled();
+    });
+
+    it('emits close-button-clicked event when clicking on the close button', () => {
+      findCloseButton().vm.$emit('click');
+
+      expect(wrapper.emitted('close-button-clicked')).toHaveLength(1);
+    });
+  });
 });

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

@@ -60,6 +60,24 @@ documentedStoriesOf('base/popover', '')
     template,
     props: generateProps(),
   }))
+  .add('with close button', () => ({
+    template: `
+      <div class="gl-display-flex gl-justify-content-center gl-p-6">
+        <gl-button id="pop-with-close-button">{{placement}}</gl-button>
+        <gl-popover
+          target="pop-with-close-button"
+          data-testid="popover-with-close-button"
+          triggers="hover focus"
+          :title="title"
+          :placement="placement"
+          content="${contentString}"
+          show
+          show-close-button
+          />
+      </div>
+    `,
+    props: generateProps(),
+  }))
   .add(
     'on click',
     () => ({

package/src/components/base/popover/popover.vue

@@ -1,12 +1,14 @@
 <script>
 import { BPopover } from 'bootstrap-vue';
 import tooltipMixin from '../../mixins/tooltip_mixin';
+import CloseButton from '../../shared_components/close_button/close_button.vue';
 
 const popoverRefName = 'bPopover';
 
 export default {
   components: {
     BPopover,
+    CloseButton,
   },
   mixins: [tooltipMixin(popoverRefName)],
   inheritAttrs: false,
@@ -21,11 +23,30 @@ export default {
       required: false,
       default: 'hover focus',
     },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showCloseButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     customClass() {
       return ['gl-popover', ...this.cssClasses].join(' ');
     },
+    shouldShowTitle() {
+      return this.$scopedSlots.title || this.title || this.showCloseButton;
+    },
+  },
+  methods: {
+    close(e) {
+      this.$refs[popoverRefName].doClose();
+      this.$emit('close-button-clicked', e);
+    },
   },
   popoverRefName,
 };
@@ -36,11 +57,20 @@ export default {
     :ref="$options.popoverRefName"
     :custom-class="customClass"
     :triggers="triggers"
+    :title="title"
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <template v-if="$scopedSlots.title" #title>
-      <slot name="title"></slot>
+    <template v-if="shouldShowTitle" #title>
+      <slot name="title">
+        {{ title }}
+      </slot>
+      <close-button
+        v-if="showCloseButton"
+        class="gl-float-right gl-mt-n2 gl-mr-n3"
+        data-testid="close-button"
+        @click="close"
+      />
     </template>
     <slot></slot>
   </b-popover>

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,
 };