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)

Figma File for Input Chips : https://www.figma.com/design/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?node-id=6494-30398&node-type=frame&t=FbwyMjv7Xw1g6hjp-0

[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

[ExperimentsInHonesty]

@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.

[ExperimentsInHonesty]

Michael said Kevin was out for two weeks. Follow up next week if we don't have an update

[kevinmoutoucarpin]

Status :

• Almost done, I just need to apply the new Internship color style
• I will also need to add the Pressed state

[kevinmoutoucarpin]

Status :

• Finished updating color style (by using the Internship Color Themes) for all configurations and states (except for the pressed state, which doesn't exist at the moment)

[ExperimentsInHonesty]

This issue replaces #413 which was worked on by RobinElayn and MeetMinji. Assign them to the issue after closing for credit

The last image produced by MeetMinji

[mklmrgn]

Progress: Added pressed states and updated icon colors.

Next step is to create specs matrix for Design System WIP

Blockers: N/A

ETA: Next week

[mklmrgn]

Progress: Started changing Avatar chips back to being less rounded.

Current Design:

Most recent design on M3 Site:

Blockers: M3 Figma component set seems to be outdated.

ETA: Net week