From e05e4b9ea55126320a7a725e4bf6322b675e33bc Mon Sep 17 00:00:00 2001 From: Yunwen Zheng Date: Wed, 11 Jun 2025 08:55:47 -0400 Subject: [PATCH] DatePicker: Add cursor not-allowed style and hover background color (#106451) * DatePicker add cusor not-allowed style and hover background color --- .../DateTimePickers/TimeRangePicker/CalendarBody.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx index e8dcd066de9..5279342e6d6 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx @@ -105,6 +105,7 @@ export const getBodyStyles = (theme: GrafanaTheme2) => { '&:disabled': { color: theme.colors.action.disabledText, + cursor: 'not-allowed', }, }), body: css({ @@ -153,13 +154,18 @@ export const getBodyStyles = (theme: GrafanaTheme2) => { outline: 0, }, - [`${hasActiveSelector}, .react-calendar__tile--active, .react-calendar__tile--active:hover`]: { + [`${hasActiveSelector}, .react-calendar__tile--active`]: { color: theme.colors.primary.contrastText, fontWeight: theme.typography.fontWeightMedium, background: theme.colors.primary.main, border: '0px', }, + '.react-calendar__tile:hover:not(.react-calendar__tile--active):not(.react-calendar__tile--rangeEnd):not(.react-calendar__tile--rangeStart)': + { + backgroundColor: theme.colors.action.hover, + }, + '.react-calendar__tile--rangeEnd, .react-calendar__tile--rangeStart': { padding: 0, border: '0px',