nimble-chip or nimble-pill component

[jattasNI]

😯 Problem to Solve

The Argon visual design shows chips/pills that display a short snippet of text within a colored region with rounded corners.

Argon is planning to implement this imminently so we might not be able to deliver it in time for their use case but I'm creating this issue to gather requirements and use cases.

SystemLink also shows chips in the sl-details-panel.component

Web Portal also shows tags using the DevExtreme Tag Box, which lets you select tags from a drop down and then shows the selected items in a list of chips.

💁 Proposed Solution

We might want to also provide a component that stores a collection of chips. It could handle deleting a chip when the x icon is clicked and could provide a default affordance if there are too many chips to fit in available space.

We might want to provide a slot to display an icon to the left of the chip as Material does.

We might want to allow different colored chips as GitHub labels do

Longer term there are lots of potential interactions with chips. Some examples from Material:

• dragging chips to move them around
• clicking a chip to edit the text within it (e.g. for a chip that shows a contact in the To field of an email, you could click it to edit the email
• scrolling or some other affordance to navigate long lists of chips

[fredvisser]

Closing as this is now a duplicate of #458 - I'll note the requirements in the nimble-picker issue.

[nate-ni]

Many design system still break out the Chip/Pill/Tag as its own component....often with a container to hold them. However, I can't find cases where they are only provided as part of a picker control.

https://carbondesignsystem.com/components/tag/usage/
https://opensource.adobe.com/spectrum-web-components/components/tags/
https://material.angular.io/components/chips/overview
https://clarity.design/documentation/labels#top
https://www.lightningdesignsystem.com/components/pills/?variant=listbox-of-pill-options#site-main-content

This should be reconsidered as an individual control and not required to be combined with the picker

[atmgrifter00]

Many design system still break out the Chip/Pill/Tag as its own component....often with a container to hold them. However, I can't find cases where they are only provided as part of a picker control.

https://carbondesignsystem.com/components/tag/usage/ https://opensource.adobe.com/spectrum-web-components/components/tags/ https://material.angular.io/components/chips/overview https://clarity.design/documentation/labels#top https://www.lightningdesignsystem.com/components/pills/?variant=listbox-of-pill-options#site-main-content

This should be reconsidered as an individual control and not required to be combined with the picker

So, to be clear, I don't believe this or the issue that @fredvisser linked to are suggested to be only a container component that hosts the individual chips. At the very least, the current FAST implementation has a component called a fast-picker-list-item that is analogous to the Material mat-chip. The fast-picker is analogous to the Material mat-chip-list. The possible problem/distinction may be at least semantically where something called a fast-picker-list-item is strongly implied to only have use/value inside of a fast-picker, whereas the mat-chip has no such semantic implication.