@gitlab/ui 32.34.1 → 32.38.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.34.1",
+  "version": "32.38.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -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/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_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

@@ -195,6 +195,11 @@ export default {
             this.$emit('submit');
           }
         },
+        ':': () => {
+          if (suggestedValue != null) {
+            this.applySuggestion(suggestedValue);
+          }
+        },
         Escape: () => {
           this.$emit('complete');
         },

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/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';

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

@@ -0,0 +1,49 @@
+import { shallowMount } from '@vue/test-utils';
+import { logWarning } from '../../../utils/utils';
+import { waitForAnimationFrame } from '../../../utils/test_utils';
+import { glTableLiteWarning } from './constants';
+import Table from './table.vue';
+
+jest.mock('../../../utils/utils', () => ({
+  isDev: () => true,
+  logWarning: jest.fn(),
+}));
+
+describe('GlTable', () => {
+  const slotsTemplate = {
+    empty: `
+      <p>Placeholder empty text</p>`,
+  };
+
+  const factory = ({ props = {}, scopedSlots = {} } = {}) => {
+    shallowMount(Table, {
+      scopedSlots,
+      propsData: props,
+    });
+  };
+
+  afterEach(() => {
+    logWarning.mockClear();
+  });
+
+  it('should log a warning when not given any props or slots which qualifies for the usage of GlTable', async () => {
+    factory();
+    await waitForAnimationFrame();
+
+    expect(logWarning).toHaveBeenCalledWith(glTableLiteWarning);
+  });
+
+  it('should not log a warning when given a prop which qualifies for the usage of GlTable', async () => {
+    factory({ props: { busy: true } });
+    await waitForAnimationFrame();
+
+    expect(logWarning).not.toHaveBeenCalled();
+  });
+
+  it('should not log a warning when given a slot which qualifies for the usage of GlTable', async () => {
+    factory({ scopedSlots: slotsTemplate });
+    await waitForAnimationFrame();
+
+    expect(logWarning).not.toHaveBeenCalled();
+  });
+});

package/src/components/base/table/table.vue

@@ -1,11 +1,27 @@
 <script>
 import { BTable } from 'bootstrap-vue';
+import { logWarning, isDev } from '../../../utils/utils';
+import { tableFullSlots, tableFullProps, glTableLiteWarning } from './constants';
+
+const shouldUseFullTable = ({ $attrs, $scopedSlots }) => {
+  return (
+    tableFullProps.some((prop) => $attrs[prop] !== undefined) ||
+    tableFullSlots.some((slot) => $scopedSlots[slot] !== undefined)
+  );
+};
 
 export default {
   components: {
     BTable,
   },
   inheritAttrs: false,
+  mounted() {
+    // logWarning will call isDev before logging any message
+    // this additional call to isDev is being made to exit the condition early when run in production
+    if (isDev() && !shouldUseFullTable(this)) {
+      logWarning(glTableLiteWarning);
+    }
+  },
 };
 </script>
 

package/src/scss/utilities.scss

@@ -1997,6 +1997,14 @@
   color: $body-color !important;
 }
 
+.gl-text-secondary {
+  color: $gl-text-color-secondary;
+}
+
+.gl-text-secondary\! {
+  color: $gl-text-color-secondary !important;
+}
+
 .gl-sm-text-body {
   @include gl-media-breakpoint-up(sm) {
   color: $body-color;
@@ -4201,6 +4209,18 @@
   }
 }
 
+.gl-lg-w-1px {
+  @media (min-width: $breakpoint-lg) {
+    width: 1px;
+  }
+}
+
+.gl-lg-w-1px\! {
+  @media (min-width: $breakpoint-lg) {
+    width: 1px !important;
+  }
+}
+
 .gl-md-w-50p {
   @include gl-media-breakpoint-up(md) {
     width: 50%;
@@ -4352,6 +4372,18 @@
     max-width: 30% !important;
   }
 }
+
+.gl-md-max-w-50p {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 50%;
+  }
+}
+
+.gl-md-max-w-50p\! {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 50% !important;
+  }
+}
 .gl-p-0 {
   padding: 0;
 }

package/src/scss/utility-mixins/color.scss

@@ -19,6 +19,10 @@
   color: $body-color;
 }
 
+@mixin gl-text-secondary {
+  color: $gl-text-color-secondary;
+}
+
 @mixin gl-sm-text-body {
   @include gl-media-breakpoint-up(sm) {
     @include gl-text-body;

package/src/scss/utility-mixins/sizing.scss

@@ -212,6 +212,12 @@
   }
 }
 
+@mixin gl-lg-w-1px {
+  @media (min-width: $breakpoint-lg) {
+    width: 1px;
+  }
+}
+
 @mixin gl-md-w-50p {
   @include gl-media-breakpoint-up(md) {
     width: 50%;
@@ -302,3 +308,9 @@
     max-width: 30%;
   }
 }
+
+@mixin gl-md-max-w-50p {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 50%;
+  }
+}

package/src/scss/variables.scss

@@ -295,6 +295,9 @@ $t-gray-a-08: rgba(#000, 0.08);
 $t-gray-a-24: rgba(#000, 0.24);
 
 // Text
+$gl-text-color: $gray-900 !default;
+$gl-text-color-secondary: $gray-500 !default;
+
 $gl-font-weight-light: 300;
 $gl-font-weight-normal: 400;
 $gl-font-weight-bold: 600;
@@ -453,7 +456,7 @@ $modal-backdrop-opacity: 0.64;
 // Bootstrap overrides
 // these should ideally be moved further up in the file to the compoent-relevant sections
 // but they can wait here for now
-$body-color: $gray-900 !default;
+$body-color: $gl-text-color !default;
 
 $secondary: $gray-50;
 $success: $green-500;

package/src/utils/constants.js

@@ -115,7 +115,7 @@ export const badgeForButtonOptions = {
   [buttonVariantOptions.danger]: badgeVariantOptions.danger,
 };
 
-export const newDropdownVariantOptions = {
+export const dropdownVariantOptions = {
   default: 'default',
   confirm: 'confirm',
   info: 'info (deprecated)',

package/src/utils/utils.js

@@ -103,12 +103,22 @@ export function focusFirstFocusableElement(elts) {
   if (focusableElt) focusableElt.focus();
 }
 
+/**
+ * Returns true if the current environment is considered a development environment (it's not
+ * production or test).
+ *
+ * @returns {boolean}
+ */
+export 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
  */
 export 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
   }
 }