@gitlab/ui 38.0.1 → 38.1.0

package/dist/components/base/filtered_search/filtered_search_token.js

@@ -17,6 +17,7 @@ const DEFAULT_OPERATORS = [{
   description: 'is not'
 }];
 var script = {
+  name: 'GlFilteredSearchToken',
   components: {
     GlToken,
     GlFilteredSearchTokenSegment
@@ -28,11 +29,19 @@ var script = {
       required: false,
       default: () => []
     },
+
+    /**
+     * Token configuration with available operators and options.
+     */
     config: {
       type: Object,
       required: false,
       default: () => ({})
     },
+
+    /**
+     * Determines if the token is being edited or not.
+     */
     active: {
       type: Boolean,
       required: false,
@@ -43,6 +52,10 @@ var script = {
       required: false,
       default: () => []
     },
+
+    /**
+     * Current token value.
+     */
     value: {
       type: Object,
       required: false,
@@ -51,6 +64,10 @@ var script = {
         data: ''
       })
     },
+
+    /**
+     * Display operators' descriptions instead of their values (e.g., "is" instead of "=").
+     */
     showFriendlyText: {
       type: Boolean,
       required: false,
@@ -95,6 +112,12 @@ var script = {
       deep: true,
 
       handler(newValue) {
+        /**
+         * Emitted when the token changes its value.
+         *
+         * @event input
+         * @type {object} dataObj Object containing the update value.
+         */
         this.$emit('input', newValue);
       }
 
@@ -109,6 +132,12 @@ var script = {
           }
         } else if (this.value.data === '') {
           this.activeSegment = null;
+          /**
+           * Emitted when token is about to be destroyed.
+           *
+           * @event destroy
+           */
+
           this.$emit('destroy');
         }
       }
@@ -137,6 +166,11 @@ var script = {
       this.activeSegment = segment;
 
       if (!this.active) {
+        /**
+         * Emitted when this term token is clicked.
+         *
+         * @event activate
+         */
         this.$emit('activate');
       }
     },
@@ -153,6 +187,10 @@ var script = {
 
     replaceWithTermIfEmpty() {
       if (this.value.operator === '' && this.value.data === '') {
+        /**
+         * Emitted when this token is converted to another type
+         * @property {object} token Replacement token configuration
+         */
         this.$emit('replace', {
           type: TERM_TOKEN_TYPE,
           value: {
@@ -167,6 +205,11 @@ var script = {
 
       if (newTokenConfig === this.config) {
         this.$nextTick(() => {
+          /**
+           * Emitted when this term token will lose its focus.
+           *
+           * @event deactivate
+           */
           this.$emit('deactivate');
         });
         return;
@@ -230,6 +273,12 @@ var script = {
           data: this.multiSelectValues.join(COMMA)
         });
       }
+      /**
+       * Emitted when the token entry has been completed.
+       *
+       * @event complete
+       */
+
 
       this.$emit('complete');
     },

package/dist/components/base/filtered_search/filtered_search_token_segment.documentation.js

@@ -1,4 +1,4 @@
-var filtered_search_token_segment = "# Filtered Search Token Segment\n\nThe filtered search token segment is a component for managing token input either via free typing\nor by selecting item through dropdown list\n\n## Usage\n\nThis component is internal and is not intended to be used by `@gitlab/ui` users.\n\n## Internet Explorer 11\n\nThis component uses [`String.prototype.startsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)\nand [`String.prototype.endsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith)\nunder the hood. Make sure those methods are polyfilled if you plan on using the component on IE11.\n\n> NOTE: These methods are already polyfilled in GitLab: [`app/assets/javascripts/commons/polyfills.js#L15-16`](https://gitlab.com/gitlab-org/gitlab/blob/dc60dee6ed6234dda9f032195577cd8fad9646d8/app/assets/javascripts/commons/polyfills.js#L15-16)\n";
+var filtered_search_token_segment = "The filtered search token segment is a component for managing token input either via free typing\nor by selecting item through dropdown list\n\n## Usage\n\nThis component is internal and is not intended to be used by `@gitlab/ui` users.\n\n## Internet Explorer 11\n\nThis component uses [`String.prototype.startsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)\nand [`String.prototype.endsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith)\nunder the hood. Make sure those methods are polyfilled if you plan on using the component on IE11.\n\n> NOTE: These methods are already polyfilled in GitLab: [`app/assets/javascripts/commons/polyfills.js#L15-16`](https://gitlab.com/gitlab-org/gitlab/blob/dc60dee6ed6234dda9f032195577cd8fad9646d8/app/assets/javascripts/commons/polyfills.js#L15-16)\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6,51 +6,7 @@ var description = /*#__PURE__*/Object.freeze({
 });
 
 var filtered_search_token_segment_documentation = {
-  description,
-  bootstrapComponent: null,
-  propsInfo: {
-    active: {
-      additionalInfo: 'If this term token is currently active'
-    },
-    options: {
-      additionalInfo: ''
-    },
-    optionTextField: {
-      additionalInfo: ''
-    },
-    customInputKeydownHandler: {
-      additionalInfo: ''
-    },
-    value: {
-      additionalInfo: 'Current term value'
-    },
-    searchInputAttributes: {
-      additionalInfo: 'HTML attributes to add to the search input'
-    },
-    isLastToken: {
-      additionalInfo: 'If this is the last token'
-    }
-  },
-  events: [{
-    event: 'activate',
-    description: 'Emitted on mousedown event on the main component'
-  }, {
-    event: 'backspace',
-    description: 'Emitted when Backspace is pressed and the value is empty'
-  }, {
-    event: 'complete',
-    description: 'Emitted when suggestion is selected from the suggestion list'
-  }, {
-    event: 'submit',
-    description: 'Emitted when Enter is pressed and no suggestion is selected'
-  }, {
-    event: 'split',
-    args: [{
-      arg: 'newStrings',
-      description: '(Array of strings) New strings to be converted into term tokens'
-    }],
-    description: 'Emitted when Space appears in token segment value'
-  }]
+  description
 };
 
 export default filtered_search_token_segment_documentation;

package/dist/components/base/filtered_search/filtered_search_token_segment.js

@@ -7,6 +7,7 @@ import { splitOnQuotes, wrapTokenInQuotes } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
+  name: 'GlFilteredSearchTokenSegment',
   components: {
     Portal,
     GlFilteredSearchSuggestionList,
@@ -15,6 +16,9 @@ var script = {
   inject: ['portalName', 'alignSuggestions'],
   inheritAttrs: false,
   props: {
+    /**
+     * If this token segment is currently being edited.
+     */
     active: {
       type: Boolean,
       required: false,
@@ -45,15 +49,27 @@ var script = {
       required: false,
       default: () => () => false
     },
+
+    /**
+     * Current term value
+     */
     value: {
       required: true,
       validator: () => true
     },
+
+    /**
+     * HTML attributes to add to the search input
+     */
     searchInputAttributes: {
       type: Object,
       required: false,
       default: () => ({})
     },
+
+    /**
+     * If this is the last token
+     */
     isLastToken: {
       type: Boolean,
       required: false,
@@ -91,6 +107,11 @@ var script = {
       set(v) {
         var _this$getMatchingOpti, _this$getMatchingOpti2;
 
+        /**
+         * Emitted when this token segment's value changes.
+         *
+         * @type {object} option The current option.
+         */
         this.$emit('input', (_this$getMatchingOpti = (_this$getMatchingOpti2 = this.getMatchingOptionForInputValue(v)) === null || _this$getMatchingOpti2 === void 0 ? void 0 : _this$getMatchingOpti2.value) !== null && _this$getMatchingOpti !== void 0 ? _this$getMatchingOpti : v);
       }
 
@@ -152,6 +173,10 @@ var script = {
       this.$emit('input', (_this$getMatchingOpti3 = (_this$getMatchingOpti4 = this.getMatchingOptionForInputValue(firstWord)) === null || _this$getMatchingOpti4 === void 0 ? void 0 : _this$getMatchingOpti4.value) !== null && _this$getMatchingOpti3 !== void 0 ? _this$getMatchingOpti3 : firstWord);
 
       if (otherWords.length) {
+        /**
+         * Emitted when Space appears in token segment value
+         * @property {array|string} newStrings New strings to be converted into term tokens
+         */
         this.$emit('split', otherWords);
       }
     }
@@ -160,6 +185,9 @@ var script = {
   methods: {
     emitIfInactive(e) {
       if (!this.active) {
+        /**
+         * Emitted on mousedown event on the main component.
+         */
         this.$emit('activate');
         e.preventDefault();
       }
@@ -208,6 +236,12 @@ var script = {
 
     applySuggestion(suggestedValue) {
       const formattedSuggestedValue = wrapTokenInQuotes(suggestedValue);
+      /**
+       * Emitted when autocomplete entry is selected.
+       *
+       * @type {string} value The selected value.
+       */
+
       this.$emit('select', formattedSuggestedValue);
 
       if (!this.multiSelect) {
@@ -228,6 +262,10 @@ var script = {
       if (key === 'Backspace') {
         if (this.inputValue === '') {
           e.preventDefault();
+          /**
+           * Emitted when Backspace is pressed and the value is empty
+           */
+
           this.$emit('backspace');
         }
 
@@ -241,6 +279,9 @@ var script = {
           if (suggestedValue != null) {
             this.applySuggestion(suggestedValue);
           } else {
+            /**
+             * Emitted when Enter is pressed and no suggestion is selected
+             */
             this.$emit('submit');
           }
         },
@@ -252,6 +293,10 @@ var script = {
         },
         Escape: () => {
           e.preventDefault();
+          /**
+           * Emitted when suggestion is selected from the suggestion list
+           */
+
           this.$emit('complete');
         }
       };
@@ -282,6 +327,9 @@ var script = {
       if (this.multiSelect) {
         this.$emit('complete');
       } else if (this.active) {
+        /**
+         * Emitted when this term token will lose its focus.
+         */
         this.$emit('deactivate');
       }
     }

package/dist/components/charts/series_label/series_label.js

@@ -11,7 +11,12 @@ var script = {
     type: {
       type: String,
       required: false,
-      default: 'solid'
+      default: 'solid',
+
+      validator(value) {
+        return ['solid', 'dashed'].indexOf(value) !== -1;
+      }
+
     }
   },
 

package/documentation/documented_stories.js

@@ -91,6 +91,12 @@ export const setupStorybookReadme = () =>
         'GlFormCheckbox',
         'GlAccordion',
         'GlAccordionItem',
+        'GlFilteredSearch',
+        'GlFilteredSearchSuggestion',
+        'GlFilteredSearchSuggestionList',
+        'GlFilteredSearchTerm',
+        'GlFilteredSearchToken',
+        'GlFilteredSearchTokenSegment',
         'GlIntersperse',
         'GlFormSelect',
         'GlDaterangePicker',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "38.0.1",
+  "version": "38.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -37,9 +37,10 @@
     "test:unit": "NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
     "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": "./bin/run-visual-tests.sh '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'",
+    "test:visual:update": "./bin/run-visual-tests.sh 'JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 jest ./tests/storyshots.spec.js --updateSnapshot'",
+    "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://localhost:9001",
     "prettier": "prettier --check '**/*.{js,vue}'",
     "prettier:fix": "prettier --write '**/*.{js,vue}'",
     "eslint": "eslint --max-warnings 0 --ext .js,.vue .",
@@ -77,6 +78,8 @@
   },
   "resolutions": {
     "chokidar": "^3.5.2",
+    "node-gyp": "^9.0.0",
+    "node-sass": "^6.0.0",
     "sane": "^5.0.1"
   },
   "devDependencies": {
@@ -118,11 +121,9 @@
     "jest": "^26.6.3",
     "jest-raw-loader": "^1.0.1",
     "jest-serializer-vue": "^2.0.2",
-    "markdown-loader-jest": "^0.1.1",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
-    "node-sass": "^4.14.1",
-    "node-sass-magic-importer": "^5.3.2",
+    "node-sass": "^6.0.0",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
     "plop": "^2.5.4",
@@ -139,8 +140,9 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.6",
+    "sass": "^1.49.9",
     "sass-export": "^1.0.3",
-    "sass-loader": "^7.1.0",
+    "sass-loader": "^10.2.0",
     "sass-true": "^5.0.0",
     "start-server-and-test": "^1.10.6",
     "storybook-readme": "5.0.9",

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

@@ -1,9 +1,10 @@
 import { shallowMount } from '@vue/test-utils';
-import { BBreadcrumbItem } from 'bootstrap-vue';
+import { nextTick } from 'vue';
 import Breadcrumb, { COLLAPSE_AT_SIZE } from './breadcrumb.vue';
+import GlBreadcrumbItem from './breadcrumb_item.vue';
 import { createMockDirective } from '~helpers/vue_mock_directive';
 
-describe('Broadcast message component', () => {
+describe('Breadcrumb component', () => {
   let wrapper;
 
   const items = [
@@ -25,7 +26,7 @@ describe('Broadcast message component', () => {
 
   const findAvatarSlot = () => wrapper.find('[data-testid="avatar-slot"]');
   const findSeparatorSlot = () => wrapper.find('[data-testid="separator-slot"]');
-  const findBreadcrumbItems = () => wrapper.findAllComponents(BBreadcrumbItem);
+  const findBreadcrumbItems = () => wrapper.findAllComponents(GlBreadcrumbItem);
   const findAllSeparators = () => wrapper.findAll('[data-testid="separator"]');
   const findCollapsedListExpander = () => wrapper.find('[data-testid="collapsed-expander"]');
   const findExpanderSeparator = () => wrapper.find('[data-testid="expander-separator"]');
@@ -42,6 +43,9 @@ describe('Broadcast message component', () => {
         separator: '<div data-testid="separator-slot"></div>',
       },
       directives: { GlTooltip: createMockDirective('gl-tooltip') },
+      stubs: {
+        GlBreadcrumbItem,
+      },
     });
 
     wrapper.vm.$refs.firstItem = [
@@ -86,21 +90,31 @@ describe('Broadcast message component', () => {
   });
 
   describe('bindings', () => {
-    it('first breadcrumb has text and href bound', () => {
+    beforeEach(() => {
       createComponent();
+    });
 
-      expect(findBreadcrumbItems().at(0).attributes()).toMatchObject({
+    it('first breadcrumb has text, href && ariaCurrent=`false` bound', () => {
+      expect(findBreadcrumbItems().at(0).props()).toMatchObject({
         text: items[0].text,
         href: items[0].href,
+        ariaCurrent: false,
       });
     });
 
-    it('second breadcrumb has text and to bound', () => {
-      createComponent();
-
-      expect(findBreadcrumbItems().at(1).attributes()).toMatchObject({
+    it('second breadcrumb has text, to && ariaCurrent=`false` bound', () => {
+      expect(findBreadcrumbItems().at(1).props()).toMatchObject({
         text: items[1].text,
         to: items[1].to,
+        ariaCurrent: false,
+      });
+    });
+
+    it('last breadcrumb has text, to && ariaCurrent=`page` bound', () => {
+      expect(findBreadcrumbItems().at(2).props()).toMatchObject({
+        text: items[2].text,
+        href: items[2].href,
+        ariaCurrent: 'page',
       });
     });
   });
@@ -139,7 +153,7 @@ describe('Broadcast message component', () => {
 
       it('should expand the list on expander click', async () => {
         findCollapsedListExpander().vm.$emit('click');
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(findHiddenBreadcrumbItems()).toHaveLength(0);
         expect(findVisibleBreadcrumbItems()).toHaveLength(items.length + extraItems.length);
       });

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -1,17 +1,18 @@
 <script>
-import { BBreadcrumb, BBreadcrumbItem } from 'bootstrap-vue';
+import { BBreadcrumb } from 'bootstrap-vue';
 import GlIcon from '../icon/icon.vue';
 import GlButton from '../button/button.vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
+import GlBreadcrumbItem from './breadcrumb_item.vue';
 
 export const COLLAPSE_AT_SIZE = 4;
 
 export default {
   components: {
     BBreadcrumb,
-    BBreadcrumbItem,
     GlIcon,
     GlButton,
+    GlBreadcrumbItem,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -58,11 +59,12 @@ export default {
     },
     expandBreadcrumbs() {
       this.isListCollapsed = false;
+
       try {
         this.$refs.firstItem[0].querySelector('a').focus();
       } catch (e) {
         /* eslint-disable-next-line no-console */
-        console.error(`Failed to set focus on the last breadcrumb item.`);
+        console.error(`Failed to set focus on the first breadcrumb item.`);
       }
     },
     showCollapsedBreadcrumbsExpander(index) {
@@ -73,6 +75,9 @@ export default {
         this.hasCollapsible && this.isListCollapsed && !this.nonCollapsibleIndices.includes(index)
       );
     },
+    getAriaCurrentAttr(index) {
+      return this.isLastItem(index) ? 'page' : false;
+    },
   },
 };
 </script>
@@ -82,14 +87,14 @@ export default {
     <slot name="avatar"></slot>
     <b-breadcrumb class="gl-breadcrumb-list" v-bind="$attrs" v-on="$listeners">
       <template v-for="(item, index) in items">
-        <b-breadcrumb-item
+        <gl-breadcrumb-item
           :key="index"
           :ref="isFirstItem(index) ? 'firstItem' : null"
-          class="gl-breadcrumb-item"
           :text="item.text"
           :href="item.href"
           :to="item.to"
           :class="{ 'gl-display-none': isItemCollapsed(index) }"
+          :aria-current="getAriaCurrentAttr(index)"
         >
           <span>{{ item.text }}</span>
           <span
@@ -103,7 +108,7 @@ export default {
               <gl-icon name="chevron-right" />
             </slot>
           </span>
-        </b-breadcrumb-item>
+        </gl-breadcrumb-item>
 
         <template v-if="showCollapsedBreadcrumbsExpander(index)">
           <!-- eslint-disable-next-line vue/valid-v-for -->

package/src/components/base/breadcrumb/breadcrumb_item.spec.js

@@ -0,0 +1,45 @@
+import { shallowMount } from '@vue/test-utils';
+import { BLink } from 'bootstrap-vue';
+import BreadcrumbItem from './breadcrumb_item.vue';
+
+describe('Breadcrumb Item Component', () => {
+  let wrapper;
+
+  const item = { href: 'http://about.gitlab.com', to: { name: 'about' }, ariaCurrent: 'page' };
+
+  const findBLink = () => wrapper.findComponent(BLink);
+  const findDefaultSlot = () => wrapper.find('[data-testid="default-slot"]');
+
+  const createComponent = () => {
+    wrapper = shallowMount(BreadcrumbItem, {
+      propsData: {
+        href: item.href,
+        to: item.to,
+        ariaCurrent: item.ariaCurrent,
+      },
+      slots: {
+        default: '<div data-testid="default-slot"></div>',
+      },
+    });
+  };
+
+  describe('slots', () => {
+    it('renders provided content to default slot', () => {
+      createComponent();
+
+      expect(findDefaultSlot().exists()).toBe(true);
+    });
+  });
+
+  describe('bindings', () => {
+    it('passes provided props down to BLink', () => {
+      createComponent();
+
+      const bLink = findBLink();
+
+      expect(bLink.props('to')).toMatchObject(item.to);
+      expect(bLink.props('href')).toBe(item.href);
+      expect(bLink.attributes('aria-current')).toBe(item.ariaCurrent);
+    });
+  });
+});

package/src/components/base/breadcrumb/breadcrumb_item.vue

@@ -0,0 +1,43 @@
+<script>
+import { BLink } from 'bootstrap-vue';
+
+export default {
+  components: {
+    BLink,
+  },
+  inheritAttrs: false,
+  props: {
+    text: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    to: {
+      type: [String, Object],
+      required: false,
+      default: null,
+    },
+    href: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    ariaCurrent: {
+      type: [String, Boolean],
+      required: false,
+      default: false,
+      validator(value) {
+        return [false, 'page'].indexOf(value) !== -1;
+      },
+    },
+  },
+};
+</script>
+
+<template>
+  <li class="gl-breadcrumb-item">
+    <b-link :href="href" :to="to" :aria-current="ariaCurrent">
+      <slot>{{ text }}</slot>
+    </b-link>
+  </li>
+</template>