@gitlab/ui 59.1.1 → 59.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "59.1.1",
+  "version": "59.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -85,12 +85,12 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.21.3",
-    "@babel/preset-env": "^7.20.2",
-    "@gitlab/eslint-plugin": "18.2.0",
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@gitlab/eslint-plugin": "18.3.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.31.0",
+    "@gitlab/svgs": "3.36.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/button/button.scss

@@ -337,6 +337,10 @@
     }
   }
 
+  &.btn-default-tertiary.selected {
+    box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300;
+  }
+
   &.btn-sm {
     @include gl-py-2;
     @include gl-px-3;

package/src/components/base/filtered_search/filtered_search.md

@@ -20,9 +20,10 @@ Prepare array of available token configurations with the following fields:
   (e.g. `{ value: '=', description: 'is', default: 'true' }`)
 - `multiSelect`: (optional) when `true`, the suggestions list becomes multi-select instead of single-select.
   It is discouraged to use this together with `unique`, as `unique` is intended for single-select.
-- `options`: (optional) an array of options which the user can pick after the operator has been selected.
-  The option object can have the following properties defined: `value`, `icon`, `text`, and `default`
-  all of which are expected be of type `string`. If the `default` is omitted, the `value` of the first
+- `options`: (optional) an array of options which the user can pick after the
+  operator has been selected. The option object can have the following
+  properties defined: `value: string`, `icon: string`, `title: string` and
+  `default: boolean`. If the `default` is omitted, the `value` of the first
   option will be displayed as a suggestion
 - any additional fields required to configure your component
 

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

@@ -709,6 +709,19 @@ describe('Filtered search integration tests', () => {
     });
   });
 
+  it('sets the gl-filtered-search-last-item class only when no token is active', async () => {
+    mountComponent({ value: ['one', 'two'] });
+    await nextTick();
+
+    expect(wrapper.findAll('.gl-filtered-search-last-item')).toHaveLength(1);
+
+    activate(0);
+
+    await nextTick();
+
+    expect(wrapper.findAll('.gl-filtered-search-last-item')).toHaveLength(0);
+  });
+
   it('does not render unique token in suggestions list if it is already present', async () => {
     mountComponent({ value: ['token', { type: 'unique', value: { data: 'something' } }] });
     activate(0);

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

@@ -118,7 +118,12 @@ const UserToken = {
 const MilestoneToken = {
   name: 'MilestoneToken',
   __v_skip: true /* temporary workaround for @vue/compat */,
-  components: { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon },
+  components: {
+    GlFilteredSearchToken,
+    GlFilteredSearchSuggestion,
+    GlLoadingIcon,
+    GlDropdownDivider,
+  },
   props: ['value', 'active'],
   inheritAttrs: false,
   data() {

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

@@ -220,7 +220,7 @@ export default {
     },
 
     isLastToken(idx) {
-      return !this.activeTokenIdx && idx === this.lastTokenIdx;
+      return this.activeTokenIdx === null && idx === this.lastTokenIdx;
     },
 
     isLastTokenEmpty() {
@@ -235,8 +235,11 @@ export default {
       return this.getTokenEntry(type)?.token || GlFilteredSearchTerm;
     },
 
-    getLastTokenClassList(idx) {
-      return this.isLastToken(idx) && !this.viewOnly ? 'gl-filtered-search-last-item' : '';
+    getTokenClassList(idx) {
+      return {
+        'gl-filtered-search-item': true,
+        'gl-filtered-search-last-item': this.isLastToken(idx) && !this.viewOnly,
+      };
     },
 
     activate(idx) {
@@ -315,11 +318,7 @@ export default {
     },
 
     createTokens(idx, newStrings = ['']) {
-      if (
-        this.activeTokenIdx !== this.lastTokenIdx &&
-        newStrings.length === 1 &&
-        newStrings[0] === ''
-      ) {
+      if (!this.isLastTokenActive && newStrings.length === 1 && newStrings[0] === '') {
         this.activeTokenIdx = this.lastTokenIdx;
         return;
       }
@@ -394,8 +393,7 @@ export default {
           :search-input-attributes="searchInputAttributes"
           :view-only="viewOnly"
           :is-last-token="isLastToken(idx)"
-          class="gl-filtered-search-item"
-          :class="{ 'gl-filtered-search-last-item': isLastToken(idx) && !viewOnly }"
+          :class="getTokenClassList(idx)"
           @activate="activate(idx)"
           @deactivate="deactivate(token)"
           @destroy="destroyToken(idx, $event)"

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

@@ -26,7 +26,7 @@ export default {
     isActive(newValue) {
       if (newValue) {
         window.requestAnimationFrame(() => {
-          this.$refs.item.$el.scrollIntoView({ block: 'nearest', inline: 'end' });
+          this.$refs.item?.$el?.scrollIntoView({ block: 'nearest', inline: 'end' });
         });
       }
     },

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

@@ -79,6 +79,7 @@ describe('Filtered search suggestion list component', () => {
         <div>
           <gl-filtered-search-suggestion value="One">One</gl-filtered-search-suggestion>
           <gl-filtered-search-suggestion value="Two">Two</gl-filtered-search-suggestion>
+          <gl-filtered-search-suggestion :value="false">Three</gl-filtered-search-suggestion>
         </div>
       `,
     };
@@ -123,6 +124,7 @@ describe('Filtered search suggestion list component', () => {
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
+      wrapper.vm.nextItem();
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.vm.getValue()).toBe(null);
       });
@@ -141,7 +143,7 @@ describe('Filtered search suggestion list component', () => {
       wrapper.vm.prevItem();
       wrapper.vm.prevItem();
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('Two');
+        expect(wrapper.vm.getValue()).toBe(false);
       });
     });
 
@@ -150,6 +152,7 @@ describe('Filtered search suggestion list component', () => {
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
+      wrapper.vm.nextItem();
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.vm.getValue()).toBe('One');
       });
@@ -169,6 +172,13 @@ describe('Filtered search suggestion list component', () => {
       });
     });
 
+    it('highlights suggestion if initial-value is provided, regardless of falsiness', async () => {
+      wrapper.setProps({ initialValue: false });
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Three');
+      });
+    });
+
     it('does not highlight anything if initial-value matches nothing', () => {
       wrapper.setProps({ initialValue: 'missing' });
       return wrapper.vm.$nextTick().then(() => {

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

@@ -45,9 +45,9 @@ export default {
 
   methods: {
     valuesMatch(firstValue, secondValue) {
-      if (!firstValue || !secondValue) return false;
+      if (firstValue == null || secondValue == null) return false;
 
-      return typeof firstValue === 'string'
+      return typeof firstValue === 'string' && typeof secondValue === 'string'
         ? firstValue.toLowerCase() === secondValue.toLowerCase()
         : firstValue === secondValue;
     },

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

@@ -68,7 +68,7 @@ describe('Filtered search term', () => {
 
   it('renders input with placeholder if placeholder prop is provided', () => {
     createComponent({ placeholder: 'placeholder-stub' });
-    expect(wrapper.find('input').attributes('placeholder')).toBe('placeholder-stub');
+    expect(findSearchInput().attributes('placeholder')).toBe('placeholder-stub');
   });
 
   it('filters suggestions by input', async () => {
@@ -145,6 +145,21 @@ describe('Filtered search term', () => {
     );
   });
 
+  it('activates and deactivates when the input is focused/blurred', async () => {
+    createComponent({ placeholder: 'placeholder-stub' });
+    await nextTick();
+
+    expect(wrapper.emitted()).toEqual({});
+
+    await findSearchInput().trigger('focusin');
+
+    expect(wrapper.emitted()).toEqual({ activate: [[]] });
+
+    await findSearchInput().trigger('focusout');
+
+    expect(wrapper.emitted()).toEqual({ activate: [[]], deactivate: [[]] });
+  });
+
   describe.each([true, false])('when `viewOnly` is %s', (viewOnly) => {
     beforeEach(() => {
       createComponent({ viewOnly, searchInputAttributes, placeholder: 'placeholder-stub' });

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

@@ -146,7 +146,6 @@ export default {
       class="gl-filtered-search-term-token"
       :active="active"
       :cursor-position="cursorPosition"
-      :class="{ 'gl-w-full': placeholder }"
       :search-input-attributes="searchInputAttributes"
       :is-last-token="isLastToken"
       :current-value="currentValue"
@@ -181,6 +180,8 @@ export default {
           :aria-label="placeholder"
           :readonly="viewOnly"
           data-testid="filtered-search-term-input"
+          @focusin="$emit('activate')"
+          @focusout="$emit('deactivate')"
         />
 
         <template v-else>{{ value.data }}</template>

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

@@ -170,10 +170,10 @@ export default {
         return this.nonMultipleValue;
       }
       if (this.value) {
-        const match =
+        const option =
           this.getMatchingOptionForInputValue(this.inputValue) ||
           this.getMatchingOptionForInputValue(this.inputValue, { loose: true });
-        return match?.value;
+        return option?.value;
       }
 
       const defaultSuggestion = this.options.find((op) => op.default);

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

@@ -55,12 +55,14 @@ Default.args = generateProps();
 
 export const WithoutLastYValue = Template.bind({});
 WithoutLastYValue.args = generateProps({ showLastYValue: false });
+WithoutLastYValue.parameters = { storyshots: { disable: true } };
 
 export const WithChartColorGradient = Template.bind({});
 WithChartColorGradient.args = generateProps({ gradient: customGradient });
 
 export const WithSmoothing = Template.bind({});
 WithSmoothing.args = generateProps({ smooth: 0.5 });
+WithSmoothing.parameters = { storyshots: { disable: true } };
 
 export const AutoHeight = Template.bind({});
 Object.assign(AutoHeight, {

package/src/scss/utilities.scss

@@ -4984,6 +4984,42 @@
   }
 }
 
+.gl-md-w-15 {
+  @include gl-media-breakpoint-up(md) {
+  width: $gl-spacing-scale-15;
+  }
+}
+
+.gl-md-w-15\! {
+  @include gl-media-breakpoint-up(md) {
+  width: $gl-spacing-scale-15 !important;
+  }
+}
+
+.gl-md-w-20 {
+  @include gl-media-breakpoint-up(md) {
+  width: $gl-spacing-scale-20;
+  }
+}
+
+.gl-md-w-20\! {
+  @include gl-media-breakpoint-up(md) {
+  width: $gl-spacing-scale-20 !important;
+  }
+}
+
+.gl-md-w-30 {
+  @include gl-media-breakpoint-up(md) {
+  width: $gl-spacing-scale-30;
+  }
+}
+
+.gl-md-w-30\! {
+  @include gl-media-breakpoint-up(md) {
+  width: $gl-spacing-scale-30 !important;
+  }
+}
+
 .gl-md-w-half {
   @include gl-media-breakpoint-up(md) {
     width: 50%;

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

@@ -251,6 +251,24 @@
   }
 }
 
+@mixin gl-md-w-15 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-w-15;
+  }
+}
+
+@mixin gl-md-w-20 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-w-20;
+  }
+}
+
+@mixin gl-md-w-30 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-w-30;
+  }
+}
+
 @mixin gl-md-w-half {
   @include gl-media-breakpoint-up(md) {
     width: 50%;