[M3] Components - Data Table

[igruszkauy]

Feature description

Update Data Table component to match M3 style

---

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

Acceptance criteria

• Data table block is replaced with m3 specs
• Reference: https://m3.material.io/foundations/design-tokens/overview

• When the user opens Gutenberg page with m2 component it automatically migrates to M3

Implementation brief

QA testing instructions

• Download current version of plugin from wp.org, Install add data table and table component.
• Download the latest version of plugin and theme and upgrade and open post in backend:
  • Previous block should be migrated to the new version.
  • Default table block should be migrated to WP core table.
  • Verify frontend is looking like the one in https://m3.material.io/foundations/design-tokens/overview for material data table.
  • Verify WP core table should look material without rounded edges. (Due to WP core markup is not compatible with material design).

Demo

Changelog entry

[mattchungxwp]

Confirm with @rodydavis : Which M3 color tokens to use for the border and header background.

[PatelUtkarsh]

Hello @rodydavis ,

As per material site:

1. Border is using --mio-theme-color-surface-variant which seems like --md-sys-color-surface-variant
2. Table header (TD) is using --mio-theme-color-surface-1 as background, we don't have suface-1 should we assume --md-sys-color-surface?

After doing above data table with generated theme looks like following:

If we use 1 and 2 both as --md-sys-color-surface-variant then it looks like following:

Which m3 token should we use for border and background for td?

[PatelUtkarsh]

Outline for border; Between headers use on surface varient; Background is --md-sys-color-surface.

[PatelUtkarsh]

Hello @rodydavis,

Here is a table heading with surface variant. (Border inside header is using on surface variant)

surface-varient-encoded.mp4

If we use table heading background as surface, it matches the page background. See below:

While m3 reference site is using surface-1; Should we continue to use surface variant?

Screenshot for reference:

[PatelUtkarsh]

@rodydavis to provide designer feedback on the ticket.

[PatelUtkarsh]

Confirmed on call: Okay to use surface variant.

[felipebochehin87]

@PatelUtkarsh

• when I upgrade my local site to use the latest version, I see issues in the table borders. They're not rounded. I manually changed the Global Corner Styles, but I still see the square borders;
• the footer doesn't have the same background color as the header. The header is being automatically set to a color, but the footer is not.

[PatelUtkarsh]

@felipebochehin87 Is this material block or WP core table block?

[felipebochehin87]

@PatelUtkarsh you're right, I checked the wrong table on local, sorry. It is working in dev and in local using the correct table. Thanks for pointing that out. Moving to UAT.

[igruszkauy]

I installed locally and this is what I am seeing after updating. @felipebochehin87 can you please post screenshots of how you are seeing the new components migrated? I am not sure if I am doing something wrong

BEFORE

AFTER

[felipebochehin87]

@igruszkauy here's a video of how I tested in my local site (BTW, I used "Data Table (Material)" to test this).

2022_08_01_08_50_21.mp4

[felipebochehin87]

In a fresh install, the new table (Material) is not displaying the round corners, the lines between the cells... This is working for me in an existing site.

[PatelUtkarsh]

Hello @felipebochehin87, Does this work post colour generation from customizer and saving it?

I tested m3 zip with fresh WordPress and post color generation in customizer this seems to work for me. Can you give it a try?

Steps:

1. Fresh installation of WP.
2. Add theme and plugin zip.
3. Activate theme and plugin.
4. Create post with material data table, Border is not visible. Save draft or publish.
5. Go to /wp-admin/customize.php
6. Material design option -> Color Palette.
7. Click random generation icon or pick any color.
8. Save
9. Go back to post in backend and refresh. Verify frontend.

[igruszkauy]

Works as expected, besides the need of choosing source color if coming from a new install.