TWE Design System Components: Update Dropdown 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
• [x] Add the microsite to the "Ready for Dev" page
• [ ] Close this issue

Resources/Instructions

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

[karina-sato]

To be discussed in the Design Meeeting: open and close shouldn't be a class... Classes may the the different variants. In states we can showcase the open/close state:

[mklmrgn]

Material design does not use "Dropdowns". They just call them menus, as a number of different bases or elements can be clicked on to have a menu drop down.

ATOMS - I started by making a Menu Item component with different states (enabled, hovered, etc). These are the building blocks of the menu. Divider, Left icon/element, Content, and Right icon can all be modified or hidden.

Then I made a Menu Container with the right shadow style, padding, etc. Menu Containers have as many menu items added as you need.

Some general MENU TYPES with different applications:

DROPDOWN BASES

Modifyinig our current textfields, I made a component for a dropdown textfield base, using two types: With Text input (for autocomplete) and No Text Input.

COMBINATIONS/CONFIGURATIONS (so far)

[ExperimentsInHonesty]

At the all team meeting, Michael demonstrated the modularity. We will need specific models (one with check boxes, radio button, > for additional drop downs)

[mklmrgn]

Specific combos / models

Phone Number Options

[mklmrgn]

Updated Building Block Components for Dropdowns/Menus

Dropdown Base consisting of two types:

1. Dropdown Bases that don't use inputs
2. Dropdown Bases where menus appear while user is typing (ie autoselect)

Menu Items

Menu items are the building blocks of the Menu. Divider, Left icon/element, Content, and Right icon can all be modified or hidden.

Menus (Container + Menu Items)

Menus consist of a Container and Menu Items. Menu items can be added or removed. There are 2 basic variants, but the menu can be customized at the Menu Item level (including making dividers visible)

Completed Design System Info/Specs

Created Specific Configurations/Example Components for Dropdowns/Menus

Radio Button Dropdown and Checkbox Dropdown

Phone Number with Country Code Dropdown

These can be used for forms with phone number inputs where the user needs to select a country code. User clicks the arrow and menu appears. There are different variants for using a flag icon on number only.

Completed Design System Info/Specs

[mklmrgn]

Created Microsite https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?type=design&node-id=5602%3A3518&mode=design&t=2aQ43D9akbBNFzTb-1

[ExperimentsInHonesty]

@mklmrgn Karina said you were waiting for Josh to review this. Please leave a comment on your issue @ messaging him with specifics of what you need (e.g., Design is ready for Dev final review before we close this issue), then put the issue in the questions column, with the label ready for dev lead

[mklmrgn]

@joshfishman Design is ready for final review:

Components in Design System https://www.figma.com/design/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?node-id=5629%3A16253&t=1gzt19GBSbnoaF8h-1

Microsite https://www.figma.com/design/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?node-id=5629%3A18805&t=1gzt19GBSbnoaF8h-1

[joshfishman]

This looks great thanks!