[pickers] Update Date calendar styling following MD3 guidelines

docs/data/date-pickers/date-calendar/CustomDay.js

@@ -49,7 +49,7 @@ function Day(props) {
     <CustomPickersDay
       {...other}
       day={day}
-      sx={dayIsBetween ? { px: 2.5, mx: 0 } : {}}
+      disableMargin
       dayIsBetween={dayIsBetween}
       isFirstDay={isFirstDay}
       isLastDay={isLastDay}

docs/data/date-pickers/date-calendar/CustomDay.tsx

@@ -55,7 +55,7 @@ function Day(props: PickersDayProps<Dayjs> & { selectedDay?: Dayjs | null }) {
     <CustomPickersDay
       {...other}
       day={day}
-      sx={dayIsBetween ? { px: 2.5, mx: 0 } : {}}
+      disableMargin
       dayIsBetween={dayIsBetween}
       isFirstDay={isFirstDay}
       isLastDay={isLastDay}

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,
@@ -30,7 +29,10 @@ import {
   UncapitalizeObjectKeys,
   DEFAULT_DESKTOP_MODE_MEDIA_QUERY,
   buildWarning,
+  CALENDAR_MARGIN,
 } from '@mui/x-date-pickers/internals';
+import Typography from '@mui/material/Typography';
+import { VIEW_HEIGHT } from '@mui/x-date-pickers/internals/constants/dimensions';
 import { getReleaseInfo } from '../internal/utils/releaseInfo';
 import {
   dateRangeCalendarClasses,
@@ -64,11 +66,12 @@ const DateRangeCalendarRoot = styled('div', {
 })<{ ownerState: DateRangeCalendarOwnerState<any> }>({
   display: 'flex',
   flexDirection: 'row',
+  minHeight: VIEW_HEIGHT,
 });
 
 const DateRangeCalendarMonthContainer = styled('div', {
   name: 'MuiDateRangeCalendar',
-  slot: 'Container',
+  slot: 'MonthContainer',
   overridesResolver: (_, styles) => styles.monthContainer,
 })(({ theme }) => ({
   '&:not(:last-of-type)': {
@@ -77,23 +80,18 @@ const DateRangeCalendarMonthContainer = styled('div', {
 }));
 
 const DateRangeCalendarArrowSwitcher = styled(PickersArrowSwitcher)({
-  padding: '16px 16px 8px 16px',
-  display: 'flex',
+  margin: CALENDAR_MARGIN,
+  marginBottom: CALENDAR_MARGIN / 2,
   alignItems: 'center',
   justifyContent: 'space-between',
 });
 
-const DAY_RANGE_SIZE = 40;
-const weeksContainerHeight = (DAY_RANGE_SIZE + DAY_MARGIN * 2) * 6;
-
 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 }) => ({
-  minWidth: 312,
-  minHeight: weeksContainerHeight,
   [`&.${dateRangeCalendarClasses.dayDragging}`]: {
     [`& .${dayClasses.day}`]: {
       cursor: 'grabbing',
@@ -545,7 +543,9 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<TDate>(
               slots={slots}
               slotProps={slotProps}
             >
-              {utils.format(visibleMonths[month], 'monthAndYear')}
+              <Typography variant="body1" fontWeight="medium" component="span">
+                {utils.format(visibleMonths[month], 'monthAndYear')}
+              </Typography>
             </DateRangeCalendarArrowSwitcher>
           )}
 

packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx

@@ -7,7 +7,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import {
   PickersToolbar,
   PickersToolbarButton,
-  pickersToolbarClasses,
   useUtils,
   BaseToolbarProps,
   useLocaleText,
@@ -47,19 +46,15 @@ const DateRangePickerToolbarRoot = styled(PickersToolbar, {
   overridesResolver: (_, styles) => styles.root,
 })<{
   ownerState: DateRangePickerToolbarProps<any>;
-}>({
-  [`& .${pickersToolbarClasses.penIconButton}`]: {
-    position: 'relative',
-    top: 4,
-  },
-});
+}>({});
 
 const DateRangePickerToolbarContainer = styled('div', {
   name: 'MuiDateRangePickerToolbar',
   slot: 'Container',
   overridesResolver: (_, styles) => styles.container,
 })({
   display: 'flex',
+  alignItems: 'center',
 });
 
 const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar<

packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx

@@ -4,8 +4,8 @@ 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 { useUtils } from '@mui/x-date-pickers/internals';
-import { PickersDay, pickersDayClasses, PickersDayProps } from '@mui/x-date-pickers/PickersDay';
+import { DAY_MARGIN, DAY_SIZE, useUtils } from '@mui/x-date-pickers/internals';
+import { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay';
 import {
   DateRangePickerDayClasses,
   getDateRangePickerDayUtilityClass,
@@ -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,
@@ -248,18 +265,11 @@ const DateRangePickerDayDay = styled(PickersDay, {
 })<{
   ownerState: OwnerState;
 }>(({ ownerState }) => ({
+  // account for difference in expected margin and the preview border
+  width: DAY_SIZE - DAY_MARGIN,
+  height: DAY_SIZE - DAY_MARGIN,
   // Required to overlap preview border
-  transform: 'scale(1.1)',
-  '& > *': {
-    transform: 'scale(0.9)',
-  },
-  ...(!ownerState.selected &&
-    ownerState.isHighlighting && {
-      opacity: 0.7,
-      [`&.${pickersDayClasses.dayOutsideMonth}`]: {
-        opacity: 0.4,
-      },
-    }),
+  transform: 'scale(1.111)',
   ...(ownerState.draggable && {
     cursor: 'grab',
   }),

packages/x-date-pickers-pro/src/internal/hooks/useStaticRangePicker/useStaticRangePicker.tsx

@@ -6,7 +6,7 @@ import {
   PickersLayout,
   PickersLayoutSlotsComponentsProps,
 } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, DIALOG_WIDTH, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
+import { usePicker, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
 import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals/models';
 import {
   UseStaticRangePickerParams,
@@ -18,7 +18,6 @@ import { RangeFieldSection } from '../../models/fields';
 
 const PickerStaticLayout = styled(PickersLayout)(({ theme }) => ({
   overflow: 'hidden',
-  minWidth: DIALOG_WIDTH,
   backgroundColor: (theme.vars || theme).palette.background.paper,
 })) as unknown as typeof PickersLayout;
 

packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx

@@ -8,6 +8,7 @@ import {
   unstable_useEventCallback as useEventCallback,
   unstable_useControlled as useControlled,
 } from '@mui/utils';
+import { resolveComponentProps } from '@mui/base/utils';
 import { DateCalendarProps, DateCalendarDefaultizedProps } from './DateCalendar.types';
 import { useCalendarState } from './useCalendarState';
 import { useDefaultDates, useUtils } from '../internals/hooks/useUtils';
@@ -27,6 +28,7 @@ import { defaultReduceAnimations } from '../internals/utils/defaultReduceAnimati
 import { getDateCalendarUtilityClass } from './dateCalendarClasses';
 import { BaseDateValidationProps } from '../internals/models/validation';
 import type { PickerSelectionState } from '../internals/hooks/usePicker';
+import { DAY_MARGIN, DIALOG_WIDTH } from '../internals';
 
 const useUtilityClasses = (ownerState: DateCalendarProps<any>) => {
   const { classes } = ownerState;
@@ -67,10 +69,9 @@ const DateCalendarRoot = styled(PickerViewRoot, {
   name: 'MuiDateCalendar',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: DateCalendarProps<any> }>({
-  display: 'flex',
-  flexDirection: 'column',
-});
+})<{ ownerState: DateCalendarProps<any> & { disableDayMargin?: boolean } }>(({ ownerState }) => ({
+  width: DIALOG_WIDTH + (ownerState.disableDayMargin ? 7 * 2 * DAY_MARGIN : 0),
+}));
 
 const DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, {
   name: 'MuiDateCalendar',
@@ -255,7 +256,9 @@ export const DateCalendar = React.forwardRef(function DateCalendar<TDate>(
     }
   }, [value]); // eslint-disable-line
 
-  const ownerState = props;
+  // we only need one prop resolved correctly, passing empty object shouldn't be a problem
+  const disableDayMargin = resolveComponentProps(slotProps?.day, {} as any)?.disableMargin;
+  const ownerState = { ...props, disableDayMargin };
   const classes = useUtilityClasses(ownerState);
 
   const baseDateValidationProps: Required<BaseDateValidationProps<TDate>> = {
@@ -316,6 +319,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar<TDate>(
         labelId={gridLabelId}
         slots={slots}
         slotProps={slotProps}
+        displayWeekNumber={displayWeekNumber}
       />
       <DateCalendarViewTransitionContainer
         reduceAnimations={reduceAnimations}
@@ -334,6 +338,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar<TDate>(
               hasFocus={hasFocus}
               onFocusedViewChange={(isViewFocused) => setFocusedView('year', isViewFocused)}
               yearsPerRow={yearsPerRow}
+              width="inherit"
             />
           )}
 
@@ -348,6 +353,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar<TDate>(
               shouldDisableMonth={shouldDisableMonth}
               onFocusedViewChange={(isViewFocused) => setFocusedView('month', isViewFocused)}
               monthsPerRow={monthsPerRow}
+              width="inherit"
             />
           )}