-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[pickers] Prepare compatibility with @mui/zero-runtime
(stop using ownerState
in styled
)
#12003
Conversation
Deploy preview: https://deploy-preview-12003--material-ui-x.netlify.app/ |
packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePickerLayout.tsx
Outdated
Show resolved
Hide resolved
* If `true`, the day can be dragged to change the current date range. | ||
* @default false | ||
*/ | ||
draggable?: boolean; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Right now the typing comes from the DOM element which also accepts "true"
and "false"
But we are only passing true
of undefined
so I restricted the typing so that our check in the styled component and the typing are coherent
packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx
Show resolved
Hide resolved
packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx
Show resolved
Hide resolved
@mui/zero-runtime
(stop using ownerState
in styled
)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work! 👏 🚀
Leaving some comments about a few regressions. 🙈 💡
packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
Outdated
Show resolved
Hide resolved
packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
Outdated
Show resolved
Hide resolved
packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
Outdated
Show resolved
Hide resolved
packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
Outdated
Show resolved
Hide resolved
packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
Show resolved
Hide resolved
packages/x-date-pickers/src/internals/components/PickersPopper.tsx
Outdated
Show resolved
Hide resolved
432df6d
to
43346fa
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work, thank you! 👍 💯
packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
Show resolved
Hide resolved
@@ -76,24 +76,46 @@ const DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, { | |||
name: 'MuiDateTimeRangePickerToolbar', | |||
slot: 'StartToolbar', | |||
overridesResolver: (_, styles) => styles.startToolbar, | |||
})<DateTimeRangePickerStartOrEndToolbarProps<any>>(({ ownerState }) => ({ | |||
})<DateTimeRangePickerStartOrEndToolbarProps<any>>({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
})<DateTimeRangePickerStartOrEndToolbarProps<any>>({ | |
})<DateTimeRangePickerStartOrEndToolbarProps<any> & { ownerState: DateTimeRangePickerStartOrEndToolbarProps<any> }>({ |
This would make sure that the styled-component receives ownerState
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
DateTimeRangePickerStartOrEndToolbarProps
already contains it 👍
type DateTimeRangePickerStartOrEndToolbarProps<TDate extends PickerValidDate> =
DateTimePickerToolbarProps<TDate> & {
ownerState?: DateTimeRangePickerToolbarProps<TDate>;
};
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK the problem was that ownerState
was optional in DateTimeRangePickerStartOrEndToolbarProps
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
But the right API here is :
props: ({ toolbarVariant }: DateTimeRangePickerStartOrEndToolbarProps<any>) => toolbarVariant !== 'desktop',
In which case I do need the typing because the types equals props
and not props & ownerState
(it should probably be fixed)
packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
Outdated
Show resolved
Hide resolved
…`ownerState` in `styled`) (mui#12003)
…`ownerState` in `styled`) (mui#12003)
Part of #12277
Follow up
Make sure that we are always accessing
theme.direction
from somewhere compatible with@mui/zero-runtime
Requires [zero-runtime] Add RTL support material-ui#41217