Tweak the static display for the hour period. (#96664)

Automattic · Nov 24, 2024 · ff937e8 · ff937e8
1 parent 6ea0f58
commit ff937e8
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/client/components/stats-interval-dropdown/index.jsx b/client/components/stats-interval-dropdown/index.jsx
@@ -80,7 +80,7 @@ const IntervalDropdown = ( { slug, period, queryParams, intervals, onGatedHandle
 	function getDisplayLabel() {
 		// If the period is not in the intervals list, capitalize it and show in the label - however user wouldn't be able to select it.
 		// TODO: this is a temporary solution, we should remove this once we have all the intervals in the list.
-		return intervals[ period ]?.label ?? capitalize( period );
+		return intervals[ period ]?.label ?? `${ capitalize( period ) }s`;
 	}
 
 	function onSelectionHandler( interval ) {
@@ -93,7 +93,10 @@ const IntervalDropdown = ( { slug, period, queryParams, intervals, onGatedHandle
 		page( generateNewLink( interval ) );
 	}
 
-	return (
+	// Check if the selected period is in the intervals list.
+	const selectedPeriod = intervals[ period ];
+
+	return selectedPeriod ? (
 		<Dropdown
 			className="stats-interval-dropdown"
 			renderToggle={ ( { isOpen, onToggle } ) => (
@@ -114,6 +117,11 @@ const IntervalDropdown = ( { slug, period, queryParams, intervals, onGatedHandle
 			) }
 			focusOnMount={ false }
 		/>
+	) : (
+		// TODO: Tweak the styles or move this to another place for better UX.
+		<div className="stats-interval-display">
+			<label>{ getDisplayLabel() }</label>
+		</div>
 	);
 };
 

diff --git a/client/components/stats-interval-dropdown/style.scss b/client/components/stats-interval-dropdown/style.scss
@@ -64,3 +64,11 @@
 		background-color: var(--color-accent-5);
 	}
 }
+
+// Mimic the style of Button component.
+.stats-interval-display {
+	font-family: $font-sf-pro-text;
+	font-size: 13px; // stylelint-disable-line declaration-property-unit-allowed-list
+	font-weight: 400;
+	line-height: 36px;
+}
diff --git a/client/my-sites/stats/stats-chart-tabs/style.scss b/client/my-sites/stats/stats-chart-tabs/style.scss
@@ -263,7 +263,7 @@ ul.module-tabs {
 			border-top-color: #DCDCDE;
 		}
 
-		.stats-interval-dropdown {
+		.stats-interval-dropdown, .stats-interval-display {
 			margin-left: 48px;
 
 			& > .components-button {