Skip to content
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

Merged

Conversation

LukasTy
Copy link
Member

@LukasTy LukasTy commented Apr 11, 2024

Fixes #12726

This was a problem for both DesktopDateTimePicker (a regression as compared to v6) and the DesktopDateTimeRangePicker.

The Layout.contentWrapper element has a display: 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.

@LukasTy LukasTy added regression A bug, but worse component: pickers This is the name of the generic UI component, not the React module! component: DateTimePicker The React component. component: DateTimeRangePicker The React component labels Apr 11, 2024
@LukasTy LukasTy self-assigned this Apr 11, 2024
@mui-bot
Copy link

mui-bot commented Apr 11, 2024

Deploy preview: https://deploy-preview-12748--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against e72a267

@@ -91,8 +91,9 @@ const rendererInterceptor = function rendererInterceptor<
availableRangePositions: [rangePosition],
view: !isTimeViewActive ? popperView : 'day',
views: rendererProps.views.filter(isDatePickerView),
sx: [{ gridColumn: 1 }, ...finalProps.sx],
Copy link
Member

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?

Copy link
Member Author

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:

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. 🤔

Copy link
Member

@flaviendelangle flaviendelangle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice fix!

@LukasTy LukasTy merged commit 786e334 into mui:master Apr 12, 2024
21 checks passed
@LukasTy LukasTy deleted the fix-desktop-date-time-pickers-grid-layout branch April 12, 2024 12:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: DateTimePicker The React component. component: DateTimeRangePicker The React component component: pickers This is the name of the generic UI component, not the React module! regression A bug, but worse
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[pickers][DateTimePicker] Layout breaks when no actions are listed
3 participants