[RFD] v6 successor to Listbox

[TyMick]

Dropdown.Select

Background:

I was restructuring ParameterSelect for v6 (#410, see also #378) when I became confused about the difference between Listbox and Dropdown. Looking at the Wikipedia articles "List box" and "Drop-down list", I think Listbox is really a specialized dropdown, since list boxes are static.

It looks like the real difference between our Dropdown and Listbox components is that Listbox is used like an HTML <select> (changing the text of its button to match the option selected), while Dropdown, by default, seems better suited as a navigation element (since its text does not change to match the option selected).

Specifically describe the problem you'd like the new component to solve:

Listbox is already built on top of v5 Dropdown, so how about we replace Listbox in v6 with something called DropdownSelect, additionally exporting it as Dropdown.Select?

Essentially, this would just be Dropdown with some additional restrictions added:

• Implements selectedValue and onItemSelect props.
• Dropdown.Toggle's children is always the name of the selected item.
• Dropdown.Item's onClick action always sets the selectedValue.
• Changes aria props as necessary.

Are there existing solutions or examples where this component would help?

Only existing solutions that come to mind are various styled versions of the HTML <select>—in the Bootstrap world that'd be React Bootstrap's <Form.Control as="select" or reactstrap's <Input type="select". But using <select> doesn't allow for too much style customization, since each browser provides its own down arrow button and menu UI.

Also, React Select is awesome and would be able to replace a lot of <select>-type use cases, but there are times when being able to type the option isn't always desired. And with how homogenous the examples on React Select's Styles page still look, it doesn't seem like it'd be customizable enough to replace Listbox in ParameterSelect.

Describe the proposed API:

Here would be an update of the v5 Listbox example with the new API:

<Label id="listboxLabel">Pick your favorite browser:</Label>
<Dropdown.Select
  isOpen={state.isOpen}
  onToggleMenu={() => setState({ isOpen: !state.isOpen })}
  onItemSelect={(name) => setState({ selected: name })}
  selectedValue={state.selected}
  labelledBy="selectLabel"
>
  <Dropdown.Toggle /> {/* Automatically populated with selectedValue */}
  <Dropdown.Menu>
    {browserList.map((name, index) => (
      <Dropdown.Item id={index}>{name}</Dropdown.Item>
    ))}
    <Dropdown.Item id="ie" disabled>Internet Explorer</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown.Select>

The special context sent by Dropdown.Select would enable the different functionality of Dropdown.Toggle and Dropdown.Item here.

Are there existing specs or designs?

It'd be much like the existing Listbox component, just building it on top of v6 Dropdown instead of v5 Dropdown. And integrating it more into the v6 Dropdown component set.

---

Shall I go ahead and draft a PR for this? 👍🏼

[RobertBolender]

Sorry for the delay in responding to this. @korbinancell has some in-progress work in this area that should be added to a PR here soon.

As a bit of a preview, here's where our thinking is in terms of technical terminology:

"Dropdown" as a term refers to the visually-hovered element that appears after certain user interactions. This component is used in two related but distinct design patterns:

A "Listbox" has a "toggle" component which usually has some visual indication of the currently selected list item(s) which are available in a dropdown that is conditionally rendered/expanded. (In ARIA terms, a listbox does not have to use a dropdown, but the Styled-UI ones happen to)
https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox
https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html

A "Menu" has a "toggle" component, sometimes just an icon, sometimes a button with icon and text, which opens a list of buttons or links in a dropdown. A menu does not have a concept of a currently "selected" item.
https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton
https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-links.html

These two distinct design patterns may use the same underlying primitive components, such as Dropdowns and Buttons, but could benefit from having their own distinct named exports and documentation to differentiate their different uses.

[RobertBolender]

Resolved by PR #432