@gitlab/ui 37.4.1 → 37.5.1

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

@@ -254,54 +254,63 @@ describe('Filtered search token segment', () => {
     });
   });
 
-  describe('when input is active', () => {
-    it('adds `searchInputAttributes` prop to search token segment input', () => {
-      createComponent({ active: true, value: 'something', searchInputAttributes });
+  const currentValueNoTokens = [{ type: 'filtered-search-term', value: { data: '' } }];
+  const currentValueOneToken = [
+    { type: 'filtered-search-term', value: { data: 'one' } },
+    { type: 'filtered-search-term', value: { data: '' } },
+  ];
+
+  describe.each`
+    active   | isLastToken | currentValue
+    ${true}  | ${true}     | ${currentValueNoTokens}
+    ${true}  | ${false}    | ${currentValueNoTokens}
+    ${false} | ${true}     | ${currentValueNoTokens}
+    ${true}  | ${true}     | ${currentValueOneToken}
+    ${true}  | ${false}    | ${currentValueOneToken}
+  `(
+    'when `active` is `$active`, `isLastToken` is `$isLastToken` and `currentValue` is `$currentValue`',
+    ({ active, isLastToken, currentValue }) => {
+      beforeEach(() => {
+        createComponent({
+          value: 'something',
+          active,
+          isLastToken,
+          currentValue,
+          searchInputAttributes,
+        });
+      });
 
-      expect(wrapper.find('input').attributes('data-qa-selector')).toBe(
-        searchInputAttributes['data-qa-selector']
-      );
-    });
+      it('does not add `searchInputAttributes` prop to search token segment', () => {
+        expect(wrapper.attributes('data-qa-selector')).toBe(undefined);
+      });
+    }
+  );
 
-    it('does not add `searchInputAttributes` prop to search token segment', () => {
+  describe('when `active` is `false`, `isLastToken` is `true` and there is one or more tokens', () => {
+    beforeEach(() => {
       createComponent({
-        active: true,
         value: 'something',
-        searchInputAttributes,
+        active: false,
         isLastToken: true,
+        currentValue: currentValueOneToken,
+        searchInputAttributes,
       });
-
-      expect(wrapper.attributes('data-qa-selector')).toBe(undefined);
     });
-  });
 
-  describe('when input is not active', () => {
-    describe('when `isLastToken` prop is `true`', () => {
-      it('adds `searchInputAttributes` prop to search token segment', () => {
-        createComponent({
-          active: false,
-          value: 'something',
-          searchInputAttributes,
-          isLastToken: true,
-        });
-
-        expect(wrapper.attributes('data-qa-selector')).toBe(
-          searchInputAttributes['data-qa-selector']
-        );
-      });
+    it('adds `searchInputAttributes` prop to search token segment', () => {
+      expect(wrapper.attributes('data-qa-selector')).toBe(
+        searchInputAttributes['data-qa-selector']
+      );
     });
+  });
 
-    describe('when `isLastToken` prop is `false`', () => {
-      it('does not add `searchInputAttributes` prop to search token segment', () => {
-        createComponent({
-          active: false,
-          value: 'something',
-          searchInputAttributes,
-          isLastToken: false,
-        });
+  describe('when input is active', () => {
+    it('adds `searchInputAttributes` prop to search token segment input', () => {
+      createComponent({ active: true, value: 'something', searchInputAttributes });
 
-        expect(wrapper.attributes('data-qa-selector')).toBe(undefined);
-      });
+      expect(wrapper.find('input').attributes('data-qa-selector')).toBe(
+        searchInputAttributes['data-qa-selector']
+      );
     });
   });
 });

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

@@ -59,6 +59,11 @@ export default {
       required: false,
       default: false,
     },
+    currentValue: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
 
   data() {
@@ -106,6 +111,14 @@ export default {
       const defaultSuggestion = this.options.find((op) => op.default);
       return (defaultSuggestion ?? this.options[0])?.value;
     },
+    containerAttributes() {
+      return (
+        this.isLastToken &&
+        !this.active &&
+        this.currentValue.length > 1 &&
+        this.searchInputAttributes
+      );
+    },
   },
 
   watch: {
@@ -254,7 +267,7 @@ export default {
 
 <template>
   <div
-    v-bind="isLastToken && !active && searchInputAttributes"
+    v-bind="containerAttributes"
     class="gl-filtered-search-token-segment"
     :class="{ 'gl-filtered-search-token-segment-active': active }"
     data-testid="filtered-search-token-segment"

package/src/components/base/form/form_select/form_select.spec.js

@@ -25,7 +25,9 @@ describe('GlFormSelect', () => {
     `('adds $expectedClass class for state $state', ({ state, expectedClasses }) => {
       createComponent({ state });
 
-      expect(wrapper.classes()).toEqual([...DEFAULT_SELECT_CLASSES, ...expectedClasses]);
+      expect(wrapper.classes().sort()).toEqual(
+        [...DEFAULT_SELECT_CLASSES, ...expectedClasses].sort()
+      );
     });
   });
 
@@ -36,19 +38,21 @@ describe('GlFormSelect', () => {
     it.each(nonNullSizes)('adds correct class for size %s', (size) => {
       createComponent({ size });
 
-      expect(wrapper.classes()).toEqual([...DEFAULT_SELECT_CLASSES, `custom-select-${size}`]);
+      expect(wrapper.classes().sort()).toEqual(
+        [...DEFAULT_SELECT_CLASSES, `custom-select-${size}`].sort()
+      );
     });
 
     it('does not add a size class if not given the size prop', () => {
       createComponent();
 
-      expect(wrapper.classes()).toEqual([...DEFAULT_SELECT_CLASSES]);
+      expect(wrapper.classes().sort()).toEqual([...DEFAULT_SELECT_CLASSES].sort());
     });
 
     it('does not add a size class if passed null', () => {
       createComponent({ size: null });
 
-      expect(wrapper.classes()).toEqual([...DEFAULT_SELECT_CLASSES]);
+      expect(wrapper.classes().sort()).toEqual([...DEFAULT_SELECT_CLASSES].sort());
     });
   });
 

package/dist/components/base/datepicker/examples/datepicker.basic.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      value: null
-    };
-  }
-
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-datepicker')};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/datepicker/examples/datepicker.custom_input.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      value: null
-    };
-  }
-
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-datepicker',[_c('input',{staticClass:"gl-form-input gl-datepicker-input form-control",attrs:{"id":"datepicker-custom-input-example","name":"date","type":"text","aria-label":"Select a date","placeholder":"Custom placeholder"}})])};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/datepicker/examples/datepicker.disabled.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      value: null
-    };
-  }
-
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-datepicker',{attrs:{"disabled":""}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/datepicker/examples/datepicker.open_on_focus.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      value: null
-    };
-  }
-
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-datepicker',{attrs:{"target":null}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/datepicker/examples/datepicker.with_clear_button.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      value: new Date(2020, 0, 15)
-    };
-  }
-
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-datepicker',{attrs:{"show-clear-button":""},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/datepicker/examples/index.js

@@ -1,32 +0,0 @@
-import DatepickerBasicExample from './datepicker.basic.example';
-import DatepickerCustomInputExample from './datepicker.custom_input.example';
-import DatepickerDisabledExample from './datepicker.disabled.example';
-import DatepickerOpenOnFocusExample from './datepicker.open_on_focus.example';
-import DatepickerWithClearButtonExample from './datepicker.with_clear_button.example';
-
-var index = [{
-  name: 'Datepicker',
-  items: [{
-    id: 'basic-date-picker',
-    name: 'Basic date picker',
-    component: DatepickerBasicExample
-  }, {
-    id: 'custom-input-date-picker',
-    name: 'With custom input',
-    component: DatepickerCustomInputExample
-  }, {
-    id: 'open-on-focus-date-picker',
-    name: 'Open on focus',
-    component: DatepickerOpenOnFocusExample
-  }, {
-    id: 'with-clear-button-date-picker',
-    name: 'With clear button',
-    component: DatepickerWithClearButtonExample
-  }, {
-    id: 'disabled-date-picker',
-    name: 'Disabled',
-    component: DatepickerDisabledExample
-  }]
-}];
-
-export default index;

package/src/components/base/datepicker/examples/datepicker.basic.example.vue

@@ -1,12 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      value: null,
-    };
-  },
-};
-</script>
-<template>
-  <gl-datepicker />
-</template>

package/src/components/base/datepicker/examples/datepicker.custom_input.example.vue

@@ -1,21 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      value: null,
-    };
-  },
-};
-</script>
-<template>
-  <gl-datepicker>
-    <input
-      id="datepicker-custom-input-example"
-      class="gl-form-input gl-datepicker-input form-control"
-      name="date"
-      type="text"
-      aria-label="Select a date"
-      placeholder="Custom placeholder"
-    />
-  </gl-datepicker>
-</template>

package/src/components/base/datepicker/examples/datepicker.disabled.example.vue

@@ -1,12 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      value: null,
-    };
-  },
-};
-</script>
-<template>
-  <gl-datepicker disabled />
-</template>

package/src/components/base/datepicker/examples/datepicker.open_on_focus.example.vue

@@ -1,12 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      value: null,
-    };
-  },
-};
-</script>
-<template>
-  <gl-datepicker :target="null" />
-</template>

package/src/components/base/datepicker/examples/datepicker.with_clear_button.example.vue

@@ -1,12 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      value: new Date(2020, 0, 15),
-    };
-  },
-};
-</script>
-<template>
-  <gl-datepicker v-model="value" show-clear-button />
-</template>

package/src/components/base/datepicker/examples/index.js

@@ -1,38 +0,0 @@
-import DatepickerBasicExample from './datepicker.basic.example.vue';
-import DatepickerCustomInputExample from './datepicker.custom_input.example.vue';
-import DatepickerDisabledExample from './datepicker.disabled.example.vue';
-import DatepickerOpenOnFocusExample from './datepicker.open_on_focus.example.vue';
-import DatepickerWithClearButtonExample from './datepicker.with_clear_button.example.vue';
-
-export default [
-  {
-    name: 'Datepicker',
-    items: [
-      {
-        id: 'basic-date-picker',
-        name: 'Basic date picker',
-        component: DatepickerBasicExample,
-      },
-      {
-        id: 'custom-input-date-picker',
-        name: 'With custom input',
-        component: DatepickerCustomInputExample,
-      },
-      {
-        id: 'open-on-focus-date-picker',
-        name: 'Open on focus',
-        component: DatepickerOpenOnFocusExample,
-      },
-      {
-        id: 'with-clear-button-date-picker',
-        name: 'With clear button',
-        component: DatepickerWithClearButtonExample,
-      },
-      {
-        id: 'disabled-date-picker',
-        name: 'Disabled',
-        component: DatepickerDisabledExample,
-      },
-    ],
-  },
-];