[M3] Components - Form

[igruszkauy]

Feature description

Update Form component to match M3 style.

Specs: https://m3.material.io/components/text-fields/specs

Figma: https://www.figma.com/file/pHzNW5Ef6zckGSMqQWY0m3/Material-3-Design-Kit-(Community)?node-id=51189%3A6055

---

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

Acceptance criteria

• Form and it's input element block is replaced with m3 specs as provided by MDC
• When the user opens Gutenberg page with m2 component, it automatically migrates to M3

• Components affected:

• material/contact-form
  • material/email-input-field
  • material/message-input-field
  • material/name-input-field
  • material/short-text-input-field
  • material/website-input-field

Implementation brief

QA testing instructions

Demo

Changelog entry

[PatelUtkarsh]

Note the buttons are handled in #325.

Demo:

text-field.mp4

[igruszkauy]

Verified via local environment and zips provided for M3 version:
M2:

After updating M3:

• Shouldn't text label be in color when writing?
  
  

• Verified I can change typography:
  

Q: Don't we have the possibility of adding the supporting text and icon to the fields as shown in figma?

[PatelUtkarsh]

Hello @igruszkauy, Currently we don't have it, Should we create a ticket and track it?

[PatelUtkarsh]

Shouldn't text label be in color when writing?

Yes, I think it should change, Let me take a look.

[PatelUtkarsh]

PR created to fix label color on focus: #427

[igruszkauy]

Added ticket for support text and icon for text-fields #428

[igruszkauy]

Verified via: https://dev-mdc-web.pantheonsite.io/form-test/
Label color on focus working as expected: