Open karina-sato opened 2 months ago
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:
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)
At the all team meeting, Michael demonstrated the modularity. We will need specific models (one with check boxes, radio button, > for additional drop downs)
Specific combos / models
Phone Number Options
Updated Building Block Components for Dropdowns/Menus
Dropdown Base consisting of two types:
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
Overview
We need to update the components to match M3 Material Design guidelines style
Action Items
Resources/Instructions