Experiment with range calendar styling update

mui · Jun 9, 2023 · 7d7a71c · 7d7a71c
1 parent 7b9977e
commit 7d7a71c
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 54 deletions.
diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
@@ -11,7 +11,6 @@ import { Watermark } from '@mui/x-license-pro';
 import {
   applyDefaultDate,
   BaseDateValidationProps,
-  DAY_MARGIN,
   DayCalendar,
   DayCalendarSlotsComponent,
   DayCalendarSlotsComponentsProps,
@@ -31,12 +30,9 @@ import {
   DEFAULT_DESKTOP_MODE_MEDIA_QUERY,
   buildWarning,
   CALENDAR_MARGIN,
-  RANGE_CALENDAR_WIDTH,
-  WEEK_NUMBER_SIZE,
-  DAY_SIZE,
 } from '@mui/x-date-pickers/internals';
 import Typography from '@mui/material/Typography';
-import { dayPickerClasses } from '@mui/x-date-pickers';
+import { VIEW_HEIGHT } from '@mui/x-date-pickers/internals/constants/dimensions';
 import { getReleaseInfo } from '../internal/utils/releaseInfo';
 import {
   dateRangeCalendarClasses,
@@ -67,20 +63,11 @@ const DateRangeCalendarRoot = styled('div', {
   name: 'MuiDateRangeCalendar',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root,
-})<{ ownerState: DateRangeCalendarOwnerState<any> }>(({ ownerState }) => ({
+})<{ ownerState: DateRangeCalendarOwnerState<any> }>({
   display: 'flex',
   flexDirection: 'row',
-  [`& .${dayPickerClasses.root}`]: {
-    margin: '0 auto',
-  },
-  [`& .${dayPickerClasses.header}`]: {
-    alignSelf: 'center',
-    width: Math.min(
-      RANGE_CALENDAR_WIDTH + (ownerState.displayWeekNumber ? WEEK_NUMBER_SIZE : 0),
-      326,
-    ),
-  },
-}));
+  minHeight: VIEW_HEIGHT,
+});
 
 const DateRangeCalendarMonthContainer = styled('div', {
   name: 'MuiDateRangeCalendar',
@@ -99,26 +86,12 @@ const DateRangeCalendarArrowSwitcher = styled(PickersArrowSwitcher)({
   justifyContent: 'space-between',
 });
 
-const weeksContainerHeight =
-  (DAY_SIZE +
-    DAY_MARGIN * 2 +
-    // add the margin between week containers
-    DAY_MARGIN * 2) *
-    6 +
-  1 +
-  CALENDAR_MARGIN;
-
 const warnInvalidCurrentMonthCalendarPosition = buildWarning([
   'The `currentMonthCalendarPosition` prop must be an integer between `1` and the amount of calendars rendered.',
   'For example if you have 2 calendars rendered, it should be equal to either 1 or 2.',
 ]);
 
-const DayCalendarForRange = styled(DayCalendar)(({ theme, displayWeekNumber }) => ({
-  minWidth: Math.min(
-    RANGE_CALENDAR_WIDTH + (displayWeekNumber ? WEEK_NUMBER_SIZE : 0) + 2 * CALENDAR_MARGIN,
-    326,
-  ),
-  minHeight: weeksContainerHeight,
+const DayCalendarForRange = styled(DayCalendar)(({ theme }) => ({
   [`&.${dateRangeCalendarClasses.dayDragging}`]: {
     [`& .${dayClasses.day}`]: {
       cursor: 'grabbing',

diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useLicenseVerifier } from '@mui/x-license-pro';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { DAY_SIZE, useUtils } from '@mui/x-date-pickers/internals';
+import { DAY_MARGIN, DAY_SIZE, useUtils } from '@mui/x-date-pickers/internals';
 import { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay';
 import {
   DateRangePickerDayClasses,
@@ -157,6 +157,7 @@ const DateRangePickerDayRoot = styled('div', {
   ownerState.isHiddenDayFiller
     ? {}
     : {
+        position: 'relative',
         [`&:first-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: {
           ...startBorderStyle,
           borderLeftColor: (theme.vars || theme).palette.divider,
@@ -165,22 +166,35 @@ const DateRangePickerDayRoot = styled('div', {
           ...endBorderStyle,
           borderRightColor: (theme.vars || theme).palette.divider,
         },
+        border: `${DAY_MARGIN}px solid transparent`,
         ...(ownerState.isHighlighting && {
-          borderRadius: 0,
-          color: (theme.vars || theme).palette.primary.contrastText,
-          backgroundColor: theme.vars
-            ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})`
-            : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
-          '&:first-of-type': startBorderStyle,
-          '&:last-of-type': endBorderStyle,
-        }),
-        ...((ownerState.isStartOfHighlighting || ownerState.isFirstVisibleCell) && {
-          ...startBorderStyle,
-          paddingLeft: 0,
-        }),
-        ...((ownerState.isEndOfHighlighting || ownerState.isLastVisibleCell) && {
-          ...endBorderStyle,
-          paddingRight: 0,
+          '&:before': {
+            pointerEvents: 'none',
+            position: 'absolute',
+            content: '""',
+            width: `calc(100% + ${2 * DAY_MARGIN}px)`,
+            height: DAY_SIZE,
+            borderRadius: 0,
+            color: (theme.vars || theme).palette.primary.contrastText,
+            backgroundColor: theme.vars
+              ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})`
+              : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
+            ...((ownerState.isStartOfHighlighting || ownerState.isFirstVisibleCell) && {
+              ...startBorderStyle,
+              paddingLeft: 0,
+            }),
+            ...((ownerState.isEndOfHighlighting || ownerState.isLastVisibleCell) && {
+              ...endBorderStyle,
+              paddingRight: 0,
+              width: `100%`,
+              right: 0,
+            }),
+          },
+          '&:first-of-type:before': startBorderStyle,
+          '&:last-of-type:before': {
+            ...endBorderStyle,
+            width: `calc(100% + ${DAY_MARGIN}px)`,
+          },
         }),
       },
 );
@@ -211,6 +225,9 @@ const DateRangePickerDayRangeIntervalPreview = styled('div', {
 })<{ ownerState: OwnerState }>(({ theme, ownerState }) => ({
   // replace default day component margin with transparent border to avoid jumping on preview
   border: '2px solid transparent',
+  ...(ownerState.isHiddenDayFiller && {
+    margin: DAY_MARGIN,
+  }),
   ...(ownerState.isPreviewing &&
     !ownerState.isHiddenDayFiller && {
       borderRadius: 0,
@@ -249,13 +266,10 @@ const DateRangePickerDayDay = styled(PickersDay, {
   ownerState: OwnerState;
 }>(({ ownerState }) => ({
   // account for difference in expected margin and the preview border
-  width: DAY_SIZE - 1,
-  height: DAY_SIZE - 1,
+  width: DAY_SIZE - DAY_MARGIN,
+  height: DAY_SIZE - DAY_MARGIN,
   // Required to overlap preview border
-  transform: 'scale(1.1)',
-  '& > *': {
-    transform: 'scale(0.9)',
-  },
+  transform: 'scale(1.111)',
   ...(ownerState.draggable && {
     cursor: 'grab',
   }),