[M3] Components - Button

[igruszkauy]

Feature description

Update Button component to match M3 style

Button specs: https://m3.material.io/components/buttons/specs

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Button block is replaced with m3 specs as provided by MDC
• When the user opens Gutenberg page with m2 component it automatically migrates to M3
• FAB component is not added
• "Large" button retains the name but the styling is based on the FAB "extended" component as described in https://rodydavis.github.io/material-design-lite/components/button/
• "Large" button doesn't have corner radius slider and has fixed min height

Implementation brief

QA testing instructions

Demo

Changelog entry

[PatelUtkarsh]

Hello @igruszkauy, This is ready for testing.

1. Add m2 material button block using wp.org version.
2. Add new m3 zip from attachment.
3. Verify m2 is migrated to m3.
4. Verify m3 button follows specs as mentioned in ticket desc.

Theme: https://s.utkarshpatel.com/material-design-google-theme-9AW4x.zip
Plugin: https://s.utkarshpatel.com/material-design-plugin-fP0CK.zip

[PatelUtkarsh]

FAB specs: https://rodydavis.github.io/material-design-lite/components/fab/

[igruszkauy]

Verified via local environment.
M2:

Migrated to M3:

1. Raised button is not using primary color for label:

2. If there were large buttons with other variations different than text, when migrated, they are migrated to the normal version with the corresponding variant. I am not sure if this was what we agreed? it looks confusing.

[emeaguiar]

@igruszkauy I updated the color of "Elevated (raised)" to be the correct one.

I can't reproduce 2, all my buttons were migrated to be large, perhaps your version is not up to date? this was a very recent update (merged early today)

M2

M3

I did find an issue with border displaying when it shouldn't, I have sent #439 to address both issues

[igruszkauy]

@emeaguiar can you send me new zips for plugin and theme to check color and test again the large button? I used the zips @PatelUtkarsh sent today