@gitlab/ui 32.36.0 → 32.40.0

package/dist/utils/constants.js

@@ -97,7 +97,7 @@ const badgeForButtonOptions = {
   [buttonVariantOptions.confirm]: badgeVariantOptions.info,
   [buttonVariantOptions.danger]: badgeVariantOptions.danger
 };
-const newDropdownVariantOptions = {
+const dropdownVariantOptions = {
   default: 'default',
   confirm: 'confirm',
   info: 'info (deprecated)',
@@ -251,4 +251,4 @@ const loadingIconSizes = {
   'xl (64x64)': 'xl'
 };
 
-export { COMMA, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, newDropdownVariantOptions, popoverPlacements, resizeDebounceTime, sizeOptions, sizeOptionsWithNoDefault, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, sizeOptions, sizeOptionsWithNoDefault, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/dist/utils/utils.js

@@ -88,15 +88,25 @@ function focusFirstFocusableElement(elts) {
   const focusableElt = elts.find(el => isElementFocusable(el));
   if (focusableElt) focusableElt.focus();
 }
+/**
+ * Returns true if the current environment is considered a development environment (it's not
+ * production or test).
+ *
+ * @returns {boolean}
+ */
+
+function isDev() {
+  return !['test', 'production'].includes(process.env.NODE_ENV);
+}
 /**
  * Prints a warning message to the console in non-test and non-production environments.
  * @param {string} message message to print to the console
  */
 
 function logWarning(message = '') {
-  if (message.length && !['test', 'production'].includes(process.env.NODE_ENV)) {
+  if (message.length && isDev()) {
     console.warn(message); // eslint-disable-line no-console
   }
 }
 
-export { colorFromBackground, debounceByAnimationFrame, focusFirstFocusableElement, hexToRgba, isElementFocusable, logWarning, rgbFromHex, rgbFromString, throttle, uid };
+export { colorFromBackground, debounceByAnimationFrame, focusFirstFocusableElement, hexToRgba, isDev, isElementFocusable, logWarning, rgbFromHex, rgbFromString, throttle, uid };

package/documentation/documented_stories.js

@@ -90,6 +90,8 @@ export const setupStorybookReadme = () =>
         'GlAccordionItem',
         'GlDaterangePicker',
         'GlBarChart',
+        'GlCarousel',
+        'GlMarkdown',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.36.0",
+  "version": "32.40.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -84,7 +84,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "9.4.0",
     "@gitlab/stylelint-config": "2.6.0",
-    "@gitlab/svgs": "1.220.0",
+    "@gitlab/svgs": "1.221.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -129,7 +129,7 @@
     "postcss-scss": "^2.1.1",
     "prettier": "2.2.1",
     "pug": "^2.0.3",
-    "puppeteer": "^5.2.1",
+    "puppeteer": "^10.4.0",
     "raw-loader": "^0.5.1",
     "rollup": "^2.53.1",
     "rollup-plugin-babel": "^4.4.0",

package/scss_to_js/scss_variables.js

@@ -226,6 +226,8 @@ export const tGrayA04 = 'rgba(0, 0, 0, 0.04)'
 export const tGrayA06 = 'rgba(0, 0, 0, 0.06)'
 export const tGrayA08 = 'rgba(0, 0, 0, 0.08)'
 export const tGrayA24 = 'rgba(0, 0, 0, 0.24)'
+export const glTextColor = '#303030'
+export const glTextColorSecondary = '#666'
 export const glFontWeightLight = '300'
 export const glFontWeightNormal = '400'
 export const glFontWeightBold = '600'

package/scss_to_js/scss_variables.json

@@ -1167,6 +1167,16 @@
       "value": "rgba(#000, 0.24)",
       "compiledValue": "rgba(0, 0, 0, 0.24)"
     },
+    {
+      "name": "$gl-text-color",
+      "value": "$gray-900",
+      "compiledValue": "#303030"
+    },
+    {
+      "name": "$gl-text-color-secondary",
+      "value": "$gray-500",
+      "compiledValue": "#666"
+    },
     {
       "name": "$gl-font-weight-light",
       "value": "300",
@@ -1624,7 +1634,7 @@
     },
     {
       "name": "$body-color",
-      "value": "$gray-900",
+      "value": "$gl-text-color",
       "compiledValue": "#303030"
     },
     {

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

@@ -1,8 +1,6 @@
 import description from './carousel.md';
-import examples from './examples';
 
 export default {
   description,
-  examples,
   bootstrapComponent: 'b-carousel',
 };

package/src/components/base/carousel/carousel.md

@@ -1,5 +1,3 @@
-## Carousel
-
 The carousel is a slideshow for cycling through a series of content, built with CSS 3D
 transforms. It works with a series of images, text, or custom markup. It also includes support
 for previous/next controls and indicators.

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

@@ -1,16 +1,8 @@
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import readme from './carousel.md';
 import GlCarousel from './carousel.vue';
 import GlCarouselSlide from './carousel_slide.vue';
 
-const components = {
-  GlCarousel,
-  GlCarouselSlide,
-};
-
-documentedStoriesOf('base/carousel', readme).add('default carousel', () => ({
-  components,
-  template: `
+const template = `
     <gl-carousel
       :interval="0"
       controls
@@ -34,5 +26,26 @@ documentedStoriesOf('base/carousel', readme).add('default carousel', () => ({
 
       <!-- Slides with image only -->
       <gl-carousel-slide img-src="./img/carousel_slide3.jpg"/>
-    </gl-carousel>`,
-}));
+    </gl-carousel> 
+  `;
+
+const Template = () => ({
+  components: { GlCarousel, GlCarouselSlide },
+  template,
+});
+
+export const Default = Template.bind({});
+
+export default {
+  title: 'base/carousel',
+  component: GlCarousel,
+  parameters: {
+    bootstrapComponent: 'b-carousel',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 
-import { newDropdownVariantOptions } from '../../../utils/constants';
+import { dropdownVariantOptions } from '../../../utils/constants';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import GlDropdown from './dropdown.vue';
 
@@ -175,14 +175,11 @@ describe('new dropdown', () => {
   });
 
   describe('secondary category', () => {
-    it.each(Object.keys(newDropdownVariantOptions))(
-      'applies %s variant class properly',
-      (variant) => {
-        buildWrapper({ category: 'secondary', variant });
-
-        expect(findDropdownToggle().classes()).toContain(`btn-${variant}-secondary`);
-      }
-    );
+    it.each(Object.keys(dropdownVariantOptions))('applies %s variant class properly', (variant) => {
+      buildWrapper({ category: 'secondary', variant });
+
+      expect(findDropdownToggle().classes()).toContain(`btn-${variant}-secondary`);
+    });
   });
 
   describe('when the header slot exists', () => {

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

@@ -12,8 +12,8 @@ import {
 } from '../../../../index';
 import {
   buttonCategoryOptions,
-  newDropdownVariantOptions,
   buttonSizeOptions,
+  dropdownVariantOptions,
 } from '../../../utils/constants';
 import readme from './dropdown.md';
 
@@ -57,7 +57,7 @@ function generateProps({
     },
     variant: {
       type: String,
-      default: select('variant', Object.values(newDropdownVariantOptions), variant),
+      default: select('variant', Object.values(dropdownVariantOptions), variant),
     },
     size: {
       type: String,
@@ -197,7 +197,7 @@ documentedStoriesOf('base/dropdown', readme)
     props: generateProps({
       text: 'Some dropdown',
       category: buttonCategoryOptions.secondary,
-      variant: newDropdownVariantOptions.confirm,
+      variant: dropdownVariantOptions.confirm,
     }),
     components,
     template: wrap`

package/src/components/base/dropdown/dropdown.vue

@@ -3,8 +3,8 @@ import { BDropdown } from 'bootstrap-vue';
 import { isVisible, selectAll } from 'bootstrap-vue/src/utils/dom';
 import {
   buttonCategoryOptions,
-  newDropdownVariantOptions,
   buttonSizeOptions,
+  dropdownVariantOptions,
 } from '../../../utils/constants';
 import { ButtonMixin } from '../../mixins/button_mixin';
 import GlButton from '../button/button.vue';
@@ -106,8 +106,8 @@ export default {
     variant: {
       type: String,
       required: false,
-      default: newDropdownVariantOptions.default,
-      validator: (value) => Object.keys(newDropdownVariantOptions).includes(value),
+      default: dropdownVariantOptions.default,
+      validator: (value) => Object.keys(dropdownVariantOptions).includes(value),
     },
     size: {
       type: String,

package/src/components/base/filtered_search/filtered_search.vue

@@ -253,6 +253,7 @@ export default {
     :value="tokens"
     :history-items="historyItems"
     :clearable="hasValue"
+    data-testid="filtered-search-input"
     @submit="submit"
     @input="applyNewValue"
     @history-item-selected="$emit('history-item-selected', $event)"

package/src/components/base/filtered_search/filtered_search_token_segment.spec.js

@@ -27,7 +27,7 @@ describe('Filtered search token segment', () => {
       methods: {
         nextItem: jest.fn(),
         prevItem: jest.fn(),
-        getValue: jest.fn(),
+        getValue: () => 'notnull',
       },
       template: `<div class="ololosha"><slot></slot></div>`,
     };
@@ -195,6 +195,22 @@ describe('Filtered search token segment', () => {
       expect(wrapper.emitted().select[0][0]).toBe(formattedToken);
       expect(wrapper.emitted().complete[0][0]).toBe(formattedToken);
     });
+
+    it('selects suggestion on press Enter', () => {
+      createComponent({ active: true, options: OPTIONS, value: false });
+      wrapper.find('input').trigger('keydown', { key: 'ArrowDown' });
+
+      wrapper.find('input').trigger('keydown', { key: 'Enter' });
+      expect(wrapper.emitted('select')).toHaveLength(1);
+    });
+
+    it('selects suggestion on press Colon', () => {
+      createComponent({ active: true, options: OPTIONS, value: false });
+      wrapper.find('input').trigger('keydown', { key: 'ArrowDown' });
+
+      wrapper.find('input').trigger('keydown', { key: ':' });
+      expect(wrapper.emitted('select')).toHaveLength(1);
+    });
   });
 
   describe('when multi select', () => {

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -189,13 +189,21 @@ export default {
 
       const handlers = {
         Enter: () => {
+          e.preventDefault();
           if (suggestedValue != null) {
             this.applySuggestion(suggestedValue);
           } else {
             this.$emit('submit');
           }
         },
+        ':': () => {
+          if (suggestedValue != null) {
+            e.preventDefault();
+            this.applySuggestion(suggestedValue);
+          }
+        },
         Escape: () => {
+          e.preventDefault();
           this.$emit('complete');
         },
       };
@@ -212,7 +220,6 @@ export default {
       }
 
       if (Object.keys(handlers).includes(key)) {
-        e.preventDefault();
         handlers[key]();
         return;
       }
@@ -239,6 +246,7 @@ export default {
   <div
     class="gl-filtered-search-token-segment"
     :class="{ 'gl-filtered-search-token-segment-active': active }"
+    data-testid="filtered-search-token-segment"
     @mousedown.left="emitIfInactive"
   >
     <template v-if="active">

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { BInputGroup } from 'bootstrap-vue';
+import { BInputGroup, BFormInput } from 'bootstrap-vue';
 import GlDropdownItem from '../../dropdown/dropdown_item.vue';
 import InputGroup from './form_input_group.vue';
 
@@ -54,6 +54,23 @@ describe('Input Group', () => {
     expect(wrapper.emitted('input')).toBeUndefined();
   });
 
+  describe('`inputClass` prop', () => {
+    it.each`
+      inputClass
+      ${'foo-bar baz'}
+      ${['foo-bar', 'baz']}
+      ${{ 'foo-bar': true, baz: true }}
+    `('correctly adds classes to input when `inputClass` prop is $inputClass', ({ inputClass }) => {
+      createWrapper({
+        propsData: { inputClass },
+      });
+
+      expect(wrapper.findComponent(BFormInput).classes()).toEqual(
+        expect.arrayContaining(['gl-form-input', 'foo-bar', 'baz'])
+      );
+    });
+  });
+
   describe('predefined options', () => {
     const options = [
       { name: 'Foo', value: 'foo.com' },

package/src/components/base/form/form_input_group/form_input_group.vue

@@ -32,6 +32,11 @@ export default {
       required: false,
       default: undefined,
     },
+    inputClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -73,7 +78,7 @@ export default {
         <b-form-input
           ref="input"
           v-model="localValue"
-          class="gl-form-input"
+          :class="['gl-form-input', inputClass]"
           :aria-label="label"
           v-bind="$attrs"
           v-on="$listeners"

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

@@ -1,8 +1,5 @@
-import examples from './examples';
 import * as description from './markdown.md';
 
 export default {
   description,
-  examples,
-  propsInfo: {},
 };

package/src/components/base/markdown/markdown.md

@@ -1,5 +1,3 @@
-# GlMarkdown
-
 The `GlMarkdown` component styles markdown-generated HTML following the Pajamas Documentation Markdown
 [styling specifications](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit---Beta?node-id=542%3A2).
 

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

@@ -1,30 +1,31 @@
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import readme from './markdown.md';
 import GlMarkdown from './markdown.vue';
 import markdownTypescaleDemoContent from './markdown_typescale_demo.html';
 
-const components = {
-  GlMarkdown,
-};
+const template = `
+  <gl-markdown :compact="compact">${markdownTypescaleDemoContent}</gl-markdown> 
+  `;
+
+const generateProps = ({ compact = false } = {}) => ({ compact });
+
+const Template = (args, { argTypes }) => ({
+  components: { GlMarkdown },
+  props: Object.keys(argTypes),
+  template,
+});
 
-documentedStoriesOf('base/markdown', readme)
-  .addDecorator(withKnobs)
-  .add(
-    'typescale',
-    () => ({
-      components,
-      props: {
-        compact: {
-          type: Boolean,
-          default: boolean('compact', false),
-        },
+export const Typescale = Template.bind({});
+Typescale.args = generateProps();
+
+export default {
+  title: 'base/markdown',
+  component: GlMarkdown,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
       },
-      template: `
-      <gl-markdown :compact="compact">${markdownTypescaleDemoContent}</gl-markdown>
-    `,
-    }),
-    {
-      viewport: { defaultViewport: 'breakpointExtraLarge' },
-    }
-  );
+    },
+    knobs: { disabled: true },
+  },
+};

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

@@ -42,4 +42,13 @@ describe('GlPopover', () => {
       expect(findBVPopover().props('triggers')).toBe(triggers);
     });
   });
+
+  describe('title slot', () => {
+    it('renders title slot content', () => {
+      const title = 'Popover title';
+      createWrapper({ title });
+
+      expect(findBVPopover().props('title')).toBe(title);
+    });
+  });
 });

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

@@ -2,6 +2,12 @@ import { withKnobs, select, text } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { popoverPlacements } from '../../../utils/constants';
 
+const contentString = `
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat a nisi non
+  pellentesque. Pellentesque efficitur vulputate rutrum. Fusce nisl magna, porttitor in
+  massa ac, porta condimentum libero. Ut id lacus tristique, egestas arcu non, molestie nisi.
+`;
+
 const template = `
   <div class="gl-display-flex gl-justify-content-center gl-p-6">
     <gl-button id="pop-top">{{placement}}</gl-button>
@@ -9,13 +15,29 @@ const template = `
       triggers="hover focus"
       :title="title"
       :placement="placement"
-      :content="content"
+      content="${contentString}"
+      data-testid="popover-with-props"
       show
       />
   </div>
   `;
 
-function generateProps({ placement = popoverPlacements.top, title = 'Popover' } = {}) {
+const scopedSlotTemplate = `
+  <div class="gl-display-flex gl-justify-content-center gl-p-6">
+    <gl-button id="pop-top-two" data-testid="popover-button-click">{{placement}}</gl-button>
+    <gl-popover target="pop-top-two"
+      triggers="click"
+      :placement="placement"
+      content="${contentString}"
+    >
+      <template #title>
+        <span data-testid="popover-title">Popover title</span>
+      </template>
+    </gl-popover>
+  </div>
+`;
+
+function generateProps({ placement = popoverPlacements.top, title = 'Popover', triggers } = {}) {
   return {
     placement: {
       type: String,
@@ -25,6 +47,10 @@ function generateProps({ placement = popoverPlacements.top, title = 'Popover' }
       type: String,
       default: text('title', title),
     },
+    triggers: {
+      type: String,
+      default: text('hover focus', triggers),
+    },
   };
 }
 
@@ -33,13 +59,12 @@ documentedStoriesOf('base/popover', '')
   .add('default', () => ({
     template,
     props: generateProps(),
-    computed: {
-      content() {
-        return `
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat a nisi non
-          pellentesque. Pellentesque efficitur vulputate rutrum. Fusce nisl magna, porttitor in
-          massa ac, porta condimentum libero. Ut id lacus tristique, egestas arcu non, molestie nisi.
-        `;
-      },
-    },
-  }));
+  }))
+  .add(
+    'on click',
+    () => ({
+      template: scopedSlotTemplate,
+      props: generateProps(),
+    }),
+    { storyshots: false }
+  );

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

@@ -39,8 +39,7 @@ export default {
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-    <template slot="title">
+    <template v-if="$scopedSlots.title" #title>
       <slot name="title"></slot>
     </template>
     <slot></slot>

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -210,6 +210,7 @@ export default {
       :title="clearButtonTitle"
       :tooltip-container="tooltipContainer"
       class="gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button"
+      data-testid="filtered-search-clear-button"
       @click="clearInput"
     />
     <template #append class="gl-search-box-by-click-input-group-control">

package/src/components/base/table/constants.js

@@ -0,0 +1,49 @@
+export const tableFullSlots = [
+  'bottom-row',
+  'empty',
+  'emptyfiltered',
+  'table-busy',
+  'thead-top',
+  'top-row',
+];
+
+export const tableFullProps = [
+  'api-url',
+  'busy',
+  'current-page',
+  'empty-filtered-html',
+  'empty-filtered-text',
+  'empty-html',
+  'empty-text',
+  'filter',
+  'filter-debounce',
+  'filter-function',
+  'filter-ignored-fields',
+  'filter-included-fields',
+  'label-sort-asc',
+  'label-sort-clear',
+  'label-sort-desc',
+  'no-footer-sorting',
+  'no-local-sorting',
+  'no-provider-filtering',
+  'no-provider-paging',
+  'no-provider-sorting',
+  'no-select-on-click',
+  'no-sort-reset',
+  'per-page',
+  'select-mode',
+  'selectable',
+  'selected-variant',
+  'show-empty',
+  'sort-by',
+  'sort-compare',
+  'sort-compare-locale',
+  'sort-compare-options',
+  'sort-desc',
+  'sort-direction',
+  'sort-icon-left',
+  'sort-null-last',
+];
+
+export const glTableLiteWarning =
+  'This GlTable could be a GlTableLite component, please consider using GlTableLite instead of GlTable to reduce the page bundlesize more about this here: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-table-table-lite--default';