Create Input Chips in the style of Material Design

[mklmrgn]

Overview

The first of our "Chips", Input chips represent discrete pieces of information entered by a user, such as a contact or filter options within a search field.

Action Items

• Research input chip styling for Google's M3
• Create variants for different states (Enabled, Disabled, Hover, Focused)
• Create variants for different configurations (leading icon, trailing icon, both)
• Communicate changes in issue's comments and with design team
• Get sign-off from Project Manager
• Update Component Library and Microsite
• Close Issue

Resources/Instructions

https://m3.material.io/components/chips/overview
Use case from our VMRS project (not using Material 3 guidelines)

[sunannie27]

@kevinmoutoucarpin Please provide update

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again.

[kevinmoutoucarpin]

So far :

• Looked at input chip styling for Google's M3. On September 11-13, I did additional benchmarks from other products (see more here)
• Padding and size measurements are all done in the enabled, disabled, hovered and focused states
• My main blocker was finding the right colors for each state in terms of avatar, icon, label but I think I figured it out (to be confirmed)
• Created 6 configurations (label only, leading icon + label, label + trailing icon, leading icon + label + trailing icon, avatar + label, avatar + label + trailing icon) in order to cover all use cases (or at least the maximum)

This is what I've been working on :

[kevinmoutoucarpin]

Status :

• Finished with the 6 configurations (label only, leading icon + label, label + trailing icon, leading icon + label + trailing icon, avatar + label, avatar + label + trailing icon) in terms of padding/size measurements and colors for the enabled, disabled, hovered and focused states
• Padding and size measurements are based 100% from M3
• For the colors, I used those from our library which match the closest to M3
• Note : I won't be able to attend any meeting or continue working on this GitHub issue until the last week of October