Use tooltip for the Timezone only when necessary.

WordPress · Nov 21, 2023 · b2970df · b2970df
1 parent e95bb8c
commit b2970df
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/packages/components/src/date-time/time/timezone.tsx b/packages/components/src/date-time/time/timezone.tsx
@@ -32,12 +32,22 @@ const TimeZone = () => {
 			? timezone.abbr
 			: `UTC${ offsetSymbol }${ timezone.offset }`;
 
+	// Replace underscore with space in strings like `America/Costa_Rica`.
+	const prettyTimezoneString = timezone.string.replace( '_', ' ' );
+
 	const timezoneDetail =
 		'UTC' === timezone.string
 			? __( 'Coordinated Universal Time' )
-			: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;
+			: `(${ zoneAbbr }) ${ prettyTimezoneString }`;
+
+	const isAbbrSameAsDetails =
+		`${ zoneAbbr } ${ prettyTimezoneString }`.trim() === zoneAbbr;
 
-	return (
+	return isAbbrSameAsDetails ? (
+		<StyledComponent className="components-datetime__timezone">
+			{ zoneAbbr }
+		</StyledComponent>
+	) : (
 		<Tooltip placement="top" text={ timezoneDetail }>
 			<StyledComponent className="components-datetime__timezone">
 				{ zoneAbbr }