nimble-picker Component

[m-akinc]

😯 Problem to Solve

Create a component based on the FAST picker that shows selections from a list of options.

💁 Proposed Solution

• FAST component: https://github.com/microsoft/fast/tree/master/packages/web-components/fast-foundation/src/picker
  Note that FAST component is currently in alpha phase, so there may be bugs/issues.
  • Alternatively, Vivid solution
• Visual Design: spec
• Needs to support adding "invalid" elements and a way to visually style them differently from "valid" elements. This can happen if a user selected a valid element but then the underlying list of valid items changes; we'd like to give users feedback that their selection is no longer valid rather than just removing the item automatically or leaving it shown as valid.

Looks something like this:

or this from the PDV app in SLE:

📋 Tasks

• nimble-picker interaction design issue
• nimble-picker interaction design spec
• nimble-picker visual design issue
• nimble-picker visual design spec
• nimble-picker spec
• nimble-picker custom element
• nimble-picker unit tests
• nimble-picker Storybook tests
• nimble-picker Storybook docs
• nimble-picker Angular wrapper
• nimble-picker Blazor wrapper
• Add to Angular example app
• Add to Blazor example app
• Update Component Status table in README

[fredvisser]

See the previous nimble-chip issue for client use cases that we should support.

[jattasNI]

Request for Visual Design @NIbokeefe

1. for SLE at the moment we just need a basic design that just shows a read-only list of chips where the user can't add or remove any chips. In addition to color/corner radius/font/padding, it would also be good to think about what happens if there are more chips than what fits in a given amount of space.
2. the Argon app also needs designs for more advanced use cases which are mostly captured in Create Nimble Filterable select with Multi-select #341

[jattasNI]

@ranjgith-ni provided more detail about use cases in #1164 which I'm copied to the description above.

To answer the priority question from that issue: the Design System squad decided to mark this as "staging" for Cycle 2. This means we'll start working with designers on resolving open questions about the component behavior and appearance, but are not expecting to deliver the completed component. We've been hoping to delay development until FAST's picker component is more mature to save ourselves work. But if your squad is willing to invest in a custom implementation, we would be happy to talk about what that would entail.

[jattasNI]

Fred and I were brainstorming about picking from a hierarchical list of items, which is a requirement for the SLE Data Spaces app. If the hierarchy is only a single level (which it is for that use case) then it could be solved with the same mechanism as #791

[jattasNI]

Another use case came up in this SLE Routines HLD. They need to be able to multi-select workspaces. Their current proposal is to use material select configured with multiselect and configure it to allow filtering.

[jattasNI]

Another request for picker / tags came up in a Teams thread about the Data Explorer app.