Component: Dropdown

[benediktziegler]

Pre-check

This component proposal:

• [x] Is not a duplicate of an existing issue
• [x] Does not require 3rd party JS to implement
• [x] Considers mobile-friendliness
• [x] Does not cause accessibility problems

Describe the use case for this component A flexible dropdown component which can have different trigger components with button as default. But it should also allow for example an icon_button or other components as trigger element. The inner_block shall except dropdown_item components which basically wrap the .link component, but also except an inner_block to render icons with labels.

The component would be useful for several other components, for example: in the nav-bar to create a user/other nested menus or for a more advanced actions menu for the header component or table actions.

Demonstrate the component's API

# render trigger as button
<.dropdown>
  <.dropdown_item label="Settings" navigate={~p"/settings"} />
  <.dropdown_item label="Sign in" navigate={~p"/login"} />
</.dropdown>

# render custom trigger element
<.dropdown>
  <:trigger>
    <div>
      A custom trigger
    </div>
  </:trigger>
  <.dropdown_item label="Settings" navigate={~p"/settings"} />
  <.dropdown_item label="Sign in" navigate={~p"/login"} />
</.dropdown>

[TwistingTwists]

live_select has a very good implementation of this one. https://github.com/maxmarcon/live_select

just putting it out here.

[frankdugan3]

live_select has a very good implementation of this one. https://github.com/maxmarcon/live_select

just putting it out here.

That does look interesting and I will dig more into it, but I think that's more of a combobox than a dropdown. I don't have an open issue on it, but there is an existing (but limited) autocomplete component that should be rebranded and expanded to become a combobox.

It may or may not make sense to use the dropdown as a foundation for a combobox, I'm not quite decided. But my instinct is that they are orthogonal in terms of UI. I'd have to think about it more to be sure, though. :thinking:

[frankdugan3]

My current thinking is that the proposed dropdown falls under something like this APG, which is about interaction (links, buttons, actions, etc.), whereas a combobox is a form element.

I think it would be a good idea to choose this distinction and do two components. 1) menu_button, which sill be about interactions, and 2) combobox, which will be about form input. These should follow the linked APGs. There may be similarity in appearance and ergonomics, but the function and semantic implementation would be quite different.

[TwistingTwists]

I agree with the reasoning there. Since the nature of elements is different, it would make sense to separate them. Because aria support would be easier to integrate.

[benediktziegler]

Sorry for the long absence. You can find a first draft for a dropdown component in my fork: dropdown-component.

It comes with a storybook. Please let me know what you think.