The Internship project provides an opportunity for students to work on open source projects in the fields of software, product development, project management, and UI/UX research and design at LA’s fastest growing Civic Tech non-profit organization during their summer.
GNU General Public License v2.0
17
stars
5
forks
source link
Create Input Chips in the style of Material Design #622
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
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)
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
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
Resources/Instructions
https://m3.material.io/components/chips/overview Use case from our VMRS project (not using Material 3 guidelines)