[pickers] Remove PickersDay and promote PickerDay2 as a replacement

docs/data/date-pickers/base-concepts/CustomSlots.js

@@ -2,15 +2,15 @@ import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { PickersDay } from '@mui/x-date-pickers/PickersDay';
+import { PickerDay } from '@mui/x-date-pickers/PickerDay';
 import EditCalendarRoundedIcon from '@mui/icons-material/EditCalendarRounded';
 import { styled } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 
 const StyledButton = styled(IconButton)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
 }));
-const StyledDay = styled(PickersDay)(({ theme }) => ({
+const StyledDay = styled(PickerDay)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   color: theme.palette.secondary.light,
   ...theme.applyStyles('light', {

docs/data/date-pickers/base-concepts/CustomSlots.tsx

@@ -2,15 +2,15 @@ import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { PickersDay } from '@mui/x-date-pickers/PickersDay';
+import { PickerDay } from '@mui/x-date-pickers/PickerDay';
 import EditCalendarRoundedIcon from '@mui/icons-material/EditCalendarRounded';
 import { styled } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 
 const StyledButton = styled(IconButton)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
 }));
-const StyledDay = styled(PickersDay)(({ theme }) => ({
+const StyledDay = styled(PickerDay)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   color: theme.palette.secondary.light,
   ...theme.applyStyles('light', {

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

@@ -1,7 +1,7 @@
 ---
 productId: x-date-pickers
 title: Date and Time Pickers - Custom slots and subcomponents
-components: DateTimePickerTabs, PickersActionBar, DatePickerToolbar, TimePickerToolbar, DateTimePickerToolbar, PickerDay2, DateRangePickerDay2, PickersCalendarHeader, PickersRangeCalendarHeader, PickersShortcuts, DateRangePickerToolbar, MonthCalendar, YearCalendar, DateCalendar
+components: DateTimePickerTabs, PickersActionBar, DatePickerToolbar, TimePickerToolbar, DateTimePickerToolbar, PickersCalendarHeader, PickersRangeCalendarHeader, PickersShortcuts, DateRangePickerToolbar, MonthCalendar, YearCalendar, DateCalendar
 ---
 
 # Custom slots and subcomponents
@@ -188,34 +188,6 @@ You can pass a custom component to replace the year button, as shown below:
 
 {{"demo": "YearButtonComponent.js"}}
 
-## Day
-
-:::info
-The examples below use the new components, which might need further changes on your side to adjust to the new structure.
-
-Be sure to check that any custom styling configuration is compatible with the new structure.
-:::
-
-The `day` slot lets users change the selected day in the calendar.
-
-You can use the `<PickerDay2 />` and `<DateRangePickerDay2 />` components to replace the day slot with a simplified DOM structure reduced to a single element.
-
-The `::before` pseudo element is used to create the highlighting effect on the days within the selected range.
-
-The `::after` pseudo element is used to create the previewing effect on hover.
-
-This new structure provides a better theming and customization experience.
-
-{{"demo": "PickerDay2Demo.js"}}
-
-Use the `--PickerDay-horizontalMargin` and `--PickerDay-size` CSS variables to easily customize the dimensions and spacing of the day slot.
-
-{{"demo": "PickerDay2DemoCSSVars.js"}}
-
-Customize the look and feel by creating a custom theme with `styleOverrides`.
-
-{{"demo": "PickerDay2DemoCustomTheme.js"}}
-
 ## Month button
 
 This button lets users change the selected month in the `month` view.
@@ -236,6 +208,27 @@ You can pass a custom component to replace the month button, as shown below:
 
 {{"demo": "MonthButtonComponent.js"}}
 
+## Day
+
+The `day` slot is available on any component that renders a calendar to select a date or a range of dates.
+It lets you customize the appearance and behavior of each individual day cell.
+
+### Component structure change
+
+The `PickerDay` and `DateRangePickerDay` components have been simplified to use a single `ButtonBase` element.
+Previously, they used multiple nested elements to render the selection and preview highlights.
+These highlights are now rendered using `::before` and `::after` pseudo-elements on the root element.
+
+This change brings several benefits:
+
+- **Simpler DOM structure**: Fewer nested elements mean a cleaner DOM and potentially better performance.
+- **Improved consistency**: Both components now follow the same implementation pattern.
+
+However, this might affect your custom styles if you were targeting the nested elements.
+For example, in `DateRangePickerDay`, the `day` class has been removed because there is no longer a separate element for the day content.
+
+For more details on how to adapt your custom styles, check the [Day slot migration guide](/x/migration/migration-pickers-v8/#day-slot).
+
 ## Arrow switcher
 
 The following slots let you customize how to render the buttons and icons for an arrow switcher: the component used

docs/data/date-pickers/custom-components/getDensePickerTheme.js

@@ -34,7 +34,7 @@ export const getDensePickerTheme = (mode) => ({
     fontSize: 13,
   },
   components: {
-    MuiDateRangePickerDay2: {
+    MuiDateRangePickerDay: {
       styleOverrides: {
         root: {
           '--PickerDay-horizontalMargin': '8px',

docs/data/date-pickers/custom-components/getDensePickerTheme.ts

@@ -39,7 +39,7 @@ export const getDensePickerTheme = (mode: PaletteMode): ThemeOptions => ({
     fontSize: 13,
   },
   components: {
-    MuiDateRangePickerDay2: {
+    MuiDateRangePickerDay: {
       styleOverrides: {
         root: {
           '--PickerDay-horizontalMargin': '8px',

docs/data/date-pickers/date-calendar/DateCalendarServerRequest.js

@@ -3,7 +3,7 @@ import dayjs from 'dayjs';
 import Badge from '@mui/material/Badge';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { PickersDay } from '@mui/x-date-pickers/PickersDay';
+import { PickerDay } from '@mui/x-date-pickers/PickerDay';
 import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
 import { DayCalendarSkeleton } from '@mui/x-date-pickers/DayCalendarSkeleton';
 
@@ -46,7 +46,7 @@ function ServerDay(props) {
       overlap="circular"
       badgeContent={isSelected ? '🌚' : undefined}
     >
-      <PickersDay {...other} outsideCurrentMonth={outsideCurrentMonth} day={day} />
+      <PickerDay {...other} outsideCurrentMonth={outsideCurrentMonth} day={day} />
     </Badge>
   );
 }

docs/data/date-pickers/date-calendar/DateCalendarServerRequest.tsx

@@ -3,7 +3,7 @@ import dayjs, { Dayjs } from 'dayjs';
 import Badge from '@mui/material/Badge';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay';
+import { PickerDay, PickerDayProps } from '@mui/x-date-pickers/PickerDay';
 import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
 import { DayCalendarSkeleton } from '@mui/x-date-pickers/DayCalendarSkeleton';
 
@@ -34,7 +34,7 @@ function fakeFetch(date: Dayjs, { signal }: { signal: AbortSignal }) {
 
 const initialValue = dayjs('2022-04-17');
 
-function ServerDay(props: PickersDayProps & { highlightedDays?: number[] }) {
+function ServerDay(props: PickerDayProps & { highlightedDays?: number[] }) {
   const { highlightedDays = [], day, outsideCurrentMonth, ...other } = props;
 
   const isSelected =
@@ -46,7 +46,7 @@ function ServerDay(props: PickersDayProps & { highlightedDays?: number[] }) {
       overlap="circular"
       badgeContent={isSelected ? '🌚' : undefined}
     >
-      <PickersDay {...other} outsideCurrentMonth={outsideCurrentMonth} day={day} />
+      <PickerDay {...other} outsideCurrentMonth={outsideCurrentMonth} day={day} />
     </Badge>
   );
 }