@gitlab/ui 36.7.1 → 37.2.0

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

@@ -1,6 +1,7 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import { GlIcon } from '../../../index';
 import { iconSizeOptions } from '../../../utils/constants';
+import { disableControls } from '../../../utils/stories_utils';
 import readme from './icon.md';
 
 const components = {
@@ -41,6 +42,7 @@ export default {
     storyshots: { disable: true },
   },
   argTypes: {
+    ...disableControls(['useDeprecatedSizes']),
     name: {
       control: {
         type: 'select',
@@ -53,10 +55,5 @@ export default {
         options: iconSizeOptions,
       },
     },
-    useDeprecatedSizes: {
-      control: {
-        disable: true,
-      },
-    },
   },
 };

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">