[pickers] Add `PickerDay2` and `DateRangePickerDay2` components

[noraleonte]

• [x] I have followed (at least) the PR section of the contributing guide.

closes https://github.com/mui/mui-x/issues/14753 closes https://github.com/mui/mui-x/issues/13361

This is an exploration

I'm exploring the option of creating only one day component used by both simple and range pickers & writing the styles in a way that they are truly separated from each other. i.e. The selected state should not care whether isStartOfPreviewing is true or not. It just applies the styles related to selection. I reduced the DOM structure to a single element (ButtonBase) and the previewing and highlighting (now renamed to selectedRange) is handled with pseudo elements.

The advantage of this is that we reduce the complexity of customizing this component a lot and we can avoid specificity issues. See new demo vs custom theme from the overview page

A downside is that the padding of the pseudo elements is calculated based on the margins of the root => so any customizations of the spacing of the root element need to be reflected in the calculation of the positioning of the pseudo elements. We can try abstracting some of that and introducing css variables, but I think documenting this should be enough. Plus, it might even make it easier to achieve custom designs where the highlighting and previewing don't connect. (Like the picture)

TO DO

• [x] Create new component
• [x] add slot to enable it
• [ ] add docs

[mui-bot]

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

Updated pages:

• docs/data/date-pickers/custom-components/custom-components.md
• docs/data/date-pickers/playground/playground.md

Bundle size report

Total Size Change: 🔺+40.7KB^(+0.32%) - Total Gzip Change: 🔺+12.3KB^(+0.32%) Files: 122 total (2 added, 0 removed, 10 changed)

Show details for 100 more bundles (22 more not shown)

@mui/x-date-pickers-pro parsed: 🔺+11.5KB^(+3.70%) gzip: 🔺+2.63KB^(+3.27%) @mui/x-date-pickers parsed: 🔺+3.65KB^(+1.59%) gzip: 🔺+663B^(+1.09%) @mui/x-date-pickers-pro/DateRangeCalendar parsed: 🔺+292B^(+0.38%) gzip: 🔺+81B^(+0.34%) @mui/x-date-pickers-pro/DateRangePicker parsed: 🔺+292B^(+0.17%) gzip: 🔺+82B^(+0.16%) @mui/x-date-pickers-pro/DateTimeRangePicker parsed: 🔺+292B^(+0.14%) gzip: 🔺+84B^(+0.14%) @mui/x-date-pickers-pro/DesktopDateRangePicker parsed: 🔺+292B^(+0.17%) gzip: 🔺+77B^(+0.15%) @mui/x-date-pickers-pro/DesktopDateTimeRangePicker parsed: 🔺+292B^(+0.14%) gzip: 🔺+77B^(+0.13%) @mui/x-date-pickers-pro/MobileDateRangePicker parsed: 🔺+292B^(+0.17%) gzip: 🔺+76B^(+0.15%) @mui/x-date-pickers-pro/MobileDateTimeRangePicker parsed: 🔺+292B^(+0.15%) gzip: 🔺+80B^(+0.14%) @mui/x-date-pickers-pro/StaticDateRangePicker parsed: 🔺+291B^(+0.29%) gzip: 🔺+75B^(+0.24%) @mui/x-date-pickers-pro/DateRangePickerDay2 parsed: 🔺+13.7KB^(new) gzip: 🔺+4.64KB^(new) @mui/x-date-pickers/PickerDay2 parsed: 🔺+9.47KB^(new) gzip: 🔺+3.74KB^(new) @mui/x-charts parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/BarChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/ChartContainerPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/ChartDataProviderPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/ChartsToolbarPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/ChartZoomSlider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/FunnelChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/Heatmap parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/LineChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/PieChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/RadarChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/ScatterChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/BarChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartContainer parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartDataProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsAxis parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsAxisHighlight parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsClipPath parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsGrid parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsLabel parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsLegend parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsLocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsOverlay parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsReferenceLine parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsSurface parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsText parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsTooltip parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsXAxis parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsYAxis parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/Gauge parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/LineChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/PieChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/RadarChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ScatterChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/SparkLineChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/Toolbar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-data-grid parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-data-grid-premium parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-data-grid-premium/DataGridPremium parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-data-grid-pro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-data-grid-pro/DataGridPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-data-grid/DataGrid parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterDateFns parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterDateFnsJalali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterDayjs parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterLuxon parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterMoment parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterMomentHijri parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterMomentJalaali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DateRangePickerDay parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DesktopTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/LocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MobileTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MultiInputDateRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MultiInputDateTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MultiInputTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/PickersRangeCalendarHeader parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/SingleInputDateRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/SingleInputDateTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/SingleInputTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/TimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterDateFns parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterDateFnsBase parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterDateFnsJalali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterDayjs parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterLuxon parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterMoment parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterMomentHijri parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterMomentJalaali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateCalendar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateTimeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DayCalendarSkeleton parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DesktopDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DesktopDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DesktopTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DigitalClock parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/LocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MobileDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MobileDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MobileTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MonthCalendar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MultiSectionDigitalClock parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/PickersActionBar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/PickersCalendarHeader parsed: 0B^(0.00%) gzip: 0B^(0.00%)

Details of bundle changes

Generated by :no_entry_sign: dangerJS against 2afcbc0725f36554dd38e303638ccd973dfadc3b

[github-actions[bot]]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions[bot]]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[flaviendelangle]

Comparison of your owner state with my Base UI Calendar set of data attributes. Most of them slightly diverge and we need to settle on a shared name.

• isDayHidden => :red_circle: (I think it make sense to keep it on the MUI version with the showDaysOutsideCurrentMonth prop. But I would unify the logic with isHighlightTodayDisabled. One isDayHidden we have the UI state in the owner state, in isHighlightTodayDisabled we have the prop in the owner state and the CSS decides the UI. It should be the same for both. Maybe more setting the prop in the owner state imo)
• isLastDayOfWeek => data-end-of-week :yellow_circle: (lighter than data-last-day-of-week, tbd)
• isFirstDayOfWeek => data-start-of-week :yellow_circle: (lighter than data-first-day-of-week, tbd)
• isSelected => data-selected :heavy_check_mark:
• isHighlightTodayDisabled => :red_circle: (I think it make sense to keep it on the MUI version with the disableHighlightToday prop)
• isToday => data-current :yellow_circle: (to be able to do the same on the month and year views)
• isDisabled => data-disabled :heavy_check_mark:
• isOutsideCurrentMonth => data-outside-month :yellow_circle: (lighter than data-outside-current-month, it's React Aria's naming)
• isStartOfPreviewing => data-preview-start :yellow_circle: (lighter than data-start-of-previewing, tbd)
• isEndOfPreviewing => data-preview-end :yellow_circle: (lighter than `data-end-of-previewing, tbd)
• isPreviewing => data-previewed :yellow_circle: (coherent with data-selected)
• isStartOfSelectedRange => data-selection-start :yellow_circle: (lighter than data-start-of-selected-range, tbd)
• isEndOfSelectedRange => data-selection-end :yellow_circle: (lighter than data-end-of-selected-range, tbd)
• isWithinSelectedRange => data-inside-selection :yellow_circle: (lighter than data-within-selected-range, tbd)
• isDragSelected => :red_circle: (what is it needed for?)

[github-actions[bot]]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions[bot]]

This pull request has conflicts, please resolve those before we can evaluate the pull request.