nimble-picker Component

m-akinc commented 2 years ago

😯 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:

Frame 9939

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 commented 2 years ago

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

jattasNI commented 2 years ago

Request for Visual Design @NIbokeefe

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.
the Argon app also needs designs for more advanced use cases which are mostly captured in #341

jattasNI commented 1 year ago

@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 commented 1 year ago

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

ni / nimble