TWE Design System Components: Update components according to M3

hackforla / internship

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

13 stars 4 forks source link

TWE Design System Components: Update components according to M3 #539

Open karina-sato opened 2 months ago

karina-sato commented 2 months ago

Dependency

[x] #541
[ ] #540
[x] #542
[ ] #543
[x] #544

Overview

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

Action Items

[ ] Assign yourself to one of the dependency issues above
[ ] Use M3 Material Design guidelines to assess the style differences
[ ] Update the component design
[ ] Communicate changes in the issue's comments and with the design team + all hands meeting
[ ] Close the dependency issue
[ ] Once all the dependencies are closed, close this issue

Resources/Instructions

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

emwoodward commented 2 months ago

These are the differences found between original dropdown menu and M3 menu Pretty simple. Only thing pending is whether or not we want this combined with the menu items as one component- as discussed during 2/20 design team meeting

karina-sato commented 2 months ago

Tysm @emwoodward. Dropdown should be a single component with different variants for the dropdown list. We need to know how far @mklmrgn already designed the Dropdown with checkbox to be able to combine both of these components. Let's define this in our Design Meeting.

mklmrgn commented 1 month ago

Created Elevation shadow styles according to Material 3's style guide. Created a brief overview of how to use perceived elevation for UI. Defined different drop shadows for each elevation (i.e. level 1, level 2, etc) in order to have standardized way to create elevation effect using shadows.

Links to Style in Design System and Microsite

Microsite Image

karina-sato commented 1 month ago

Hi, @mklmrgn Can you add your comment in the right issue (https://github.com/hackforla/internship/issues/541), please? Also, add the tag "Ready for dev" and move it to the Question/Review column.

Thanks.