nimble-picker interaction design request

[fredvisser]

📌 Request Background

The Dataspaces app in SLE would like to be able to configure graph axes using a picker component (aka chip). The component allows users to quickly select multiple values from an (often) large, but finite list. Users will pick values from a dropdown menu, by typing to filter the list, or by typing to filter the list and then picking values from the filtered menu. The list may be flat or have tree-like hierarchy.

The current UX is to display selections in a comma-separated text input:

And to change selections in a separate tree:

nimble-picker Component work item

🎯 Core Requirements

• User must be able to select from a large, finite list of options
• User must be able to see previously selected items
• User must be able to delete previously selected items
• User must be able to type to narrow the list of options to select
• User must be able to see the list hierarchy in some form
• If the user enters filter text and no options remain, the component should say that it doesn't match any options. User shouldn't be able to select arbitrary input
• An app developer may want to configure the picker to require at least one item to be selected or to allow an empty selection.
• If the user makes selections and then later the set of valid items change, we should reflect that the current selection is invalid
• User must be able to navigate (and select) the list of options via mouse and keyboard interactions and have a screenreader read the list of selected options

🍆 Non-requirements

• picker-item doesn't need a context menu or other interaction for further operations on each item (e.g. reorder items, more info) - just needs a delete option
• picker-item only needs to show text right now - no need for avatar icons or different colors yet
• picker-item doesn't need to support copying its contents & pasting as text elsewhere
• Picker components are also used in many query-builder designs. We don't need to satisfy those requirement with this feature, but we can consider how to make the designs consistent.

🥅 Acceptance Criteria

• Interaction Design Spec submitted (link)
• Interaction Design Spec reviewed by design team
• Interaction Design Spec reviewed by dev team

[jattasNI]

@fredvisser I made a few edits (added some screenshots, clarified some requirements, added a couple new requirements and non-requirements). Take a look and see if it's ready to move along to the next step.

[fredvisser]

Basic IxD workflow documented in Figma here