@gitlab/ui 38.0.1 → 38.2.1

package/dist/utils/use_mock_intersection_observer.js

@@ -25,7 +25,7 @@ class MockObserver {
     this.$_observers = [];
   }
 
-  takeRecords() {} // eslint-disable-next-line babel/camelcase
+  takeRecords() {} // eslint-disable-next-line camelcase
 
 
   $_triggerObserve(nodeParam) {
@@ -42,7 +42,7 @@ class MockObserver {
         }]);
       }
     });
-  } // eslint-disable-next-line babel/camelcase
+  } // eslint-disable-next-line camelcase
 
 
   $_hasObserver(node) {

package/documentation/components_documentation.js

@@ -2,7 +2,6 @@
 // ADD EXPORTS - needed for yarn generate:component. Do not remove
 export { default as GlTableLiteDocumentation } from '../src/components/base/table_lite/table_lite.documentation';
 export { default as GlRichTextEditorDocumentation } from '../src/components/editors/rich_text_editor/rich_text_editor.documentation';
-export { default as GlDropdownFormDocumentation } from '../src/components/base/dropdown/dropdown_form.documentation';
 export { default as GlKeysetPaginationDocumentation } from '../src/components/base/keyset_pagination/keyset_pagination.documentation';
 export { default as GlInputGroupTextDocumentation } from '../src/components/base/form/input_group_text/input_group_text.documentation';
 export { default as GlFormTextDocumentation } from '../src/components/base/form/form_text/form_text.documentation';
@@ -56,9 +55,6 @@ export { default as GlSearchBoxByTypeDocumentation } from '../src/components/bas
 export { default as GlSearchBoxByClickDocumentation } from '../src/components/base/search_box_by_click/search_box_by_click.documentation';
 export { default as GlDropdownDocumentation } from '../src/components/base/dropdown/dropdown.documentation';
 export { default as GlDropdownItemDocumentation } from '../src/components/base/dropdown/dropdown_item.documentation';
-export { default as GlDropdownDividerDocumentation } from '../src/components/base/dropdown/dropdown_divider.documentation';
-export { default as GlDropdownSectionHeaderDocumentation } from '../src/components/base/dropdown/dropdown_section_header.documentation';
-export { default as GlDropdownTextDocumentation } from '../src/components/base/dropdown/dropdown_text.documentation';
 export { default as GlTableDocumentation } from '../src/components/base/table/table.documentation';
 export { default as GlBreadcrumbDocumentation } from '../src/components/base/breadcrumb/breadcrumb.documentation';
 export { default as GlHeatmapDocumentation } from '../src/components/charts/heatmap/heatmap.documentation';

package/documentation/documented_stories.js

@@ -64,6 +64,8 @@ export const setupStorybookReadme = () =>
         'GlSprintf',
         'GlLink',
         'GlChart',
+        'GlDropdown',
+        'GlDropdownItem',
         'GlBadge',
         'GlButtonGroup',
         'GlOutsideDirective',
@@ -82,6 +84,7 @@ export const setupStorybookReadme = () =>
         'GlDashboardSkeleton',
         'GlToggle',
         'GlNavbar',
+        'GlFormCheckboxTree',
         'GlProgressBar',
         'GlPath',
         'GlFriendlyWrap',
@@ -91,6 +94,12 @@ export const setupStorybookReadme = () =>
         'GlFormCheckbox',
         'GlAccordion',
         'GlAccordionItem',
+        'GlFilteredSearch',
+        'GlFilteredSearchSuggestion',
+        'GlFilteredSearchSuggestionList',
+        'GlFilteredSearchTerm',
+        'GlFilteredSearchToken',
+        'GlFilteredSearchTokenSegment',
         'GlIntersperse',
         'GlFormSelect',
         'GlDaterangePicker',
@@ -178,7 +187,7 @@ export const setupStorybookReadme = () =>
       },
       template: `
       <div>
-          <div class="story-container" v-if="$options.disableForComponents.includes(componentName)">
+          <div class="story-container" v-if="!componentName || $options.disableForComponents.includes(componentName)">
               <slot></slot>
           </div>
           <template v-else>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "38.0.1",
+  "version": "38.2.1",
   "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,13 +78,15 @@
   },
   "resolutions": {
     "chokidar": "^3.5.2",
+    "node-gyp": "^9.0.0",
+    "node-sass": "^6.0.0",
     "sane": "^5.0.1"
   },
   "devDependencies": {
-    "@arkweid/lefthook": "^0.7.6",
+    "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
-    "@gitlab/eslint-plugin": "11.0.0",
+    "@gitlab/eslint-plugin": "12.0.1",
     "@gitlab/stylelint-config": "4.0.0",
     "@gitlab/svgs": "2.6.0",
     "@rollup/plugin-commonjs": "^11.1.0",
@@ -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/avatar_link/avatar_link.stories.js

@@ -2,7 +2,7 @@ import { GlAvatarLink, GlAvatar, GlAvatarLabeled } from '../../../index';
 import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
 import readme from './avatar_link.md';
 
-const components = { GlAvatarLink, GlAvatar };
+const components = { GlAvatarLink, GlAvatar, GlAvatarLabeled };
 
 const generateDefaultProps = ({
   href = 'https://gitlab.com/gitlab-org/gitlab',
@@ -37,7 +37,7 @@ export const Default = (args, { argTypes }) => ({
 Default.args = { ...generateDefaultProps(), ...generateImageProps() };
 
 export const WithLabeledAvatar = (args, { argTypes }) => ({
-  components: { GlAvatarLink, GlAvatarLabeled },
+  components,
   props: Object.keys(argTypes),
   template: `
   <gl-avatar-link target="blank" :href="href">

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>

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

@@ -1,9 +1,6 @@
 import description from './dropdown.md';
-import examples from './examples';
 
 export default {
   description,
-  bootstrapComponent: 'b-dropdown',
-  examples,
   followsDesignSystem: false,
 };

package/src/components/base/dropdown/dropdown.md

@@ -1,5 +1,3 @@
-## Usage
-
 The dropdown component offers a user multiple items or actions to choose from which are initially
 collapsed behind a button.
 
@@ -55,3 +53,10 @@ loading spinner, icon, and dropdown caret:
       </template>
     </gl-dropdown>
     ```
+
+### GlDropdownForm
+
+Unlike `b-dropdown-form`, we do _not_ add any additional padding with the `gl-dropdown-form` component.
+This is to prevent double padding with `gl-dropdown-item` and similar components, so in most cases
+shouldn't be needed. To add padding, either add a padding utility class to your form, or an inner
+element with some padding.