@gitlab/ui 37.0.0 → 37.3.0

package/documentation/components_documentation.js

@@ -16,7 +16,6 @@ export { default as GlNavbarDocumentation } from '../src/components/base/navbar/
 export { default as GlIntersectionObserverDocumentation } from '../src/components/utilities/intersection_observer/intersection_observer.documentation';
 export { default as GlChartDocumentation } from '../src/components/charts/chart/chart.documentation';
 export { default as GlAreaChartDocumentation } from '../src/components/charts/area/area.documentation';
-export { default as GlChartLegendDocumentation } from '../src/components/charts/legend/legend.documentation';
 export { default as GlLineChartDocumentation } from '../src/components/charts/line/line.documentation';
 export { default as GlSparklineChartDocumentation } from '../src/components/charts/sparkline/sparkline.documentation';
 export { default as GlChartSeriesLabelDocumentation } from '../src/components/charts/series_label/series_label.documentation';
@@ -64,7 +63,6 @@ export { default as GlTableDocumentation } from '../src/components/base/table/ta
 export { default as GlBreadcrumbDocumentation } from '../src/components/base/breadcrumb/breadcrumb.documentation';
 export { default as GlHeatmapDocumentation } from '../src/components/charts/heatmap/heatmap.documentation';
 export { default as GlTabsDocumentation } from '../src/components/base/tabs/tabs/tabs.documentation';
-export { default as GlTabDocumentation } from '../src/components/base/tabs/tab/tab.documentation';
 export { default as GlButtonGroupDocumentation } from '../src/components/base/button_group/button_group.documentation';
 export { default as GlFormCheckboxDocumentation } from '../src/components/base/form/form_checkbox/form_checkbox.documentation';
 export { default as GlLabelDocumentation } from '../src/components/base/label/label.documentation';

package/documentation/documented_stories.js

@@ -77,6 +77,7 @@ export const setupStorybookReadme = () =>
         'GlSorting',
         'GlSortingItem',
         'GlIcon',
+        'GlSafeLinkDirective',
         'GlDashboardSkeleton',
         'GlToggle',
         'GlNavbar',
@@ -102,6 +103,7 @@ export const setupStorybookReadme = () =>
         'GlFormInput',
         'GlSegmentedControl',
         'GlAvatar',
+        'GlChartLegend',
         'GlAvatarLink',
         'GlPagination',
         'GlSkeletonLoader',
@@ -112,11 +114,14 @@ export const setupStorybookReadme = () =>
         'GlChartTooltip',
         'GlInputGroupText',
         'GlGaugeChart',
+        'GlSafeHtmlDirective',
         'GlFormRadio',
         'GlModal',
         'GlKeysetPagination',
         'GlForm',
         'GlTable',
+        'GlTab',
+        'GlTabs',
         'GlToast',
         'GlPaginatedList',
         'GlIntersectionObserver',
@@ -134,6 +139,7 @@ export const setupStorybookReadme = () =>
         'GlChartSeriesLabel',
         'GlAreaChart',
         'GlLineChart',
+        'GlFormInputGroup',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "37.0.0",
+  "version": "37.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -1,6 +1,6 @@
 import description from './drawer.md';
 
 export default {
-  followsDesignSystem: false,
+  followsDesignSystem: true,
   description,
 };

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

@@ -1,34 +1,6 @@
-import examples from './examples';
 import description from './form_input_group.md';
 
 export default {
   followsDesignSystem: false,
   description,
-  examples,
-  bootstrapComponent: 'b-form-input',
-  propsInfo: {
-    'select-on-click': {
-      type: Boolean,
-      additionalInfo: 'Automatically selects the content of the input field on click',
-    },
-    'predefined-options': {
-      type: Array,
-      additionalInfo:
-        'Array of options. Each option should have `name` and `value` information: {name: "Foo", value: "Bar"})',
-    },
-  },
-  slots: [
-    {
-      name: 'default',
-      description: 'Allows replacement of default input field.',
-    },
-    {
-      name: 'prepend',
-      description: 'Is rendered in front of the input field.',
-    },
-    {
-      name: 'append',
-      description: 'Is rendered after the input field.',
-    },
-  ],
 };

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

@@ -1,7 +1,3 @@
-# Form Group Input
-
-<!-- STORY -->
-
 The `GlFormInputGroup` component allows one to build more advanced text
 input fields than generic `GlFormInput` when one needs that flexibility.
 Basic usage of the component:

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

@@ -1,73 +1,95 @@
-import { withKnobs, boolean, object, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { GlFormInputGroup, GlInputGroupText } from '../../../../index';
+import { disableControls } from '../../../../utils/stories_utils';
 import readme from './form_input_group.md';
 
-const components = {
-  GlFormInputGroup,
-  GlInputGroupText,
-};
-const predefinedOptions = [
-  { name: 'Embed', value: 'https://embed.com' },
-  { name: 'Share', value: 'https://share.org' },
-];
+const template = `
+  <gl-form-input-group
+    :readonly="readonly"
+    :select-on-click="selectOnClick"
+    :predefined-options="predefinedOptions"
+    :label="label"
+    :inputClass="inputClass">
+    <template #prepend v-if="prepend">
+      <gl-input-group-text>{{prepend}}</gl-input-group-text>
+    </template>
+    <template #append v-if="append">
+      <gl-input-group-text>{{append}}</gl-input-group-text>
+    </template>
+  </gl-form-input-group>
+`;
 
-documentedStoriesOf('base/form/form-input-group', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: {
-      prepend: {
-        default: text('Prepend text', 'Username'),
-      },
-      append: {
-        default: text('Append text', 'Add'),
-      },
-      readonly: {
-        default: boolean('Readonly', false),
-      },
-      select: {
-        default: boolean('Select text on click', false),
+const defaultValue = (prop) => GlFormInputGroup.props[prop].default;
+
+const generateProps = ({
+  prepend = 'Username',
+  append = 'Add',
+  readonly = false,
+  selectOnClick = false,
+  predefinedOptions = defaultValue('predefinedOptions')(),
+  label = '',
+  inputClass = '',
+} = {}) => ({
+  prepend,
+  append,
+  readonly,
+  selectOnClick,
+  predefinedOptions,
+  label,
+  inputClass,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlFormInputGroup, GlInputGroupText },
+  props: Object.keys(argTypes),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const PredefinedOptions = Template.bind({});
+PredefinedOptions.args = generateProps({
+  prepend: '',
+  predefinedOptions: [
+    { name: 'Embed', value: 'https://embed.com' },
+    { name: 'Share', value: 'https://share.org' },
+  ],
+});
+
+export default {
+  title: 'base/form/form-input-group',
+  component: GlFormInputGroup,
+  knobs: { disabled: true },
+  parameters: {
+    bootstrapComponent: 'b-form-input',
+    docs: {
+      description: {
+        component: readme,
       },
     },
-    template: `
-      <gl-form-input-group :readonly="readonly" :select-on-click="select">
-        <template #prepend v-if="prepend">
-          <gl-input-group-text>{{prepend}}</gl-input-group-text>
-        </template>
-        <template #append v-if="append">
-          <gl-input-group-text>{{append}}</gl-input-group-text>
-        </template>
-      </gl-form-input-group>
-    `,
-  }))
-  .add('with predefined options', () => ({
-    components,
-    props: {
-      prepend: {
-        default: text('Prepend text', ''),
+    knobs: { disabled: true },
+  },
+  argTypes: {
+    ...disableControls(['value']),
+    prepend: {
+      control: {
+        type: 'text',
       },
-      append: {
-        default: text('Append text', 'Add'),
-      },
-      readonly: {
-        default: boolean('Readonly', false),
+    },
+    append: {
+      control: {
+        type: 'text',
       },
-      select: {
-        default: boolean('Select text on click', false),
+    },
+    inputClass: {
+      control: {
+        type: 'text',
       },
-      options: {
-        default: object('Predefined options', predefinedOptions),
+    },
+    label: {
+      control: {
+        type: 'text',
       },
     },
-    template: `
-      <gl-form-input-group :readonly="readonly" :select-on-click="select" :predefined-options="options">
-        <template #prepend v-if="prepend">
-          <gl-input-group-text>{{prepend}}</gl-input-group-text>
-        </template>
-        <template #append v-if="append">
-          <gl-input-group-text>{{append}}</gl-input-group-text>
-        </template>
-      </gl-form-input-group>
-    `,
-  }));
+  },
+};

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

@@ -16,11 +16,17 @@ export default {
   },
   mixins: [InputGroupMixin],
   props: {
+    /**
+     * Automatically selects the content of the input field on click.
+     */
     selectOnClick: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Array of options. Each option should have `name` and `value` information: {name: "Foo", value: "Bar"})
+     */
     predefinedOptions: {
       type: Array,
       required: false,
@@ -61,6 +67,7 @@ export default {
   <div>
     <b-input-group>
       <b-input-group-prepend v-if="activeOption || $scopedSlots.prepend">
+        <!-- @slot Is rendered in front of the input field. -->
         <slot name="prepend"></slot>
         <gl-dropdown v-if="activeOption" :text="activeOption">
           <gl-dropdown-item
@@ -74,6 +81,7 @@ export default {
           </gl-dropdown-item>
         </gl-dropdown>
       </b-input-group-prepend>
+      <!-- @slot Allows replacement of default input field. -->
       <slot>
         <b-form-input
           ref="input"
@@ -86,6 +94,7 @@ export default {
         />
       </slot>
       <b-input-group-append v-if="$scopedSlots.append">
+        <!-- @slot Is rendered after the input field. -->
         <slot name="append"></slot>
       </b-input-group-append>
     </b-input-group>

package/src/components/base/loading_icon/loading_icon.vue

@@ -64,6 +64,6 @@ export default {
 </script>
 <template>
   <component :is="rootElementType" class="gl-spinner-container" role="status">
-    <span :class="cssClasses" class="align-text-bottom" :aria-label="label"></span>
+    <span :class="cssClasses" class="gl-vertical-align-text-bottom!" :aria-label="label"></span>
   </component>
 </template>

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

@@ -16,6 +16,7 @@ const mockResizeWidth = (width) => {
 describe('pagination component', () => {
   let wrapper;
   const findButtons = () => wrapper.findAll('.page-link');
+  const findItems = () => wrapper.findAll('.page-item');
   const propsData = {
     value: 3,
     perPage: 5,
@@ -179,6 +180,7 @@ describe('pagination component', () => {
     it('shows 3rd page as active and enables all buttons', () => {
       const buttons = findButtons();
       expect(buttons.at(3).classes()).toEqual(expectClassActive);
+      expect(buttons.at(3).attributes('aria-current')).toEqual('page');
       buttons.wrappers.forEach((button) => {
         expect(button.element.tagName).not.toBe('SPAN');
       });
@@ -222,6 +224,7 @@ describe('pagination component', () => {
       const buttons = findButtons();
       expect(buttons.at(0).element.tagName).toBe('SPAN');
       expect(buttons.at(1).classes()).toEqual(expectClassActive);
+      expect(buttons.at(1).attributes('aria-current')).toEqual('page');
       expect(buttons.at(buttons.length - 1).element.tagName).not.toBe('SPAN');
     });
 
@@ -310,6 +313,7 @@ describe('pagination component', () => {
       const buttons = findButtons();
       expect(buttons.at(0).element.tagName).not.toBe('SPAN');
       expect(buttons.at(7).classes()).toEqual(expectClassActive);
+      expect(buttons.at(7).attributes('aria-current')).toEqual('page');
       expect(buttons.at(buttons.length - 1).element.tagName).toBe('SPAN');
     });
 
@@ -372,9 +376,12 @@ describe('pagination component', () => {
         value: 1,
         nextPage: 2,
       });
+      const prevItem = findItems().at(0);
+      expect(prevItem.attributes('aria-hidden')).toBe('true');
       const prevButton = findButtons().at(0);
       expect(prevButton.element.tagName).toBe('SPAN');
-      expect(prevButton.attributes('aria-disabled')).toBe('true');
+      expect(prevButton.attributes('href')).toBeUndefined();
+      expect(prevButton.attributes('aria-label')).toBeUndefined();
     });
 
     it('disables next button when on last page', () => {
@@ -383,9 +390,12 @@ describe('pagination component', () => {
         value: 2,
         prevPage: 1,
       });
+      const nextItem = findItems().at(1);
+      expect(nextItem.attributes('aria-hidden')).toBe('true');
       const nextButton = findButtons().at(1);
       expect(nextButton.element.tagName).toBe('SPAN');
-      expect(nextButton.attributes('aria-disabled')).toBe('true');
+      expect(nextButton.attributes('href')).toBeUndefined();
+      expect(nextButton.attributes('aria-label')).toBeUndefined();
     });
   });
 });

package/src/components/base/pagination/pagination.vue

@@ -261,6 +261,22 @@ export default {
     nextPageIsDisabled() {
       return this.pageIsDisabled(this.value + 1);
     },
+    prevPageAriaLabel() {
+      return this.prevPageIsDisabled ? false : this.labelPrevPage || this.labelPage(this.value - 1);
+    },
+    nextPageAriaLabel() {
+      return this.nextPageIsDisabled ? false : this.labelNextPage || this.labelPage(this.value + 1);
+    },
+    prevPageHref() {
+      if (this.prevPageIsDisabled) return false;
+      if (this.isLinkBased) return this.linkGen(this.value - 1);
+      return '#';
+    },
+    nextPageHref() {
+      if (this.nextPageIsDisabled) return false;
+      if (this.isLinkBased) return this.linkGen(this.value + 1);
+      return '#';
+    },
   },
   created() {
     window.addEventListener('resize', debounce(this.setBreakpoint, resizeDebounceTime));
@@ -293,6 +309,7 @@ export default {
       const listeners = {};
       if (isActivePage) {
         attrs.class.push('active');
+        attrs['aria-current'] = 'page';
       }
       // Disable previous and/or next buttons if needed
       if (this.isLinkBased) {
@@ -368,13 +385,13 @@ export default {
         disabled: prevPageIsDisabled,
         'flex-fill': isFillAlign,
       }"
+      :aria-hidden="prevPageIsDisabled"
     >
       <component
         :is="prevPageIsDisabled ? 'span' : 'a'"
         class="gl-link page-link prev-page-item gl-display-flex"
-        :aria-disabled="prevPageIsDisabled"
-        :aria-label="labelPrevPage || labelPage(value - 1)"
-        :href="isLinkBased ? linkGen(value - 1) : '#'"
+        :aria-label="prevPageAriaLabel"
+        :href="prevPageHref"
         @click="handlePrevious($event, value - 1)"
       >
         <!-- 
@@ -431,13 +448,13 @@ export default {
         disabled: nextPageIsDisabled,
         'flex-fill': isFillAlign,
       }"
+      :aria-hidden="nextPageIsDisabled"
     >
       <component
         :is="nextPageIsDisabled ? 'span' : 'a'"
         class="gl-link page-link next-page-item gl-display-flex"
-        :aria-disabled="nextPageIsDisabled"
-        :aria-label="labelNextPage || labelPage(value + 1)"
-        :href="isLinkBased ? linkGen(value + 1) : '#'"
+        :aria-label="nextPageAriaLabel"
+        :href="nextPageHref"
         @click="handleNext($event, value + 1)"
       >
         <!-- 

package/src/components/base/path/__snapshots__/path.spec.js.snap

@@ -155,7 +155,9 @@ exports[`Path matches the snapshot 1`] = `
       id="path-1-item-7"
     >
       <button
+        category="tertiary"
         class="gl-path-button"
+        disabled="disabled"
       >
         <!---->
         
@@ -383,7 +385,9 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       id="path-15-item-7"
     >
       <button
+        category="tertiary"
         class="gl-path-button"
+        disabled="disabled"
       >
         <!---->
         
@@ -606,7 +610,9 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       id="path-11-item-7"
     >
       <button
+        category="tertiary"
         class="gl-path-button"
+        disabled="disabled"
       >
         <!---->
         

package/src/components/base/path/data.js

@@ -30,6 +30,7 @@ export const mockPathItems = [
   {
     title: 'Eighth',
     metric: '8d',
+    disabled: true,
   },
   {
     title: 'Ninth',

package/src/components/base/path/path.scss

@@ -78,7 +78,12 @@ $path-chevron-right-margin: px-to-rem(14px);
       @include gl-path-chevron;
     }
 
-    &:hover {
+    &[disabled] {
+      @include gl-text-gray-400;
+      @include gl-cursor-not-allowed;
+    }
+
+    &:not([disabled]):hover {
       @include gl-path-active-item-color($gray-100);
       @include gl-text-gray-900;
     }

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

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { mockPathItems } from './data';
 import GlPath from './path.vue';
@@ -143,6 +144,17 @@ describe('Path', () => {
       it('selects the first item', () => {
         expect(pathItemAt(0).classList).toContain(SELECTED_CLASS_INDIGO);
       });
+
+      it('updates the selected item when props change', async () => {
+        const items = JSON.parse(JSON.stringify(mockPathItems));
+        items[3].selected = true;
+
+        wrapper.setProps({ items });
+        await nextTick();
+
+        expect(pathItemAt(0).classList).not.toContain(SELECTED_CLASS_INDIGO);
+        expect(pathItemAt(3).classList).toContain(SELECTED_CLASS_INDIGO);
+      });
     });
 
     describe('with a specifically selected item passed in', () => {
@@ -188,6 +200,14 @@ describe('Path', () => {
         ]);
       });
     });
+
+    describe('when a disabled item is clicked', () => {
+      it('does not emit the selected event', () => {
+        clickItemAt(7);
+
+        expect(wrapper.emitted('selected')).toBeUndefined();
+      });
+    });
   });
 
   describe('slots', () => {

package/src/components/base/path/path.vue

@@ -21,9 +21,10 @@ export default {
      * A list of path items in the form:
      * ```
      * {
-     *   title:  String, required
-     *   metric: Any, optional
-     *   icon:   String, optional
+     *   title:    String, required
+     *   metric:   Any, optional
+     *   icon:     String, optional
+     *   disabled: Boolean, optional
      * }
      * ```
      */
@@ -78,9 +79,14 @@ export default {
       return this.scrollLeft + BOUNDARY_WIDTH;
     },
   },
-  mounted() {
-    const selectedIndex = this.items.findIndex((item) => item.selected);
-    this.selectedIndex = selectedIndex > 0 ? selectedIndex : 0;
+  watch: {
+    items: {
+      immediate: true,
+      handler(items) {
+        const selectedIndex = items.findIndex((item) => item.selected);
+        this.selectedIndex = selectedIndex > 0 ? selectedIndex : 0;
+      },
+    },
   },
   beforeCreate() {
     this.pathUuid = uniqueId('path-');
@@ -164,7 +170,12 @@ export default {
         :key="index"
         class="gl-path-nav-list-item"
       >
-        <button :class="pathItemClass(index)" @click="onItemClicked(index)">
+        <button
+          :class="pathItemClass(index)"
+          :category="item.disabled ? 'tertiary' : undefined"
+          :disabled="item.disabled"
+          @click="onItemClicked(index)"
+        >
           <gl-icon
             v-if="shouldDisplayIcon(item.icon)"
             :name="item.icon"

package/src/components/base/tabs/tab/tab.vue

@@ -15,6 +15,9 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * Query string parameter value to use when `gl-tabs` `sync-active-tab-with-query-params` prop is set to `true`.
+     */
     queryParamValue: {
       type: String,
       required: false,
@@ -36,6 +39,7 @@ export default {
   },
 };
 </script>
+
 <template>
   <b-tab
     :title-link-class="linkClass"

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

@@ -1,18 +1,6 @@
-import examples from './examples';
 import description from './tabs.md';
 
 export default {
   description,
-  examples,
-  bootstrapComponent: 'b-tabs',
   followsDesignSystem: true,
-  propsInfo: {
-    syncActiveTabWithQueryParams: {
-      additionalInfo:
-        'Sync active tab with query string parameters. Allows for deep linking into specific tabs.',
-    },
-    queryParamName: {
-      additionalInfo: 'Name to use for query string parameter.',
-    },
-  },
 };

package/src/components/base/tabs/tabs/tabs.md

@@ -1,15 +1,10 @@
-# Tabs
-
-<!-- STORY -->
-## Usage
-
 Tabs are used to divide content into meaningful, related sections. Tabs allow users to focus on one
 specific view at a time while maintaining sight of all the relevant content options available. Each
 tab, when active, will reveal it’s own unique content.
 
 ## Using the component Vue
 
-~~~js
+~~~html
 <gl-tabs>
   <gl-tab title="Tab 1">
     Tab panel 1
@@ -22,7 +17,7 @@ tab, when active, will reveal it’s own unique content.
 
 ## Using the component HTML
 
-~~~js
+~~~html
 <div class="tabs gl-tabs">
   <ul role="tablist" class="nav gl-tabs-nav">
     <li role="presentation" class="nav-item">