[PickersDay] Remove `PickersDay` and promote `PickerDay2` as a replacement by michelengelen · Pull Request #21739 · mui/mui-x

michelengelen · 2026-03-13T14:28:26Z

This prevents misalignment when the theme used by the user has a display definition in their typography.caption theme object.

Fixes #21615

Signed-off-by: michel <[email protected]>

mui-bot · 2026-03-13T14:30:34Z

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

Updated pages:

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-charts	0B^(0.00%)	0B^(0.00%)
@mui/x-charts-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-charts-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers	▼-3.81KB^(-1.66%)	▼-642B^(-1.02%)
@mui/x-date-pickers-pro	▼-9.19KB^(-2.87%)	▼-1.59KB^(-1.87%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 4f58898

Signed-off-by: michel <[email protected]>

LukasTy

A couple of additional notes:

nitpick: this doesn't look like a pro (DateRangePicker) package change in any way
Have you considered the change for PickersDay2 as well?
- Side note: WDYT, @noraleonte, is that component ready to replace the OG one?
  It's a breaking change, because of styling requirements. So, now, or wait another ~year 🙈
Now that I have seen this, I can not unsee it. 🙈
How come the day number is not vertically aligned within the button? 😂

Screen.Recording.2026-03-19.at.16.40.40.mov

@noraleonte, have you noticed this? Do you have a better fix for this than line-height: 1? 🤔

LukasTy · 2026-03-19T14:43:10Z

packages/x-date-pickers/src/PickersDay/PickersDay.tsx


 const styleArg = ({ theme }: { theme: Theme }) => ({
  ...theme.typography.caption,
+  display: 'block',


Wouldn't flex work here?
As it stands now, this is a tiny BC for anyone who used a week picker example from our docs.

Would work as well ... I just took the value that was initially set for this.

agree, it should not impact the docs demo.

michelengelen · 2026-03-19T14:58:35Z

nitpick: this doesn't look like a pro (DateRangePicker) package change in any way

Yes, you are right ... I just took this since it was reported from that component in the bug-issue. Will change that.

Have you considered the change for PickersDay2 as well?

No, thanks for pointing me to that though.

Side note: WDYT, @noraleonte, is that component ready to replace the OG one?
It's a breaking change, because of styling requirements. So, now, or wait another ~year 🙈

If possible in any way I would like to include any breaking changes now, ideally with this release. So if there is a decision to be made I would go for it now.

Now that I have seen this, I can not unsee it. 🙈
How come the day number is not vertically aligned within the button? 😂

🫣

@noraleonte, have you noticed this? Do you have a better fix for this than line-height: 1? 🤔

michelengelen · 2026-03-19T15:03:06Z

@noraleonte, have you noticed this? Do you have a better fix for this than line-height: 1? 🤔

@LukasTy I would love to use text-box, but it seems we are a bit early for this, since it is not yet widely adopted

noraleonte · 2026-03-20T08:50:50Z

WDYT, @noraleonte, is that component ready to replace the OG one?
It's a breaking change, because of styling requirements. So, now, or wait another ~year 🙈

I think it might be, but seems a bit short notice to include it in this release 🙈 I'm not worried about the component not being ready, it's more that it's a breaking change, comes with a migration guide + we need to check all the demos are still working properly (customization ones especially) 🙈

@noraleonte, have you noticed this? Do you have a better fix for this than line-height: 1? 🤔

I haven't noticed it but now it's bugging me. Present in PickersDay2 as well btw 🙈 line-height seems to do the job here. Agree with Michel that we should wait a bit for text-box

LukasTy · 2026-03-20T09:43:57Z

So, to conclude, I see two paths:

Lazy

Remove change in WeekPicker
Set display: flex on PickersDay and PickersDay2
Add a migration page entry notifying about the change and urging upgraders to double-check if all is good in their custom implementations (should be fine in at least 99% of cases)

Proper bad-ass 😆

Remove change in WeekPicker
Remove PickersDay
Remove https://mui.com/x/react-date-pickers/custom-components/#day demo
Set display: flex on PickersDay2
Rename PickersDay2 to PickersDay and DateRangePickerDay2 to DateRangePickerDay
Add codemod removing the slots={{ day: PickerDay2 }} and slots={{ day: DateRangePickerDay2 }} usages
Add migration guide entry about this component change as well as the display: flex
Hope Argos is happy and do some manual testing 👌

In both cases, I'd urge setting line-height: 1 to fix vertical alignment.

Does that sound about right, @noraleonte?

I leave the decision to @michelengelen.

noraleonte · 2026-03-20T11:03:35Z

Yes, that's a pretty accurate summary 👌

…ponding imports alongside Signed-off-by: michel <[email protected]>

…picker' into bugfix/21615-misaligned-days-in-picker

Signed-off-by: michel <[email protected]>

…ligned-days-in-picker

Signed-off-by: michel <[email protected]>

…ligned-days-in-picker

set display: block for PickersDay component style

7167a58

Signed-off-by: michel <[email protected]>

michelengelen requested review from mj12albert and siriwatknp March 13, 2026 14:28

michelengelen self-assigned this Mar 13, 2026

michelengelen added type: bug It doesn't behave as expected. scope: pickers Changes related to the date/time pickers. needs cherry-pick The PR should be cherry-picked to master after merge. v8.x labels Mar 13, 2026

michelengelen and others added 2 commits March 19, 2026 13:23

Merge branch 'master' into bugfix/21615-misaligned-days-in-picker

3b6e1a3

adjusted display property for weekpicker demo

bd965bc

Signed-off-by: michel <[email protected]>

LukasTy reviewed Mar 19, 2026

View reviewed changes

michelengelen changed the title ~~[DateRangePicker] Set display: block for PickersDay component style~~ [PickersDay] Set display: block for PickersDay component style Mar 19, 2026

Merge branch 'master' into bugfix/21615-misaligned-days-in-picker

be24115

michelengelen and others added 7 commits March 20, 2026 14:39

remove PickerDay2 and DateRangePickerDay2 from slots and corres…

0f20f67

…ponding imports alongside Signed-off-by: michel <[email protected]>

Merge branch 'master' into bugfix/21615-misaligned-days-in-picker

9c64d75

Merge remote-tracking branch 'origin/bugfix/21615-misaligned-days-in-…

2afb06a

…picker' into bugfix/21615-misaligned-days-in-picker

fixed variable declaration

6cef43a

Signed-off-by: michel <[email protected]>

fixed docs preview

abc2d03

Signed-off-by: michel <[email protected]>

renamed PickersDay to PickerDay for naming consistency

c8ea116

Signed-off-by: michel <[email protected]>

updated docs and api

8cd164f

Signed-off-by: michel <[email protected]>

michelengelen changed the title ~~[PickersDay] Set display: block for PickersDay component style~~ [PickersDay] Remove PickersDay and promote PickerDay2 as a replacement Mar 23, 2026

michelengelen added 3 commits March 23, 2026 11:55

Merge remote-tracking branch 'upstream/master' into bugfix/21615-misa…

2d7a6ac

…ligned-days-in-picker

updated incorrect component path

524fcfe

Signed-off-by: michel <[email protected]>

re-added disableMargin prop to PickerDay component

e18f5f5

Signed-off-by: michel <[email protected]>

michelengelen added 3 commits March 23, 2026 12:20

re-added disableMargin prop to DateRangePickerDay component

717f11a

Signed-off-by: michel <[email protected]>

ran docs script

28b3778

Signed-off-by: michel <[email protected]>

Merge remote-tracking branch 'upstream/master' into bugfix/21615-misa…

4f58898

…ligned-days-in-picker

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[PickersDay] Remove `PickersDay` and promote `PickerDay2` as a replacement#21739

[PickersDay] Remove `PickersDay` and promote `PickerDay2` as a replacement#21739
michelengelen wants to merge 17 commits intomui:masterfrom
michelengelen:bugfix/21615-misaligned-days-in-picker

michelengelen commented Mar 13, 2026 •

edited

Loading

Uh oh!

mui-bot commented Mar 13, 2026 •

edited

Loading

Uh oh!

LukasTy left a comment

Uh oh!

LukasTy Mar 19, 2026

Uh oh!

michelengelen Mar 19, 2026

Uh oh!

siriwatknp Mar 20, 2026

Uh oh!

michelengelen commented Mar 19, 2026

Uh oh!

michelengelen commented Mar 19, 2026 •

edited

Loading

Uh oh!

noraleonte commented Mar 20, 2026

Uh oh!

LukasTy commented Mar 20, 2026

Uh oh!

noraleonte commented Mar 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

michelengelen commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

LukasTy left a comment

Choose a reason for hiding this comment

Uh oh!

LukasTy Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

michelengelen Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

siriwatknp Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

michelengelen commented Mar 19, 2026

Uh oh!

michelengelen commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

noraleonte commented Mar 20, 2026

Uh oh!

LukasTy commented Mar 20, 2026

Lazy

Proper bad-ass 😆

Uh oh!

noraleonte commented Mar 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

michelengelen commented Mar 13, 2026 •

edited

Loading

mui-bot commented Mar 13, 2026 •

edited

Loading

michelengelen commented Mar 19, 2026 •

edited

Loading