From a2bf4bea17e35767e7647abb8065c91ff1a1fe44 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos Date: Wed, 8 Oct 2025 10:48:41 -0400 Subject: [PATCH 1/3] fix: [M3-10668] - Prevent range background for single selections --- .../components/DatePicker/Calendar/Calendar.styles.ts | 10 +++++++--- .../ui/src/components/DatePicker/Calendar/Calendar.tsx | 7 +++++++ 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/components/DatePicker/Calendar/Calendar.styles.ts b/packages/ui/src/components/DatePicker/Calendar/Calendar.styles.ts index 1b9367ea72b..00d1a9e262a 100644 --- a/packages/ui/src/components/DatePicker/Calendar/Calendar.styles.ts +++ b/packages/ui/src/components/DatePicker/Calendar/Calendar.styles.ts @@ -8,6 +8,7 @@ interface DayBoxBaseProps { } interface DayBoxProps extends DayBoxBaseProps { + isRange?: boolean | null; isSelected: boolean | null; } @@ -18,8 +19,11 @@ interface DayBoxInnerProps extends DayBoxBaseProps { export const DayBox = styled(Box, { label: 'DayBox', shouldForwardProp: (prop) => - prop !== 'isSelected' && prop !== 'isStart' && prop !== 'isEnd', -})(({ isSelected, isStart, isEnd, theme }) => { + prop !== 'isSelected' && + prop !== 'isStart' && + prop !== 'isEnd' && + prop !== 'isRange', +})(({ isSelected, isStart, isEnd, theme, isRange }) => { // Apply rounded edges to create smooth visual flow for date ranges const getBorderRadius = () => { if (isStart && isEnd) return '50%'; // Single date - fully rounded @@ -30,7 +34,7 @@ export const DayBox = styled(Box, { return { backgroundColor: - isSelected || isStart || isEnd + (isSelected || isStart || isEnd) && isRange ? theme.tokens.component.Calendar.DateRange.Background.Default : 'transparent', borderRadius: isSelected || isStart || isEnd ? getBorderRadius() : '0', diff --git a/packages/ui/src/components/DatePicker/Calendar/Calendar.tsx b/packages/ui/src/components/DatePicker/Calendar/Calendar.tsx index bca178c61f8..ef519ab5036 100644 --- a/packages/ui/src/components/DatePicker/Calendar/Calendar.tsx +++ b/packages/ui/src/components/DatePicker/Calendar/Calendar.tsx @@ -36,6 +36,12 @@ export const Calendar = ({ const startDay = startOfMonth.weekday % 7; const totalDaysInMonth = endOfMonth.day; const today = DateTime.now(); + const isDateRange = + startDate && + endDate && + startDate.isValid && + endDate.isValid && + !startDate.hasSame(endDate, 'day'); // Calculate dynamic grid size based on actual content const days = []; @@ -109,6 +115,7 @@ export const Calendar = ({ Date: Wed, 8 Oct 2025 10:54:13 -0400 Subject: [PATCH 2/3] Added changeset: Prevent range background for single selections in DateTimeRangePicker --- packages/ui/.changeset/pr-12972-fixed-1759935253273.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/ui/.changeset/pr-12972-fixed-1759935253273.md diff --git a/packages/ui/.changeset/pr-12972-fixed-1759935253273.md b/packages/ui/.changeset/pr-12972-fixed-1759935253273.md new file mode 100644 index 00000000000..0ddbb391de6 --- /dev/null +++ b/packages/ui/.changeset/pr-12972-fixed-1759935253273.md @@ -0,0 +1,5 @@ +--- +"@linode/ui": Fixed +--- + +Prevent range background for single selections in DateTimeRangePicker ([#12972](https://github.com/linode/manager/pull/12972)) From 7dd520f39bc78de38f895dc4dd46b435ff9545f4 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com> Date: Wed, 8 Oct 2025 10:55:03 -0400 Subject: [PATCH 3/3] Update pr-12972-fixed-1759935253273.md --- packages/ui/.changeset/pr-12972-fixed-1759935253273.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/.changeset/pr-12972-fixed-1759935253273.md b/packages/ui/.changeset/pr-12972-fixed-1759935253273.md index 0ddbb391de6..dcf9c796dd4 100644 --- a/packages/ui/.changeset/pr-12972-fixed-1759935253273.md +++ b/packages/ui/.changeset/pr-12972-fixed-1759935253273.md @@ -2,4 +2,4 @@ "@linode/ui": Fixed --- -Prevent range background for single selections in DateTimeRangePicker ([#12972](https://github.com/linode/manager/pull/12972)) +Prevent range background for single selections in DatePicker/Calendar ([#12972](https://github.com/linode/manager/pull/12972))