UX/UI Enhancement on Overall page metrics over the last X days widget titles

Bug Description

When on the Entity dashboard there’s a minor UX/UI enhancement I feel we should make on the Overall page metrics over the last X days widget. The titles are left aligned, where as the gathering data… text is centered.

The Search traffic over the last X days widget titles are centered so would make sense to make these titles to be too.

---

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

Acceptance criteria

• In any DataBlock that is left-aligned (e.g. the one big number in the All Traffic widget, or the numbers in the Overall Page Metrics widget), the potential “gathering data…” text that can appear there should also be left-aligned.
  • More generally speaking, “gathering data…” text in a DataBlock should always follow the overall alignment of that DataBlock, i.e. it should be the same as if numbers were displayed there.
  • For example, the “gathering data…” texts in DataBlocks in the Search traffic widget should still remain centered as all these are centered.

Implementation Brief

• Within _googlesitekit-gathering-data-notice.scss:
  • Modify &.googlesitekit-gathering-data-notice--has-style-default:
    • Change value of text-align to ‘inherit’.
  • Modify &::after:
    • Change value of display to ‘inline-block’.
    • Remove the margin property.

Test Coverage

QA Brief

• Enforce the gatheringData state using the Tester Plugin.
  • Verify that the alignment of all content in Data blocks on an Entity Dashboard page within the ‘Search traffic over the last 28 days’ is centred.
  • Verify that the alignment of all content in Data blocks on an Entity Dashboard page within the ‘Overall page metrics over the last 28 days’ is left aligned.
• Verify that no other changes should have occurred to Data blocks, when they are showing statistics/zero data, regardless of the zeroDataStates feature being on or off. (Essentially Data blocks should work as they do now normally.)

Changelog entry

• Ensure consistent alignment of content in data blocks.

[felixarntz]

@jimmymadon Great catch about the lines not being aligned!

Let’s go with your option 2. for now. This keeps the current design, which I’d rather not change at this point. While I see some potential value in your option 3., there are some other caveats that would raise, for example the data block in the “All Traffic” widget would probably look weird if it was centered.

Let’s align the lines similarly to the text and keep left vs center alignment overall as it currently is.

[felixarntz]

Good catch @wpdarren! However, note that the numbers that would usually appear there are left-aligned, so it appears to me that for consistency it should be rather the “gathering data…” texts that should be left-aligned.

I’m not opposed to alternatively center-align the data block headings, but following the current design, the new “gathering data…” texts are the problem here.