RFC: Combobox

[anitavincent]

RFC Combobox

Problem

The current architecture for the combobox component is not flexible enough to implement different use cases, covering only specific scenarios. The current combobox was also built based on outdated design specs that were changed or are under review. We need to rebuild the component and design an API that's flexible enough to enable multiple use cases.

• Attachment 1, design reference: https://www.figma.com/file/sepBhrHViUHyrTnktkuHaW/Admin-UI-%E2%80%93-Components?node-id=9607%3A244090&t=Jqa7kvSXusKceBIQ-3.
• Attachment 2, rough POC https://codesandbox.io/s/new-wildflower-lkkzoj.

Why this matters?

Variations of comboboxes are often used on VTEX's admin pages and the component we currently provide doesn't aid developers much, we need a component that's able to cover different use cases and with a design that integrates well with our design directives. By reviewing our API we can make the combobox component useful for more people and facilitate the implementation of combobox UXs.

Proposal

DRAFT

The initial proposal provides a state that enables Combobox functionality and atomic components that can be used by the dev. The dev could replace any of the components with a custom one and only use the state.

Option = {
    id: ID
    label: string
}

Type State = PopoverState & {
    // based on ariakit combobox state
    value: string;
    setValue: SetState<ComboboxState["value"]>;
    activeValue?: string;

   // added
    selectValue: Option[],
    toggleSelect: (Option) => {},
    isSelected: (Option) => boolean
}

Atomic components:

• Combobox - component that will include search input and show the selected value/values
• SelectedTag - component that represents a selected value, you can click it to unselect that value
• Popover - handles open / close logic, encapsulates list, handles accessibility
• ComboboxItem - component for each item inside the popover

Rough usage example (for single select):

<Combobox state={state}>
        {selectValue?.map((val) => (
              <SelectedTag
                state={state}
                id={val.id}
                label={val.label}
              />
            ))
          : undefined}
</Combobox>
<Popover state={state}>
      {backEndResults.map((item, i) => (
            <ComboboxItem
              key={item.id + i}
              state={{ toggleSelect, isSelected }}
              label={item.value}
              id={item.id}
            />
      ))}
</Popover>

Pros

• Composable components enable different UX layouts, making the component more flexible to different scenarios

Cons

• The code complexity is bigger for "basic" cases when compared to a complete closed component (with subcomponents hidden inside)

Unresolved questions

• Design definition still in progress
• UX states not defined yet
• What would be an MVP for this component?

What's next

Do you know if there are any follow-ups? (It can also be another RFC)

[anitavincent]

POC https://codesandbox.io/s/new-wildflower-lkkzoj

[anitavincent]

Design proposition reference: https://www.figma.com/file/sepBhrHViUHyrTnktkuHaW/Admin-UI-%E2%80%93-Components?node-id=9607%3A244090&t=Jqa7kvSXusKceBIQ-3

[matheusps]

A couple of changes I would make:

• Change from SelectTag to ComboboxTag. It will give more meaning.
• Add the prefix ComboboxPopover to Popover.

There are still unresolved questions for me. Maybe on a prototype, they're solved:

• What are the UI states? (error, loading, etc).
• What are the phases of implementation? What would be the MVP, and the interactions over it?

A thing that will help it to fill the template I've edited. The motivation (problem and why) it's really important.

[lucasaarcoverde]

Changes I would make:

• This part can be done internally by default, while we allow passing the children like that.

{selectValue?.map((val) => (
  <SelectedTag
     state={state}
      id={val.id}
       label={val.label}
     />
   ))
   : undefined}

Unresolved questions

• The Combobox in the POC represents a multi-selection, is every Combobox like that?
• As @matheusps said it's important to define the implementation phases
• The Figma link is not working anymore