TWE Design System Components: Update Checkbox according to M3

[karina-sato]

Overview

We need to update the components to match M3 Material Design guidelines style

Action Items

• [x] Use M3 Material Design guidelines to assess the style differences
• [x] Update the component design
• [x] Communicate changes in the issue's comments and with the design team
• [x] Update/create microsite for devs accordingly
• [ ] Get sign-off from Project Manager
• [ ] Add the microsite to the "Ready for Dev" page
• [ ] Close this issue

Resources/Instructions

• Use Material Design (https://m3.material.io/) as guideline

[mklmrgn]

**Work in Progress - components updated to M3 style, but needs documentation with colors/specs.

Properties Unchecked vs Checked Default vs Hover Enabled vs Disabled

[karina-sato]

Great @mklmrgn. As for the next step, can you create the microsite template for the dev team? In the next team meeting we can present the microsite to get the sign off from this issue.

[mklmrgn]

Microsite created for checkbox https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?type=design&node-id=4776%3A3443&mode=design&t=kXZVrnuuZF9gjS6e-1

[mklmrgn]

Updated checkbox component according to Material 3 Guidelines. Added states for both checked and unchecked boxes.

Links to component and microsite

Image of Microsite

[karina-sato]

Hi @mklmrgn, If you're finished, can you please add the tag "Ready for Dev lead" and move this issue to the Questions/Review column?

Thanks

[joshfishman]

This looks great thank you!