feat(GlSearchBoxByClick): Migrate dropdown

Migrates the deprecated GlDropdown to GlDisclosureDropdown.

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

@@ -471,11 +471,9 @@ export const WithHistoryItems = () => ({
 });
 WithHistoryItems.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const button = canvas.getByRole('button', { name: 'Toggle history' });
+  const button = canvas.getByTestId('base-dropdown-toggle');
   await userEvent.click(button);
-  await waitFor(() =>
-    expect(within(document).getByRole('menu', { name: 'Toggle history' })).toBeVisible()
-  );
+  await waitFor(() => expect(within(document).getByTestId('base-dropdown-menu')).toBeVisible());
 };
 
 export const WithFriendlyText = () => ({

src/components/base/search_box_by_click/search_box_by_click.scss

 .gl-search-box-by-click {
   @include gl-font-base;
 
-  .gl-search-box-by-click-history {
-    > button {
-      @include gl-p-3;
-      @include gl-border-none;
-      @include gl-inset-border-1-gray-400;
-    }
-
-    .gl-search-box-by-click-history-icon {
-      @include gl-mr-2;
-      @include gl-text-gray-500;
-    }
-
-    .gl-search-box-by-click-history-icon-chevron {
-      @include gl-text-gray-500;
-      @include gl-mr-0;
-    }
-
-    .gl-search-box-by-click-close-history-button {
-      position: absolute;
-      top: 0;
-      right: $gl-spacing-scale-2;
-      @include gl-line-height-0;
-      @include gl-shadow-none;
-      @include gl-w-auto;
-    }
-
-    .gl-search-box-by-click-history-header {
-      @include gl-text-center;
-    }
-
-    .gl-search-box-by-click-history-no-searches {
-      @include gl-text-center;
-      @include gl-text-gray-500;
-
-      .gl-dropdown-text {
-        @include gl-font-weight-normal;
-      }
-    }
-  }
-
-  &.input-group {
-    > .input-group-prepend,
-    > .input-group-append {
-      @include gl-bg-white;
-    }
+  .gl-search-box-by-click-history > button {
+    padding-left: $gl-spacing-scale-4 !important;
+    padding-right: $gl-spacing-scale-3 !important;
+    @include gl-border-none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    @include gl-inset-border-1-gray-400;
   }
 
   .gl-search-box-by-click-search-button {
-    @include gl-text-gray-500;
+    @include gl-text-secondary;
     @include gl-inset-border-1-gray-400;
   }
 
@@ -66,19 +28,14 @@
     @include gl-mr-2;
     @include gl-z-index-3;
   }
-
-  .gl-search-box-by-click-menu {
-    @include gl-font-base;
-    width: $gl-dropdown-width-wide;
-  }
 }
 
 .gl-search-box-by-click-with-search-button {
   .gl-search-box-by-click-input {
     @include gl-pr-7;
   }
-  
+
   .gl-search-box-by-click-clear-button {
     right: $gl-spacing-scale-7;
   }
-}
\ No newline at end of file
+}

src/components/base/search_box_by_click/search_box_by_click.spec.js

 import { shallowMount } from '@vue/test-utils';
 import ClearIcon from '~/components/shared_components/clear_icon_button/clear_icon_button.vue';
-import GlDropdownItem from '../dropdown/dropdown_item.vue';
+import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';
+import GlDisclosureDropdownItem from '../new_dropdowns/disclosure/disclosure_dropdown_item.vue';
 import GlFormInput from '../form/form_input/form_input.vue';
 import SearchBoxByClick from './search_box_by_click.vue';
 
@@ -20,7 +21,10 @@ describe('search box by click component', () => {
   const createComponent = (propsData) => {
     wrapper = shallowMount(SearchBoxByClick, {
       propsData,
-      stubs: { GlFormInputGroup: GlFormInputGroupStub },
+      stubs: {
+        GlDisclosureDropdown,
+        GlFormInputGroup: GlFormInputGroupStub,
+      },
     });
   };
 
@@ -91,14 +95,6 @@ describe('search box by click component', () => {
       expect(wrapper.findComponent({ ref: 'historyDropdown' }).exists()).toBe(true);
     });
 
-    it('hides dropdown when close buton is clicked', () => {
-      wrapper.vm.$refs.historyDropdown.hide = jest.fn();
-
-      wrapper.findComponent({ ref: 'closeHistory' }).vm.$emit('click');
-
-      expect(wrapper.vm.$refs.historyDropdown.hide).toHaveBeenCalled();
-    });
-
     it('emits clear-history event when clear button is clicked', () => {
       wrapper.findComponent({ ref: 'clearHistory' }).vm.$emit('click');
 
@@ -106,7 +102,7 @@ describe('search box by click component', () => {
     });
 
     it('emits proper events when history item is clicked', async () => {
-      wrapper.findComponent(GlDropdownItem).vm.$emit('click');
+      wrapper.findComponent(GlDisclosureDropdownItem).vm.$emit('action');
 
       await wrapper.vm.$nextTick();
       expect(wrapper.emitted('input')[0]).toEqual(['one']);

src/components/base/search_box_by_click/search_box_by_click.vue

@@ -2,25 +2,19 @@
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button.vue';
 import GlButton from '../button/button.vue';
-import GlDropdown from '../dropdown/dropdown.vue';
-import GlDropdownDivider from '../dropdown/dropdown_divider.vue';
-import GlDropdownItem from '../dropdown/dropdown_item.vue';
-import GlDropdownText from '../dropdown/dropdown_text.vue';
+import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';
+import GlDisclosureDropdownItem from '../new_dropdowns/disclosure/disclosure_dropdown_item.vue';
 import GlFormInput from '../form/form_input/form_input.vue';
 import GlFormInputGroup from '../form/form_input_group/form_input_group.vue';
-import GlIcon from '../icon/icon.vue';
 
 export default {
   name: 'GlSearchboxByClick',
   components: {
     GlClearIconButton,
-    GlIcon,
     GlButton,
     GlFormInput,
-    GlDropdown,
-    GlDropdownText,
-    GlDropdownItem,
-    GlDropdownDivider,
+    GlDisclosureDropdown,
+    GlDisclosureDropdownItem,
     GlFormInputGroup,
   },
   directives: {
@@ -169,9 +163,6 @@ export default {
     },
   },
   methods: {
-    closeHistoryDropdown() {
-      this.$refs.historyDropdown.hide();
-    },
     search(value) {
       /**
        * Emitted when search is submitted
@@ -217,52 +208,55 @@ export default {
     :class="{ 'gl-search-box-by-click-with-search-button': showSearchButton }"
   >
     <template v-if="historyItems" #prepend>
-      <gl-dropdown
+      <gl-disclosure-dropdown
         ref="historyDropdown"
         class="gl-search-box-by-click-history"
-        menu-class="gl-search-box-by-click-menu"
-        category="secondary"
+        icon="history"
+        toggle-text="Toggle history"
+        text-sr-only
+        fluid-width
         :disabled="disabled"
       >
-        <template #button-content>
-          <gl-icon name="history" class="gl-search-box-by-click-history-icon" />
-          <gl-icon name="chevron-down" class="gl-search-box-by-click-history-icon-chevron" />
-          <span class="gl-sr-only">Toggle history</span>
+        <template #header>
+          <div
+            class="gl-search-box-by-click-history-header gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8 gl-border-b-1 gl-border-b-solid gl-border-b-gray-200 gl-flex-grow-1 gl-font-weight-bold gl-font-sm"
+          >
+            {{ recentSearchesHeader }}
+          </div>
         </template>
-        <gl-dropdown-text class="gl-search-box-by-click-history-header">
-          {{ recentSearchesHeader }}
-          <gl-button
-            ref="closeHistory"
-            v-gl-tooltip.hover="{ container: tooltipContainer }"
-            :title="closeButtonTitle"
-            :aria-label="closeButtonTitle"
-            category="tertiary"
-            class="gl-search-box-by-click-close-history-button"
-            name="close"
-            icon="close"
-            @click="closeHistoryDropdown"
-          />
-        </gl-dropdown-text>
-        <gl-dropdown-divider />
+
         <template v-if="historyItems.length">
-          <gl-dropdown-item
+          <gl-disclosure-dropdown-item
             v-for="(item, idx) in historyItems"
             :key="idx"
             class="gl-search-box-by-click-history-item"
-            @click="selectHistoryItem(item)"
+            @action="selectHistoryItem(item)"
+          >
+            <template #list-item>
+              <!-- @slot Slot to customize history item in history dropdown. Used only with history-items prop -->
+              <slot name="history-item" :history-item="item">{{ item }}</slot>
+            </template>
+          </gl-disclosure-dropdown-item>
+        </template>
+        <div v-else class="gl-font-sm gl-text-secondary gl-py-2 gl-px-4">
+          {{ noRecentSearchesText }}
+        </div>
+
+        <template v-if="historyItems.length" #footer>
+          <div
+            class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-200 gl-display-flex gl-flex-direction-column gl-p-2"
           >
-            <!-- @slot Slot to customize history item in history dropdown. Used only with history-items prop -->
-            <slot name="history-item" :history-item="item">{{ item }}</slot>
-          </gl-dropdown-item>
-          <gl-dropdown-divider />
-          <gl-dropdown-item ref="clearHistory" @click="emitClearHistory">{{
-            clearRecentSearchesText
-          }}</gl-dropdown-item>
+            <gl-button
+              ref="clearHistory"
+              category="tertiary"
+              class="gl-justify-content-start!"
+              @click="emitClearHistory"
+            >
+              {{ clearRecentSearchesText }}
+            </gl-button>
+          </div>
         </template>
-        <gl-dropdown-text v-else class="gl-search-box-by-click-history-no-searches">{{
-          noRecentSearchesText
-        }}</gl-dropdown-text>
-      </gl-dropdown>
+      </gl-disclosure-dropdown>
     </template>
     <slot name="input">
       <gl-form-input