@gitlab/ui 52.2.1 → 52.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "52.2.1",
+  "version": "52.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/new_dropdowns/listbox/listbox.scss

@@ -0,0 +1,48 @@
+$search-icon-size: 12px;
+$clear-button-size: 24px;
+
+.gl-listbox-search {
+  @include gl-relative;
+
+  .gl-listbox-search-input {
+    @include gl-w-full;
+    @include gl-line-height-normal;
+    @include gl-h-auto;
+    @include gl-border-none;
+    @include gl-pl-7;
+    padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});
+    @include gl-py-4;
+    @include gl-font-base;
+
+    &:focus {
+      @include gl-focus($inset: true);
+    }
+
+    &::placeholder {
+      @include gl-text-gray-400;
+    }
+
+    &::-webkit-search-cancel-button {
+      @include gl-display-none;
+    }
+  }
+
+  .gl-listbox-search-icon {
+    @include gl-absolute;
+    top: calc(50% - #{$search-icon-size} / 2);
+    left: $gl-spacing-scale-4;
+    @include gl-text-gray-500;
+  }
+
+  .gl-listbox-search-clear-button {
+    @include gl-absolute;
+    top: calc(50% - #{$clear-button-size} / 2);
+    right: $gl-spacing-scale-2;
+  }
+}
+
+.gl-listbox-item {
+  &:focus {
+    @include gl-focus($inset: true);
+  }
+}

package/src/components/base/new_dropdowns/listbox/listbox.spec.js

@@ -248,25 +248,25 @@ describe('GlListbox', () => {
     });
 
     describe('when `searchable` is enabled', () => {
-      let searchbox;
+      let searchboxInput;
 
       beforeEach(() => {
         buildWrapper({ items: mockOptions, searchable: true });
         findBaseDropdown().vm.$emit(GL_DROPDOWN_SHOWN);
         firstItem = findListItem(0);
-        searchbox = findSearchBox();
+        searchboxInput = findSearchBox().find('input');
       });
 
       it('should move focus to the first item on search input `ARROW_DOWN`', async () => {
-        expect(searchbox.element).toHaveFocus();
-        searchbox.trigger('keydown', { code: ARROW_DOWN });
+        expect(searchboxInput.element).toHaveFocus();
+        searchboxInput.trigger('keydown', { code: ARROW_DOWN });
         expect(firstItem.element).toHaveFocus();
       });
 
       it('should move focus to the search input on first item `ARROW_UP', async () => {
-        searchbox.trigger('keydown', { code: ARROW_DOWN });
+        searchboxInput.trigger('keydown', { code: ARROW_DOWN });
         firstItem.trigger('keydown', { code: ARROW_UP });
-        expect(searchbox.element).toHaveFocus();
+        expect(searchboxInput.element).toHaveFocus();
       });
     });
   });

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -29,6 +29,7 @@ const generateProps = ({
   searchable = defaultValue('searchable'),
   searching = defaultValue('searching'),
   noResultsText = defaultValue('noResultsText'),
+  searchPlaceholder = defaultValue('searchPlaceholder'),
   noCaret = defaultValue('noCaret'),
   right = defaultValue('right'),
   toggleText,
@@ -51,6 +52,7 @@ const generateProps = ({
   searchable,
   searching,
   noResultsText,
+  searchPlaceholder,
   noCaret,
   right,
   toggleText,
@@ -76,6 +78,7 @@ const makeBindings = (overrides = {}) =>
     ':searchable': 'searchable',
     ':searching': 'searching',
     ':no-results-text': 'noResultsText',
+    ':search-placeholder': 'searchPlaceholder',
     ':no-caret': 'noCaret',
     ':right': 'right',
     ':toggle-text': 'toggleText',
@@ -437,7 +440,11 @@ export const Searchable = (args, { argTypes }) => ({
     }
   ),
 });
-Searchable.args = generateProps({ headerText: 'Assign to department', searchable: true });
+Searchable.args = generateProps({
+  headerText: 'Assign to department',
+  searchable: true,
+  searchPlaceholder: 'Find department',
+});
 Searchable.decorators = [makeContainer({ height: '370px' })];
 
 export const SearchableGroups = (args, { argTypes }) => ({

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -20,13 +20,14 @@ import GlLoadingIcon from '../../loading_icon/loading_icon.vue';
 import GlSearchBoxByType from '../../search_box_by_type/search_box_by_type.vue';
 import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
 import GlListboxItem from './listbox_item.vue';
+import GlListboxSearchInput from './listbox_search_input.vue';
 import GlListboxGroup from './listbox_group.vue';
 import { isOption, itemsValidator, flattenedOptions } from './utils';
 
 export const ITEM_SELECTOR = '[role="option"]';
 const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-gray-200'];
 const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-3', 'gl-mt-3'];
-export const SEARCH_INPUT_SELECTOR = '.gl-search-box-by-type-input';
+export const SEARCH_INPUT_SELECTOR = '.gl-listbox-search-input';
 
 export default {
   HEADER_ITEMS_BORDER_CLASSES,
@@ -40,6 +41,7 @@ export default {
     GlListboxGroup,
     GlButton,
     GlSearchBoxByType,
+    GlListboxSearchInput,
     GlLoadingIcon,
   },
   model: {
@@ -57,7 +59,7 @@ export default {
       validator: itemsValidator,
     },
     /**
-     * array of selected items values for multi-select and selected item value for single-select
+     * Array of selected items values for multi-select and selected item value for single-select
      */
     selected: {
       type: [Array, String, Number],
@@ -221,6 +223,14 @@ export default {
       required: false,
       default: 'No results found',
     },
+    /**
+     * Search input placeholder text and aria-label
+     */
+    searchPlaceholder: {
+      type: String,
+      required: false,
+      default: 'Search',
+    },
     /**
      * The reset button's label, to be rendered in the header. If this is omitted, the button is not
      * rendered.
@@ -484,7 +494,7 @@ export default {
   >
     <div
       v-if="headerText"
-      class="gl-display-flex gl-align-items-center gl-px-3 gl-py-2! gl-min-h-8"
+      class="gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8"
       :class="$options.HEADER_ITEMS_BORDER_CLASSES"
     >
       <div
@@ -506,11 +516,12 @@ export default {
     </div>
 
     <div v-if="searchable" :class="$options.HEADER_ITEMS_BORDER_CLASSES">
-      <gl-search-box-by-type
+      <gl-listbox-search-input
         ref="searchBox"
         v-model="searchStr"
         :aria-owns="listboxId"
         data-testid="listbox-search-input"
+        :placeholder="searchPlaceholder"
         @input="search"
         @keydown="onKeydown"
       />

package/src/components/base/new_dropdowns/listbox/listbox_item.vue

@@ -51,7 +51,7 @@ export default {
 
 <template>
   <li
-    class="gl-dropdown-item"
+    class="gl-dropdown-item gl-listbox-item"
     role="option"
     :tabindex="isFocused ? 0 : -1"
     :aria-selected="isSelected"

package/src/components/base/new_dropdowns/listbox/listbox_search_input.spec.js

@@ -0,0 +1,64 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import ClearIcon from '~/components/shared_components/clear_icon_button/clear_icon_button.vue';
+import ListboxSearchInput from './listbox_search_input.vue';
+
+const modelEvent = ListboxSearchInput.model.event;
+const newSearchValue = 'new value';
+
+describe('listbox search input component', () => {
+  let wrapper;
+  const searchValue = 'some value';
+
+  const createComponent = ({ listeners, ...propsData }, mountFn = shallowMount) => {
+    wrapper = mountFn(ListboxSearchInput, { propsData, listeners });
+  };
+
+  const findClearIcon = () => wrapper.findComponent(ClearIcon);
+  const findInput = () => wrapper.findComponent({ ref: 'input' });
+
+  describe('clear icon component', () => {
+    beforeEach(() => {
+      createComponent({ value: searchValue });
+    });
+
+    it('is not rendered when value is empty', () => {
+      createComponent({ value: '' });
+
+      expect(findClearIcon().exists()).toBe(false);
+    });
+
+    it('is rendered when value is provided', () => {
+      expect(findClearIcon().exists()).toBe(true);
+    });
+
+    it('emits empty value when clicked', () => {
+      findClearIcon().vm.$emit('click', { stopPropagation: jest.fn() });
+
+      expect(wrapper.emitted('input')).toEqual([['']]);
+    });
+  });
+
+  describe('v-model', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+      createComponent({ value: searchValue }, mount);
+    });
+
+    it('syncs value prop to input value', async () => {
+      expect(findInput().element.value).toEqual(searchValue);
+      wrapper.setProps({ value: newSearchValue });
+      await nextTick();
+
+      expect(findInput().element.value).toEqual(newSearchValue);
+    });
+
+    it(`emits ${modelEvent} event when input value changes`, () => {
+      findInput().setValue(newSearchValue);
+      jest.advanceTimersByTime(199);
+      expect(wrapper.emitted('input')).toEqual(undefined);
+      jest.advanceTimersByTime(1);
+      expect(wrapper.emitted('input')).toEqual([[newSearchValue]]);
+    });
+  });
+});

package/src/components/base/new_dropdowns/listbox/listbox_search_input.vue

@@ -0,0 +1,76 @@
+<script>
+import debounce from 'lodash/debounce';
+import GlClearIconButton from '../../../shared_components/clear_icon_button/clear_icon_button.vue';
+import GlIcon from '../../icon/icon.vue';
+
+export default {
+  components: {
+    GlClearIconButton,
+    GlIcon,
+  },
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+  props: {
+    /**
+     * If provided, used as value of search input
+     */
+    value: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * Search input placeholder text and aria-label
+     */
+    placeholder: {
+      type: String,
+      required: false,
+      default: 'Search',
+    },
+  },
+  computed: {
+    hasValue() {
+      return Boolean(this.value.length);
+    },
+    inputListeners() {
+      return {
+        ...this.$listeners,
+        input: debounce((event) => {
+          this.$emit('input', event.target.value);
+        }, 200),
+      };
+    },
+  },
+  methods: {
+    clearInput() {
+      this.$emit('input', '');
+      this.focusInput();
+    },
+    focusInput() {
+      this.$refs.input.focus();
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-listbox-search">
+    <gl-icon name="search-sm" :size="12" class="gl-listbox-search-icon" />
+    <input
+      ref="input"
+      type="search"
+      :value="value"
+      class="gl-listbox-search-input"
+      :aria-label="placeholder"
+      :placeholder="placeholder"
+      v-on="inputListeners"
+    />
+    <gl-clear-icon-button
+      v-if="hasValue"
+      class="gl-listbox-search-clear-button"
+      @click.stop="clearInput"
+    />
+  </div>
+</template>

package/src/scss/components.scss

@@ -74,3 +74,4 @@
 @import '../components/charts/tooltip/tooltip';
 @import '../components/shared_components/charts/tooltip_default_format';
 @import '../components/utilities/truncate/truncate';
+@import '../components/base/new_dropdowns/listbox/listbox';