From d3394e25f14fdaa7e7fbe38512caa86f1cfe705b Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 31 May 2024 13:26:34 +0200 Subject: [PATCH 01/10] [pickers] Allow to customize the month and the year buttons --- .../custom-components/custom-components.md | 30 +---------- .../CalendarHeaderComponent.js | 0 .../CalendarHeaderComponent.tsx | 0 .../CalendarHeaderComponent.tsx.preview | 0 .../CalendarHeaderComponentProps.js | 0 .../CalendarHeaderComponentProps.tsx | 0 .../CalendarHeaderComponentProps.tsx.preview | 0 .../CalendarHeaderComponentRange.js | 0 .../CalendarHeaderComponentRange.tsx | 0 .../CalendarHeaderComponentRange.tsx.preview | 0 .../custom-views/MonthButtonComponent.js | 26 ++++++++++ .../custom-views/MonthButtonComponent.tsx | 26 ++++++++++ .../MonthButtonComponent.tsx.preview | 5 ++ .../custom-views/MonthButtonComponentProps.js | 23 ++++++++ .../MonthButtonComponentProps.tsx | 23 ++++++++ .../MonthButtonComponentProps.tsx.preview | 9 ++++ .../date-pickers/custom-views/custom-views.md | 51 ++++++++++++++++++ docs/data/pages.ts | 1 + .../x/api/date-pickers/date-calendar.json | 6 +++ .../pages/x/api/date-pickers/date-picker.json | 6 +++ .../x/api/date-pickers/date-time-picker.json | 6 +++ .../api/date-pickers/desktop-date-picker.json | 6 +++ .../desktop-date-time-picker.json | 6 +++ .../api/date-pickers/mobile-date-picker.json | 6 +++ .../date-pickers/mobile-date-time-picker.json | 6 +++ .../x/api/date-pickers/month-calendar.json | 14 +++++ .../date-pickers/pickers-calendar-header.json | 2 +- .../pickers-range-calendar-header.json | 2 +- .../api/date-pickers/static-date-picker.json | 6 +++ .../date-pickers/static-date-time-picker.json | 6 +++ .../x/react-date-pickers/custom-views.js | 7 +++ .../date-calendar/date-calendar.json | 1 + .../date-pickers/date-picker/date-picker.json | 1 + .../date-time-picker/date-time-picker.json | 1 + .../desktop-date-picker.json | 1 + .../desktop-date-time-picker.json | 1 + .../mobile-date-picker.json | 1 + .../mobile-date-time-picker.json | 1 + .../month-calendar/month-calendar.json | 7 ++- .../static-date-picker.json | 1 + .../static-date-time-picker.json | 1 + .../src/DateCalendar/DateCalendar.tsx | 2 + .../src/DateCalendar/DateCalendar.types.ts | 12 +++-- .../src/DateCalendar/DayCalendar.tsx | 8 +-- .../src/MonthCalendar/MonthCalendar.tsx | 16 +++++- .../src/MonthCalendar/MonthCalendar.types.ts | 25 +++++++++ .../src/MonthCalendar/PickersMonth.tsx | 52 ++++++++++++------- .../x-date-pickers/src/MonthCalendar/index.ts | 7 ++- scripts/x-date-pickers-pro.exports.json | 3 ++ scripts/x-date-pickers.exports.json | 3 ++ 50 files changed, 356 insertions(+), 61 deletions(-) rename docs/data/date-pickers/{custom-components => custom-views}/CalendarHeaderComponent.js (100%) rename docs/data/date-pickers/{custom-components => custom-views}/CalendarHeaderComponent.tsx (100%) rename docs/data/date-pickers/{custom-components => custom-views}/CalendarHeaderComponent.tsx.preview (100%) rename docs/data/date-pickers/{custom-components => custom-views}/CalendarHeaderComponentProps.js (100%) rename docs/data/date-pickers/{custom-components => custom-views}/CalendarHeaderComponentProps.tsx (100%) rename docs/data/date-pickers/{custom-components => custom-views}/CalendarHeaderComponentProps.tsx.preview (100%) rename docs/data/date-pickers/{custom-components => custom-views}/CalendarHeaderComponentRange.js (100%) rename docs/data/date-pickers/{custom-components => custom-views}/CalendarHeaderComponentRange.tsx (100%) rename docs/data/date-pickers/{custom-components => custom-views}/CalendarHeaderComponentRange.tsx.preview (100%) create mode 100644 docs/data/date-pickers/custom-views/MonthButtonComponent.js create mode 100644 docs/data/date-pickers/custom-views/MonthButtonComponent.tsx create mode 100644 docs/data/date-pickers/custom-views/MonthButtonComponent.tsx.preview create mode 100644 docs/data/date-pickers/custom-views/MonthButtonComponentProps.js create mode 100644 docs/data/date-pickers/custom-views/MonthButtonComponentProps.tsx create mode 100644 docs/data/date-pickers/custom-views/MonthButtonComponentProps.tsx.preview create mode 100644 docs/data/date-pickers/custom-views/custom-views.md create mode 100644 docs/pages/x/react-date-pickers/custom-views.js diff --git a/docs/data/date-pickers/custom-components/custom-components.md b/docs/data/date-pickers/custom-components/custom-components.md index 3ecf81afeb3c7..ce8429820e7bb 100644 --- a/docs/data/date-pickers/custom-components/custom-components.md +++ b/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, PickersCalendarHeader, PickersRangeCalendarHeader, PickersShortcuts, DateRangePickerToolbar +components: DateTimePickerTabs, PickersActionBar, DatePickerToolbar, TimePickerToolbar, DateTimePickerToolbar, PickersShortcuts, DateRangePickerToolbar --- # Custom slots and subcomponents @@ -219,34 +219,6 @@ Each component comes with its own toolbar (`DatePickerToolbar`, `TimePickerToolb {{"demo": "ToolbarComponent.js"}} -## Calendar header - -The calendar header is available on any component that renders a calendar to select a date or a range of dates. -It allows the user to navigate through months and to switch to the month and year views when available. - -### Component props - -You can pass props to the calendar header as shown below: - -{{"demo": "CalendarHeaderComponentProps.js", "defaultCodeOpen": false}} - -### Component - -You can pass custom components to replace the header, as shown below: - -{{"demo": "CalendarHeaderComponent.js", "defaultCodeOpen": false}} - -When used with a date range component, -you receive three additional props to let you handle scenarios where multiple months are rendered: - -- `calendars`: The number of calendars rendered -- `month`: The month used for the header being rendered -- `monthIndex`: The index of the month used for the header being rendered - -The demo below shows how to navigate the months two by two: - -{{"demo": "CalendarHeaderComponentRange.js", "defaultCodeOpen": false}} - ## Arrow switcher The following slots let you customize how to render the buttons and icons for an arrow switcher component—the component diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponent.js b/docs/data/date-pickers/custom-views/CalendarHeaderComponent.js similarity index 100% rename from docs/data/date-pickers/custom-components/CalendarHeaderComponent.js rename to docs/data/date-pickers/custom-views/CalendarHeaderComponent.js diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx b/docs/data/date-pickers/custom-views/CalendarHeaderComponent.tsx similarity index 100% rename from docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx rename to docs/data/date-pickers/custom-views/CalendarHeaderComponent.tsx diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx.preview b/docs/data/date-pickers/custom-views/CalendarHeaderComponent.tsx.preview similarity index 100% rename from docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx.preview rename to docs/data/date-pickers/custom-views/CalendarHeaderComponent.tsx.preview diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.js b/docs/data/date-pickers/custom-views/CalendarHeaderComponentProps.js similarity index 100% rename from docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.js rename to docs/data/date-pickers/custom-views/CalendarHeaderComponentProps.js diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.tsx b/docs/data/date-pickers/custom-views/CalendarHeaderComponentProps.tsx similarity index 100% rename from docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.tsx rename to docs/data/date-pickers/custom-views/CalendarHeaderComponentProps.tsx diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.tsx.preview b/docs/data/date-pickers/custom-views/CalendarHeaderComponentProps.tsx.preview similarity index 100% rename from docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.tsx.preview rename to docs/data/date-pickers/custom-views/CalendarHeaderComponentProps.tsx.preview diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js b/docs/data/date-pickers/custom-views/CalendarHeaderComponentRange.js similarity index 100% rename from docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js rename to docs/data/date-pickers/custom-views/CalendarHeaderComponentRange.js diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx b/docs/data/date-pickers/custom-views/CalendarHeaderComponentRange.tsx similarity index 100% rename from docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx rename to docs/data/date-pickers/custom-views/CalendarHeaderComponentRange.tsx diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx.preview b/docs/data/date-pickers/custom-views/CalendarHeaderComponentRange.tsx.preview similarity index 100% rename from docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx.preview rename to docs/data/date-pickers/custom-views/CalendarHeaderComponentRange.tsx.preview diff --git a/docs/data/date-pickers/custom-views/MonthButtonComponent.js b/docs/data/date-pickers/custom-views/MonthButtonComponent.js new file mode 100644 index 0000000000000..8f0c336d4b22b --- /dev/null +++ b/docs/data/date-pickers/custom-views/MonthButtonComponent.js @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +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, +}); + +export default function MonthButtonComponent() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-views/MonthButtonComponent.tsx b/docs/data/date-pickers/custom-views/MonthButtonComponent.tsx new file mode 100644 index 0000000000000..8f0c336d4b22b --- /dev/null +++ b/docs/data/date-pickers/custom-views/MonthButtonComponent.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +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, +}); + +export default function MonthButtonComponent() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-views/MonthButtonComponent.tsx.preview b/docs/data/date-pickers/custom-views/MonthButtonComponent.tsx.preview new file mode 100644 index 0000000000000..8659099c00834 --- /dev/null +++ b/docs/data/date-pickers/custom-views/MonthButtonComponent.tsx.preview @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-views/MonthButtonComponentProps.js b/docs/data/date-pickers/custom-views/MonthButtonComponentProps.js new file mode 100644 index 0000000000000..ee4e0dbfda7e4 --- /dev/null +++ b/docs/data/date-pickers/custom-views/MonthButtonComponentProps.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; + +export default function MonthButtonComponentProps() { + return ( + + + ({ + title: ownerState['aria-label'], + }), + }} + views={['month', 'day']} + openTo="month" + /> + + + ); +} diff --git a/docs/data/date-pickers/custom-views/MonthButtonComponentProps.tsx b/docs/data/date-pickers/custom-views/MonthButtonComponentProps.tsx new file mode 100644 index 0000000000000..ee4e0dbfda7e4 --- /dev/null +++ b/docs/data/date-pickers/custom-views/MonthButtonComponentProps.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; + +export default function MonthButtonComponentProps() { + return ( + + + ({ + title: ownerState['aria-label'], + }), + }} + views={['month', 'day']} + openTo="month" + /> + + + ); +} diff --git a/docs/data/date-pickers/custom-views/MonthButtonComponentProps.tsx.preview b/docs/data/date-pickers/custom-views/MonthButtonComponentProps.tsx.preview new file mode 100644 index 0000000000000..eabc994bc2200 --- /dev/null +++ b/docs/data/date-pickers/custom-views/MonthButtonComponentProps.tsx.preview @@ -0,0 +1,9 @@ + ({ + title: ownerState['aria-label'], + }), + }} + views={['month', 'day']} + openTo="month" +/> \ No newline at end of file diff --git a/docs/data/date-pickers/custom-views/custom-views.md b/docs/data/date-pickers/custom-views/custom-views.md new file mode 100644 index 0000000000000..3e459e9473631 --- /dev/null +++ b/docs/data/date-pickers/custom-views/custom-views.md @@ -0,0 +1,51 @@ +--- +productId: x-date-pickers +title: Date and Time Pickers - Custom views +components: PickersCalendarHeader, PickersRangeCalendarHeader, PickersMonth +--- + +# Custom views + +

Learn how to override the default DOM structure of the views.

+ +## Calendar header + +The calendar header is available on any component that renders a calendar to select a date or a range of dates. +It allows the user to navigate through months and to switch to the month and year views when available. + +### Component props + +You can pass props to the calendar header as shown below: + +{{"demo": "CalendarHeaderComponentProps.js", "defaultCodeOpen": false}} + +### Component + +You can pass custom components to replace the header, as shown below: + +{{"demo": "CalendarHeaderComponent.js", "defaultCodeOpen": false}} + +When used with a date range component, +you receive three additional props to let you handle scenarios where multiple months are rendered: + +- `calendars`: The number of calendars rendered +- `month`: The month used for the header being rendered +- `monthIndex`: The index of the month used for the header being rendered + +The demo below shows how to navigate the months two by two: + +{{"demo": "CalendarHeaderComponentRange.js", "defaultCodeOpen": false}} + +## Month button + +### Component props + +You can pass props to the month button as shown below: + +{{"demo": "MonthButtonComponentProps.js"}} + +### Component + +You can pass custom components to replace the month button, as shown below: + +{{"demo": "MonthButtonComponent.js"}} diff --git a/docs/data/pages.ts b/docs/data/pages.ts index ee4684125d361..83ad68a4614fc 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -366,6 +366,7 @@ const pages: MuiPage[] = [ title: 'Custom slots and subcomponents', }, { pathname: '/x/react-date-pickers/custom-layout' }, + { pathname: '/x/react-date-pickers/custom-views' }, { pathname: '/x/react-date-pickers/custom-field' }, { pathname: '/x/react-date-pickers/custom-opening-button' }, { pathname: '/x/react-date-pickers/playground', title: 'Customization playground' }, diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json index 68c507d55288a..5000c124cf1fc 100644 --- a/docs/pages/x/api/date-pickers/date-calendar.json +++ b/docs/pages/x/api/date-pickers/date-calendar.json @@ -199,6 +199,12 @@ "description": "Custom component for day.\nCheck the [PickersDay](https://mui.com/x/api/date-pickers/pickers-day/) component.", "default": "PickersDay", "class": null + }, + { + "name": "monthButton", + "description": "Button displayed to render a single month in the \"month\" view .", + "default": "MonthCalendarButton", + "class": null } ], "classes": [ diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json index ea40f5ecb500c..a3be367e15a85 100644 --- a/docs/pages/x/api/date-pickers/date-picker.json +++ b/docs/pages/x/api/date-pickers/date-picker.json @@ -242,6 +242,12 @@ "default": "PickersDay", "class": null }, + { + "name": "monthButton", + "description": "Button displayed to render a single month in the \"month\" view .", + "default": "MonthCalendarButton", + "class": null + }, { "name": "actionBar", "description": "Custom component for the action bar, it is placed below the picker views.", diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json index 34a2663633231..a6143362b4b45 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -276,6 +276,12 @@ "default": "PickersDay", "class": null }, + { + "name": "monthButton", + "description": "Button displayed to render a single month in the \"month\" view .", + "default": "MonthCalendarButton", + "class": null + }, { "name": "actionBar", "description": "Custom component for the action bar, it is placed below the picker views.", diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json index a444cde654f37..2c67b05fda88f 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -238,6 +238,12 @@ "default": "PickersDay", "class": null }, + { + "name": "monthButton", + "description": "Button displayed to render a single month in the \"month\" view .", + "default": "MonthCalendarButton", + "class": null + }, { "name": "actionBar", "description": "Custom component for the action bar, it is placed below the picker views.", diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json index ab048c18a4229..c816a78026d64 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json @@ -272,6 +272,12 @@ "default": "PickersDay", "class": null }, + { + "name": "monthButton", + "description": "Button displayed to render a single month in the \"month\" view .", + "default": "MonthCalendarButton", + "class": null + }, { "name": "actionBar", "description": "Custom component for the action bar, it is placed below the picker views.", diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.json b/docs/pages/x/api/date-pickers/mobile-date-picker.json index ef656fc6dcee5..fc7f27f31dc9f 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json @@ -238,6 +238,12 @@ "default": "PickersDay", "class": null }, + { + "name": "monthButton", + "description": "Button displayed to render a single month in the \"month\" view .", + "default": "MonthCalendarButton", + "class": null + }, { "name": "actionBar", "description": "Custom component for the action bar, it is placed below the picker views.", diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json index f304519adf060..5cf05d336dcf5 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json @@ -263,6 +263,12 @@ "default": "PickersDay", "class": null }, + { + "name": "monthButton", + "description": "Button displayed to render a single month in the \"month\" view .", + "default": "MonthCalendarButton", + "class": null + }, { "name": "actionBar", "description": "Custom component for the action bar, it is placed below the picker views.", diff --git a/docs/pages/x/api/date-pickers/month-calendar.json b/docs/pages/x/api/date-pickers/month-calendar.json index 2fe02db3fe453..5768efa023d4b 100644 --- a/docs/pages/x/api/date-pickers/month-calendar.json +++ b/docs/pages/x/api/date-pickers/month-calendar.json @@ -29,6 +29,12 @@ "returned": "boolean" } }, + "slotProps": { "type": { "name": "object" }, "default": "{}" }, + "slots": { + "type": { "name": "object" }, + "default": "{}", + "additionalInfo": { "slotsApi": true } + }, "sx": { "type": { "name": "union", @@ -52,6 +58,14 @@ "import { MonthCalendar } from '@mui/x-date-pickers';", "import { MonthCalendar } from '@mui/x-date-pickers-pro';" ], + "slots": [ + { + "name": "monthButton", + "description": "Button displayed to render a single month in the \"month\" view .", + "default": "MonthCalendarButton", + "class": null + } + ], "classes": [ { "key": "root", diff --git a/docs/pages/x/api/date-pickers/pickers-calendar-header.json b/docs/pages/x/api/date-pickers/pickers-calendar-header.json index 498451ad6b8bf..5dfee18c26c07 100644 --- a/docs/pages/x/api/date-pickers/pickers-calendar-header.json +++ b/docs/pages/x/api/date-pickers/pickers-calendar-header.json @@ -86,6 +86,6 @@ "muiName": "MuiPickersCalendarHeader", "filename": "/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/x/api/date-pickers/pickers-range-calendar-header.json b/docs/pages/x/api/date-pickers/pickers-range-calendar-header.json index fbf2f5e605c2a..565ea51a21d49 100644 --- a/docs/pages/x/api/date-pickers/pickers-range-calendar-header.json +++ b/docs/pages/x/api/date-pickers/pickers-range-calendar-header.json @@ -65,6 +65,6 @@ "muiName": "MuiPickersRangeCalendarHeader", "filename": "/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/x/api/date-pickers/static-date-picker.json b/docs/pages/x/api/date-pickers/static-date-picker.json index a392f5a1d6dc3..775fd642a90b5 100644 --- a/docs/pages/x/api/date-pickers/static-date-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-picker.json @@ -218,6 +218,12 @@ "default": "PickersDay", "class": null }, + { + "name": "monthButton", + "description": "Button displayed to render a single month in the \"month\" view .", + "default": "MonthCalendarButton", + "class": null + }, { "name": "actionBar", "description": "Custom component for the action bar, it is placed below the picker views.", diff --git a/docs/pages/x/api/date-pickers/static-date-time-picker.json b/docs/pages/x/api/date-pickers/static-date-time-picker.json index 49ea3c3c11650..ec6b6fcae6aa2 100644 --- a/docs/pages/x/api/date-pickers/static-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-time-picker.json @@ -243,6 +243,12 @@ "default": "PickersDay", "class": null }, + { + "name": "monthButton", + "description": "Button displayed to render a single month in the \"month\" view .", + "default": "MonthCalendarButton", + "class": null + }, { "name": "actionBar", "description": "Custom component for the action bar, it is placed below the picker views.", diff --git a/docs/pages/x/react-date-pickers/custom-views.js b/docs/pages/x/react-date-pickers/custom-views.js new file mode 100644 index 0000000000000..0a5e49023cde5 --- /dev/null +++ b/docs/pages/x/react-date-pickers/custom-views.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/date-pickers/custom-views/custom-views.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json b/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json index 4fb2face3be80..5d8a823b770bb 100644 --- a/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json +++ b/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json @@ -128,6 +128,7 @@ "calendarHeader": "Custom component for calendar header. Check the PickersCalendarHeader component.", "day": "Custom component for day. Check the PickersDay component.", "leftArrowIcon": "Icon displayed in the left view switch button.", + "monthButton": "Button displayed to render a single month in the "month" view .", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", diff --git a/docs/translations/api-docs/date-pickers/date-picker/date-picker.json b/docs/translations/api-docs/date-pickers/date-picker/date-picker.json index 00f34183a45d2..5a004b16aeb36 100644 --- a/docs/translations/api-docs/date-pickers/date-picker/date-picker.json +++ b/docs/translations/api-docs/date-pickers/date-picker/date-picker.json @@ -175,6 +175,7 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", + "monthButton": "Button displayed to render a single month in the "month" view .", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", diff --git a/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json b/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json index fa71ce0a4449e..54be8bfb835cd 100644 --- a/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json @@ -214,6 +214,7 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", + "monthButton": "Button displayed to render a single month in the "month" view .", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", diff --git a/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json index ef1e3c68ff304..9ffccf4b649c0 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json @@ -169,6 +169,7 @@ "inputAdornment": "Component displayed on the start or end input adornment used to open the picker on desktop.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", + "monthButton": "Button displayed to render a single month in the "month" view .", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", diff --git a/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json index b1ad8f362650f..9470bdfd7c410 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json @@ -208,6 +208,7 @@ "inputAdornment": "Component displayed on the start or end input adornment used to open the picker on desktop.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", + "monthButton": "Button displayed to render a single month in the "month" view .", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", diff --git a/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json index 40892fb4d29ed..43715161d8d52 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json @@ -166,6 +166,7 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", + "monthButton": "Button displayed to render a single month in the "month" view .", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", diff --git a/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json index da66472874cf9..b740ce67c9141 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json @@ -194,6 +194,7 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", + "monthButton": "Button displayed to render a single month in the "month" view .", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", 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 index 39c44a3cb07e2..757cb8b685b3c 100644 --- a/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json +++ b/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json @@ -33,6 +33,8 @@ "boolean": "If true, the month will be disabled." } }, + "slotProps": { "description": "The props used for each component slot." }, + "slots": { "description": "Overridable component slots." }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, @@ -42,5 +44,8 @@ }, "value": { "description": "The selected value. Used when the component is controlled." } }, - "classDescriptions": { "root": { "description": "Styles applied to the root element." } } + "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, + "slotDescriptions": { + "monthButton": "Button displayed to render a single month in the "month" view ." + } } diff --git a/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json b/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json index 419ab0e226ccf..fe1c6c83ccb28 100644 --- a/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json @@ -137,6 +137,7 @@ "day": "Custom component for day. Check the PickersDay component.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", + "monthButton": "Button displayed to render a single month in the "month" view .", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", diff --git a/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json b/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json index 412c84399a302..19ada9b85db12 100644 --- a/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json @@ -165,6 +165,7 @@ "day": "Custom component for day. Check the PickersDay component.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", + "monthButton": "Button displayed to render a single month in the "month" view .", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx index e8dad041afc22..08f23b1248edb 100644 --- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx @@ -368,6 +368,8 @@ export const DateCalendar = React.forwardRef(function DateCalendar setFocusedView('month', isViewFocused)} monthsPerRow={monthsPerRow} referenceDate={referenceDate} + slots={slots} + slotProps={slotProps} /> )} diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts b/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts index c909e8e9e1710..ad69b86addd74 100644 --- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts +++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts @@ -20,11 +20,16 @@ import { ExportedUseViewsOptions } from '../internals/hooks/useViews'; import { DateView, PickerValidDate, TimezoneProps } from '../models'; import { DefaultizedProps } from '../internals/models/helpers'; import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types'; -import { ExportedMonthCalendarProps } from '../MonthCalendar/MonthCalendar.types'; +import { + ExportedMonthCalendarProps, + MonthCalendarSlots, + MonthCalendarSlotProps, +} from '../MonthCalendar/MonthCalendar.types'; export interface DateCalendarSlots extends PickersCalendarHeaderSlots, - DayCalendarSlots { + DayCalendarSlots, + MonthCalendarSlots { /** * Custom component for calendar header. * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component. @@ -35,7 +40,8 @@ export interface DateCalendarSlots export interface DateCalendarSlotProps extends PickersCalendarHeaderSlotProps, - DayCalendarSlotProps { + DayCalendarSlotProps, + MonthCalendarSlotProps { calendarHeader?: SlotComponentProps>; } diff --git a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx index de6365bc00afc..ad0a32726743d 100644 --- a/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx +++ b/packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import useEventCallback from '@mui/utils/useEventCallback'; import Typography from '@mui/material/Typography'; -import { useSlotProps, SlotComponentProps } from '@mui/base/utils'; +import { useSlotProps } from '@mui/base/utils'; import { styled, useTheme, useThemeProps } from '@mui/material/styles'; import { unstable_composeClasses as composeClasses, @@ -27,7 +27,7 @@ import { useIsDateDisabled } from './useIsDateDisabled'; import { findClosestEnabledDate, getWeekdays } from '../internals/utils/date-utils'; import { DayCalendarClasses, getDayCalendarUtilityClass } from './dayCalendarClasses'; import { PickerValidDate, TimezoneProps } from '../models'; -import { DefaultizedProps } from '../internals/models/helpers'; +import { DefaultizedProps, SlotComponentPropsFromProps } from '../internals/models/helpers'; export interface DayCalendarSlots { /** @@ -39,8 +39,8 @@ export interface DayCalendarSlots { } export interface DayCalendarSlotProps { - day?: SlotComponentProps< - typeof PickersDay, + day?: SlotComponentPropsFromProps< + PickersDayProps, {}, DayCalendarProps & { day: TDate; selected: boolean } >; diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx index dfe775f65b001..4f18c2c24f9d6 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx @@ -106,6 +106,8 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar {monthText} @@ -374,6 +378,16 @@ MonthCalendar.propTypes = { * @returns {boolean} If `true`, the month will be disabled. */ shouldDisableMonth: PropTypes.func, + /** + * The props used for each component slot. + * @default {} + */ + slotProps: PropTypes.object, + /** + * Overridable component slots. + * @default {} + */ + slots: PropTypes.object, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts index c7a8a148c6f8d..86d7cc602e2b0 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts @@ -1,8 +1,23 @@ +import * as React from 'react'; import { SxProps } from '@mui/system'; import { Theme } from '@mui/material/styles'; +import { SlotComponentProps } from '@mui/base/utils'; import { MonthCalendarClasses } from './monthCalendarClasses'; import { BaseDateValidationProps, MonthValidationProps } from '../internals/models/validation'; import { PickerValidDate, TimezoneProps } from '../models'; +import type { PickersMonthProps } from './PickersMonth'; + +export interface MonthCalendarSlots { + /** + * Button displayed to render a single month in the "month" view . + * @default MonthCalendarButton + */ + monthButton?: React.ElementType, 'button'>; +} + +export interface MonthCalendarSlotProps { + monthButton?: SlotComponentProps<'button', {}, PickersMonthProps>; +} export interface ExportedMonthCalendarProps { /** @@ -22,6 +37,16 @@ export interface MonthCalendarProps * Override or extend the styles applied to the component. */ classes?: Partial; + /** + * Overridable component slots. + * @default {} + */ + slots?: MonthCalendarSlots; + /** + * The props used for each component slot. + * @default {} + */ + slotProps?: MonthCalendarSlotProps; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx b/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx index daae053f66c4d..fea845693e4a0 100644 --- a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { styled, alpha, useThemeProps } from '@mui/material/styles'; +import { useSlotProps } from '@mui/base/utils'; import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect, @@ -9,6 +10,7 @@ import { pickersMonthClasses, PickersMonthClasses, } from './pickersMonthClasses'; +import { MonthCalendarSlotProps, MonthCalendarSlots } from './MonthCalendar.types'; export interface ExportedPickersMonthProps { classes?: Partial; @@ -28,6 +30,8 @@ export interface PickersMonthProps extends ExportedPickersMonthProps { value: number; tabIndex: number; monthsPerRow: 3 | 4; + slots?: MonthCalendarSlots; + slotProps?: MonthCalendarSlotProps; } const useUtilityClasses = (ownerState: PickersMonthProps) => { @@ -55,7 +59,7 @@ const PickersMonthRoot = styled('div', { variants: [{ props: { monthsPerRow: 4 }, style: { flexBasis: '25%' } }], }); -const PickersMonthButton = styled('button', { +export const PickersMonthButton = styled('button', { name: 'MuiPickersMonth', slot: 'MonthButton', overridesResolver: (_, styles) => [ @@ -64,7 +68,7 @@ const PickersMonthButton = styled('button', { { [`&.${pickersMonthClasses.selected}`]: styles.selected }, ], })<{ - ownerState: PickersMonthProps; + ownerState?: PickersMonthProps; }>(({ theme }) => ({ color: 'unset', backgroundColor: 'transparent', @@ -125,6 +129,8 @@ export const PickersMonth = React.memo(function PickersMonth(inProps: PickersMon 'aria-label': ariaLabel, // We don't want to forward this prop to the root element monthsPerRow, + slots, + slotProps, ...other } = props; @@ -137,26 +143,32 @@ export const PickersMonth = React.memo(function PickersMonth(inProps: PickersMon } }, [autoFocus]); + const MonthButton = slots?.monthButton ?? PickersMonthButton; + const monthButtonProps = useSlotProps({ + elementType: MonthButton, + externalSlotProps: slotProps?.monthButton, + additionalProps: { + children, + disabled, + tabIndex, + ref, + type: 'button' as const, + role: 'radio', + 'aria-current': ariaCurrent, + 'aria-checked': selected, + 'aria-label': ariaLabel, + onClick: (event: React.MouseEvent) => onClick(event, value), + onKeyDown: (event: React.KeyboardEvent) => onKeyDown(event, value), + onFocus: (event: React.FocusEvent) => onFocus(event, value), + onBlur: (event: React.FocusEvent) => onBlur(event, value), + }, + ownerState: props, + className: classes.monthButton, + }); + return ( - onClick(event, value)} - onKeyDown={(event) => onKeyDown(event, value)} - onFocus={(event) => onFocus(event, value)} - onBlur={(event) => onBlur(event, value)} - className={classes.monthButton} - ownerState={props} - > - {children} - + ); }); diff --git a/packages/x-date-pickers/src/MonthCalendar/index.ts b/packages/x-date-pickers/src/MonthCalendar/index.ts index 034b808b06aa9..873d7b77b34c6 100644 --- a/packages/x-date-pickers/src/MonthCalendar/index.ts +++ b/packages/x-date-pickers/src/MonthCalendar/index.ts @@ -1,9 +1,14 @@ export { MonthCalendar } from './MonthCalendar'; -export type { MonthCalendarProps } from './MonthCalendar.types'; +export type { + MonthCalendarProps, + MonthCalendarSlots, + MonthCalendarSlotProps, +} from './MonthCalendar.types'; export { monthCalendarClasses, getMonthCalendarUtilityClass } from './monthCalendarClasses'; export type { MonthCalendarClasses, MonthCalendarClassKey } from './monthCalendarClasses'; export { pickersMonthClasses } from './pickersMonthClasses'; export type { PickersMonthClassKey, PickersMonthClasses } from './pickersMonthClasses'; +export { PickersMonthButton } from './PickersMonth'; export type { ExportedPickersMonthProps } from './PickersMonth'; diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 689039bc85958..315080b7a21d7 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -213,6 +213,8 @@ { "name": "MonthCalendarClasses", "kind": "Interface" }, { "name": "MonthCalendarClassKey", "kind": "TypeAlias" }, { "name": "MonthCalendarProps", "kind": "Interface" }, + { "name": "MonthCalendarSlotProps", "kind": "Interface" }, + { "name": "MonthCalendarSlots", "kind": "Interface" }, { "name": "MuiPickersAdapter", "kind": "Interface" }, { "name": "MuiPickersAdapterContext", "kind": "Variable" }, { "name": "MultiInputDateRangeField", "kind": "Variable" }, @@ -289,6 +291,7 @@ { "name": "PickersLayoutSlotProps", "kind": "Interface" }, { "name": "PickersLayoutSlots", "kind": "Interface" }, { "name": "PickersLocaleText", "kind": "Interface" }, + { "name": "PickersMonthButton", "kind": "Variable" }, { "name": "pickersMonthClasses", "kind": "Variable" }, { "name": "PickersMonthClasses", "kind": "Interface" }, { "name": "PickersMonthClassKey", "kind": "TypeAlias" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 63ae47de5f992..b0ffa1ade36e0 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -143,6 +143,8 @@ { "name": "MonthCalendarClasses", "kind": "Interface" }, { "name": "MonthCalendarClassKey", "kind": "TypeAlias" }, { "name": "MonthCalendarProps", "kind": "Interface" }, + { "name": "MonthCalendarSlotProps", "kind": "Interface" }, + { "name": "MonthCalendarSlots", "kind": "Interface" }, { "name": "MuiPickersAdapter", "kind": "Interface" }, { "name": "MuiPickersAdapterContext", "kind": "Variable" }, { "name": "MultiSectionDigitalClock", "kind": "Variable" }, @@ -204,6 +206,7 @@ { "name": "PickersLayoutSlotProps", "kind": "Interface" }, { "name": "PickersLayoutSlots", "kind": "Interface" }, { "name": "PickersLocaleText", "kind": "Interface" }, + { "name": "PickersMonthButton", "kind": "Variable" }, { "name": "pickersMonthClasses", "kind": "Variable" }, { "name": "PickersMonthClasses", "kind": "Interface" }, { "name": "PickersMonthClassKey", "kind": "TypeAlias" }, From e89dcaa5e11daf03da4f656f4388fafa2e2f9eba Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 3 Jun 2024 12:26:33 +0200 Subject: [PATCH 02/10] Work --- .../custom-views/MonthButtonComponentProps.js | 6 +----- .../custom-views/MonthButtonComponentProps.tsx | 6 +----- .../MonthButtonComponentProps.tsx.preview | 6 +----- .../custom-views/YearButtonComponentProps.js | 6 +----- .../custom-views/YearButtonComponentProps.tsx | 6 +----- .../YearButtonComponentProps.tsx.preview | 6 +----- .../data/date-pickers/custom-views/custom-views.md | 14 +++++++++++--- 7 files changed, 17 insertions(+), 33 deletions(-) diff --git a/docs/data/date-pickers/custom-views/MonthButtonComponentProps.js b/docs/data/date-pickers/custom-views/MonthButtonComponentProps.js index 3b445d5d537ed..6bde057e43038 100644 --- a/docs/data/date-pickers/custom-views/MonthButtonComponentProps.js +++ b/docs/data/date-pickers/custom-views/MonthButtonComponentProps.js @@ -11,11 +11,7 @@ export default function MonthButtonComponentProps() { diff --git a/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx b/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx index 79febb7e90677..63b4aed7bee77 100644 --- a/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx +++ b/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx @@ -12,11 +12,7 @@ export default function YearButtonComponentProps() { openTo="year" slotProps={{ yearButton: { - sx: { - borderWidth: '1px', - borderStyle: 'solid', - borderColor: 'primary.main', - }, + sx: { border: '1px red solid' }, }, }} /> diff --git a/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx.preview b/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx.preview index 18ae25cbe861c..1b3b043264313 100644 --- a/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx.preview +++ b/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx.preview @@ -2,11 +2,7 @@ openTo="year" slotProps={{ yearButton: { - sx: { - borderWidth: '1px', - borderStyle: 'solid', - borderColor: 'primary.main', - }, + sx: { border: '1px red solid' }, }, }} /> \ No newline at end of file diff --git a/docs/data/date-pickers/custom-views/custom-views.md b/docs/data/date-pickers/custom-views/custom-views.md index adf42c9116f08..0dbb72bc3cd87 100644 --- a/docs/data/date-pickers/custom-views/custom-views.md +++ b/docs/data/date-pickers/custom-views/custom-views.md @@ -17,13 +17,13 @@ It allows the user to navigate through months and to switch to the month and yea You can pass props to the calendar header as shown below: -{{"demo": "CalendarHeaderComponentProps.js", "defaultCodeOpen": false}} +{{"demo": "CalendarHeaderComponentProps.js"}} ### Component You can pass custom components to replace the header, as shown below: -{{"demo": "CalendarHeaderComponent.js", "defaultCodeOpen": false}} +{{"demo": "CalendarHeaderComponent.js"}} When used with a date range component, you receive three additional props to let you handle scenarios where multiple months are rendered: @@ -34,10 +34,12 @@ you receive three additional props to let you handle scenarios where multiple mo The demo below shows how to navigate the months two by two: -{{"demo": "CalendarHeaderComponentRange.js", "defaultCodeOpen": false}} +{{"demo": "CalendarHeaderComponentRange.js"}} ## Year button +This button allows users to change the selected month in the `year` view. + ### Component props You can pass props to the year button as shown below: @@ -52,6 +54,12 @@ You can pass custom components to replace the year button, as shown below: ## Month button +This button allows users to change the selected month in the `month` view. + +:::success +You can learn more on how to enable the `month` view on the [`DateCalendar` doc page](/x/react-date-pickers/date-calendar/#views). +::: + ### Component props You can pass props to the month button as shown below: From 3f90f4dafd756f15ec570bac7cb97d1acb1b03e1 Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 3 Jun 2024 16:14:42 +0200 Subject: [PATCH 03/10] Code review: Arthur --- docs/pages/x/api/date-pickers/date-calendar.json | 2 +- docs/pages/x/api/date-pickers/date-picker.json | 2 +- docs/pages/x/api/date-pickers/date-time-picker.json | 2 +- docs/pages/x/api/date-pickers/desktop-date-picker.json | 2 +- docs/pages/x/api/date-pickers/desktop-date-time-picker.json | 2 +- docs/pages/x/api/date-pickers/mobile-date-picker.json | 2 +- docs/pages/x/api/date-pickers/mobile-date-time-picker.json | 2 +- docs/pages/x/api/date-pickers/static-date-picker.json | 2 +- docs/pages/x/api/date-pickers/static-date-time-picker.json | 2 +- docs/pages/x/api/date-pickers/year-calendar.json | 2 +- .../api-docs/date-pickers/date-calendar/date-calendar.json | 2 +- .../api-docs/date-pickers/date-picker/date-picker.json | 2 +- .../date-pickers/date-time-picker/date-time-picker.json | 2 +- .../date-pickers/desktop-date-picker/desktop-date-picker.json | 2 +- .../desktop-date-time-picker/desktop-date-time-picker.json | 2 +- .../date-pickers/mobile-date-picker/mobile-date-picker.json | 2 +- .../mobile-date-time-picker/mobile-date-time-picker.json | 2 +- .../date-pickers/static-date-picker/static-date-picker.json | 2 +- .../static-date-time-picker/static-date-time-picker.json | 2 +- .../api-docs/date-pickers/year-calendar/year-calendar.json | 2 +- packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts | 2 +- 21 files changed, 21 insertions(+), 21 deletions(-) diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json index afb18e6704911..aca8ebe593a6f 100644 --- a/docs/pages/x/api/date-pickers/date-calendar.json +++ b/docs/pages/x/api/date-pickers/date-calendar.json @@ -208,7 +208,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single year in the \"year\" view .", "default": "YearCalendarButton", "class": null } diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json index 255ca7a8c2409..1836c1f477ecf 100644 --- a/docs/pages/x/api/date-pickers/date-picker.json +++ b/docs/pages/x/api/date-pickers/date-picker.json @@ -250,7 +250,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single year in the \"year\" view .", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json index fa3a7e8ade42c..eba4d78148c49 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -284,7 +284,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single year in the \"year\" view .", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json index 323f15c70a916..32dad148d3a43 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -246,7 +246,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single year in the \"year\" view .", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json index 85f47c287519a..027188436ea16 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json @@ -280,7 +280,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single year in the \"year\" view .", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.json b/docs/pages/x/api/date-pickers/mobile-date-picker.json index e90e6e7883952..c73068c088377 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json @@ -246,7 +246,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single year in the \"year\" view .", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json index 11c32105bce96..decdc563275e9 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json @@ -271,7 +271,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single year in the \"year\" view .", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/static-date-picker.json b/docs/pages/x/api/date-pickers/static-date-picker.json index 7bce39415d66c..a6cfe8ab1e67f 100644 --- a/docs/pages/x/api/date-pickers/static-date-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-picker.json @@ -226,7 +226,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single year in the \"year\" view .", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/static-date-time-picker.json b/docs/pages/x/api/date-pickers/static-date-time-picker.json index 5ae3f5e5454ce..9fa533379cdca 100644 --- a/docs/pages/x/api/date-pickers/static-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-time-picker.json @@ -251,7 +251,7 @@ }, { "name": "yearButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single year in the \"year\" view .", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/year-calendar.json b/docs/pages/x/api/date-pickers/year-calendar.json index c76f8acdb35cb..95c2726bb9a4d 100644 --- a/docs/pages/x/api/date-pickers/year-calendar.json +++ b/docs/pages/x/api/date-pickers/year-calendar.json @@ -61,7 +61,7 @@ "slots": [ { "name": "yearButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single year in the \"year\" view .", "default": "YearCalendarButton", "class": null } diff --git a/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json b/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json index 71485e816313f..763dc35aa11fc 100644 --- a/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json +++ b/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json @@ -134,6 +134,6 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", - "yearButton": "Button displayed to render a single month in the "month" view ." + "yearButton": "Button displayed to render a single year in the "year" view ." } } diff --git a/docs/translations/api-docs/date-pickers/date-picker/date-picker.json b/docs/translations/api-docs/date-pickers/date-picker/date-picker.json index 1396f6e8df4f8..8862948abad07 100644 --- a/docs/translations/api-docs/date-pickers/date-picker/date-picker.json +++ b/docs/translations/api-docs/date-pickers/date-picker/date-picker.json @@ -187,6 +187,6 @@ "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single month in the "month" view ." + "yearButton": "Button displayed to render a single year in the "year" view ." } } diff --git a/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json b/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json index 1d6f9da589d55..7b14123436020 100644 --- a/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json @@ -227,6 +227,6 @@ "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single month in the "month" view ." + "yearButton": "Button displayed to render a single year in the "year" view ." } } diff --git a/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json index fd300bf07994d..e04c860660fc7 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json @@ -181,6 +181,6 @@ "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single month in the "month" view ." + "yearButton": "Button displayed to render a single year in the "year" view ." } } diff --git a/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json index 14c8219ef03fb..637bfb0b0fbb9 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json @@ -221,6 +221,6 @@ "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single month in the "month" view ." + "yearButton": "Button displayed to render a single year in the "year" view ." } } diff --git a/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json index 82e17a0865cf2..887dbeed2f3d8 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json @@ -175,6 +175,6 @@ "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single month in the "month" view ." + "yearButton": "Button displayed to render a single year in the "year" view ." } } diff --git a/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json index 89e158ffdad15..a481694c55530 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json @@ -204,6 +204,6 @@ "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single month in the "month" view ." + "yearButton": "Button displayed to render a single year in the "year" view ." } } diff --git a/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json b/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json index ea48b565c43ed..d8e16c1b2dc4d 100644 --- a/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json @@ -145,6 +145,6 @@ "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single month in the "month" view ." + "yearButton": "Button displayed to render a single year in the "year" view ." } } diff --git a/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json b/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json index 580d50ec2df8c..a23c9e44ae6ed 100644 --- a/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json @@ -174,6 +174,6 @@ "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "tabs": "Tabs enabling toggling between date and time pickers.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single month in the "month" view ." + "yearButton": "Button displayed to render a single year in the "year" view ." } } diff --git a/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json b/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json index d2a01ca63f1d4..1e3b87af8d410 100644 --- a/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json +++ b/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json @@ -46,6 +46,6 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { - "yearButton": "Button displayed to render a single month in the "month" view ." + "yearButton": "Button displayed to render a single year in the "year" view ." } } diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts index a8179029d0cbb..e4e324cfa0fb7 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts @@ -9,7 +9,7 @@ import { SlotComponentPropsFromProps } from '../internals/models/helpers'; export interface YearCalendarSlots { /** - * Button displayed to render a single month in the "month" view . + * Button displayed to render a single year in the "year" view . * @default YearCalendarButton */ yearButton?: React.ElementType, 'button'>; From 18fc7bf3fd029d2b9e85d74f6109235c979663bd Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Wed, 5 Jun 2024 12:43:45 +0200 Subject: [PATCH 04/10] Update docs/data/date-pickers/custom-views/custom-views.md Co-authored-by: Lukas Signed-off-by: Flavien DELANGLE --- docs/data/date-pickers/custom-views/custom-views.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/date-pickers/custom-views/custom-views.md b/docs/data/date-pickers/custom-views/custom-views.md index 0dbb72bc3cd87..259a6c616b82a 100644 --- a/docs/data/date-pickers/custom-views/custom-views.md +++ b/docs/data/date-pickers/custom-views/custom-views.md @@ -38,7 +38,7 @@ The demo below shows how to navigate the months two by two: ## Year button -This button allows users to change the selected month in the `year` view. +This button allows users to change the selected year in the `year` view. ### Component props From 56c21157b325d4c3e4c8da8189b3b495def2d467 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Wed, 5 Jun 2024 12:43:53 +0200 Subject: [PATCH 05/10] Update docs/data/date-pickers/custom-views/custom-views.md Co-authored-by: Lukas Signed-off-by: Flavien DELANGLE --- docs/data/date-pickers/custom-views/custom-views.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/date-pickers/custom-views/custom-views.md b/docs/data/date-pickers/custom-views/custom-views.md index 259a6c616b82a..585e33dd28ba8 100644 --- a/docs/data/date-pickers/custom-views/custom-views.md +++ b/docs/data/date-pickers/custom-views/custom-views.md @@ -48,7 +48,7 @@ You can pass props to the year button as shown below: ### Component -You can pass custom components to replace the year button, as shown below: +You can pass custom component to replace the year button, as shown below: {{"demo": "YearButtonComponent.js"}} From 18393fcb5ecbc7803f22723faba742155a7e7a2c Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 5 Jun 2024 12:47:12 +0200 Subject: [PATCH 06/10] Code review: Lukas --- docs/data/date-pickers/custom-views/custom-views.md | 6 +++--- docs/pages/x/api/date-pickers/date-calendar.json | 4 ++-- docs/pages/x/api/date-pickers/date-picker.json | 4 ++-- docs/pages/x/api/date-pickers/date-time-picker.json | 4 ++-- docs/pages/x/api/date-pickers/desktop-date-picker.json | 4 ++-- docs/pages/x/api/date-pickers/desktop-date-time-picker.json | 4 ++-- docs/pages/x/api/date-pickers/mobile-date-picker.json | 4 ++-- docs/pages/x/api/date-pickers/mobile-date-time-picker.json | 4 ++-- docs/pages/x/api/date-pickers/month-calendar.json | 2 +- docs/pages/x/api/date-pickers/static-date-picker.json | 4 ++-- docs/pages/x/api/date-pickers/static-date-time-picker.json | 4 ++-- docs/pages/x/api/date-pickers/year-calendar.json | 2 +- .../api-docs/date-pickers/date-calendar/date-calendar.json | 4 ++-- .../api-docs/date-pickers/date-picker/date-picker.json | 4 ++-- .../date-pickers/date-time-picker/date-time-picker.json | 4 ++-- .../desktop-date-picker/desktop-date-picker.json | 4 ++-- .../desktop-date-time-picker/desktop-date-time-picker.json | 4 ++-- .../date-pickers/mobile-date-picker/mobile-date-picker.json | 4 ++-- .../mobile-date-time-picker/mobile-date-time-picker.json | 4 ++-- .../date-pickers/month-calendar/month-calendar.json | 2 +- .../date-pickers/static-date-picker/static-date-picker.json | 4 ++-- .../static-date-time-picker/static-date-time-picker.json | 4 ++-- .../api-docs/date-pickers/year-calendar/year-calendar.json | 2 +- .../x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts | 2 +- .../x-date-pickers/src/YearCalendar/YearCalendar.types.ts | 2 +- 25 files changed, 45 insertions(+), 45 deletions(-) diff --git a/docs/data/date-pickers/custom-views/custom-views.md b/docs/data/date-pickers/custom-views/custom-views.md index 585e33dd28ba8..e3d5f1ec63a23 100644 --- a/docs/data/date-pickers/custom-views/custom-views.md +++ b/docs/data/date-pickers/custom-views/custom-views.md @@ -21,7 +21,7 @@ You can pass props to the calendar header as shown below: ### Component -You can pass custom components to replace the header, as shown below: +You can pass a custom component to replace the header, as shown below: {{"demo": "CalendarHeaderComponent.js"}} @@ -48,7 +48,7 @@ You can pass props to the year button as shown below: ### Component -You can pass custom component to replace the year button, as shown below: +You can pass a custom component to replace the year button, as shown below: {{"demo": "YearButtonComponent.js"}} @@ -68,6 +68,6 @@ You can pass props to the month button as shown below: ### Component -You can pass custom components to replace the month button, as shown below: +You can pass a custom component to replace the month button, as shown below: {{"demo": "MonthButtonComponent.js"}} diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json index aca8ebe593a6f..8ab284d626bb6 100644 --- a/docs/pages/x/api/date-pickers/date-calendar.json +++ b/docs/pages/x/api/date-pickers/date-calendar.json @@ -202,13 +202,13 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single month in the \"month\" view.", "default": "MonthCalendarButton", "class": null }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view .", + "description": "Button displayed to render a single year in the \"year\" view.", "default": "YearCalendarButton", "class": null } diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json index 1836c1f477ecf..bbd44dedcbf91 100644 --- a/docs/pages/x/api/date-pickers/date-picker.json +++ b/docs/pages/x/api/date-pickers/date-picker.json @@ -244,13 +244,13 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single month in the \"month\" view.", "default": "MonthCalendarButton", "class": null }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view .", + "description": "Button displayed to render a single year in the \"year\" view.", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json index eba4d78148c49..ebdba3d64a725 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -278,13 +278,13 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single month in the \"month\" view.", "default": "MonthCalendarButton", "class": null }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view .", + "description": "Button displayed to render a single year in the \"year\" view.", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json index 32dad148d3a43..1459f42692d80 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -240,13 +240,13 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single month in the \"month\" view.", "default": "MonthCalendarButton", "class": null }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view .", + "description": "Button displayed to render a single year in the \"year\" view.", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json index 027188436ea16..200cee80dd060 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json @@ -274,13 +274,13 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single month in the \"month\" view.", "default": "MonthCalendarButton", "class": null }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view .", + "description": "Button displayed to render a single year in the \"year\" view.", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.json b/docs/pages/x/api/date-pickers/mobile-date-picker.json index c73068c088377..673b70b661797 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json @@ -240,13 +240,13 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single month in the \"month\" view.", "default": "MonthCalendarButton", "class": null }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view .", + "description": "Button displayed to render a single year in the \"year\" view.", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json index decdc563275e9..8a8a84ebbdc6e 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json @@ -265,13 +265,13 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single month in the \"month\" view.", "default": "MonthCalendarButton", "class": null }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view .", + "description": "Button displayed to render a single year in the \"year\" view.", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/month-calendar.json b/docs/pages/x/api/date-pickers/month-calendar.json index 5768efa023d4b..7eb92a9090730 100644 --- a/docs/pages/x/api/date-pickers/month-calendar.json +++ b/docs/pages/x/api/date-pickers/month-calendar.json @@ -61,7 +61,7 @@ "slots": [ { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single month in the \"month\" view.", "default": "MonthCalendarButton", "class": null } diff --git a/docs/pages/x/api/date-pickers/static-date-picker.json b/docs/pages/x/api/date-pickers/static-date-picker.json index a6cfe8ab1e67f..9a728d57cd24d 100644 --- a/docs/pages/x/api/date-pickers/static-date-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-picker.json @@ -220,13 +220,13 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single month in the \"month\" view.", "default": "MonthCalendarButton", "class": null }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view .", + "description": "Button displayed to render a single year in the \"year\" view.", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/static-date-time-picker.json b/docs/pages/x/api/date-pickers/static-date-time-picker.json index 9fa533379cdca..9197e0b9dbc5d 100644 --- a/docs/pages/x/api/date-pickers/static-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-time-picker.json @@ -245,13 +245,13 @@ }, { "name": "monthButton", - "description": "Button displayed to render a single month in the \"month\" view .", + "description": "Button displayed to render a single month in the \"month\" view.", "default": "MonthCalendarButton", "class": null }, { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view .", + "description": "Button displayed to render a single year in the \"year\" view.", "default": "YearCalendarButton", "class": null }, diff --git a/docs/pages/x/api/date-pickers/year-calendar.json b/docs/pages/x/api/date-pickers/year-calendar.json index 95c2726bb9a4d..2c5c6a9d284f2 100644 --- a/docs/pages/x/api/date-pickers/year-calendar.json +++ b/docs/pages/x/api/date-pickers/year-calendar.json @@ -61,7 +61,7 @@ "slots": [ { "name": "yearButton", - "description": "Button displayed to render a single year in the \"year\" view .", + "description": "Button displayed to render a single year in the \"year\" view.", "default": "YearCalendarButton", "class": null } diff --git a/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json b/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json index 763dc35aa11fc..451764c0821e4 100644 --- a/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json +++ b/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json @@ -128,12 +128,12 @@ "calendarHeader": "Custom component for calendar header. Check the PickersCalendarHeader component.", "day": "Custom component for day. Check the PickersDay component.", "leftArrowIcon": "Icon displayed in the left view switch button.", - "monthButton": "Button displayed to render a single month in the "month" view .", + "monthButton": "Button displayed to render a single month in the "month" view.", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", - "yearButton": "Button displayed to render a single year in the "year" view ." + "yearButton": "Button displayed to render a single year in the "year" view." } } diff --git a/docs/translations/api-docs/date-pickers/date-picker/date-picker.json b/docs/translations/api-docs/date-pickers/date-picker/date-picker.json index 8862948abad07..f832f775273ef 100644 --- a/docs/translations/api-docs/date-pickers/date-picker/date-picker.json +++ b/docs/translations/api-docs/date-pickers/date-picker/date-picker.json @@ -175,7 +175,7 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", - "monthButton": "Button displayed to render a single month in the "month" view .", + "monthButton": "Button displayed to render a single month in the "month" view.", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", @@ -187,6 +187,6 @@ "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view ." + "yearButton": "Button displayed to render a single year in the "year" view." } } diff --git a/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json b/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json index 7b14123436020..66acc64fecfe1 100644 --- a/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json @@ -214,7 +214,7 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", - "monthButton": "Button displayed to render a single month in the "month" view .", + "monthButton": "Button displayed to render a single month in the "month" view.", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", @@ -227,6 +227,6 @@ "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view ." + "yearButton": "Button displayed to render a single year in the "year" view." } } diff --git a/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json index e04c860660fc7..8c55765318a65 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json @@ -169,7 +169,7 @@ "inputAdornment": "Component displayed on the start or end input adornment used to open the picker on desktop.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", - "monthButton": "Button displayed to render a single month in the "month" view .", + "monthButton": "Button displayed to render a single month in the "month" view.", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", @@ -181,6 +181,6 @@ "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view ." + "yearButton": "Button displayed to render a single year in the "year" view." } } diff --git a/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json index 637bfb0b0fbb9..eb2c17b517733 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json @@ -208,7 +208,7 @@ "inputAdornment": "Component displayed on the start or end input adornment used to open the picker on desktop.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", - "monthButton": "Button displayed to render a single month in the "month" view .", + "monthButton": "Button displayed to render a single month in the "month" view.", "nextIconButton": "Button allowing to switch to the right view.", "openPickerButton": "Button to open the picker on desktop.", "openPickerIcon": "Icon displayed in the open picker button on desktop.", @@ -221,6 +221,6 @@ "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view ." + "yearButton": "Button displayed to render a single year in the "year" view." } } diff --git a/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json index 887dbeed2f3d8..00b0688b3fd92 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json @@ -166,7 +166,7 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", - "monthButton": "Button displayed to render a single month in the "month" view .", + "monthButton": "Button displayed to render a single month in the "month" view.", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", @@ -175,6 +175,6 @@ "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view ." + "yearButton": "Button displayed to render a single year in the "year" view." } } diff --git a/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json index a481694c55530..20bdd6aa0bd49 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json @@ -194,7 +194,7 @@ "leftArrowIcon": "Icon displayed in the left view switch button.", "mobilePaper": "Custom component for the paper rendered inside the mobile picker's Dialog.", "mobileTransition": "Custom component for the mobile dialog Transition.", - "monthButton": "Button displayed to render a single month in the "month" view .", + "monthButton": "Button displayed to render a single month in the "month" view.", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", @@ -204,6 +204,6 @@ "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view ." + "yearButton": "Button displayed to render a single year in the "year" view." } } 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 index 757cb8b685b3c..b0ea9f642158d 100644 --- a/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json +++ b/docs/translations/api-docs/date-pickers/month-calendar/month-calendar.json @@ -46,6 +46,6 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { - "monthButton": "Button displayed to render a single month in the "month" view ." + "monthButton": "Button displayed to render a single month in the "month" view." } } diff --git a/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json b/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json index d8e16c1b2dc4d..843e991309730 100644 --- a/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json @@ -137,7 +137,7 @@ "day": "Custom component for day. Check the PickersDay component.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", - "monthButton": "Button displayed to render a single month in the "month" view .", + "monthButton": "Button displayed to render a single month in the "month" view.", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", @@ -145,6 +145,6 @@ "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view ." + "yearButton": "Button displayed to render a single year in the "year" view." } } diff --git a/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json b/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json index a23c9e44ae6ed..dd9a2e35b8f4b 100644 --- a/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json @@ -165,7 +165,7 @@ "day": "Custom component for day. Check the PickersDay component.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", - "monthButton": "Button displayed to render a single month in the "month" view .", + "monthButton": "Button displayed to render a single month in the "month" view.", "nextIconButton": "Button allowing to switch to the right view.", "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", @@ -174,6 +174,6 @@ "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "tabs": "Tabs enabling toggling between date and time pickers.", "toolbar": "Custom component for the toolbar rendered above the views.", - "yearButton": "Button displayed to render a single year in the "year" view ." + "yearButton": "Button displayed to render a single year in the "year" view." } } diff --git a/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json b/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json index 1e3b87af8d410..3953639dab18e 100644 --- a/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json +++ b/docs/translations/api-docs/date-pickers/year-calendar/year-calendar.json @@ -46,6 +46,6 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { - "yearButton": "Button displayed to render a single year in the "year" view ." + "yearButton": "Button displayed to render a single year in the "year" view." } } diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts index 555c73b16df7d..eb2112e9a17e0 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts @@ -9,7 +9,7 @@ import { SlotComponentPropsFromProps } from '../internals/models/helpers'; export interface MonthCalendarSlots { /** - * Button displayed to render a single month in the "month" view . + * Button displayed to render a single month in the "month" view. * @default MonthCalendarButton */ monthButton?: React.ElementType, 'button'>; diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts index e4e324cfa0fb7..6801306cf871e 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts @@ -9,7 +9,7 @@ import { SlotComponentPropsFromProps } from '../internals/models/helpers'; export interface YearCalendarSlots { /** - * Button displayed to render a single year in the "year" view . + * Button displayed to render a single year in the "year" view. * @default YearCalendarButton */ yearButton?: React.ElementType, 'button'>; From 52e6955d22891c83a7227713286b1979b6eb7cf8 Mon Sep 17 00:00:00 2001 From: delangle Date: Thu, 6 Jun 2024 10:46:29 +0200 Subject: [PATCH 07/10] Review: Lukas --- .../custom-views/MonthButtonComponentProps.js | 8 +++++++- .../custom-views/MonthButtonComponentProps.tsx | 8 +++++++- .../custom-views/MonthButtonComponentProps.tsx.preview | 8 +++++++- .../date-pickers/custom-views/YearButtonComponentProps.js | 8 +++++++- .../custom-views/YearButtonComponentProps.tsx | 8 +++++++- .../custom-views/YearButtonComponentProps.tsx.preview | 8 +++++++- docs/pages/x/api/date-pickers/date-calendar.json | 2 +- docs/pages/x/api/date-pickers/date-picker.json | 2 +- docs/pages/x/api/date-pickers/date-range-calendar.json | 2 +- docs/pages/x/api/date-pickers/date-range-picker.json | 2 +- docs/pages/x/api/date-pickers/date-time-picker.json | 2 +- docs/pages/x/api/date-pickers/date-time-range-picker.json | 2 +- docs/pages/x/api/date-pickers/desktop-date-picker.json | 2 +- .../x/api/date-pickers/desktop-date-range-picker.json | 2 +- .../x/api/date-pickers/desktop-date-time-picker.json | 2 +- .../api/date-pickers/desktop-date-time-range-picker.json | 2 +- docs/pages/x/api/date-pickers/mobile-date-picker.json | 2 +- .../x/api/date-pickers/mobile-date-range-picker.json | 2 +- .../pages/x/api/date-pickers/mobile-date-time-picker.json | 2 +- .../x/api/date-pickers/mobile-date-time-range-picker.json | 2 +- .../pages/x/api/date-pickers/pickers-calendar-header.json | 2 +- docs/pages/x/api/date-pickers/static-date-picker.json | 2 +- .../x/api/date-pickers/static-date-range-picker.json | 2 +- .../pages/x/api/date-pickers/static-date-time-picker.json | 2 +- .../date-pickers/date-calendar/date-calendar.json | 2 +- .../api-docs/date-pickers/date-picker/date-picker.json | 2 +- .../date-range-calendar/date-range-calendar.json | 2 +- .../date-pickers/date-range-picker/date-range-picker.json | 2 +- .../date-pickers/date-time-picker/date-time-picker.json | 2 +- .../date-time-range-picker/date-time-range-picker.json | 2 +- .../desktop-date-picker/desktop-date-picker.json | 2 +- .../desktop-date-range-picker.json | 2 +- .../desktop-date-time-picker.json | 2 +- .../desktop-date-time-range-picker.json | 2 +- .../mobile-date-picker/mobile-date-picker.json | 2 +- .../mobile-date-range-picker.json | 2 +- .../mobile-date-time-picker/mobile-date-time-picker.json | 2 +- .../mobile-date-time-range-picker.json | 2 +- .../pickers-calendar-header/pickers-calendar-header.json | 2 +- .../static-date-picker/static-date-picker.json | 2 +- .../static-date-range-picker.json | 2 +- .../static-date-time-picker/static-date-time-picker.json | 2 +- .../PickersCalendarHeader/PickersCalendarHeader.types.ts | 2 +- 43 files changed, 79 insertions(+), 43 deletions(-) diff --git a/docs/data/date-pickers/custom-views/MonthButtonComponentProps.js b/docs/data/date-pickers/custom-views/MonthButtonComponentProps.js index 6bde057e43038..e174549ad8bdb 100644 --- a/docs/data/date-pickers/custom-views/MonthButtonComponentProps.js +++ b/docs/data/date-pickers/custom-views/MonthButtonComponentProps.js @@ -11,7 +11,13 @@ export default function MonthButtonComponentProps() { diff --git a/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx b/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx index 63b4aed7bee77..0a242c6411872 100644 --- a/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx +++ b/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx @@ -12,7 +12,13 @@ export default function YearButtonComponentProps() { openTo="year" slotProps={{ yearButton: { - sx: { border: '1px red solid' }, + sx: { + color: '#1565c0', + borderRadius: '2px', + borderColor: '#2196f3', + border: '1px solid', + backgroundColor: '#90caf9', + }, }, }} /> diff --git a/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx.preview b/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx.preview index 1b3b043264313..559e3b0b008e0 100644 --- a/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx.preview +++ b/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx.preview @@ -2,7 +2,13 @@ openTo="year" slotProps={{ yearButton: { - sx: { border: '1px red solid' }, + sx: { + color: '#1565c0', + borderRadius: '2px', + borderColor: '#2196f3', + border: '1px solid', + backgroundColor: '#90caf9', + }, }, }} /> \ No newline at end of file diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json index 8ab284d626bb6..499c9162c289e 100644 --- a/docs/pages/x/api/date-pickers/date-calendar.json +++ b/docs/pages/x/api/date-pickers/date-calendar.json @@ -166,7 +166,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json index bbd44dedcbf91..bcfd00412af6e 100644 --- a/docs/pages/x/api/date-pickers/date-picker.json +++ b/docs/pages/x/api/date-pickers/date-picker.json @@ -208,7 +208,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/date-range-calendar.json b/docs/pages/x/api/date-pickers/date-range-calendar.json index 70821cf053e2a..d1b1d222aae73 100644 --- a/docs/pages/x/api/date-pickers/date-range-calendar.json +++ b/docs/pages/x/api/date-pickers/date-range-calendar.json @@ -173,7 +173,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null } diff --git a/docs/pages/x/api/date-pickers/date-range-picker.json b/docs/pages/x/api/date-pickers/date-range-picker.json index 9f44960cf2794..025571c76e56a 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-range-picker.json @@ -204,7 +204,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json index ebdba3d64a725..21dd5ccca51b5 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -242,7 +242,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker.json b/docs/pages/x/api/date-pickers/date-time-range-picker.json index c6c14a88228ad..727e404614e0e 100644 --- a/docs/pages/x/api/date-pickers/date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-range-picker.json @@ -261,7 +261,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json index 1459f42692d80..e596175c9ec02 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -204,7 +204,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json index de5d83a3570f2..ed5c7c6addee8 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json @@ -200,7 +200,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json index 200cee80dd060..e29f85b22ede8 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json @@ -238,7 +238,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json index c163702ae0b5b..8022414ca2a87 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json @@ -257,7 +257,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.json b/docs/pages/x/api/date-pickers/mobile-date-picker.json index 673b70b661797..dda2b5f7a06a5 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json @@ -204,7 +204,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json index 8bdc9753d9b96..b325ddcf307e0 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json @@ -196,7 +196,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json index 8a8a84ebbdc6e..77d8cbe0ff4e5 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json @@ -229,7 +229,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json index ac9fd6985343f..2daa3399a014b 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json @@ -253,7 +253,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/pickers-calendar-header.json b/docs/pages/x/api/date-pickers/pickers-calendar-header.json index 5dfee18c26c07..60cd93c629c89 100644 --- a/docs/pages/x/api/date-pickers/pickers-calendar-header.json +++ b/docs/pages/x/api/date-pickers/pickers-calendar-header.json @@ -34,7 +34,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": "MuiPickersCalendarHeader-switchViewIcon" }, diff --git a/docs/pages/x/api/date-pickers/static-date-picker.json b/docs/pages/x/api/date-pickers/static-date-picker.json index 9a728d57cd24d..68b8dd519d9d9 100644 --- a/docs/pages/x/api/date-pickers/static-date-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-picker.json @@ -184,7 +184,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/static-date-range-picker.json b/docs/pages/x/api/date-pickers/static-date-range-picker.json index 25ac2072a6710..cf58edc3774ee 100644 --- a/docs/pages/x/api/date-pickers/static-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-range-picker.json @@ -180,7 +180,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/pages/x/api/date-pickers/static-date-time-picker.json b/docs/pages/x/api/date-pickers/static-date-time-picker.json index 9197e0b9dbc5d..0065d1c765853 100644 --- a/docs/pages/x/api/date-pickers/static-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-time-picker.json @@ -209,7 +209,7 @@ }, { "name": "switchViewIcon", - "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is \"year\".", "default": "ArrowDropDown", "class": null }, diff --git a/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json b/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json index 451764c0821e4..19c6404b210b6 100644 --- a/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json +++ b/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json @@ -133,7 +133,7 @@ "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "yearButton": "Button displayed to render a single year in the "year" view." } } diff --git a/docs/translations/api-docs/date-pickers/date-picker/date-picker.json b/docs/translations/api-docs/date-pickers/date-picker/date-picker.json index f832f775273ef..d7d0bc2a81be4 100644 --- a/docs/translations/api-docs/date-pickers/date-picker/date-picker.json +++ b/docs/translations/api-docs/date-pickers/date-picker/date-picker.json @@ -184,7 +184,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", "yearButton": "Button displayed to render a single year in the "year" view." diff --git a/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json b/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json index f8ea0bbeb6f74..1e1cf9c7c2bf3 100644 --- a/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json +++ b/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json @@ -135,6 +135,6 @@ "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'." + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year"." } } diff --git a/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json b/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json index 000a3f38538e3..487f016100897 100644 --- a/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json @@ -173,7 +173,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." } diff --git a/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json b/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json index 66acc64fecfe1..cd9ff892320f6 100644 --- a/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json @@ -223,7 +223,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", diff --git a/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json b/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json index 84e6d78c3ecab..b343a9a908235 100644 --- a/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json +++ b/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json @@ -220,7 +220,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." diff --git a/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json index 8c55765318a65..b7a8202fe828a 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json @@ -178,7 +178,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", "yearButton": "Button displayed to render a single year in the "year" view." diff --git a/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json index 7bae500420829..f84ba97e26a9b 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json @@ -167,7 +167,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." } diff --git a/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json index eb2c17b517733..e780c1306adf3 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json @@ -217,7 +217,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", diff --git a/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json index e6af4b354161a..b974a4f13026a 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json @@ -214,7 +214,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." diff --git a/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json index 00b0688b3fd92..3c66bba3cead8 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json @@ -172,7 +172,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", "yearButton": "Button displayed to render a single year in the "year" view." diff --git a/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json index a739219eaec11..238d3a5996e7c 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json @@ -163,7 +163,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." } diff --git a/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json index 20bdd6aa0bd49..ae408ea1af356 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json @@ -200,7 +200,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views.", diff --git a/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json index 58b39282f42ee..90665962517af 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json @@ -210,7 +210,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "tabs": "Tabs enabling toggling between date and time pickers.", "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." diff --git a/docs/translations/api-docs/date-pickers/pickers-calendar-header/pickers-calendar-header.json b/docs/translations/api-docs/date-pickers/pickers-calendar-header/pickers-calendar-header.json index c1d82a39da835..6095d04c8b30a 100644 --- a/docs/translations/api-docs/date-pickers/pickers-calendar-header/pickers-calendar-header.json +++ b/docs/translations/api-docs/date-pickers/pickers-calendar-header/pickers-calendar-header.json @@ -23,6 +23,6 @@ "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'." + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year"." } } diff --git a/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json b/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json index 843e991309730..6642fc5ae6eda 100644 --- a/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json @@ -143,7 +143,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "toolbar": "Custom component for the toolbar rendered above the views.", "yearButton": "Button displayed to render a single year in the "year" view." } diff --git a/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json b/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json index 3789c66ef9023..93baad91dff8c 100644 --- a/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json @@ -129,7 +129,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json b/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json index dd9a2e35b8f4b..4da520fb69b3d 100644 --- a/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json @@ -171,7 +171,7 @@ "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", - "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".", "tabs": "Tabs enabling toggling between date and time pickers.", "toolbar": "Custom component for the toolbar rendered above the views.", "yearButton": "Button displayed to render a single year in the "year" view." diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts index c2270d128f8e8..06cbb152849a8 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts @@ -20,7 +20,7 @@ export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots { */ switchViewButton?: React.ElementType; /** - * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'. + * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year". * @default ArrowDropDown */ switchViewIcon?: React.ElementType; From 228d307a23ecdb91251dd1aabe4925581031e9a6 Mon Sep 17 00:00:00 2001 From: delangle Date: Thu, 6 Jun 2024 10:49:36 +0200 Subject: [PATCH 08/10] Review: Lukas --- docs/data/date-pickers/custom-views/custom-views.md | 2 +- docs/pages/x/api/date-pickers/month-calendar.json | 2 +- docs/pages/x/api/date-pickers/year-calendar.json | 2 +- packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx | 4 ++-- packages/x-date-pickers/src/MonthCalendar/index.ts | 1 - scripts/x-date-pickers-pro.exports.json | 1 - scripts/x-date-pickers.exports.json | 1 - 7 files changed, 5 insertions(+), 8 deletions(-) diff --git a/docs/data/date-pickers/custom-views/custom-views.md b/docs/data/date-pickers/custom-views/custom-views.md index e3d5f1ec63a23..8bdbf689f645b 100644 --- a/docs/data/date-pickers/custom-views/custom-views.md +++ b/docs/data/date-pickers/custom-views/custom-views.md @@ -1,7 +1,7 @@ --- productId: x-date-pickers title: Date and Time Pickers - Custom views -components: PickersCalendarHeader, PickersRangeCalendarHeader, PickersMonth, PickersYear +components: PickersCalendarHeader, PickersRangeCalendarHeader, MonthCalendar, YearCalendar --- # Custom views diff --git a/docs/pages/x/api/date-pickers/month-calendar.json b/docs/pages/x/api/date-pickers/month-calendar.json index 7eb92a9090730..56cd7765c200c 100644 --- a/docs/pages/x/api/date-pickers/month-calendar.json +++ b/docs/pages/x/api/date-pickers/month-calendar.json @@ -80,6 +80,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/x/api/date-pickers/year-calendar.json b/docs/pages/x/api/date-pickers/year-calendar.json index 2c5c6a9d284f2..6faa7c28c3f1a 100644 --- a/docs/pages/x/api/date-pickers/year-calendar.json +++ b/docs/pages/x/api/date-pickers/year-calendar.json @@ -80,6 +80,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx b/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx index 0adf0501a44ae..33e457bcb1a65 100644 --- a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx @@ -59,7 +59,7 @@ const PickersMonthRoot = styled('div', { variants: [{ props: { monthsPerRow: 4 }, style: { flexBasis: '25%' } }], }); -export const PickersMonthButton = styled('button', { +const MonthCalendarButton = styled('button', { name: 'MuiPickersMonth', slot: 'MonthButton', overridesResolver: (_, styles) => [ @@ -146,7 +146,7 @@ export const PickersMonth = React.memo(function PickersMonth(inProps: PickersMon } }, [autoFocus]); - const MonthButton = slots?.monthButton ?? PickersMonthButton; + const MonthButton = slots?.monthButton ?? MonthCalendarButton; const monthButtonProps = useSlotProps({ elementType: MonthButton, externalSlotProps: slotProps?.monthButton, diff --git a/packages/x-date-pickers/src/MonthCalendar/index.ts b/packages/x-date-pickers/src/MonthCalendar/index.ts index 873d7b77b34c6..c7f6f59c9b89a 100644 --- a/packages/x-date-pickers/src/MonthCalendar/index.ts +++ b/packages/x-date-pickers/src/MonthCalendar/index.ts @@ -10,5 +10,4 @@ export type { MonthCalendarClasses, MonthCalendarClassKey } from './monthCalenda export { pickersMonthClasses } from './pickersMonthClasses'; export type { PickersMonthClassKey, PickersMonthClasses } from './pickersMonthClasses'; -export { PickersMonthButton } from './PickersMonth'; export type { ExportedPickersMonthProps } from './PickersMonth'; diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index d2aede9f168d4..f03ebd478258b 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -291,7 +291,6 @@ { "name": "PickersLayoutSlotProps", "kind": "Interface" }, { "name": "PickersLayoutSlots", "kind": "Interface" }, { "name": "PickersLocaleText", "kind": "Interface" }, - { "name": "PickersMonthButton", "kind": "Variable" }, { "name": "pickersMonthClasses", "kind": "Variable" }, { "name": "PickersMonthClasses", "kind": "Interface" }, { "name": "PickersMonthClassKey", "kind": "TypeAlias" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 1f8ed787f9d39..55723d721b498 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -206,7 +206,6 @@ { "name": "PickersLayoutSlotProps", "kind": "Interface" }, { "name": "PickersLayoutSlots", "kind": "Interface" }, { "name": "PickersLocaleText", "kind": "Interface" }, - { "name": "PickersMonthButton", "kind": "Variable" }, { "name": "pickersMonthClasses", "kind": "Variable" }, { "name": "PickersMonthClasses", "kind": "Interface" }, { "name": "PickersMonthClassKey", "kind": "TypeAlias" }, From 9169a789f2f3cd1121b5665e394387a2be6799e4 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 11 Jun 2024 08:43:06 +0200 Subject: [PATCH 09/10] Move demos to main slots page --- .../CalendarHeaderComponent.js | 0 .../CalendarHeaderComponent.tsx | 0 .../CalendarHeaderComponent.tsx.preview | 0 .../CalendarHeaderComponentProps.js | 0 .../CalendarHeaderComponentProps.tsx | 0 .../CalendarHeaderComponentProps.tsx.preview | 0 .../CalendarHeaderComponentRange.js | 0 .../CalendarHeaderComponentRange.tsx | 0 .../CalendarHeaderComponentRange.tsx.preview | 0 .../MonthButtonComponent.js | 0 .../MonthButtonComponent.tsx | 0 .../MonthButtonComponent.tsx.preview | 0 .../MonthButtonComponentProps.js | 0 .../MonthButtonComponentProps.tsx | 0 .../MonthButtonComponentProps.tsx.preview | 0 .../YearButtonComponent.js | 0 .../YearButtonComponent.tsx | 0 .../YearButtonComponent.tsx.preview | 0 .../YearButtonComponentProps.js | 0 .../YearButtonComponentProps.tsx | 0 .../YearButtonComponentProps.tsx.preview | 0 .../custom-components/custom-components.md | 66 ++++++++++++++++- .../date-pickers/custom-views/custom-views.md | 73 ------------------- docs/data/pages.ts | 1 - .../x/api/date-pickers/date-calendar.json | 2 +- .../x/api/date-pickers/month-calendar.json | 2 +- .../date-pickers/pickers-calendar-header.json | 2 +- .../pickers-range-calendar-header.json | 2 +- .../x/api/date-pickers/year-calendar.json | 2 +- .../x/react-date-pickers/custom-views.js | 7 -- 30 files changed, 70 insertions(+), 87 deletions(-) rename docs/data/date-pickers/{custom-views => custom-components}/CalendarHeaderComponent.js (100%) rename docs/data/date-pickers/{custom-views => custom-components}/CalendarHeaderComponent.tsx (100%) rename docs/data/date-pickers/{custom-views => custom-components}/CalendarHeaderComponent.tsx.preview (100%) rename docs/data/date-pickers/{custom-views => custom-components}/CalendarHeaderComponentProps.js (100%) rename docs/data/date-pickers/{custom-views => custom-components}/CalendarHeaderComponentProps.tsx (100%) rename docs/data/date-pickers/{custom-views => custom-components}/CalendarHeaderComponentProps.tsx.preview (100%) rename docs/data/date-pickers/{custom-views => custom-components}/CalendarHeaderComponentRange.js (100%) rename docs/data/date-pickers/{custom-views => custom-components}/CalendarHeaderComponentRange.tsx (100%) rename docs/data/date-pickers/{custom-views => custom-components}/CalendarHeaderComponentRange.tsx.preview (100%) rename docs/data/date-pickers/{custom-views => custom-components}/MonthButtonComponent.js (100%) rename docs/data/date-pickers/{custom-views => custom-components}/MonthButtonComponent.tsx (100%) rename docs/data/date-pickers/{custom-views => custom-components}/MonthButtonComponent.tsx.preview (100%) rename docs/data/date-pickers/{custom-views => custom-components}/MonthButtonComponentProps.js (100%) rename docs/data/date-pickers/{custom-views => custom-components}/MonthButtonComponentProps.tsx (100%) rename docs/data/date-pickers/{custom-views => custom-components}/MonthButtonComponentProps.tsx.preview (100%) rename docs/data/date-pickers/{custom-views => custom-components}/YearButtonComponent.js (100%) rename docs/data/date-pickers/{custom-views => custom-components}/YearButtonComponent.tsx (100%) rename docs/data/date-pickers/{custom-views => custom-components}/YearButtonComponent.tsx.preview (100%) rename docs/data/date-pickers/{custom-views => custom-components}/YearButtonComponentProps.js (100%) rename docs/data/date-pickers/{custom-views => custom-components}/YearButtonComponentProps.tsx (100%) rename docs/data/date-pickers/{custom-views => custom-components}/YearButtonComponentProps.tsx.preview (100%) delete mode 100644 docs/data/date-pickers/custom-views/custom-views.md delete mode 100644 docs/pages/x/react-date-pickers/custom-views.js diff --git a/docs/data/date-pickers/custom-views/CalendarHeaderComponent.js b/docs/data/date-pickers/custom-components/CalendarHeaderComponent.js similarity index 100% rename from docs/data/date-pickers/custom-views/CalendarHeaderComponent.js rename to docs/data/date-pickers/custom-components/CalendarHeaderComponent.js diff --git a/docs/data/date-pickers/custom-views/CalendarHeaderComponent.tsx b/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx similarity index 100% rename from docs/data/date-pickers/custom-views/CalendarHeaderComponent.tsx rename to docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx diff --git a/docs/data/date-pickers/custom-views/CalendarHeaderComponent.tsx.preview b/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx.preview similarity index 100% rename from docs/data/date-pickers/custom-views/CalendarHeaderComponent.tsx.preview rename to docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx.preview diff --git a/docs/data/date-pickers/custom-views/CalendarHeaderComponentProps.js b/docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.js similarity index 100% rename from docs/data/date-pickers/custom-views/CalendarHeaderComponentProps.js rename to docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.js diff --git a/docs/data/date-pickers/custom-views/CalendarHeaderComponentProps.tsx b/docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.tsx similarity index 100% rename from docs/data/date-pickers/custom-views/CalendarHeaderComponentProps.tsx rename to docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.tsx diff --git a/docs/data/date-pickers/custom-views/CalendarHeaderComponentProps.tsx.preview b/docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.tsx.preview similarity index 100% rename from docs/data/date-pickers/custom-views/CalendarHeaderComponentProps.tsx.preview rename to docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.tsx.preview diff --git a/docs/data/date-pickers/custom-views/CalendarHeaderComponentRange.js b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js similarity index 100% rename from docs/data/date-pickers/custom-views/CalendarHeaderComponentRange.js rename to docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js diff --git a/docs/data/date-pickers/custom-views/CalendarHeaderComponentRange.tsx b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx similarity index 100% rename from docs/data/date-pickers/custom-views/CalendarHeaderComponentRange.tsx rename to docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx diff --git a/docs/data/date-pickers/custom-views/CalendarHeaderComponentRange.tsx.preview b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx.preview similarity index 100% rename from docs/data/date-pickers/custom-views/CalendarHeaderComponentRange.tsx.preview rename to docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx.preview diff --git a/docs/data/date-pickers/custom-views/MonthButtonComponent.js b/docs/data/date-pickers/custom-components/MonthButtonComponent.js similarity index 100% rename from docs/data/date-pickers/custom-views/MonthButtonComponent.js rename to docs/data/date-pickers/custom-components/MonthButtonComponent.js diff --git a/docs/data/date-pickers/custom-views/MonthButtonComponent.tsx b/docs/data/date-pickers/custom-components/MonthButtonComponent.tsx similarity index 100% rename from docs/data/date-pickers/custom-views/MonthButtonComponent.tsx rename to docs/data/date-pickers/custom-components/MonthButtonComponent.tsx diff --git a/docs/data/date-pickers/custom-views/MonthButtonComponent.tsx.preview b/docs/data/date-pickers/custom-components/MonthButtonComponent.tsx.preview similarity index 100% rename from docs/data/date-pickers/custom-views/MonthButtonComponent.tsx.preview rename to docs/data/date-pickers/custom-components/MonthButtonComponent.tsx.preview diff --git a/docs/data/date-pickers/custom-views/MonthButtonComponentProps.js b/docs/data/date-pickers/custom-components/MonthButtonComponentProps.js similarity index 100% rename from docs/data/date-pickers/custom-views/MonthButtonComponentProps.js rename to docs/data/date-pickers/custom-components/MonthButtonComponentProps.js diff --git a/docs/data/date-pickers/custom-views/MonthButtonComponentProps.tsx b/docs/data/date-pickers/custom-components/MonthButtonComponentProps.tsx similarity index 100% rename from docs/data/date-pickers/custom-views/MonthButtonComponentProps.tsx rename to docs/data/date-pickers/custom-components/MonthButtonComponentProps.tsx diff --git a/docs/data/date-pickers/custom-views/MonthButtonComponentProps.tsx.preview b/docs/data/date-pickers/custom-components/MonthButtonComponentProps.tsx.preview similarity index 100% rename from docs/data/date-pickers/custom-views/MonthButtonComponentProps.tsx.preview rename to docs/data/date-pickers/custom-components/MonthButtonComponentProps.tsx.preview diff --git a/docs/data/date-pickers/custom-views/YearButtonComponent.js b/docs/data/date-pickers/custom-components/YearButtonComponent.js similarity index 100% rename from docs/data/date-pickers/custom-views/YearButtonComponent.js rename to docs/data/date-pickers/custom-components/YearButtonComponent.js diff --git a/docs/data/date-pickers/custom-views/YearButtonComponent.tsx b/docs/data/date-pickers/custom-components/YearButtonComponent.tsx similarity index 100% rename from docs/data/date-pickers/custom-views/YearButtonComponent.tsx rename to docs/data/date-pickers/custom-components/YearButtonComponent.tsx diff --git a/docs/data/date-pickers/custom-views/YearButtonComponent.tsx.preview b/docs/data/date-pickers/custom-components/YearButtonComponent.tsx.preview similarity index 100% rename from docs/data/date-pickers/custom-views/YearButtonComponent.tsx.preview rename to docs/data/date-pickers/custom-components/YearButtonComponent.tsx.preview diff --git a/docs/data/date-pickers/custom-views/YearButtonComponentProps.js b/docs/data/date-pickers/custom-components/YearButtonComponentProps.js similarity index 100% rename from docs/data/date-pickers/custom-views/YearButtonComponentProps.js rename to docs/data/date-pickers/custom-components/YearButtonComponentProps.js diff --git a/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx b/docs/data/date-pickers/custom-components/YearButtonComponentProps.tsx similarity index 100% rename from docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx rename to docs/data/date-pickers/custom-components/YearButtonComponentProps.tsx diff --git a/docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx.preview b/docs/data/date-pickers/custom-components/YearButtonComponentProps.tsx.preview similarity index 100% rename from docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx.preview rename to docs/data/date-pickers/custom-components/YearButtonComponentProps.tsx.preview diff --git a/docs/data/date-pickers/custom-components/custom-components.md b/docs/data/date-pickers/custom-components/custom-components.md index ce8429820e7bb..8eaf3a83d4fa5 100644 --- a/docs/data/date-pickers/custom-components/custom-components.md +++ b/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, PickersShortcuts, DateRangePickerToolbar +components: DateTimePickerTabs, PickersActionBar, DatePickerToolbar, TimePickerToolbar, DateTimePickerToolbar, PickersCalendarHeader, PickersRangeCalendarHeader, PickersShortcuts, DateRangePickerToolbar, MonthCalendar, YearCalendar, DateCalendar --- # Custom slots and subcomponents @@ -219,6 +219,70 @@ Each component comes with its own toolbar (`DatePickerToolbar`, `TimePickerToolb {{"demo": "ToolbarComponent.js"}} +## Calendar header + +The calendar header is available on any component that renders a calendar to select a date or a range of dates. +It allows the user to navigate through months and to switch to the month and year views when available. + +### Component props + +You can pass props to the calendar header as shown below: + +{{"demo": "CalendarHeaderComponentProps.js"}} + +### Component + +You can pass a custom component to replace the header, as shown below: + +{{"demo": "CalendarHeaderComponent.js"}} + +When used with a date range component, +you receive three additional props to let you handle scenarios where multiple months are rendered: + +- `calendars`: The number of calendars rendered +- `month`: The month used for the header being rendered +- `monthIndex`: The index of the month used for the header being rendered + +The demo below shows how to navigate the months two by two: + +{{"demo": "CalendarHeaderComponentRange.js"}} + +## Year button + +This button allows users to change the selected year in the `year` view. + +### Component props + +You can pass props to the year button as shown below: + +{{"demo": "YearButtonComponentProps.js"}} + +### Component + +You can pass a custom component to replace the year button, as shown below: + +{{"demo": "YearButtonComponent.js"}} + +## Month button + +This button allows users to change the selected month in the `month` view. + +:::success +You can learn more on how to enable the `month` view on the [`DateCalendar` doc page](/x/react-date-pickers/date-calendar/#views). +::: + +### Component props + +You can pass props to the month button as shown below: + +{{"demo": "MonthButtonComponentProps.js"}} + +### Component + +You can pass a custom component to replace the month button, as shown below: + +{{"demo": "MonthButtonComponent.js"}} + ## Arrow switcher The following slots let you customize how to render the buttons and icons for an arrow switcher component—the component diff --git a/docs/data/date-pickers/custom-views/custom-views.md b/docs/data/date-pickers/custom-views/custom-views.md deleted file mode 100644 index 8bdbf689f645b..0000000000000 --- a/docs/data/date-pickers/custom-views/custom-views.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -productId: x-date-pickers -title: Date and Time Pickers - Custom views -components: PickersCalendarHeader, PickersRangeCalendarHeader, MonthCalendar, YearCalendar ---- - -# Custom views - -

Learn how to override the default DOM structure of the views.

- -## Calendar header - -The calendar header is available on any component that renders a calendar to select a date or a range of dates. -It allows the user to navigate through months and to switch to the month and year views when available. - -### Component props - -You can pass props to the calendar header as shown below: - -{{"demo": "CalendarHeaderComponentProps.js"}} - -### Component - -You can pass a custom component to replace the header, as shown below: - -{{"demo": "CalendarHeaderComponent.js"}} - -When used with a date range component, -you receive three additional props to let you handle scenarios where multiple months are rendered: - -- `calendars`: The number of calendars rendered -- `month`: The month used for the header being rendered -- `monthIndex`: The index of the month used for the header being rendered - -The demo below shows how to navigate the months two by two: - -{{"demo": "CalendarHeaderComponentRange.js"}} - -## Year button - -This button allows users to change the selected year in the `year` view. - -### Component props - -You can pass props to the year button as shown below: - -{{"demo": "YearButtonComponentProps.js"}} - -### Component - -You can pass a custom component to replace the year button, as shown below: - -{{"demo": "YearButtonComponent.js"}} - -## Month button - -This button allows users to change the selected month in the `month` view. - -:::success -You can learn more on how to enable the `month` view on the [`DateCalendar` doc page](/x/react-date-pickers/date-calendar/#views). -::: - -### Component props - -You can pass props to the month button as shown below: - -{{"demo": "MonthButtonComponentProps.js"}} - -### Component - -You can pass a custom component to replace the month button, as shown below: - -{{"demo": "MonthButtonComponent.js"}} diff --git a/docs/data/pages.ts b/docs/data/pages.ts index 4e427e67000c1..b9b9e91b240e9 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -367,7 +367,6 @@ const pages: MuiPage[] = [ title: 'Custom slots and subcomponents', }, { pathname: '/x/react-date-pickers/custom-layout' }, - { pathname: '/x/react-date-pickers/custom-views' }, { pathname: '/x/react-date-pickers/custom-field' }, { pathname: '/x/react-date-pickers/custom-opening-button' }, { pathname: '/x/react-date-pickers/playground', title: 'Customization playground' }, diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json index 499c9162c289e..6726361e68763 100644 --- a/docs/pages/x/api/date-pickers/date-calendar.json +++ b/docs/pages/x/api/date-pickers/date-calendar.json @@ -233,6 +233,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/x/api/date-pickers/month-calendar.json b/docs/pages/x/api/date-pickers/month-calendar.json index 56cd7765c200c..cbacc2ea9b597 100644 --- a/docs/pages/x/api/date-pickers/month-calendar.json +++ b/docs/pages/x/api/date-pickers/month-calendar.json @@ -80,6 +80,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/x/api/date-pickers/pickers-calendar-header.json b/docs/pages/x/api/date-pickers/pickers-calendar-header.json index 60cd93c629c89..94aa338f027f2 100644 --- a/docs/pages/x/api/date-pickers/pickers-calendar-header.json +++ b/docs/pages/x/api/date-pickers/pickers-calendar-header.json @@ -86,6 +86,6 @@ "muiName": "MuiPickersCalendarHeader", "filename": "/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/x/api/date-pickers/pickers-range-calendar-header.json b/docs/pages/x/api/date-pickers/pickers-range-calendar-header.json index 565ea51a21d49..fbf2f5e605c2a 100644 --- a/docs/pages/x/api/date-pickers/pickers-range-calendar-header.json +++ b/docs/pages/x/api/date-pickers/pickers-range-calendar-header.json @@ -65,6 +65,6 @@ "muiName": "MuiPickersRangeCalendarHeader", "filename": "/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/x/api/date-pickers/year-calendar.json b/docs/pages/x/api/date-pickers/year-calendar.json index 6faa7c28c3f1a..14f14f863907a 100644 --- a/docs/pages/x/api/date-pickers/year-calendar.json +++ b/docs/pages/x/api/date-pickers/year-calendar.json @@ -80,6 +80,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/x/react-date-pickers/custom-views.js b/docs/pages/x/react-date-pickers/custom-views.js deleted file mode 100644 index 0a5e49023cde5..0000000000000 --- a/docs/pages/x/react-date-pickers/custom-views.js +++ /dev/null @@ -1,7 +0,0 @@ -import * as React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/custom-views/custom-views.md?muiMarkdown'; - -export default function Page() { - return ; -} From 6d8bf4cc3049ee087ee5d1a73625a5796461898b Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 11 Jun 2024 08:54:54 +0200 Subject: [PATCH 10/10] Code review: Lukas --- .../x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts | 2 +- packages/x-date-pickers/src/YearCalendar/PickersYear.tsx | 6 +++--- .../x-date-pickers/src/YearCalendar/YearCalendar.types.ts | 2 +- packages/x-date-pickers/src/YearCalendar/index.ts | 1 - scripts/x-date-pickers-pro.exports.json | 1 - scripts/x-date-pickers.exports.json | 1 - 6 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts index eb2112e9a17e0..3ad5d2f0cb952 100644 --- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts +++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.types.ts @@ -12,7 +12,7 @@ export interface MonthCalendarSlots { * Button displayed to render a single month in the "month" view. * @default MonthCalendarButton */ - monthButton?: React.ElementType, 'button'>; + monthButton?: React.ElementType; } export interface MonthCalendarSlotProps { diff --git a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx b/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx index ea891263ac8cd..a2fa699d10934 100644 --- a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx +++ b/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx @@ -56,7 +56,7 @@ const PickersYearRoot = styled('div', { variants: [{ props: { yearsPerRow: 4 }, style: { flexBasis: '25%' } }], }); -export const PickersYearButton = styled('button', { +const YearCalendarButton = styled('button', { name: 'MuiPickersYear', slot: 'YearButton', overridesResolver: (_, styles) => [ @@ -64,7 +64,7 @@ export const PickersYearButton = styled('button', { { [`&.${pickersYearClasses.disabled}`]: styles.disabled }, { [`&.${pickersYearClasses.selected}`]: styles.selected }, ], -})<{ ownerState?: PickersYearProps }>(({ theme }) => ({ +})<{ ownerState: PickersYearProps }>(({ theme }) => ({ color: 'unset', backgroundColor: 'transparent', border: 0, @@ -140,7 +140,7 @@ export const PickersYear = React.memo(function PickersYear(inProps: PickersYearP } }, [autoFocus]); - const YearButton = slots?.yearButton ?? PickersYearButton; + const YearButton = slots?.yearButton ?? YearCalendarButton; const yearButtonProps = useSlotProps({ elementType: YearButton, externalSlotProps: slotProps?.yearButton, diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts index 6801306cf871e..f78d88255b6df 100644 --- a/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts +++ b/packages/x-date-pickers/src/YearCalendar/YearCalendar.types.ts @@ -12,7 +12,7 @@ export interface YearCalendarSlots { * Button displayed to render a single year in the "year" view. * @default YearCalendarButton */ - yearButton?: React.ElementType, 'button'>; + yearButton?: React.ElementType; } export interface YearCalendarSlotProps { diff --git a/packages/x-date-pickers/src/YearCalendar/index.ts b/packages/x-date-pickers/src/YearCalendar/index.ts index 48a2415f81045..fce796c41eeb2 100644 --- a/packages/x-date-pickers/src/YearCalendar/index.ts +++ b/packages/x-date-pickers/src/YearCalendar/index.ts @@ -9,5 +9,4 @@ export { yearCalendarClasses, getYearCalendarUtilityClass } from './yearCalendar export type { YearCalendarClasses, YearCalendarClassKey } from './yearCalendarClasses'; export { pickersYearClasses } from './pickersYearClasses'; export type { PickersYearClasses, PickersYearClassKey } from './pickersYearClasses'; -export { PickersYearButton } from './PickersYear'; export type { ExportedPickersYearProps } from './PickersYear'; diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index f03ebd478258b..f6927f93c456b 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -323,7 +323,6 @@ { "name": "PickersTextFieldProps", "kind": "TypeAlias" }, { "name": "PickersTimezone", "kind": "TypeAlias" }, { "name": "PickersTranslationKeys", "kind": "TypeAlias" }, - { "name": "PickersYearButton", "kind": "Variable" }, { "name": "pickersYearClasses", "kind": "Variable" }, { "name": "PickersYearClasses", "kind": "Interface" }, { "name": "PickersYearClassKey", "kind": "TypeAlias" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 55723d721b498..9c5800f297e9d 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -236,7 +236,6 @@ { "name": "PickersTextFieldProps", "kind": "TypeAlias" }, { "name": "PickersTimezone", "kind": "TypeAlias" }, { "name": "PickersTranslationKeys", "kind": "TypeAlias" }, - { "name": "PickersYearButton", "kind": "Variable" }, { "name": "pickersYearClasses", "kind": "Variable" }, { "name": "PickersYearClasses", "kind": "Interface" }, { "name": "PickersYearClassKey", "kind": "TypeAlias" },