@gitlab/ui 62.9.3 → 62.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "62.9.3",
+  "version": "62.11.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -89,7 +89,7 @@
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.44.0",
+    "@gitlab/svgs": "3.45.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -36,6 +36,7 @@ The disclosure dropdown is closed by any of the following:
 
 - pressing <kbd>Esc</kbd>
 - clicking anywhere outside the component
+- clicking the action or link inside the dropdown
 
 After closing, `GlDisclosureDropdown` emits a `hidden` event.
 

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js

@@ -323,4 +323,20 @@ describe('GlDisclosureDropdown', () => {
       expect(findBaseDropdown().props('fluidWidth')).toBe(true);
     });
   });
+
+  describe('auto closing', () => {
+    it('closes the dropdown when `autoClose` is set on item click', () => {
+      buildWrapper({ items: mockItems });
+      const closeSpy = jest.spyOn(wrapper.vm.$refs.baseDropdown, 'closeAndFocus');
+      findListItem(0).trigger('click');
+      expect(closeSpy).toHaveBeenCalled();
+    });
+
+    it('does not close the dropdown  on item click when `autoClose` is set to `false`', () => {
+      buildWrapper({ items: mockItems, autoClose: false });
+      const closeSpy = jest.spyOn(wrapper.vm.$refs.baseDropdown, 'closeAndFocus');
+      findListItem(0).trigger('click');
+      expect(closeSpy).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -40,6 +40,7 @@ const makeBindings = (overrides = {}) =>
     ':toggle-aria-labelled-by': 'toggleAriaLabelledBy',
     ':list-aria-labelled-by': 'listAriaLabelledBy',
     ':fluid-width': 'fluidWidth',
+    ':auto-close': 'autoClose',
     ...overrides,
   })
     .map(([key, value]) => `${key}="${value}"`)
@@ -216,7 +217,7 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
       </button>
       </template>
       <gl-disclosure-dropdown-group>
-        <gl-disclosure-dropdown-item>
+        <gl-disclosure-dropdown-item @action="closeDropdown">
           <template #list-item>
             <span class="gl-display-flex gl-flex-direction-column">
               <span class="gl-font-weight-bold gl-white-space-nowrap">Orange Fox</span>
@@ -225,7 +226,7 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
           </template>
         </gl-disclosure-dropdown-item>
       </gl-disclosure-dropdown-group>
-      <gl-disclosure-dropdown-group bordered :group="$options.groups[0]">
+      <gl-disclosure-dropdown-group bordered :group="$options.groups[0]" @action="closeDropdown">
         <template #list-item="{ item }">
           <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
             {{item.text}}
@@ -249,7 +250,7 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
           <template #list-item>Provide feedback</template>
         </gl-disclosure-dropdown-item>
       </gl-disclosure-dropdown-group>
-      <gl-disclosure-dropdown-group bordered :group="$options.groups[1]"/>
+      <gl-disclosure-dropdown-group bordered :group="$options.groups[1]" @action="closeDropdown"/>
     `,
     {
       after: `
@@ -266,11 +267,19 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
     };
   },
   methods: {
+    closeDropdown() {
+      this.$refs.disclosure.closeAndFocus();
+    },
     toggleModalVisibility(value) {
       this.feedBackModalVisible = value;
+      this.closeDropdown();
     },
     toggleNewNavigation() {
       this.newNavigation = !this.newNavigation;
+      // eslint-disable-next-line no-restricted-globals
+      setTimeout(() => {
+        this.closeDropdown();
+      }, 500);
     },
   },
   groups: mockProfileGroups,
@@ -279,6 +288,7 @@ CustomGroupsItemsAndToggle.args = {
   icon: 'plus-square',
   toggleText: 'User profile menu',
   textSrOnly: true,
+  autoClose: false,
 };
 CustomGroupsItemsAndToggle.decorators = [makeContainer({ height: '400px' })];
 

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -7,6 +7,8 @@ import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
   GL_DROPDOWN_FOCUS_CONTENT,
+  ENTER,
+  SPACE,
   HOME,
   END,
   ARROW_DOWN,
@@ -23,6 +25,8 @@ import GlDisclosureDropdownItem, { ITEM_CLASS } from './disclosure_dropdown_item
 import GlDisclosureDropdownGroup from './disclosure_dropdown_group.vue';
 import { itemsValidator, isItem, hasOnlyListItems } from './utils';
 
+export const ITEM_SELECTOR = `.${ITEM_CLASS}`;
+
 export default {
   name: 'GlDisclosureDropdown',
   events: {
@@ -183,6 +187,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Close the dropdown on item click (action)
+     */
+    autoClose: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -241,6 +253,8 @@ export default {
         this.focusNextItem(event, elements, -1);
       } else if (code === ARROW_DOWN) {
         this.focusNextItem(event, elements, 1);
+      } else if (code === ENTER || code === SPACE) {
+        this.handleAutoClose(event);
       } else {
         stop = false;
       }
@@ -250,7 +264,7 @@ export default {
       }
     },
     getFocusableListItemElements() {
-      const items = this.$refs.content?.querySelectorAll(`.${ITEM_CLASS}`);
+      const items = this.$refs.content?.querySelectorAll(ITEM_SELECTOR);
       return filterVisible(Array.from(items || []));
     },
     focusNextItem(event, elements, offset) {
@@ -276,6 +290,11 @@ export default {
        */
       this.$emit('action', action);
     },
+    handleAutoClose(e) {
+      if (this.autoClose && e.target.closest(ITEM_SELECTOR)) {
+        this.closeAndFocus();
+      }
+    },
     uniqueItemId() {
       return uniqueId(`disclosure-item-`);
     },
@@ -324,6 +343,7 @@ export default {
       class="gl-new-dropdown-contents"
       tabindex="-1"
       @keydown="onKeydown"
+      @click="handleAutoClose"
     >
       <slot>
         <template v-for="(item, index) in items">

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue

@@ -76,11 +76,10 @@ export default {
       const { code } = event;
 
       if (code === ENTER || code === SPACE) {
-        stopEvent(event);
-
         if (this.isCustomContent) {
           this.action();
         } else {
+          stopEvent(event);
           /** Instead of simply navigating or calling the action, we want
            * the `a/button` to be the target of the event as it might have additional attributes.
            * E.g. `a` might have `target` attribute.

package/src/components/charts/area/area.spec.js

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 
 import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
@@ -41,7 +42,7 @@ describe('area component', () => {
   it('emits `created`, with the chart instance', async () => {
     createShallowWrapper();
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.emitted('created').length).toBe(1);
     expect(wrapper.emitted('created')[0][0]).toBe(mockChartInstance);
@@ -51,7 +52,7 @@ describe('area component', () => {
     it('are hidden by default', async () => {
       createShallowWrapper();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().exists()).toBe(false);
     });
@@ -68,7 +69,7 @@ describe('area component', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().exists()).toBe(true);
     });
@@ -94,7 +95,7 @@ describe('area component', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().exists()).toBe(true);
     });
@@ -128,7 +129,7 @@ describe('area component', () => {
 
       wrapper.vm.onChartDataPointMouseOver(params);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().html()).toContain(params.data.xAxis);
       expect(findAnnotationsTooltip().html()).toContain(params.data.tooltipData.content);
@@ -154,7 +155,7 @@ describe('area component', () => {
 
       wrapper.setData({ dataTooltipPosition: { left, top }, dataTooltipTitle });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findDataTooltip().props('left')).toBe(`${left}`);
       expect(findDataTooltip().props('top')).toBe(`${top}`);
@@ -166,7 +167,7 @@ describe('area component', () => {
     it('is inline by default', async () => {
       createShallowWrapper();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE);
     });
@@ -178,7 +179,7 @@ describe('area component', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE);
     });
@@ -190,7 +191,7 @@ describe('area component', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_TABLE);
     });
@@ -211,7 +212,7 @@ describe('area component', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().props('seriesInfo')).toEqual(expect.arrayContaining(legendSeriesInfo));
     });

package/src/components/charts/legend/legend.spec.js

@@ -12,7 +12,7 @@ jest.mock('echarts', () => ({
   registerTheme: jest.fn(),
 }));
 
-const seriesInfo = [
+const mockSeriesInfo = [
   {
     type: 'solid',
     name: 'Example Title 1',
@@ -51,7 +51,7 @@ describe('chart legend component', () => {
     },
   ];
 
-  const buildLegend = (propsData = {}) => {
+  const buildLegend = ({ propsData = {}, seriesInfo = mockSeriesInfo } = {}) => {
     legendWrapper = shallowMount(Legend, {
       propsData: {
         ...propsData,
@@ -79,13 +79,21 @@ describe('chart legend component', () => {
   });
 
   it('allows user to override max value label text using props', () => {
-    buildLegend({ maxText: 'maxText' });
+    buildLegend({
+      propsData: {
+        maxText: 'maxText',
+      },
+    });
 
     expect(legendWrapper.text()).toMatch('maxText');
   });
 
   it('allows user to override average value label text using props', () => {
-    buildLegend({ averageText: 'averageText' });
+    buildLegend({
+      propsData: {
+        averageText: 'averageText',
+      },
+    });
 
     expect(legendWrapper.text()).toMatch('averageText');
   });
@@ -111,6 +119,36 @@ describe('chart legend component', () => {
       legendWrapper.findComponent(GlChartSeriesLabel).trigger('click');
       expect(chart.dispatchAction).toHaveBeenCalled();
     });
+
+    it('does not dispatch a `legendToggleSelect` action when there is only one active series', () => {
+      buildLegend({ seriesInfo: [mockSeriesInfo[0]] });
+
+      legendWrapper.findComponent(GlChartSeriesLabel).trigger('click');
+
+      expect(chart.dispatchAction).toHaveBeenCalledTimes(0);
+    });
+
+    it('does not dispatch a `legendToggleSelect` action on the chart when disabled=true', () => {
+      const disabledLegendItem = {
+        type: 'solid',
+        name: 'Example Title 4',
+        color: 'red',
+        data: [1, 2, 3, 4, 5],
+        disabled: true,
+      };
+
+      const seriesInfo = [...mockSeriesInfo, disabledLegendItem];
+      const disabledLegendItemIndex = seriesInfo.length - 1;
+
+      buildLegend({ seriesInfo });
+
+      legendWrapper
+        .findAllComponents(GlChartSeriesLabel)
+        .at(disabledLegendItemIndex)
+        .trigger('click');
+
+      expect(chart.dispatchAction).toHaveBeenCalledTimes(0);
+    });
   });
 
   it('renders the inline layout by default', () => {
@@ -121,7 +159,11 @@ describe('chart legend component', () => {
 
   describe('when setting the layout prop to table', () => {
     beforeEach(() => {
-      buildLegend({ layout: 'table' });
+      buildLegend({
+        propsData: {
+          layout: 'table',
+        },
+      });
       legendWrapper.vm.$nextTick();
     });
 

package/src/components/charts/legend/legend.stories.js

@@ -6,6 +6,7 @@ import {
   SERIES_NAME_LONG,
   SERIES_NAME_LONG_WITHOUT_SPACES,
 } from '../../../utils/stories_constants';
+import { gray200 } from '../../../../scss_to_js/scss_variables';
 
 const generateOptions = (seriesLength, seriesNameType) => {
   return {
@@ -79,6 +80,13 @@ const baseStoryOptions = {
   },
 };
 
+const disabledLegendItem = {
+  type: 'solid',
+  name: 'Disabled Item',
+  color: gray200,
+  disabled: true,
+};
+
 const getStoryOptions = (seriesLength, seriesNameType, legendLayoutType) => {
   return {
     ...baseStoryOptions,
@@ -89,16 +97,28 @@ const getStoryOptions = (seriesLength, seriesNameType, legendLayoutType) => {
 };
 
 export const Default = () => getStoryOptions(10, SERIES_NAME_SHORT);
+export const DefaultWithDisabledLegendItem = () => {
+  const storyOptions = getStoryOptions(10, SERIES_NAME_SHORT);
 
+  storyOptions.seriesInfo = [...storyOptions.seriesInfo, disabledLegendItem];
+
+  return storyOptions;
+};
 export const DefaultWithLongSeriesNames = () => getStoryOptions(10, SERIES_NAME_LONG);
 
 export const DefaultWithLongSeriesNamesAndNoSpaces = () =>
   getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES);
 
 export const WithTabularLayout = () => getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE);
+export const WithTabularLayoutAndDisabledLegendItem = () => {
+  const storyOptions = getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE);
+
+  storyOptions.seriesInfo = [...storyOptions.seriesInfo, disabledLegendItem];
+
+  return storyOptions;
+};
 export const WithTabularLayoutAndLongSeriesNames = () =>
   getStoryOptions(10, SERIES_NAME_LONG, LEGEND_LAYOUT_TABLE);
-
 export const WithTabularLayoutAndLongSeriesNamesWithNoSpaces = () =>
   getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES, LEGEND_LAYOUT_TABLE);
 

package/src/components/charts/legend/legend.vue

@@ -82,6 +82,7 @@ export default {
   data() {
     return {
       disabledSeries: {},
+      lastActiveSeriesLabel: null,
     };
   },
   computed: {
@@ -91,6 +92,15 @@ export default {
         fontSize: `${this.textStyle.fontSize || defaultFontSize}px`,
       };
     },
+    hasOneSeriesElement() {
+      return this.seriesInfo.length === 1;
+    },
+  },
+  created() {
+    this.chart.on('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
+  },
+  beforeDestroy() {
+    this.chart.off('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
   },
   methods: {
     sanitizeSeriesData(seriesData) {
@@ -115,7 +125,9 @@ export default {
     seriesNameIsLong(seriesName) {
       return seriesName.length > 120;
     },
-    handleClick(name, key) {
+    handleClick({ name, disabled }, key) {
+      if (this.hasOneSeriesElement || this.isToggleDisabled(name, disabled)) return;
+
       this.chart.dispatchAction({ type: 'legendToggleSelect', name });
       this.disabledSeries = { ...this.disabledSeries, [key]: !this.disabledSeries[key] };
     },
@@ -128,6 +140,29 @@ export default {
     getColor(color, key) {
       return this.disabledSeries[key] ? gray200 : color;
     },
+    suppressLastActiveSeriesLabelToggle({ selected }) {
+      const selectedSeriesLabels = Object.entries(selected).filter(([, isSelected]) =>
+        Boolean(isSelected)
+      );
+
+      this.lastActiveSeriesLabel = null;
+
+      if (selectedSeriesLabels.length === 1) {
+        const [lastActiveSeriesLabelName] = selectedSeriesLabels[0];
+
+        this.lastActiveSeriesLabel = lastActiveSeriesLabelName;
+      }
+    },
+    /**
+     * Disables toggling legend if it is the last active one or if its data series
+     * has a disabled property set to true
+     * @param {String} name Series name
+     * @param {Boolean} isDisabled Value of the series element's disabled property
+     * @returns {boolean}
+     */
+    isToggleDisabled(name, isDisabled) {
+      return name === this.lastActiveSeriesLabel || isDisabled;
+    },
   },
   legendLayoutTypes: {
     LEGEND_LAYOUT_INLINE,
@@ -137,17 +172,23 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div data-testid="gl-chart-legend">
     <template v-if="layout === $options.legendLayoutTypes.LEGEND_LAYOUT_INLINE">
       <div class="gl-legend-inline">
         <div
           v-for="(series, key) in seriesInfo"
           :key="key"
-          :class="{ 'text-muted': disabledSeries[key], 'w-100': seriesNameIsLong(series.name) }"
+          :class="{
+            'text-muted': disabledSeries[key],
+            'w-100': seriesNameIsLong(series.name),
+            'gl-hover-cursor-not-allowed!':
+              hasOneSeriesElement || isToggleDisabled(series.name, series.disabled),
+          }"
           class="gl-legend-inline-series"
           :style="fontStyle"
+          :aria-disabled="hasOneSeriesElement || isToggleDisabled(series.name, series.disabled)"
           role="button"
-          @click="handleClick(series.name, key)"
+          @click="handleClick(series, key)"
           @mouseenter="handleMouseEnter(series.name)"
           @mouseleave="handleMouseLeave(series.name)"
         >
@@ -182,11 +223,16 @@ export default {
           <div
             v-for="(series, key) in seriesInfo"
             :key="key"
-            :class="{ 'text-muted': disabledSeries[key] }"
+            :class="{
+              'text-muted': disabledSeries[key],
+              'gl-hover-cursor-not-allowed!':
+                hasOneSeriesElement || isToggleDisabled(series.name, series.disabled),
+            }"
             class="gl-legend-tabular-row"
             :style="fontStyle"
+            :aria-disabled="isToggleDisabled(series.name, series.disabled)"
             role="button"
-            @click="handleClick(series.name, key)"
+            @click="handleClick(series, key)"
             @mouseenter="handleMouseEnter(series.name)"
             @mouseleave="handleMouseLeave(series.name)"
           >

package/src/scss/utilities.scss

@@ -2805,10 +2805,18 @@
   cursor: not-allowed
 }
 
+.gl-hover-cursor-not-allowed:hover {
+  cursor: not-allowed
+}
+
 .gl-cursor-not-allowed\! {
   cursor: not-allowed !important
 }
 
+.gl-hover-cursor-not-allowed\!:hover {
+  cursor: not-allowed !important
+}
+
 .gl-cursor-text {
   cursor: text
 }

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

@@ -19,7 +19,7 @@
   cursor: grabbing;
 }
 
-@mixin gl-cursor-not-allowed {
+@mixin gl-cursor-not-allowed($hover: true) {
   cursor: not-allowed;
 }