[docs] Fix date range calendar demo after MUI X v9 update#48262
Merged
LukasTy merged 8 commits intomui:masterfrom Apr 13, 2026
Merged
[docs] Fix date range calendar demo after MUI X v9 update#48262LukasTy merged 8 commits intomui:masterfrom
LukasTy merged 8 commits intomui:masterfrom
Conversation
MUI X v9 replaced the multi-element DateRangePickerDay with a single ButtonBase, removing .MuiDateRangePickerDay-day and .MuiPickerDay-root classes. Update selectors to use v9 CSS variables and class names. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Netlify deploy previewhttps://deploy-preview-48262--material-ui.netlify.app/ Bundle size report
|
LukasTy
changed the title
LukasTy
changed the title
LukasTy
added
docs
- Increase --PickerDay-size to 32px (accounts for v8 wrapper padding) - Replace .MuiTypography-subtitle1 with .MuiPickersCalendarHeader-labelContainer (v9 uses body1, not subtitle1) - Replace .MuiTypography-caption with .MuiDayCalendar-weekDayLabel and align width with day size - Override .MuiDayCalendar-root minWidth (v9 defaults to 312px) - Remove redundant lineHeight and margin overrides Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
PickersRangeCalendarHeader uses PickersArrowSwitcher which renders a Typography variant="subtitle1" for the month label — the original selector was correct. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
dayjs is immutable — .date() and .add() return new instances. The old code discarded the return values, so both startDate and endDate resolved to today, collapsing the range to a single date. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
michelengelen
approved these changes
Apr 13, 2026
Add a regression test fixture for StaticDateRangePicker to catch styling regressions after MUI X major upgrades. Uses pinned dates for deterministic screenshots. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Include the existing XDateRangeDemo from docs/src in the regression test import glob instead of creating a separate fixture, avoiding code duplication. Add required MUI X dependencies to the test workspace. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The docs demo import broke in CI. Use a standalone fixture with pinned dates instead. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
A standalone fixture doesn't add enough value. Revert the test workspace dependency additions as well. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Regressed after #48231
Also fixes selected date range regression caused by #40823. (dayjs dates are immutable)
Changes
Updates CSS selectors and styling approach for the date range picker demos to align with MUI X v9's single-element
DateRangePickerDayarchitecture:.MuiPickerDay-rootand.MuiDateRangePickerDay-rootsizing with CSS custom properties (--PickerDay-size,--PickerDay-horizontalMargin).MuiDateRangePickerDay-day.Mui-selected→.MuiDateRangePickerDay-selected(.dayslot removed in v9).MuiDateRangePickerDay-day:not(.Mui-selected)withborderColor→.MuiDateRangePickerDay-todaywithoutlineColor(v9 uses outline for today indicator).MuiTypography-caption→.MuiDayCalendar-weekDayLabelfor day-of-week header sizing.MuiDayCalendar-rootminWidthoverride (v9 defaults to 312px)lineHeight: 0andmargin: 0overrides on day elements.date()and.add()return values were discarded, collapsing the default range to a single dateFiles updated:
docs/src/components/productX/XDateRangeDemo.tsxdocs/src/components/productX/XHero.tsxFinal result