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] Fix desktop date time Pickers grid layout #12748
[pickers] Fix desktop date time Pickers grid layout #12748
Conversation
Deploy preview: https://deploy-preview-12748--material-ui-x.netlify.app/ |
@@ -91,8 +91,9 @@ const rendererInterceptor = function rendererInterceptor< | |||
availableRangePositions: [rangePosition], | |||
view: !isTimeViewActive ? popperView : 'day', | |||
views: rendererProps.views.filter(isDatePickerView), | |||
sx: [{ gridColumn: 1 }, ...finalProps.sx], |
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.
We often do the following:
sx={[...(Array.isArray(formControlSx) ? formControlSx : [formControlSx])]}
Are we sure finalProps.sx
is an array here?
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.
In this case we are sure:
mui-x/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx
Lines 74 to 85 in aed8aeb
sx: [ | |
{ | |
[`&.${multiSectionDigitalClockClasses.root}`]: { | |
borderBottom: 0, | |
}, | |
[`&.${multiSectionDigitalClockClasses.root}, .${multiSectionDigitalClockSectionClasses.root}, &.${digitalClockClasses.root}`]: | |
{ | |
maxHeight: RANGE_VIEW_HEIGHT, | |
}, | |
}, | |
], | |
}; |
If my memory serves well, I've tested and identified that there is no way for otherProps.sx
to be present here. 🤔
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.
Nice fix!
Fixes #12726
This was a problem for both
DesktopDateTimePicker
(a regression as compared to v6) and theDesktopDateTimeRangePicker
.The
Layout.contentWrapper
element has adisplay: grid
style in case of Desktop Date Time (Range) Pickers.It causes the layout to behave differently, on what kind of children are added.
With this change, all the grid children have explicitly specified
gridColumn
property to be aware of the position they should be placed in.