[pickers] Fix date calendar issues (#9652)

mui · Jul 12, 2023 · be71749 · be71749
1 parent 809b5c7
commit be71749
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 43 deletions.
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/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,12 +46,7 @@ const DateRangePickerToolbarRoot = styled(PickersToolbar, {
  overridesResolver: (_, styles) => styles.root,
 })<{
  ownerState: DateRangePickerToolbarProps<any>;
-}>({
- [`& .${pickersToolbarClasses.penIconButton}`]: {
- position: 'relative',
- top: 4,
- },
-});
+}>({});
 
 const DateRangePickerToolbarContainer = styled('div', {
  name: 'MuiDateRangePickerToolbar',

diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
@@ -5,7 +5,7 @@ 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 { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay';
 import {
  DateRangePickerDayClasses,
  getDateRangePickerDayUtilityClass,
@@ -253,13 +253,6 @@ const DateRangePickerDayDay = styled(PickersDay, {
  '& > *': {
  transform: 'scale(0.9)',
  },
- ...(!ownerState.selected &&
- ownerState.isHighlighting && {
- opacity: 0.7,
- [`&.${pickersDayClasses.dayOutsideMonth}`]: {
- opacity: 0.4,
- },
- }),
  ...(ownerState.draggable && {
  cursor: 'grab',
  }),

diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -4,7 +4,6 @@ import { styled, useThemeProps, useTheme, Theme } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { PickersToolbarText } from '../internals/components/PickersToolbarText';
 import { PickersToolbar } from '../internals/components/PickersToolbar';
-import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
 import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
@@ -64,11 +63,6 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
  : undefined,
  justifyContent: 'space-around',
  position: 'relative',
- [`& .${pickersToolbarClasses.penIconButton}`]: {
- position: 'absolute',
- top: 8,
- ...(theme.direction === 'rtl' ? { left: 8 } : { right: 8 }),
- },
 }));
 
 DateTimePickerToolbarRoot.propTypes = {

diff --git a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx
@@ -109,15 +109,16 @@ const useUtilityClasses = (ownerState: PickersDayProps<any>) => {
  classes,
  } = ownerState;
 
+ const isHiddenDaySpacingFiller = outsideCurrentMonth && !showDaysOutsideCurrentMonth;
  const slots = {
  root: [
  'root',
- selected && 'selected',
+ selected && !isHiddenDaySpacingFiller && 'selected',
  disabled && 'disabled',
  !disableMargin && 'dayWithMargin',
  !disableHighlightToday && today && 'today',
  outsideCurrentMonth && showDaysOutsideCurrentMonth && 'dayOutsideMonth',
- outsideCurrentMonth && !showDaysOutsideCurrentMonth && 'hiddenDaySpacingFiller',
+ isHiddenDaySpacingFiller && 'hiddenDaySpacingFiller',
  ],
  hiddenDaySpacingFiller: ['hiddenDaySpacingFiller'],
  };

diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
@@ -5,7 +5,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { PickersToolbarText } from '../internals/components/PickersToolbarText';
 import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
 import { PickersToolbar } from '../internals/components/PickersToolbar';
-import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
 import { arrayIncludes } from '../internals/utils/utils';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
@@ -53,11 +52,7 @@ const TimePickerToolbarRoot = styled(PickersToolbar, {
  overridesResolver: (props, styles) => styles.root,
 })<{
  ownerState: TimePickerToolbarProps<any>;
-}>({
- [`& .${pickersToolbarClasses.penIconButtonLandscape}`]: {
- marginTop: 'auto',
- },
-});
+}>({});
 
 const TimePickerToolbarSeparator = styled(PickersToolbarText, {
  name: 'MuiTimePickerToolbar',

diff --git a/packages/x-date-pickers/src/internals/components/pickersToolbarClasses.ts b/packages/x-date-pickers/src/internals/components/pickersToolbarClasses.ts
@@ -8,10 +8,6 @@ export interface PickersToolbarClasses {
  root: string;
  /** Styles applied to the content element. */
  content: string;
- /** Styles applied to the pen icon button element. */
- penIconButton: string;
- /** Styles applied to the pen icon button element in landscape mode. */
- penIconButtonLandscape: string;
 }
 
 export type PickersToolbarClassKey = keyof PickersToolbarClasses;
@@ -23,6 +19,4 @@ export function getPickersToolbarUtilityClass(slot: string) {
 export const pickersToolbarClasses = generateUtilityClasses('MuiPickersToolbar', [
  'root',
  'content',
- 'penIconButton',
- 'penIconButtonLandscape',
 ]);
diff --git a/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-date-pickers/src/themeAugmentation/themeAugmentation.spec.ts
@@ -14,11 +14,7 @@ import {
 } from '../TimeClock';
 import { datePickerToolbarClasses } from '../DatePicker';
 import { dateTimePickerToolbarClasses } from '../DateTimePicker';
-import {
- pickersArrowSwitcherClasses,
- pickersPopperClasses,
- pickersToolbarClasses,
-} from '../internals';
+import { pickersArrowSwitcherClasses, pickersPopperClasses } from '../internals';
 import { pickersDayClasses } from '../PickersDay';
 import { timePickerToolbarClasses } from '../TimePicker';
 import { pickersMonthClasses } from '../MonthCalendar';
@@ -410,9 +406,6 @@ createTheme({
  styleOverrides: {
  root: {
  backgroundColor: 'red',
- [`.${pickersToolbarClasses.penIconButton}`]: {
- backgroundColor: 'green',
- },
  },
  // @ts-expect-error invalid MuiPickersToolbar class key
  contentWrapper: {