From be7174996bc1157dd1d39343c819b6a9af7581bb Mon Sep 17 00:00:00 2001 From: Lukas Date: Wed, 12 Jul 2023 16:37:04 +0300 Subject: [PATCH] [pickers] Fix date calendar issues (#9652) --- .../src/DateRangePicker/DateRangePickerToolbar.tsx | 8 +------- .../src/DateRangePickerDay/DateRangePickerDay.tsx | 9 +-------- .../src/DateTimePicker/DateTimePickerToolbar.tsx | 6 ------ packages/x-date-pickers/src/PickersDay/PickersDay.tsx | 5 +++-- .../x-date-pickers/src/TimePicker/TimePickerToolbar.tsx | 7 +------ .../src/internals/components/pickersToolbarClasses.ts | 6 ------ .../src/themeAugmentation/themeAugmentation.spec.ts | 9 +-------- 7 files changed, 7 insertions(+), 43 deletions(-) diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx index 1380e8e2a975..77ba0bcbaafd 100644 --- 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; -}>({ - [`& .${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 index b5618737f06f..cf7ba5a450a2 100644 --- 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 index 83bfd879d007..a664cc73845b 100644 --- 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 index 1b5000c5fece..2e38a37992ae 100644 --- 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) => { 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 index 0c1bc44bbfa1..61e9eafa0bf5 100644 --- 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; -}>({ - [`& .${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 index f244e40cba97..09ecae7d30ce 100644 --- 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 index 6f32a6967c7f..3fe257299475 100644 --- 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: {