nimble-picker Component

😯 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

Start by reviewing the FAST picker reference, the linked interaction design issue (#1214), and the visual design issue (#745), then compare them with the linked Figma specification. The work is complete when the picker custom element, invalid-selection styling, tests, Storybook coverage and docs, framework wrappers, example apps, and README status update are addressed.