Merge pull request #8465 from google/enhancement/8135-audience-tile-u…

…pdates Desktop view Audience Tile style changes.
google · Apr 2, 2024 · a18c499 · a18c499
2 parents b24a7d1 + 7d2a653
commit a18c499
Show file tree

Hide file tree

Showing 17 changed files with 17 additions and 11 deletions.
diff --git a/...ts/js/modules/analytics-4/components/dashboard/AudienceSegmentation/AudienceTile/index.js b/...ts/js/modules/analytics-4/components/dashboard/AudienceSegmentation/AudienceTile/index.js
@@ -143,7 +143,10 @@ export default function AudienceTile( {
 
 					<AudienceTilePagesMetric
 						TileIcon={ AudienceMetricIconTopContent }
-						title={ __( 'Top content', 'google-site-kit' ) }
+						title={ __(
+							'Top content by pageviews',
+							'google-site-kit'
+						) }
 						topContentTitles={ topContentTitles }
 						topContent={ topContent }
 					/>

diff --git a/...mponents/analytics-4/audience-segmentation/_googlesitekit-audience-segmentation-tile.scss b/...mponents/analytics-4/audience-segmentation/_googlesitekit-audience-segmentation-tile.scss
@@ -18,6 +18,8 @@
 
 .googlesitekit-plugin {
 	.googlesitekit-audience-segmentation-tile {
+		margin-bottom: 4px;
+
 		.googlesitekit-audience-segmentation-tile__header {
 			border-bottom: 1px solid $c-utility-divider;
 			color: $c-surfaces-on-surface;
@@ -49,12 +51,12 @@
 
 			.googlesitekit-audience-segmentation-tile-metric__icon {
 				height: 20px;
-				margin: 14px 19px 14px 0;
+				margin: 16px 20px 16px 0;
 				min-width: 20px;
 				width: 20px;
 
 				@media (min-width: $width-desktop + 1 + px) {
-					margin-left: 15px;
+					margin-left: 16px;
 				}
 			}
 
@@ -65,14 +67,14 @@
 					color: $c-surfaces-on-surface;
 					font-size: $fs-headline-md;
 					font-weight: $fw-normal;
-					line-height: $lh-headline-md;
+					line-height: 32px; // Fixed line hight required for this components height to match designs.
 				}
 
 				.googlesitekit-audience-segmentation-tile-metric__title {
 					color: $c-surfaces-on-surface-variant;
 					font-size: $fs-body-md;
 					font-weight: $fw-normal;
-					line-height: $lh-body-md;
+					line-height: 20px; // Fixed line hight required for this components height to match designs.
 				}
 			}
 
@@ -97,10 +99,10 @@
 					gap: $grid-gap-phone;
 					grid-auto-columns: minmax(0, 1fr);
 					grid-auto-flow: column;
-					margin-top: 14px;
+					margin-top: 12px;
 
 					@media (min-width: $width-desktop + 1 + px) {
-						gap: $grid-gap-desktop;
+						gap: 10px; // Designs specify a non-standard grid gap.
 					}
 
 					.googlesitekit-audience-segmentation-tile-metric__cities-metric {
@@ -109,6 +111,7 @@
 							font-size: $fs-title-sm;
 							font-weight: $fw-medium;
 							line-height: $lh-title-sm;
+							margin-bottom: 2px;
 
 							overflow: hidden;
 							text-overflow: ellipsis;
@@ -129,17 +132,17 @@
 			&.googlesitekit-audience-segmentation-tile-metric--top-content {
 
 				.googlesitekit-audience-segmentation-tile-metric__title {
-					height: 36px;
-					line-height: 28px;
-					padding: 4px 0;
+					height: 20px;
+					line-height: 20px;
+					margin-bottom: 10px;
 				}
 
 				.googlesitekit-audience-segmentation-tile-metric__page-metric-container {
 					display: flex;
 					font-size: $fs-body-sm;
 					justify-content: space-between;
 					line-height: $lh-body-sm;
-					margin: 5px 0;
+					margin: 6px 0;
 				}
 			}
 		}

diff --git a/...ics4_Components_AudienceSegmentation_AudienceTile_NoData_0_document_0_small.png b/...ics4_Components_AudienceSegmentation_AudienceTile_NoData_0_document_0_small.png
diff --git a/...cs4_Components_AudienceSegmentation_AudienceTile_NoData_0_document_1_medium.png b/...cs4_Components_AudienceSegmentation_AudienceTile_NoData_0_document_1_medium.png
diff --git a/...ics4_Components_AudienceSegmentation_AudienceTile_NoData_0_document_2_large.png b/...ics4_Components_AudienceSegmentation_AudienceTile_NoData_0_document_2_large.png
diff --git a/...nts_AudienceSegmentation_AudienceTile_ReadyLongCityNames_0_document_0_small.png b/...nts_AudienceSegmentation_AudienceTile_ReadyLongCityNames_0_document_0_small.png
diff --git a/...ts_AudienceSegmentation_AudienceTile_ReadyLongCityNames_0_document_1_medium.png b/...ts_AudienceSegmentation_AudienceTile_ReadyLongCityNames_0_document_1_medium.png
diff --git a/...nts_AudienceSegmentation_AudienceTile_ReadyLongCityNames_0_document_2_large.png b/...nts_AudienceSegmentation_AudienceTile_ReadyLongCityNames_0_document_2_large.png
diff --git a/...mponents_AudienceSegmentation_AudienceTile_ReadyViewOnly_0_document_0_small.png b/...mponents_AudienceSegmentation_AudienceTile_ReadyViewOnly_0_document_0_small.png
diff --git a/...ponents_AudienceSegmentation_AudienceTile_ReadyViewOnly_0_document_1_medium.png b/...ponents_AudienceSegmentation_AudienceTile_ReadyViewOnly_0_document_1_medium.png
diff --git a/...mponents_AudienceSegmentation_AudienceTile_ReadyViewOnly_0_document_2_large.png b/...mponents_AudienceSegmentation_AudienceTile_ReadyViewOnly_0_document_2_large.png
diff --git a/...nents_AudienceSegmentation_AudienceTile_ReadyWithToolTip_0_document_0_small.png b/...nents_AudienceSegmentation_AudienceTile_ReadyWithToolTip_0_document_0_small.png
diff --git a/...ents_AudienceSegmentation_AudienceTile_ReadyWithToolTip_0_document_1_medium.png b/...ents_AudienceSegmentation_AudienceTile_ReadyWithToolTip_0_document_1_medium.png
diff --git a/...nents_AudienceSegmentation_AudienceTile_ReadyWithToolTip_0_document_2_large.png b/...nents_AudienceSegmentation_AudienceTile_ReadyWithToolTip_0_document_2_large.png
diff --git a/...tics4_Components_AudienceSegmentation_AudienceTile_Ready_0_document_0_small.png b/...tics4_Components_AudienceSegmentation_AudienceTile_Ready_0_document_0_small.png
diff --git a/...ics4_Components_AudienceSegmentation_AudienceTile_Ready_0_document_1_medium.png b/...ics4_Components_AudienceSegmentation_AudienceTile_Ready_0_document_1_medium.png
diff --git a/...tics4_Components_AudienceSegmentation_AudienceTile_Ready_0_document_2_large.png b/...tics4_Components_AudienceSegmentation_AudienceTile_Ready_0_document_2_large.png