carbon-design-system/carbon

Add support for DropdownV2 to have categories

Open

#2,595 opened on Oct 1, 2018

 (24 comments) (2 reactions) (0 assignees)JavaScript (1,733 forks)batch import
afrohackshacktoberfestpackage: reactproposal: openrole: design :pencil2:type: discussion 💬type: enhancement 💡

Repository metrics

Stars
 (7,442 stars)
PR merge metrics
 (Avg merge 9d 14h) (106 merged PRs in 30d)

Description

Summary

In Dropdown we managed to get categories of items rendered like so, by using fake items in the data structure, and ignoring the click events etc.

(This example is from existing public functionality and shows a list of places a slack message could be sent. After the end of the list of channels, you see the category heading 'USERS' followed by a list of selectable user options).

In DropdownV2 we have to pass in just an array of plain objects that, as far as I can see, have no way of specifying categories. We need to be able to specify categories to migrate to DropdownV2. Ideally we don't want to have to hack them in either, but instead have first class support like the Select component does.

Justification

Dropdown is disappearing, and being replaced with DropdownV2. This would also provide feature parity with the Select carbon component.

Desired UX and success metrics

Items should be able to be grouped under unselectable categories. This provides structure to what could be a long list of otherwise indistinguishable options. Ideally it should look similar to what we have for our existing Dropdown usage.

"Must have" functionality

  • Ability to provide category information in some format.
  • Categories should not be selectable
  • Categories should be rendered differently to provide differentiation.

Specific timeline issues / requests

Before Dropdown disappears.

Available extra resources

It's unclear if we'll have the time or resource to implement such functionality ourselves - even if we can reach an agreement here for how categories should be injected and styling should look.

Contributor guide