Devices on PDF report are in lower case

[wpdarren]

Bug Description

This issue was reported on the Performance Benchmarking bug bash.

Due to the API, they display the Visitors by devices data in lowercase. We had to make a change in the dashboard so that they appear in title case. The same issue is occurring on the PDF report. Would be good if we can have them in title case too.

---

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

Acceptance criteria

• In the generated PDF report, the values in the Traffic Overview "Visitors by devices" card render in title case, matching the dashboard card - e.g. "Desktop", "Mobile", "Tablet", not "desktop".
• Key metric tiles in the PDF whose value is a text label, such as "Top device driving purchases", render that value with the same casing as the equivalent dashboard tile.
• The values in the other Traffic Overview breakdown cards, "Visitors by channels" and "Visitors by locations", are unchanged, as on the dashboard.

Implementation Brief

• Give PDFMetricTileTable a way to style its primary labels, in assets/js/components/pdf-export/shared-react-pdf-components/PDFMetricTileTable.tsx:
  • Add an optional prop for the primary label's style and forward it to the

    site-kit-wp/assets/js/components/pdf-export/shared-react-pdf-components/PDFMetricTileTable.tsx

    Lines 97 to 104 in a98127b

    	<PDFLink
    	href={ row.primaryURL }
    	type="body"
    	size="small"
    	truncateContent
    	>
    	{ row.primary }
    	</PDFLink>

    that renders row.primary. PDFLink already accepts a style and merges it into the underlying text, so no other shared component needs to change.
• Capitalize the devices column in the Traffic Overview PDF, in .../traffic-overview/pdf/indexPDF.tsx:
  • When mapping the breakdown columns

    site-kit-wp/assets/js/modules/analytics-4/components/traffic-overview/pdf/indexPDF.tsx

    Line 167 in a98127b

    { TRAFFIC_BREAKDOWN_COLUMNS.map( ( { id, heading } ) => {

    pass the new style for the devices column only, with textTransform: 'capitalize'. This mirrors the dashboard, which applies text-transform: capitalize to that column's labels alone

    site-kit-wp/assets/sass/widgets/_googlesitekit-widget-analyticsTrafficOverview.scss

    Lines 269 to 272 in a98127b

    	.googlesitekit-traffic-overview__breakdown-column--devices
    	.googlesitekit-traffic-overview__breakdown-row-label {
    	text-transform: capitalize;
    	}

  • Leave toTableRows

    site-kit-wp/assets/js/modules/analytics-4/components/traffic-overview/pdf/indexPDF.tsx

    Line 89 in a98127b

    function toTableRows( rows: TrafficBreakdownRow[] ) {

    and the PDF data loader unchanged, the report values stay raw, as they do for the dashboard, and the casing stays a rendering concern.
  • Note: @react-pdf/renderer implements textTransform: 'capitalize' by upper-casing each word's first character, the same rule CSS capitalize applies, so the PDF and the dashboard produce identical labels. createPDFStyles passes non-numeric style properties through untouched.
• Apply the same to the text metric tile, in PDFMetricTileText.tsx:
  • Add textTransform: 'capitalize' to the value's style

    site-kit-wp/assets/js/components/pdf-export/shared-react-pdf-components/PDFMetricTileText.tsx

    Line 104 in a98127b

    <PDFTypography type="title" size="medium" style={ styles.value }>

    , mirroring the dashboard's MetricTileText metric rule

    site-kit-wp/assets/sass/components/key-metrics/_googlesitekit-km-widget-tile.scss

    Lines 103 to 108 in a98127b

    	.googlesitekit-km-widget-tile__metric {
    	font-size: $fs-title-lg;
    	font-weight: 500;
    	margin-top: 4px;
    	text-transform: capitalize;

    This covers the "Top device driving purchases" tile, and brings every PDF text tile in line with its dashboard counterpart.

Test Coverage

• Extend PDFMetricTileTable.test.tsx with a case asserting the new primary style reaches the rendered primary label, and that rows render unchanged when it is omitted.
• Extend the Traffic Overview PDF test (pdf/indexPDF.test.tsx) with a case asserting that only the devices card's rows carry the capitalizing style, while the channels and locations cards do not.
• Extend PDFMetricTileText.test.tsx with a case asserting the value carries the capitalizing style.

QA Brief

Changelog entry