@gitlab/ui 38.10.1 → 38.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "38.10.1",
+  "version": "38.12.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -92,15 +92,15 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.20",
-    "@storybook/addon-docs": "6.4.20",
-    "@storybook/addon-essentials": "6.4.20",
+    "@storybook/addon-a11y": "6.4.22",
+    "@storybook/addon-docs": "6.4.22",
+    "@storybook/addon-essentials": "6.4.22",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.20",
-    "@storybook/addon-storyshots-puppeteer": "6.4.20",
-    "@storybook/addon-viewport": "6.4.20",
-    "@storybook/theming": "6.4.20",
-    "@storybook/vue": "6.4.20",
+    "@storybook/addon-storyshots": "6.4.22",
+    "@storybook/addon-storyshots-puppeteer": "6.4.22",
+    "@storybook/addon-viewport": "6.4.22",
+    "@storybook/theming": "6.4.22",
+    "@storybook/vue": "6.4.22",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",

package/src/components/base/alert/alert.vue

@@ -173,14 +173,6 @@ export default {
       :class="{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !title }"
     />
 
-    <close-button
-      v-if="dismissible"
-      ref="dismiss"
-      class="gl-dismiss-btn"
-      :label="dismissLabel"
-      @click="onDismiss"
-    />
-
     <div class="gl-alert-content" role="alert">
       <h4 v-if="title" class="gl-alert-title">{{ title }}</h4>
 
@@ -204,5 +196,13 @@ export default {
         </slot>
       </div>
     </div>
+
+    <close-button
+      v-if="dismissible"
+      ref="dismiss"
+      class="gl-dismiss-btn"
+      :label="dismissLabel"
+      @click="onDismiss"
+    />
   </div>
 </template>

package/src/components/base/filtered_search/__snapshots__/filtered_search_term.spec.js.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Filtered search term renders input with value in active mode 1`] = `
-<div class="gl-h-auto gl-filtered-search-term">
-  <div active="true" value="test-value" class="gl-filtered-search-term-token">test-value</div>
+<div data-testid="filtered-search-term" class="gl-h-auto gl-filtered-search-term">
+  <div active="true" cursor-position="end" value="test-value" class="gl-filtered-search-term-token">test-value</div>
 </div>
 `;
 
 exports[`Filtered search term renders value in inactive mode 1`] = `
-<div class="gl-h-auto gl-filtered-search-term">
-  <div value="test-value" class="gl-filtered-search-term-token">test-value</div>
+<div data-testid="filtered-search-term" class="gl-h-auto gl-filtered-search-term">
+  <div cursor-position="end" value="test-value" class="gl-filtered-search-term-token">test-value</div>
 </div>
 `;

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

@@ -9,6 +9,7 @@ import {
   GlIcon,
   GlToken,
   GlAvatar,
+  GlDropdownDivider,
 } from '../../../index';
 import { setStoryTimeout } from '../../../utils/test_utils';
 import { makeContainer } from '../../../utils/story_decorators/container';
@@ -178,7 +179,13 @@ const MilestoneToken = {
 
 const LabelToken = {
   name: 'LabelToken',
-  components: { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon, GlToken },
+  components: {
+    GlFilteredSearchToken,
+    GlFilteredSearchSuggestion,
+    GlLoadingIcon,
+    GlToken,
+    GlDropdownDivider,
+  },
   props: ['value', 'active'],
   inheritAttrs: false,
   data() {

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

@@ -119,6 +119,7 @@ export default {
       tokens: initialState(),
       activeTokenIdx: null,
       suggestionsStyle: {},
+      intendedCursorPosition: 'end',
     };
   },
   computed: {
@@ -210,6 +211,20 @@ export default {
       this.activeTokenIdx = idx;
     },
 
+    activatePreviousToken() {
+      if (this.activeTokenIdx > 0) {
+        this.activeTokenIdx -= 1;
+        this.intendedCursorPosition = 'end';
+      }
+    },
+
+    activateNextToken() {
+      if (this.activeTokenIdx < this.value.length) {
+        this.activeTokenIdx += 1;
+        this.intendedCursorPosition = 'start';
+      }
+    },
+
     alignSuggestions(ref) {
       const offsetRef = ref.getBoundingClientRect().left;
       const offsetMenu = this.$el.getBoundingClientRect().left;
@@ -218,6 +233,7 @@ export default {
     },
 
     deactivate(token) {
+      this.intendedCursorPosition = 'end';
       const tokenIdx = this.tokens.indexOf(token);
       if (tokenIdx === -1 || this.activeTokenIdx !== tokenIdx) {
         return;
@@ -341,6 +357,7 @@ export default {
             v-model="token.value"
             :config="getTokenEntry(token.type)"
             :active="activeTokenIdx === idx"
+            :cursor-position="intendedCursorPosition"
             :available-tokens="currentAvailableTokens"
             :current-value="tokens"
             :index="idx"
@@ -359,6 +376,8 @@ export default {
             @complete="completeToken"
             @submit="submit"
             @split="createTokens(idx, $event)"
+            @previous="activatePreviousToken"
+            @next="activateNextToken"
           />
         </template>
       </div>

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

@@ -17,6 +17,7 @@ describe('Filtered search term', () => {
 
   const defaultProps = {
     availableTokens: [],
+    cursorPosition: 'end',
   };
 
   const segmentStub = {

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

@@ -63,6 +63,11 @@ export default {
       required: false,
       default: () => [],
     },
+    cursorPosition: {
+      type: String,
+      required: true,
+      validator: (value) => ['start', 'end'].includes(value),
+    },
   },
   computed: {
     suggestedTokens() {
@@ -101,7 +106,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-h-auto gl-filtered-search-term">
+  <div class="gl-h-auto gl-filtered-search-term" data-testid="filtered-search-term">
     <!--
       Emitted when this term token is clicked.
       @event activate
@@ -125,9 +130,11 @@ export default {
       @property {array} newTokens Token configurations
     -->
     <gl-filtered-search-token-segment
+      ref="segment"
       v-model="internalValue"
       class="gl-filtered-search-term-token"
       :active="active"
+      :cursor-position="cursorPosition"
       :class="{ 'gl-w-full': placeholder }"
       :search-input-attributes="searchInputAttributes"
       :is-last-token="isLastToken"
@@ -138,6 +145,8 @@ export default {
       @backspace="onBackspace"
       @submit="$emit('submit')"
       @split="$emit('split', $event)"
+      @previous="$emit('previous')"
+      @next="$emit('next')"
     >
       <template #suggestions>
         <gl-filtered-search-suggestion
@@ -156,6 +165,7 @@ export default {
           class="gl-filtered-search-term-input"
           :placeholder="placeholder"
           :aria-label="placeholder"
+          data-testid="filtered-search-term-input"
         />
         <template v-else>{{ value.data }}</template>
       </template>

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

@@ -30,6 +30,7 @@ describe('Filtered search token', () => {
   const defaultProps = {
     config: { title: 'testTitle' },
     availableTokens,
+    cursorPosition: 'end',
   };
 
   const createComponent = (props) => {

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

@@ -65,11 +65,17 @@ export default {
       required: false,
       default: false,
     },
+    cursorPosition: {
+      type: String,
+      required: true,
+      validator: (value) => ['start', 'end'].includes(value),
+    },
   },
   data() {
     return {
       activeSegment: null,
       tokenValue: cloneDeep(this.value),
+      intendedCursorPosition: this.cursorPosition,
     };
   },
 
@@ -127,6 +133,7 @@ export default {
       immediate: true,
       handler(newValue) {
         if (newValue) {
+          this.intendedCursorPosition = this.cursorPosition;
           if (!this.activeSegment) {
             this.activateSegment(this.tokenValue.data !== '' ? SEGMENT_DATA : SEGMENT_OPERATOR);
           }
@@ -239,6 +246,26 @@ export default {
       this.activateSegment(this.$options.segments.SEGMENT_DATA);
     },
 
+    activatePreviousOperatorSegment() {
+      this.activateSegment(this.$options.segments.SEGMENT_OPERATOR);
+      this.intendedCursorPosition = 'end';
+    },
+
+    activatePreviousTitleSegment() {
+      this.activateSegment(this.$options.segments.SEGMENT_TITLE);
+      this.intendedCursorPosition = 'end';
+    },
+
+    activateNextDataSegment() {
+      this.activateDataSegment();
+      this.intendedCursorPosition = 'start';
+    },
+
+    activateNextOperatorSegment() {
+      this.activateSegment(this.$options.segments.SEGMENT_OPERATOR);
+      this.intendedCursorPosition = 'start';
+    },
+
     handleComplete() {
       if (this.config.multiSelect) {
         this.$emit('input', { ...this.tokenValue, data: this.multiSelectValues.join(COMMA) });
@@ -263,7 +290,11 @@ export default {
 </script>
 
 <template>
-  <div class="gl-filtered-search-token" :class="{ 'gl-filtered-search-token-active': active }">
+  <div
+    class="gl-filtered-search-token"
+    :class="{ 'gl-filtered-search-token-active': active }"
+    data-testid="filtered-search-token"
+  >
     <!--
       Emitted when the token is submitted.
       @event submit
@@ -272,12 +303,15 @@ export default {
       key="title-segment"
       :value="config.title"
       :active="isSegmentActive($options.segments.SEGMENT_TITLE)"
+      :cursor-position="intendedCursorPosition"
       :options="availableTokensWithSelf"
       @activate="activateSegment($options.segments.SEGMENT_TITLE)"
       @deactivate="$emit('deactivate')"
       @complete="replaceToken"
       @backspace="$emit('destroy')"
       @submit="$emit('submit')"
+      @previous="$emit('previous')"
+      @next="activateNextOperatorSegment"
     >
       <template #view="{ inputValue }">
         <gl-token
@@ -292,6 +326,7 @@ export default {
       key="operator-segment"
       v-model="tokenValue.operator"
       :active="isSegmentActive($options.segments.SEGMENT_OPERATOR)"
+      :cursor-position="intendedCursorPosition"
       :options="operators"
       :custom-input-keydown-handler="handleOperatorKeydown"
       view-only
@@ -299,6 +334,8 @@ export default {
       @backspace="replaceWithTermIfEmpty"
       @complete="activateSegment($options.segments.SEGMENT_DATA)"
       @deactivate="$emit('deactivate')"
+      @previous="activatePreviousTitleSegment"
+      @next="activateNextDataSegment"
     >
       <template #view>
         <gl-token
@@ -333,6 +370,7 @@ export default {
       key="data-segment"
       v-model="tokenValue.data"
       :active="isSegmentActive($options.segments.SEGMENT_DATA)"
+      :cursor-position="intendedCursorPosition"
       :multi-select="config.multiSelect"
       :options="config.options"
       option-text-field="title"
@@ -343,6 +381,8 @@ export default {
       @submit="$emit('submit')"
       @deactivate="$emit('deactivate')"
       @split="$emit('split', $event)"
+      @previous="activatePreviousOperatorSegment"
+      @next="$emit('next')"
     >
       <template #suggestions>
         <!-- @slot The suggestions (implemented with GlFilteredSearchSuggestion). -->

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

@@ -35,7 +35,7 @@ describe('Filtered search token segment', () => {
     };
 
     wrapper = shallowMount(GlFilteredSearchTokenSegment, {
-      propsData: props,
+      propsData: { ...props, cursorPosition: 'end' },
       provide: {
         portalName: 'fakePortal',
         alignSuggestions: alignSuggestionsMock,
@@ -64,7 +64,7 @@ describe('Filtered search token segment', () => {
     };
 
     wrapper = shallowMount(fakeParent, {
-      propsData: otherProps,
+      propsData: { ...otherProps, cursorPosition: 'end' },
       stubs: { GlFilteredSearchTokenSegment },
     });
   };

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

@@ -77,6 +77,11 @@ export default {
       required: false,
       default: () => [],
     },
+    cursorPosition: {
+      type: String,
+      required: true,
+      validator: (value) => ['start', 'end'].includes(value),
+    },
   },
 
   data() {
@@ -198,6 +203,9 @@ export default {
           input.focus();
           input.scrollIntoView({ block: 'nearest', inline: 'end' });
           this.alignSuggestions(input);
+          if (this.cursorPosition === 'start') {
+            input?.setSelectionRange(0, 0);
+          }
         }
       });
     },
@@ -230,20 +238,31 @@ export default {
 
     handleInputKeydown(e) {
       const { key } = e;
-      const { suggestions } = this.$refs;
+      const { suggestions, input } = this.$refs;
       const suggestedValue = suggestions?.getValue();
-      if (key === 'Backspace') {
-        if (this.inputValue === '') {
-          e.preventDefault();
-          /**
-           * Emitted when Backspace is pressed and the value is empty
-           */
-          this.$emit('backspace');
-        }
-        return;
-      }
 
       const handlers = {
+        ArrowLeft: () => {
+          if (input.selectionStart === 0) {
+            e.preventDefault();
+            this.$emit('previous');
+          }
+        },
+        ArrowRight: () => {
+          if (input.selectionEnd === this.inputValue.length) {
+            e.preventDefault();
+            this.$emit('next');
+          }
+        },
+        Backspace: () => {
+          if (this.inputValue === '') {
+            e.preventDefault();
+            /**
+             * Emitted when Backspace is pressed and the value is empty
+             */
+            this.$emit('backspace');
+          }
+        },
         Enter: () => {
           e.preventDefault();
           if (suggestedValue != null) {
@@ -311,7 +330,9 @@ export default {
   <div
     v-bind="containerAttributes"
     class="gl-filtered-search-token-segment"
-    :class="{ 'gl-filtered-search-token-segment-active': active }"
+    :class="{
+      'gl-filtered-search-token-segment-active': active,
+    }"
     data-testid="filtered-search-token-segment"
     @mousedown.left="emitIfInactive"
   >

package/src/components/base/form/form_checkbox/form_checkbox.scss

@@ -43,9 +43,11 @@
   }
 
   .form-check-input:disabled,
-  .form-check-input:disabled ~ .form-check-label {
+  .form-check-input:disabled ~ .form-check-label,
+  .custom-control-input:disabled,
+  .custom-control-input:disabled ~ .custom-control-label {
     @include gl-cursor-not-allowed;
-    @include gl-text-gray-500;
+    @include gl-text-gray-400;
   }
 
   &.custom-control {

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

@@ -0,0 +1,42 @@
+import { shallowMount } from '@vue/test-utils';
+import GlPopover from '../../base/popover/popover.vue';
+import { popoverPlacements } from '../../../utils/constants';
+import ChartTooltip from './tooltip.vue';
+import { createMockChartInstance } from '~helpers/chart_stubs';
+
+let mockChartInstance;
+
+jest.mock('echarts', () => ({
+  getInstanceByDom: () => mockChartInstance,
+}));
+
+describe('ChartTooltip', () => {
+  let wrapper;
+
+  const findGlPopover = () => wrapper.findComponent(GlPopover);
+
+  const createWrapper = (props = {}) => {
+    mockChartInstance = createMockChartInstance();
+    wrapper = shallowMount(ChartTooltip, {
+      propsData: {
+        chart: mockChartInstance,
+        ...props,
+      },
+    });
+  };
+
+  describe('GlPopover', () => {
+    it('is right-positioned by default', () => {
+      createWrapper();
+
+      expect(findGlPopover().props('placement')).toBe(popoverPlacements.right);
+    });
+
+    it('applies passed placement if any', () => {
+      const placement = popoverPlacements.bottom;
+      createWrapper({ placement });
+
+      expect(findGlPopover().props('placement')).toBe(placement);
+    });
+  });
+});

package/src/components/charts/tooltip/tooltip.vue

@@ -2,6 +2,7 @@
 import * as echarts from 'echarts';
 import { uid } from '../../../utils/utils';
 import GlPopover from '../../base/popover/popover.vue';
+import { popoverPlacements } from '../../../utils/constants';
 
 export default {
   components: {
@@ -41,6 +42,11 @@ export default {
       required: false,
       default: null,
     },
+    placement: {
+      type: String,
+      required: false,
+      default: popoverPlacements.right,
+    },
   },
   computed: {
     containerId() {
@@ -80,7 +86,13 @@ export default {
       Needs to be triggered programatically using `show` property
       This is why `triggers` is currently set to an empty string
     -->
-    <gl-popover v-bind="$attrs" :target="containerId" :container="containerId" triggers="">
+    <gl-popover
+      v-bind="$attrs"
+      :target="containerId"
+      :container="containerId"
+      :placement="placement"
+      triggers=""
+    >
       <template v-if="$scopedSlots.title" #title>
         <slot name="title"></slot>
       </template>