Chips + chips autocomplete

[LibbyUX]

Chips

Please add chips to our Storybook inspired by Angular Material & Material Design.

Notes:

• Currently we are only using a chip with a smaller "X" remove/delete icon.
• I made a chip set component to show spacing/row wrapping. Chip wrapping will take on the specified behavior.
• Scaling note: We may need to add Material Design's filter chips eventually, but I will submit an issue on this when it is needed.
• Scaling note: I am not crazy about the out-of-the-box design of the input Angular Material Chips Autocomplete. I used it for the EUI, but I want something more aesthetic like CxG has implemented for their database filtering. The redesigned EUI may be the only time we contain Chips within the input field.

Resources

Angular Material & Material Design

• Angular Material Chips Autocomplete
• Material Design Input Chips

Figma

• Design System Repo: Chips
• Design System Repo: Chip Set
• HRA Components: Chips & Chip Set

This pattern is needed for:

• RUI: Anatomical structure tags module/collision detections.
• HRA-KG UI: Chips will play a critical role in filtering data:
  • See: Database UI  #738
  • I am inspired by CxG's Data Collection search flyout + chips pattern: https://cellxgene.cziscience.com/datasets

This pattern is currently approved for:

• EUI Data Filters (Chips contained in a search text field with autocomplete)
  • See: EUI Y3 cosmetic update #729