@gitlab/ui 38.10.2 → 39.0.0

package/dist/utils/constants.js

@@ -251,9 +251,5 @@ const loadingIconSizes = {
   'lg (32x32)': 'lg',
   'xl (64x64)': 'xl'
 };
-const textareaCountOptions = {
-  max: 'max',
-  recommended: 'recommended'
-};
 
-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, textareaCountOptions, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "38.10.2",
+  "version": "39.0.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/base/form/form_textarea/form_textarea.spec.js

@@ -1,5 +1,4 @@
 import { mount } from '@vue/test-utils';
-import { textareaCountOptions } from '../../../../utils/constants';
 import GlFormTextarea from './form_textarea.vue';
 
 const modelEvent = GlFormTextarea.model.event;
@@ -7,13 +6,11 @@ const newValue = 'foo';
 
 describe('GlFormTextArea', () => {
   let wrapper;
-  let textarea;
 
   const createComponent = (propsData = {}) => {
     wrapper = mount(GlFormTextarea, {
       propsData,
     });
-    textarea = wrapper.find('textarea');
   };
 
   describe('v-model', () => {
@@ -23,7 +20,7 @@ describe('GlFormTextArea', () => {
       });
 
       it(`sets the textarea's value`, () => {
-        expect(textarea.element.value).toBe('initial');
+        expect(wrapper.element.value).toBe('initial');
       });
 
       describe('when the value prop changes', () => {
@@ -33,7 +30,7 @@ describe('GlFormTextArea', () => {
         });
 
         it(`updates the textarea's value`, () => {
-          expect(textarea.element.value).toBe(newValue);
+          expect(wrapper.element.value).toBe(newValue);
         });
       });
     });
@@ -42,7 +39,7 @@ describe('GlFormTextArea', () => {
       beforeEach(() => {
         createComponent();
 
-        textarea.setValue(newValue);
+        wrapper.setValue(newValue);
       });
 
       it('synchronously emits update event', () => {
@@ -62,7 +59,7 @@ describe('GlFormTextArea', () => {
 
         createComponent({ debounce });
 
-        textarea.setValue(newValue);
+        wrapper.setValue(newValue);
       });
 
       it('synchronously emits an update event', () => {
@@ -85,7 +82,7 @@ describe('GlFormTextArea', () => {
     beforeEach(() => {
       createComponent({ lazy: true });
 
-      textarea.setValue(newValue);
+      wrapper.setValue(newValue);
     });
 
     it('synchronously emits an update event', () => {
@@ -95,7 +92,7 @@ describe('GlFormTextArea', () => {
     it.each(['change', 'blur'])('updates model after %s event', (event) => {
       expect(wrapper.emitted(modelEvent)).toBe(undefined);
 
-      textarea.trigger(event);
+      wrapper.trigger(event);
 
       expect(wrapper.emitted(modelEvent)).toEqual([[newValue]]);
     });
@@ -105,7 +102,7 @@ describe('GlFormTextArea', () => {
     it('should be false by default', () => {
       createComponent({});
 
-      textarea.trigger('keyup.enter', {
+      wrapper.trigger('keyup.enter', {
         metaKey: true,
       });
 
@@ -115,115 +112,11 @@ describe('GlFormTextArea', () => {
     it('should emit submit when cmd+enter is pressed', async () => {
       createComponent({ submitOnEnter: true });
 
-      textarea.trigger('keyup.enter', {
+      wrapper.trigger('keyup.enter', {
         metaKey: true,
       });
 
       expect(wrapper.emitted().submit).toEqual([[]]);
     });
   });
-
-  describe('count', () => {
-    it('should be 0 by default', () => {
-      createComponent({
-        characterCountText: '%{count} characters left',
-        characterCountOverLimitText: '%{count} characters over limit',
-      });
-
-      expect(wrapper.text()).not.toContain('characters left');
-      expect(wrapper.text()).not.toContain('characters over limit');
-    });
-
-    it('should display the remaining characters when a count is provided', () => {
-      createComponent({
-        count: 400,
-        characterCountText: '%{count} characters left',
-        characterCountOverLimitText: '%{count} characters over limit',
-      });
-
-      expect(wrapper.text()).toContain('400 characters left');
-    });
-
-    it('should display the difference between the limit and the length of the value', () => {
-      const value = 'hello';
-
-      createComponent({
-        value,
-        count: 400,
-        characterCountText: '%{count} characters left',
-        characterCountOverLimitText: '%{count} characters over limit',
-      });
-
-      const { length } = value;
-
-      expect(wrapper.text()).toContain(`${400 - length} characters left`);
-    });
-
-    it('should display the over limit text once over the limit', () => {
-      const value = 'hello';
-      const count = 4;
-
-      createComponent({
-        value,
-        count,
-        characterCountText: '%{count} characters left',
-        characterCountOverLimitText: '%{count} characters over limit',
-      });
-
-      const diff = Math.abs(count - value.length);
-
-      expect(wrapper.text()).toContain(`${diff} characters over limit`);
-    });
-
-    describe('max', () => {
-      it('should display the text as grey when up to the limit', () => {
-        const value = 'hello';
-        const count = 5;
-
-        createComponent({
-          value,
-          count,
-          characterCountText: '%{count} characters left',
-          characterCountOverLimitText: '%{count} characters over limit',
-        });
-
-        const small = wrapper.find('small');
-
-        expect(small.classes()).toContain('gl-text-gray-500');
-      });
-      it('should display the text as danger when over the limit', () => {
-        const value = 'hello';
-        const count = 4;
-
-        createComponent({
-          value,
-          count,
-          characterCountText: '%{count} characters left',
-          characterCountOverLimitText: '%{count} characters over limit',
-        });
-
-        const small = wrapper.find('small');
-
-        expect(small.classes()).toContain('gl-text-red-500');
-      });
-    });
-    describe('recommended', () => {
-      it('should display the text as gray when over the limit', () => {
-        const value = 'hello';
-        const count = 4;
-
-        createComponent({
-          value,
-          count,
-          countType: textareaCountOptions.recommended,
-          characterCountText: '%{count} characters left',
-          characterCountOverLimitText: '%{count} characters over limit',
-        });
-
-        const small = wrapper.find('small');
-
-        expect(small.classes()).toContain('gl-text-gray-500');
-      });
-    });
-  });
 });