Create Custom Dropdown Component

[pdaigle]

Summary

Requesting the creation of a custom drop-down component. This effort is intended to:

• Reduce the amount of misuse with the signpost and other Clarity components
• Reduce the count of questions, and maintenance & enhancement requests Clarity receives for currently misused components
• Establish a method in Clarity for solving similar problems where custom functionality is generally needed, but not at the expense of consistency

Key terms and concepts

Custom dropdown – A dropdown appearing component that allows for custom content to be injected into the area usually reserved for lists and menus in a more traditional dropdown.
Functional content – Collections of user interface controls aimed at facilitating the work or operation of one or more computer-based systems
Injection areas – Designated areas inside a component that enable product developers to inject their own functional content into a component.

Motivation

Custom Dropdowns are a generally accepted, and frequently utilized building block that is missing in the Clarity library. This is causing other components, such as the signpost, to be misused. This has led to additional complexity for misused components, as well as additional support, maintenance, and enhancement pressure.

Goals

• Provide users with a purpose-built component to use when constructing unique drop-down-style controls for their products
• Support scale by providing flexibility for multiple sizes and configurations of functional content withing the custom areas of the component

Future Goals

• Reduce misuse of the signpost
• The component should define injection areas, allowing consumers to more easily customize the base component to fit their needs, without putting undue burden on Clarity development.
• Injection areas should be defined, and contain a set of default controls relating to the area’s definition. Example: A filtering area with default filter UI.
• Injection areas should be approached like a “space plan” for custom content, where the spaces are defined, potentially with default elements, but can be used for other purposes as long as there is alignment with the defined use of the space.
• Provide guidance around acceptable content to be injected inside a custom dropdown, both through the component, and documentation.

Injection Area Needs From Teams

• [Accessibility]: typeahead, at a minimum when the list has hit 10 items

Non-Goals

• Filtering functionality, or anything internal to the ”custom” part of the component

Problem statements

1. The only way to provide functional content in a mode, is inside a signpost or components that would be undesirable from UI perspective.
2. Designers frequently solve for product users' needs via drop-down-like components. Scenarios like filtering, view management, and complex selection all suggest this approach as a possible solution, but the onus falls on the designer to ensure that their design execution is consistent and fits the needs of other products with the same need. This typically doesn’t happen, resulting in multiple variations of similar functionality.
3. Developers looking to meet their UX team’s front-end requirements regularly employ a mix of different methods in order to accomplish these desired UIs. This typically involves leveraging a mix of techniques and components, as nothing exists specifically in Clarity to support this need.

Please feel free to contact myself or @lerch015 for additional information.

[kevinbuhmann]

For reference: https://storybook.core.clarity.design/?path=/story/components-dropdown--page

[sheribyrne]

I would like to see the best practice of supporting typeahead, at a minimum when the list has hit 10 items

[lerch015]

@sheribyrne Now included in the issue description above. Thanks!

[kevinbuhmann]

This is being tracked internally.

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.