Metric tile design improvements

[nfmohit]

Feature Description

In an effort to retain consistency between metric tiles and improve responsiveness across multiple devices, the design of the metric tiles has been updated in Figma, which should be implemented in the application. Here is a summary of the changes:

1. The info tooltip icon should be aligned to the right in all viewports. Screenshot:

2. Tiles with the "text" & "numeric" types should have a change in their layout in smaller viewports, i.e. instead of aligning the tile content to the right, it should be placed under the title as in larger viewports, but the "tile change percentage" should be aligned to the right. Figma link. Screenshot:

3. The text content in zero data/gathering data states of tiles should have a font-size of body/medium.

---

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

Acceptance criteria

• The following updates should be made to an individual key metric widget tile:
  1. The info tooltip icon should be aligned to the right.
  2. In mobile viewports, "Numeric" & "Text" type tiles should have their tile content placed under the title and the metric change percentage should be aligned to the right, according to this Figma design.
  3. The text content in zero data/gathering data states should have a font-size of body/medium.

Implementation Brief

To address the AC points in order:

1. The info tooltip icon should be aligned to the right.

• Remove the flex-direction property where it has been added to .googlesitekit-km-widget-tile__title-container for the numeric and text tile types.
• Add flex: 1 to .googlesitekit-km-widget-tile__title.

2. In mobile viewports, "Numeric" & "Text" type tiles should have their tile content placed under the title and the metric change percentage should be aligned to the right, according to this Figma design.

• Add flex-direction: column to .googlesitekit-km-widget-tile.
• Fix the margin-top of .googlesitekit-km-widget-tile__metric for the mobile viewport - it should be 4px (i.e. the current value of -8px plus the margin-top value of .googlesitekit-km-widget-tile__table which is 12px).
• Add a div around the metric and subtext elements in the MetricTileNumeric and MetricTileText components.
• Add display: flex to .googlesitekit-km-widget-tile__body for the numeric and text tile types, and use Flexbox properties to implement the layout.

3. The text content in zero data/gathering data states should have a font-size of body/medium.

• Set the font-size and line-height properties for .googlesitekit-table__body-zero-data to $fs-body-md and $lh-body-md respectively.

Additionally, remove any redundant styling e.g. flex-direction: column can be removed from .googlesitekit-km-widget-tile--table.

Test Coverage

• Update VRT reference images as necessary.

QA Brief

• Set up Site Kit and the Key Metrics widgets.
• Observe the widgets of various types and ensure the ACs are met.
• Cross-check their layouts with the linked Figma designs and verify that they are correct in both desktop and mobile viewports.
• Verify the Storybook stories for the widgets.

Changelog entry

• Improve the layout of Key Metric numeric and text tiles.

[nfmohit]

Note: It would be good to verify with Sigal after adding the ACs to confirm if there is any improvement we've missed.

[nfmohit]

Note: There are a few other improvements that aren't a part of this issue, such as:

1. The tile title should take a height same as a tile with the highest title in the KMW area, e.g. if a tile's title is 2 lines long, all the tiles' titles should be 2 lines long. This will be implemented as a part of #7761. Screenshot:
2. In tile error states, the CTA height should be reduced to 32px. This should be implemented as a part of #7763. Screenshot:
3. In tile error states for smaller viewports, the CTA should be aligned to the right. This should be implemented as a part of #7763. Screenshot:

[nfmohit]

@sigal-teller Co-assigning this to you just to ensure that the current ACs cover all the improvements made to the individual metric tiles that have been applied in Figma to date.

[nfmohit]

For the record, Sigal and I discussed this internally and this should cover all the improvements needed. Moving to ACR.

[tofumatt]

@nfmohit Strangely, it looks like all of the screenshots here aren't appearing 🤔

Not sure what's happening there, but it makes it tough to review the issue in full 😅

The Figma link seems off too, can you double-check that stuff to make sure it references what the ACs refer to?

[nfmohit]

Thank you for the review, @tofumatt. I have updated the Figma links to correctly point to the appropriate screen. However, the screenshots in the issue does load for me. I have also checked from different browsers and devices.

Could you give it another look? Thank you!

[tofumatt]

Weird, now they're all fine! 😅

I guess it was a CDN thing or something 🤔

[tofumatt]

ACs look good, moving to IB 👍🏻

[tofumatt]

Looks good to me 👍🏻

IB ✅

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified the Key metrics widget in mobile and tablet viewports.
• Verified the key metrics widgets storybook story.
• Verified the widgets of various types met the AC.

    ![image](https://github.com/google/site-kit-wp/assets/94359491/0571e783-5533-44c7-8a86-ab32cc917dd6 https://github.com/google/site-kit-wp/assets/94359491/a30f5953-ee22-4636-9fcd-19265acde70b https://github.com/google/site-kit-wp/assets/94359491/d90798ca-2e87-4e39-a6ce-743c97f4a10b