Metric tile design improvements about site-kit-wp HOT 10 CLOSED

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

from site-kit-wp.

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:
   

from site-kit-wp.

@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.

from site-kit-wp.

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

from site-kit-wp.

@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?

from site-kit-wp.

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!

from site-kit-wp.

Weird, now they're all fine! 😅

I guess it was a CDN thing or something 🤔

from site-kit-wp.

ACs look good, moving to IB 👍🏻

from site-kit-wp.

Looks good to me 👍🏻

IB ✅

from site-kit-wp.

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.

from site-kit-wp.