[pickers] Remove PickersMonth and PickersYear from the theme and …

…remove the `div` wrapping each button (#15806) Signed-off-by: Flavien DELANGLE <[email protected]> Co-authored-by: Nora <[email protected]>
mui · Dec 19, 2024 · 1eaf1d8 · 1eaf1d8
1 parent 2700d7e
commit 1eaf1d8
Show file tree

Hide file tree

Showing 34 changed files with 356 additions and 381 deletions.
diff --git a/docs/data/date-pickers/custom-components/MonthButtonComponent.js b/docs/data/date-pickers/custom-components/MonthButtonComponent.js
@@ -6,7 +6,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
 
 const CustomMonthButton = styled('button')({
-  margin: '8px 0',
   height: 36,
   width: 72,
 });

diff --git a/docs/data/date-pickers/custom-components/MonthButtonComponent.tsx b/docs/data/date-pickers/custom-components/MonthButtonComponent.tsx
@@ -6,7 +6,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
 
 const CustomMonthButton = styled('button')({
-  margin: '8px 0',
   height: 36,
   width: 72,
 });

diff --git a/docs/data/date-pickers/custom-components/YearButtonComponent.js b/docs/data/date-pickers/custom-components/YearButtonComponent.js
@@ -6,7 +6,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
 
 const CustomYearButton = styled('button')({
-  margin: '8px 0',
   height: 36,
   width: 72,
 });

diff --git a/docs/data/date-pickers/custom-components/YearButtonComponent.tsx b/docs/data/date-pickers/custom-components/YearButtonComponent.tsx
@@ -6,7 +6,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
 
 const CustomYearButton = styled('button')({
-  margin: '8px 0',
   height: 36,
   width: 72,
 });

diff --git a/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx b/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx
@@ -115,25 +115,7 @@ export const staticDatePickerExamples: PickersSubcomponentType = {
         componentProps: { views: ['month'] },
       },
     },
-    slots: ['root'],
-  },
-  PickersMonth: {
-    examples: {
-      customTheme: {
-        type: 'success',
-        componentProps: { views: ['month'] },
-      },
-      sxProp: {
-        type: 'success',
-        componentProps: { views: ['month'] },
-      },
-
-      styledComponents: {
-        type: 'success',
-        componentProps: { views: ['month'] },
-      },
-    },
-    slots: ['root', 'monthButton'],
+    slots: ['root', 'button'],
   },
 };
 
@@ -240,7 +222,7 @@ export const datePickerExamples: PickersSubcomponentType = {
     },
     slots: ['root', 'today'],
   },
-  PickersMonth: {
+  MonthCalendar: {
     examples: {
       customTheme: {
         type: 'success',
@@ -263,7 +245,7 @@ export const datePickerExamples: PickersSubcomponentType = {
         componentProps: { views: ['month'] },
       },
     },
-    slots: ['root', 'monthButton'],
+    slots: ['button'],
   },
   PickersTextField: {
     examples: {

diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -68,7 +68,9 @@ After running the codemods, make sure to test your application and that you don'
 Feel free to [open an issue](https://github.com/mui/mui-x/issues/new/choose) for support if you need help to proceed with your migration.
 :::
 
-## New DOM structure for the field
+## Components breaking changes
+
+### New DOM structure for the field
 
 Before version `v7.x`, the fields' DOM structure consisted of an `<input />`, which held the whole value for the component.
 Unfortunately it presented accessibility limitations, which are impossible to resolve.
@@ -78,15 +80,15 @@ This approach is recommended in [W3C ARIA](https://www.w3.org/WAI/ARIA/apg/patte
 
 Starting with version `v8.x`, the new DOM structure is the default for all fields.
 
-### Fallback to the non-accessible DOM structure
+#### Fallback to the non-accessible DOM structure
 
 ```tsx
 <DateField enableAccessibleFieldDOMStructure={false} />
 <DatePicker enableAccessibleFieldDOMStructure={false} />
 <DateRangePicker enableAccessibleFieldDOMStructure={false} />
 ```
 
-### Migrate `slotProps.field`
+#### Migrate `slotProps.field`
 
 When using `slotProps.field` to pass props to your field component,
 the field consumes some props (for example `shouldRespectLeadingZeros`) and forwards the rest to the `TextField`.
@@ -120,7 +122,7 @@ the field consumes some props (for example `shouldRespectLeadingZeros`) and forw
   />
   ```
 
-### Migrate `slotProps.textField`
+#### Migrate `slotProps.textField`
 
 If you are passing props to `slotProps.textField`,
 these props will now be received by `PickersTextField` and should keep working the same way as before.
@@ -142,14 +144,14 @@ If you are passing `inputProps` to `slotProps.textField`,
 these props will now be passed to the hidden `<input />` element.
 :::
 
-### Migrate `slots.field`
+#### Migrate `slots.field`
 
 If you are passing a custom field component to your pickers, you need to create a new one that is using the accessible DOM structure.
 This new component will need to use the `PickersSectionList` component instead of an `<input />` HTML element.
 
 You can have a look at the [Using a custom input](/x/react-date-pickers/custom-field/#using-a-custom-input) section to have a concrete example.
 
-### Migrate `slots.textField`
+#### Migrate `slots.textField`
 
 If you are passing a custom `TextField` component to your fields and pickers,
 you need to create a new one that is using the accessible DOM structure.
@@ -162,7 +164,7 @@ please consider having a look at the [Using a custom input](/x/react-date-picker
 This approach can be more appropriate for deeper changes.
 :::
 
-### Migrate the theme
+#### Migrate the theme
 
 If you are using the theme to customize `MuiTextField`,
 you need to pass the same config to `MuiPickersTextField`:
@@ -260,6 +262,88 @@ const theme = createTheme({
 });
 ```
 
+### Month Calendar
+
+To simplify the theme and class structure, the `<PickersMonth />` component has been moved inside the Month Calendar component.
+This change causes a few breaking changes:
+
+- The classes from `pickersMonthClasses` have been moved inside `monthCalendarClasses`:
+
+  ```diff
+  -import { pickersMonthClasses } from '@mui/x-date-pickers/MonthCalendar';
+  +import { monthCalendarClasses } from '@mui/x-date-pickers/MonthCalendar';
+
+  -const buttonClassName = pickersMonthClasses.monthButton;
+  +const buttonClassName = monthCalendarClasses.button;
+
+  -const selectedButtonClassName = pickersMonthClasses.selected;
+  +const selectedButtonClassName = monthCalendarClasses.selected;
+
+  -const disabledButtonClassName = pickersMonthClasses.disabled;
+  +const disabledButtonClassName = monthCalendarClasses.disabled;
+  ```
+
+- The `monthButton` slot of the `PickersMonth` style overrides has been replaced by the `button` slot of the `MonthCalendar` theme entry:
+
+  ```diff
+   const theme = createTheme({
+     components: {
+  -    PickersMonth: {
+  +    MonthCalendar: {
+         styleOverrides: {
+  -        monthButton: {
+  +        button: {
+             color: 'red',
+           },
+         },
+       },
+     },
+   });
+  ```
+
+- The button to render a single month is no longer wrapped in a `<div />`, the spacing are instead defined inside the `root` slot of the Month Calendar.
+
+### Year Calendar
+
+To simplify the theme and class structure, the `<PickersYear />` component has been moved inside the Year Calendar component.
+This change causes a few breaking changes:
+
+- The classes from `pickersYearClasses` have been moved inside `yearCalendarClasses`:
+
+  ```diff
+  -import { pickersYearClasses } from '@mui/x-date-pickers/YearCalendar';
+  +import { yearCalendarClasses } from '@mui/x-date-pickers/YearCalendar';
+
+  -const buttonClassName = pickersYearClasses.monthButton;
+  +const buttonClassName = yearCalendarClasses.button;
+
+  -const selectedButtonClassName = pickersYearClasses.selected;
+  +const selectedButtonClassName = yearCalendarClasses.selected;
+
+  -const disabledButtonClassName = pickersYearClasses.disabled;
+  +const disabledButtonClassName = yearCalendarClasses.disabled;
+  ```
+
+- The `yearButton` slot of the `PickersYear` style overrides has been replaced by the `button` slot of the `YearCalendar` theme entry:
+
+  ```diff
+   const theme = createTheme({
+     components: {
+  -    PickersYear: {
+  +    YearCalendar: {
+         styleOverrides: {
+  -        yearButton: {
+  +        button: {
+             color: 'red',
+           },
+         },
+       },
+     },
+   });
+  ```
+
+- The button to render a single year is no longer wrapped in a `<div />`, the spacing are instead defined inside the `root` slot of the Year Calendar.
+
 ## Slots breaking changes
 
 ### Slot: `layout`

diff --git a/docs/pages/x/api/date-pickers/month-calendar.json b/docs/pages/x/api/date-pickers/month-calendar.json
@@ -70,11 +70,29 @@
     }
   ],
   "classes": [
+    {
+      "key": "button",
+      "className": "MuiMonthCalendar-button",
+      "description": "Styles applied to the button element that represents a single month",
+      "isGlobal": false
+    },
+    {
+      "key": "disabled",
+      "className": "Mui-disabled",
+      "description": "Styles applied to a disabled button element.",
+      "isGlobal": true
+    },
     {
       "key": "root",
       "className": "MuiMonthCalendar-root",
       "description": "Styles applied to the root element.",
       "isGlobal": false
+    },
+    {
+      "key": "selected",
+      "className": "Mui-selected",
+      "description": "Styles applied to a selected button element.",
+      "isGlobal": true
     }
   ],
   "spread": true,

diff --git a/docs/pages/x/api/date-pickers/year-calendar.json b/docs/pages/x/api/date-pickers/year-calendar.json
@@ -74,11 +74,29 @@
     }
   ],
   "classes": [
+    {
+      "key": "button",
+      "className": "MuiYearCalendar-button",
+      "description": "Styles applied to the button element that represents a single year",
+      "isGlobal": false
+    },
+    {
+      "key": "disabled",
+      "className": "Mui-disabled",
+      "description": "Styles applied to a disabled button element.",
+      "isGlobal": true
+    },
     {
       "key": "root",
       "className": "MuiYearCalendar-root",
       "description": "Styles applied to the root element.",
       "isGlobal": false
+    },
+    {
+      "key": "selected",
+      "className": "Mui-selected",
+      "description": "Styles applied to a selected button element.",
+      "isGlobal": true
     }
   ],
   "spread": true,

diff --git a/docs/src/modules/components/overview/MainDemo.tsx b/docs/src/modules/components/overview/MainDemo.tsx
@@ -26,9 +26,9 @@ const components: Components<Theme> = {
       }),
     },
   },
-  MuiPickersMonth: {
+  MuiMonthCalendar: {
     styleOverrides: {
-      monthButton: ({ theme }) => ({
+      button: ({ theme }) => ({
         fontWeight: 400,
         fontSize: '0.875rem',
         borderRadius: theme.shape.borderRadius,
@@ -37,9 +37,9 @@ const components: Components<Theme> = {
       }),
     },
   },
-  MuiPickersYear: {
+  MuiYearCalendar: {
     styleOverrides: {
-      yearButton: ({ theme }) => ({
+      button: ({ theme }) => ({
         fontWeight: 400,
         fontSize: '0.875rem',
         borderRadius: theme.shape.borderRadius,

diff --git a/docs/src/modules/components/overview/themes/customTheme.ts b/docs/src/modules/components/overview/themes/customTheme.ts
@@ -371,16 +371,16 @@ export const getCustomTheme = (mode: PaletteMode, config: Config): ThemeOptions
           }),
         },
       },
-      MuiPickersMonth: {
+      MuiMonthCalendar: {
         styleOverrides: {
-          monthButton: ({ theme }) => ({
+          button: ({ theme }) => ({
             borderRadius: theme.shape.borderRadius,
           }),
         },
       },
-      MuiPickersYear: {
+      MuiYearCalendar: {
         styleOverrides: {
-          yearButton: ({ theme }) => ({
+          button: ({ theme }) => ({
             borderRadius: theme.shape.borderRadius,
           }),
         },

diff --git a/docs/src/modules/components/overview/themes/md3.ts b/docs/src/modules/components/overview/themes/md3.ts
@@ -245,7 +245,6 @@ export const getMD3Theme = (mode: PaletteMode, config: Config): ThemeOptions =>
             height: 'fit-content',
             maxHeight: 'initial',
           },
-
           viewTransitionContainer: ({ theme }) => ({
             height: theme.mixins.density.height * 7 + theme.mixins.density.spacing * 6,
           }),
@@ -258,6 +257,11 @@ export const getMD3Theme = (mode: PaletteMode, config: Config): ThemeOptions =>
             borderBottom: `1px solid ${theme.palette.divider}`,
             alignContent: 'flex-start',
             width: theme.mixins.density.width * 7 + theme.mixins.density.spacing * 6 + 40,
+            columnGap: '12px',
+          }),
+          button: ({ theme }) => ({
+            borderRadius: theme.shape.borderRadius,
+            height: theme.mixins.density.height,
           }),
         },
       },
@@ -298,15 +302,6 @@ export const getMD3Theme = (mode: PaletteMode, config: Config): ThemeOptions =>
           }),
         },
       },
-      MuiPickersYear: {
-        styleOverrides: {
-          yearButton: ({ theme, ownerState }) => ({
-            borderRadius: theme.shape.borderRadius,
-            height: theme.mixins.density.height,
-            ...(!ownerState.selected && { color: theme.palette.text.secondary }),
-          }),
-        },
-      },
       MuiCard: {
         styleOverrides: {
           root: {

diff --git a/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json b/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json
@@ -48,7 +48,20 @@
     },
     "value": { "description": "The selected value. Used when the component is controlled." }
   },
-  "classDescriptions": { "root": { "description": "Styles applied to the root element." } },
+  "classDescriptions": {
+    "button": {
+      "description": "Styles applied to the button element that represents a single month"
+    },
+    "disabled": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "a disabled button element"
+    },
+    "root": { "description": "Styles applied to the root element." },
+    "selected": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "a selected button element"
+    }
+  },
   "slotDescriptions": {
     "monthButton": "Button displayed to render a single month in the <code>month</code> view."
   }