Odd-looking lines below Search traffic and Overall page metrics widget numbers

Bug Description

For some reason, when Analytics/Search Console are gathering data, the “Search traffic” widget in the Site Kit dashboard has horizontal lines below the “gathering data” texts that replace the big numbers. It looks like these were present in the original Figma design, but I’m questioning why - they look weird and they are not present if the regular numbers are shown, so why are they shown when gathering data? That doesn’t make sense to me.

The same weird UX with the horizontal lines is present in the “Overall page metrics” widget shown on the entity dashboard.

See attached screenshot. Also a second screenshot is present for comparison with regular numbers.

More discussion and screenshots can be found on the Asana ticket

---

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

Acceptance criteria

• UI for the big numbers in the “Search traffic” and “Overall page metrics” widgets should be adjusted as follows:
  • There should not be a gray horizontal line below them (specifically relevant for when they display the “gathering data…” text instead of a number, as seen in the screenshot above).

Implementation Brief

• Using assets/sass/components/global/_googlesitekit-gathering-data-notice.scss,
  • Set the padding for the span within the notice-text mixin to 0.
  • Remove the after pseudo-element from .googlesitekit-gathering-data-notice--has-style-default.

Test Coverage

• No new tests to be added.

QA Brief

• Create a new site and connect the Analytics module, or force gathering data state for Search Console and Analytics via the Tester plugin.
• Navigate to the Main Dashboard.
• Verify that horizontal lines below “gathering data” don’t appear in the “Search traffic” widget, as per the AC.
• Navigate to an Entity Dashboard.
• Verify that horizontal lines below “gathering data” don’t appear in the “Overall page metrics” widget, as per the AC.

Changelog entry

• Remove lines below “gathering data” text on chart metric selection buttons.

[marrrmarrr]

Yeah, we can remove them, the trend numbers are a fairly small element of this graph so no need to represent them with the strange lines.

[wpdarren]

QA Update: ✅

Verified:

• Main: The horizontal lines below “gathering data” does not appear in the Search traffic widget, as per the AC.
• Entity: The horizontal lines below “gathering data” does not appear in the Search traffic widget, as per the AC.
• Entity: The horizontal lines below “gathering data” does not appear in the Overall page metrics widget, as per the AC.
• Checked the layout on small screen sizes.

Screenshots