Allow GlDisclosureDropdownItem to render a div

Description

When defining a gl-disclosure-dropdown-item either an action or an href can be included to render an item.

However, in some cases we would like to render more complex controls inside dropdown items, which may include multiple links

Example use case

We would like to use dropdowns to render a list of jobs, in each dropdown item we could like to have an icon, a link to the job and an optional "action" (to retry or run manual jobs).

image

My proposed pseudo code would look like this:

<gl-disclosure-dropdown>
  <gl-disclosure-dropdown-item v-for="j in jobs" :key="j.id">
    <template #list-item>
      <gl-icon ...>
      <gl-link :href="j.url" >
        {{ j.name }}
      <gl-link/>
      <gl-button ...>
    </template>
  </gl-disclosure-dropdown-item>
</gl-disclosure-dropdown>

Importantly, I leverage the fact that the :item prop is optional to render a simple div when actions can be contained in the dropdown item and not directly part of the dropdown item

Edited by Miguel Rincon