From ee58d4ce4bb4bd2472ff08c6c839d7d2f969d187 Mon Sep 17 00:00:00 2001
From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
Date: Mon, 22 Aug 2022 10:37:27 +0100
Subject: [PATCH] TimePicker: Fixes relative timerange of less than a day not
 displaying

---
 .../DateTimePickers/TimeRangePicker/CalendarBody.tsx        | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx
index a8cba10cd00..f3d3ed700ad 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx
@@ -65,6 +65,9 @@ function dateInfo(date: Date): number[] {
 }
 
 export const getBodyStyles = (theme: GrafanaTheme2) => {
+  // If a time range is part of only 1 day but does not encompass the whole day,
+  // the class that react-calendar uses is '--hasActive' by itself (without being part of a '--range')
+  const hasActiveSelector = `.react-calendar__tile--hasActive:not(.react-calendar__tile--range)`;
   return {
     title: css`
       color: ${theme.colors.text.primary};
@@ -126,6 +129,7 @@ export const getBodyStyles = (theme: GrafanaTheme2) => {
         outline: 0;
       }
 
+      ${hasActiveSelector},
       .react-calendar__tile--active,
       .react-calendar__tile--active:hover {
         color: ${theme.colors.primary.contrastText};
@@ -152,11 +156,13 @@ export const getBodyStyles = (theme: GrafanaTheme2) => {
         }
       }
 
+      ${hasActiveSelector},
       .react-calendar__tile--rangeStart {
         border-top-left-radius: 20px;
         border-bottom-left-radius: 20px;
       }
 
+      ${hasActiveSelector},
       .react-calendar__tile--rangeEnd {
         border-top-right-radius: 20px;
         border-bottom-right-radius: 20px;