TWE Design System Components: Update Buttons according to M3

[mklmrgn]

Overview

Change the Button Components to a more modern style based on Material Design 3.

Action Items

• [ ] Research button styling for Google's M3
• [ ] Update Component Design
• [ ] Delete extraneous variant states (ie enabled vs active)
• [ ] Create buttons with icons
• [ ] Communicate changes in issue's comments and with design team
• [ ] Get sign-off from Project Manager
• [ ] Update Component Library and Microsite
• [ ] Close Issue
• [ ] Release Dependency on https://github.com/hackforla/internship/issues/409 and if it is the last dependency to get released, move issue to the new issue approval column & add the ready for design lead label

Resources/Instructions

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

[KC-skc]

@muntiCloud Please provide update

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again.

[JaimeCucalon]

This week I researched the M3 styling and approach. I learned that they have quite an extensive level of buttons and CTA elements that determine hierarchy for call to action. I'm wondering if we can narrow down the level of buttons before getting started. And focused on the common buttons.

vs

I also studied the existing button master for the internship team. I believe it's minimal but not flexible enough. I would love to the discuss the complexity of buttons we want to keep for the project without adding too much work for future updates.

[JaimeCucalon]

1. Progress:

   • Created 4 style of buttons following MD3 Specs and guidelines-Filled, outlined, text, and tonal.
   • Created icon variants for all 4 with boolean properties

2. Blockers:

   • Researching if the pressed state is needed for our design system. It is very similar to the focused state, main difference is that it uses a ripple animation. Need to check with dev team to confirm feasibility.
   • Waiting on updated styles for icons, text, and button
   • Need to add icon variants to the design system. Color variants, and size variants

3. Availability - 4 hours

4. ETA: Hoping to have this component ready by end of next week

https://www.figma.com/design/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?node-id=6474-7596&t=dsy9ee4753S2UBxn-4

[JaimeCucalon]

Progress: Matched elevation, text size, icon size, and padding to MD3 design. There is one small icon/padding detail missing that needs addressing.

Blockers: Researching the use of different size buttons by MD3. So far research shows that common buttons use only one size. The FAB buttons are the only button components on the system that include 3 sizes, small, regular, and large - https://m3.material.io/components/floating-action-button/overview

Availability - 4 hours

ETA: Need another week.

https://www.figma.com/design/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?node-id=6474-7596&t=dsy9ee4753S2UBxn-4

[JaimeCucalon]

Progress:

• Revised all the color applications based on new color styles and state layers from Michael
• Set up the icon property to be swappable without changing color. Relabelled all icons in the library to fix this minor glitch

Blockers:

• Need to confirm the color application is correct before creating different size buttons

Availability - 4 hours

ETA: Next Tuesday

[JaimeCucalon]

Made some additional changes to the button component colors in order to pass the color contrast requirements. The page includes two versions

• Version on the left follows the MD3 styling 100% but fails the color contrast. Each one of the button states shows the color contrast ratings
• Version on the right has two slight changes to the MD3 styling but it passes color contrast. More details in the figma file for changes made.
• The only button states that don't pass the color contrast standards is the disabled state. This is also true for the MD3 design system button component

@mklmrgn - Ready for review

[JaimeCucalon]

Progress:

• Worked on the color contrast of all buttons and states. Discussed with Michael changes required to the color system in order to pass color contrast requirements.

Blockers: Need to determine if our color system requires different size buttons to create hierarchy for calls to action on the site. The new button system has 4 type of buttons; Filled, Outline, Tonal, and Text. This follows the MD3 system.

vs the current design system on the site that has 3 sizes, and doesn't follow the MD3 system closely.

[JaimeCucalon]

Notes from TWE on Button sizes: The discussion with Bonnie and Michael revealed that we have different button sizes because it follows the HFLA design system. That system showed that there are some large spaces where the primary call to action needs to be larger in order to fill the space for hero banners.

We decided to look into different sizes for the primary button only. Since that will be the button that gets featured the most. The secondary and tertiary button types will only have one size.

Here are the examples we reviewed that showed how both HFLA and MD3 use a similar approach.