[M3] Components - Tab

[igruszkauy]

Feature description

Update Tab component to match M3 style

---

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

Acceptance criteria

• Tab block is replaced with m3 specs as provided by MDC
• When the user opens Gutenberg page with m2 component it automatically migrates to M3

Implementation brief

QA testing instructions

Demo

Changelog entry

[PatelUtkarsh]

Tab require migration from m2 to m3 since typography class is changes as per https://github.com/material-components/material-design-for-wordpress/pull/370/files#diff-858e445f1f1095a52fdf04e1505b6d33eca98e9eb4e0c27d909e1d75dea6f9a5

[PatelUtkarsh]

QA note: Test material tab block with m3 typography and color token.

[igruszkauy]

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

After updating M3:

• I think there is an issue, the component doesn't display correctly on dark mode, the titles are in black and cannot be read properly. Also, when changing the source color it applies the dark scheme and the switch behaves in a strange way

tab.component.mov

• Verified changing typography works:
  

[PatelUtkarsh]

Hello @igruszkauy Good catch, I've already created PR for that fix #418, I found the issue while preparing for demo.

[igruszkauy]

After adding the tab and going to the page if I go to customizer and change the source color, it still has some issues with the color of the inactive tabs, unless I go and change the dark/light mode

https://dev-mdc-web.pantheonsite.io/tab-test/
https://user-images.githubusercontent.com/2902880/185611046-ec550815-d312-4ea3-911c-4f91df24158c.mov

[PatelUtkarsh]

Good catch @igruszkauy,

This is because when re-generating color on customizer, we are not computing and injecting RGB CSV value which is used at various places. This is not specific to tab, I will create a new PR to fix this.

More details on this comment: #330 (comment)

[igruszkauy]

verified via: https://dev-mdc-web.pantheonsite.io/tab-test/

Issue fixed: After adding the tab and going to the page if I go to customizer and change the source color, it still has some issues with the color of the inactive tabs, unless I go and change the dark/light mode