Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[pickers] Use slots in the mobile and desktop wrappers instead of XXXComponent and XXXProps #6381

Merged
merged 26 commits into from
Oct 11, 2022
Merged

[pickers] Use slots in the mobile and desktop wrappers instead of XXXComponent and XXXProps #6381

Show file tree
Hide file tree
Changes from 23 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
25f4eb9
[pickers] Use slots in PickersPopper and PickersModalDialog
flaviendelangle Oct 4, 2022
0dd8480
Work
flaviendelangle Oct 5, 2022
120adec
Work
flaviendelangle Oct 5, 2022
e720789
Work
flaviendelangle Oct 5, 2022
26f847a
Fix
flaviendelangle Oct 5, 2022
d1a1298
WOrk
flaviendelangle Oct 5, 2022
ddabf2b
Work
flaviendelangle Oct 5, 2022
b129dda
Work
flaviendelangle Oct 5, 2022
70f28a7
Fix
flaviendelangle Oct 5, 2022
bf15709
Test
flaviendelangle Oct 5, 2022
44bd1d7
Test
flaviendelangle Oct 5, 2022
577a711
Test
flaviendelangle Oct 5, 2022
6c51f8f
Test
flaviendelangle Oct 5, 2022
0471f2c
Test
flaviendelangle Oct 5, 2022
b9d7ff4
Test
flaviendelangle Oct 5, 2022
33b09ef
Test
flaviendelangle Oct 5, 2022
b77a5ca
Test
flaviendelangle Oct 5, 2022
a22f4fe
Test
flaviendelangle Oct 5, 2022
1394d9d
Fix
flaviendelangle Oct 5, 2022
9a0b150
Merge
flaviendelangle Oct 6, 2022
ba31b18
Work
flaviendelangle Oct 6, 2022
9182c20
Merge branch 'next' into use-slots-in-popper
flaviendelangle Oct 10, 2022
e41baf2
Code review: Alex
flaviendelangle Oct 10, 2022
38546be
Merge branch 'next' into use-slots-in-popper
flaviendelangle Oct 10, 2022
ee0995a
Merge branch 'next' into use-slots-in-popper
flaviendelangle Oct 11, 2022
3508f9c
Code review: Lukas
flaviendelangle Oct 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions docs/data/date-pickers/custom-components/PaperContentComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,8 +171,10 @@ export default function PaperContentComponent() {
</React.Fragment>
)}
components={{ PaperContent: RangeShortcutsPanel }}
PaperProps={{ sx: { display: 'flex', flexDirection: 'row' } }}
componentsProps={{ paperContent: { setValue } }}
componentsProps={{
desktopPaper: { sx: { display: 'flex', flexDirection: 'row' } },
paperContent: { setValue },
}}
/>
<StaticDateRangePicker
displayStaticWrapperAs="desktop"
Expand Down
6 changes: 4 additions & 2 deletions docs/data/date-pickers/custom-components/PaperContentComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,8 +172,10 @@ export default function PaperContentComponent() {
</React.Fragment>
)}
components={{ PaperContent: RangeShortcutsPanel }}
PaperProps={{ sx: { display: 'flex', flexDirection: 'row' } }}
componentsProps={{ paperContent: { setValue } }}
componentsProps={{
desktopPaper: { sx: { display: 'flex', flexDirection: 'row' } },
paperContent: { setValue },
}}
/>
<StaticDateRangePicker
displayStaticWrapperAs="desktop"
Expand Down
2 changes: 1 addition & 1 deletion docs/data/date-pickers/custom-components/custom-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ In the example below, the actions are the same as in the section above, but they

## Paper content

The paper content is available on all desktop picker components.
The paper content is available on all desktop and static picker components.
It adds a flexible way to extend what is rendered in the picker paper.

You can provide any custom component to this slot as long as it passes `children` down maintaining original picker behavior.
Expand Down
17 changes: 13 additions & 4 deletions docs/pages/x/api/date-pickers/date-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
"type": { "name": "string" },
"default": "'@media (pointer: fine)'"
},
"DialogProps": { "type": { "name": "object" } },
"disabled": { "type": { "name": "bool" } },
"disableFuture": { "type": { "name": "bool" } },
"disableHighlightToday": { "type": { "name": "bool" } },
Expand Down Expand Up @@ -62,8 +61,6 @@
"orientation": {
"type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
},
"PaperProps": { "type": { "name": "object" } },
"PopperProps": { "type": { "name": "object" } },
"readOnly": { "type": { "name": "bool" } },
"reduceAnimations": {
"type": { "name": "bool" },
Expand All @@ -89,7 +86,6 @@
"toolbarFormat": { "type": { "name": "string" } },
"toolbarPlaceholder": { "type": { "name": "node" }, "default": "'–'" },
"toolbarTitle": { "type": { "name": "node" }, "default": "'Select date'" },
"TransitionComponent": { "type": { "name": "elementType" } },
"value": { "type": { "name": "any" } },
"views": {
"type": {
Expand All @@ -102,10 +98,23 @@
"slots": {
"ActionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } },
"Day": { "default": "PickersDay", "type": { "name": "elementType" } },
"DesktopPaper": { "default": "PickersPopperPaper", "type": { "name": "elementType" } },
"DesktopTransition": {
"default": "Grow from @mui/material",
"type": { "name": "elementType" }
},
"DesktopTrapFocus": {
"default": "TrapFocus from @mui/material",
"type": { "name": "elementType" }
},
"Dialog": { "default": "PickersModalDialogRoot", "type": { "name": "elementType" } },
"LeftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } },
"MobilePaper": { "default": "Paper from @mui/material", "type": { "name": "elementType" } },
"MobileTransition": { "default": "Fade from @mui/material", "type": { "name": "elementType" } },
"NextIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"OpenPickerIcon": { "default": "Calendar or Clock", "type": { "name": "elementType" } },
"PaperContent": { "default": "React.Fragment", "type": { "name": "elementType" } },
"Popper": { "default": "Popper from @mui/material", "type": { "name": "elementType" } },
"PreviousIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"RightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } },
"SwitchViewButton": { "default": "IconButton", "type": { "name": "elementType" } },
Expand Down
19 changes: 14 additions & 5 deletions docs/pages/x/api/date-pickers/date-range-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@
"type": { "name": "string" },
"default": "'@media (pointer: fine)'"
},
"DialogProps": { "type": { "name": "object" } },
"disableAutoMonthSwitching": { "type": { "name": "bool" } },
"disabled": { "type": { "name": "bool" } },
"disableFuture": { "type": { "name": "bool" } },
Expand Down Expand Up @@ -57,8 +56,6 @@
"onViewChange": { "type": { "name": "func" } },
"open": { "type": { "name": "bool" } },
"OpenPickerButtonProps": { "type": { "name": "object" } },
"PaperProps": { "type": { "name": "object" } },
"PopperProps": { "type": { "name": "object" } },
"readOnly": { "type": { "name": "bool" } },
"reduceAnimations": {
"type": { "name": "bool" },
Expand All @@ -81,16 +78,28 @@
}
},
"toolbarFormat": { "type": { "name": "string" } },
"toolbarTitle": { "type": { "name": "node" }, "default": "'Select date range'" },
"TransitionComponent": { "type": { "name": "elementType" } }
"toolbarTitle": { "type": { "name": "node" }, "default": "'Select date range'" }
},
"slots": {
"ActionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } },
"Day": { "default": "DateRangePickersDay", "type": { "name": "elementType" } },
"DesktopPaper": { "default": "PickersPopperPaper", "type": { "name": "elementType" } },
"DesktopTransition": {
"default": "Grow from @mui/material",
"type": { "name": "elementType" }
},
"DesktopTrapFocus": {
"default": "TrapFocus from @mui/material",
"type": { "name": "elementType" }
},
"Dialog": { "default": "PickersModalDialogRoot", "type": { "name": "elementType" } },
"LeftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } },
"MobilePaper": { "default": "Paper from @mui/material", "type": { "name": "elementType" } },
"MobileTransition": { "default": "Fade from @mui/material", "type": { "name": "elementType" } },
"NextIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"OpenPickerIcon": { "default": "Calendar or Clock", "type": { "name": "elementType" } },
"PaperContent": { "default": "React.Fragment", "type": { "name": "elementType" } },
"Popper": { "default": "Popper from @mui/material", "type": { "name": "elementType" } },
"PreviousIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"RightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } },
"SwitchViewButton": { "default": "IconButton", "type": { "name": "elementType" } },
Expand Down
17 changes: 13 additions & 4 deletions docs/pages/x/api/date-pickers/date-time-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
"type": { "name": "string" },
"default": "'@media (pointer: fine)'"
},
"DialogProps": { "type": { "name": "object" } },
"disabled": { "type": { "name": "bool" } },
"disableFuture": { "type": { "name": "bool" } },
"disableHighlightToday": { "type": { "name": "bool" } },
Expand Down Expand Up @@ -72,8 +71,6 @@
"orientation": {
"type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
},
"PaperProps": { "type": { "name": "object" } },
"PopperProps": { "type": { "name": "object" } },
"readOnly": { "type": { "name": "bool" } },
"reduceAnimations": {
"type": { "name": "bool" },
Expand Down Expand Up @@ -101,7 +98,6 @@
"toolbarFormat": { "type": { "name": "string" } },
"toolbarPlaceholder": { "type": { "name": "node" }, "default": "'–'" },
"toolbarTitle": { "type": { "name": "node" }, "default": "'Select date & time'" },
"TransitionComponent": { "type": { "name": "elementType" } },
"value": { "type": { "name": "any" } },
"views": {
"type": {
Expand All @@ -114,10 +110,23 @@
"slots": {
"ActionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } },
"Day": { "default": "PickersDay", "type": { "name": "elementType" } },
"DesktopPaper": { "default": "PickersPopperPaper", "type": { "name": "elementType" } },
"DesktopTransition": {
"default": "Grow from @mui/material",
"type": { "name": "elementType" }
},
"DesktopTrapFocus": {
"default": "TrapFocus from @mui/material",
"type": { "name": "elementType" }
},
"Dialog": { "default": "PickersModalDialogRoot", "type": { "name": "elementType" } },
"LeftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } },
"MobilePaper": { "default": "Paper from @mui/material", "type": { "name": "elementType" } },
"MobileTransition": { "default": "Fade from @mui/material", "type": { "name": "elementType" } },
"NextIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"OpenPickerIcon": { "default": "Calendar or Clock", "type": { "name": "elementType" } },
"PaperContent": { "default": "React.Fragment", "type": { "name": "elementType" } },
"Popper": { "default": "Popper from @mui/material", "type": { "name": "elementType" } },
"PreviousIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"RightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } },
"SwitchViewButton": { "default": "IconButton", "type": { "name": "elementType" } },
Expand Down
13 changes: 10 additions & 3 deletions docs/pages/x/api/date-pickers/desktop-date-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,6 @@
"orientation": {
"type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
},
"PaperProps": { "type": { "name": "object" } },
"PopperProps": { "type": { "name": "object" } },
"readOnly": { "type": { "name": "bool" } },
"reduceAnimations": {
"type": { "name": "bool" },
Expand All @@ -84,7 +82,6 @@
"toolbarFormat": { "type": { "name": "string" } },
"toolbarPlaceholder": { "type": { "name": "node" }, "default": "'–'" },
"toolbarTitle": { "type": { "name": "node" }, "default": "'Select date'" },
"TransitionComponent": { "type": { "name": "elementType" } },
"value": { "type": { "name": "any" } },
"views": {
"type": {
Expand All @@ -97,10 +94,20 @@
"slots": {
"ActionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } },
"Day": { "default": "PickersDay", "type": { "name": "elementType" } },
"DesktopPaper": { "default": "PickersPopperPaper", "type": { "name": "elementType" } },
"DesktopTransition": {
"default": "Grow from @mui/material",
"type": { "name": "elementType" }
},
"DesktopTrapFocus": {
"default": "TrapFocus from @mui/material",
"type": { "name": "elementType" }
},
"LeftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } },
"NextIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"OpenPickerIcon": { "default": "Calendar or Clock", "type": { "name": "elementType" } },
"PaperContent": { "default": "React.Fragment", "type": { "name": "elementType" } },
"Popper": { "default": "Popper from @mui/material", "type": { "name": "elementType" } },
"PreviousIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"RightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } },
"SwitchViewButton": { "default": "IconButton", "type": { "name": "elementType" } },
Expand Down
15 changes: 11 additions & 4 deletions docs/pages/x/api/date-pickers/desktop-date-range-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,6 @@
"onViewChange": { "type": { "name": "func" } },
"open": { "type": { "name": "bool" } },
"OpenPickerButtonProps": { "type": { "name": "object" } },
"PaperProps": { "type": { "name": "object" } },
"PopperProps": { "type": { "name": "object" } },
"readOnly": { "type": { "name": "bool" } },
"reduceAnimations": {
"type": { "name": "bool" },
Expand All @@ -76,16 +74,25 @@
}
},
"toolbarFormat": { "type": { "name": "string" } },
"toolbarTitle": { "type": { "name": "node" }, "default": "'Select date range'" },
"TransitionComponent": { "type": { "name": "elementType" } }
"toolbarTitle": { "type": { "name": "node" }, "default": "'Select date range'" }
},
"slots": {
"ActionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } },
"Day": { "default": "DateRangePickersDay", "type": { "name": "elementType" } },
"DesktopPaper": { "default": "PickersPopperPaper", "type": { "name": "elementType" } },
"DesktopTransition": {
"default": "Grow from @mui/material",
"type": { "name": "elementType" }
},
"DesktopTrapFocus": {
"default": "TrapFocus from @mui/material",
"type": { "name": "elementType" }
},
"LeftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } },
"NextIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"OpenPickerIcon": { "default": "Calendar or Clock", "type": { "name": "elementType" } },
"PaperContent": { "default": "React.Fragment", "type": { "name": "elementType" } },
"Popper": { "default": "Popper from @mui/material", "type": { "name": "elementType" } },
"PreviousIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"RightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } },
"SwitchViewButton": { "default": "IconButton", "type": { "name": "elementType" } },
Expand Down
13 changes: 10 additions & 3 deletions docs/pages/x/api/date-pickers/desktop-date-time-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,6 @@
"orientation": {
"type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
},
"PaperProps": { "type": { "name": "object" } },
"PopperProps": { "type": { "name": "object" } },
"readOnly": { "type": { "name": "bool" } },
"reduceAnimations": {
"type": { "name": "bool" },
Expand Down Expand Up @@ -96,7 +94,6 @@
"toolbarFormat": { "type": { "name": "string" } },
"toolbarPlaceholder": { "type": { "name": "node" }, "default": "'–'" },
"toolbarTitle": { "type": { "name": "node" }, "default": "'Select date & time'" },
"TransitionComponent": { "type": { "name": "elementType" } },
"value": { "type": { "name": "any" } },
"views": {
"type": {
Expand All @@ -109,10 +106,20 @@
"slots": {
"ActionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } },
"Day": { "default": "PickersDay", "type": { "name": "elementType" } },
"DesktopPaper": { "default": "PickersPopperPaper", "type": { "name": "elementType" } },
"DesktopTransition": {
"default": "Grow from @mui/material",
"type": { "name": "elementType" }
},
"DesktopTrapFocus": {
"default": "TrapFocus from @mui/material",
"type": { "name": "elementType" }
},
"LeftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } },
"NextIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"OpenPickerIcon": { "default": "Calendar or Clock", "type": { "name": "elementType" } },
"PaperContent": { "default": "React.Fragment", "type": { "name": "elementType" } },
"Popper": { "default": "Popper from @mui/material", "type": { "name": "elementType" } },
"PreviousIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"RightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } },
"SwitchViewButton": { "default": "IconButton", "type": { "name": "elementType" } },
Expand Down
13 changes: 10 additions & 3 deletions docs/pages/x/api/date-pickers/desktop-time-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,15 +52,12 @@
"orientation": {
"type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
},
"PaperProps": { "type": { "name": "object" } },
"PopperProps": { "type": { "name": "object" } },
"readOnly": { "type": { "name": "bool" } },
"rifmFormatter": { "type": { "name": "func" } },
"shouldDisableTime": { "type": { "name": "func" } },
"showToolbar": { "type": { "name": "bool" } },
"ToolbarComponent": { "type": { "name": "elementType" }, "default": "TimePickerToolbar" },
"toolbarTitle": { "type": { "name": "node" }, "default": "'Select time'" },
"TransitionComponent": { "type": { "name": "elementType" } },
"value": { "type": { "name": "any" } },
"views": {
"type": {
Expand All @@ -72,10 +69,20 @@
},
"slots": {
"ActionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } },
"DesktopPaper": { "default": "PickersPopperPaper", "type": { "name": "elementType" } },
"DesktopTransition": {
"default": "Grow from @mui/material",
"type": { "name": "elementType" }
},
"DesktopTrapFocus": {
"default": "TrapFocus from @mui/material",
"type": { "name": "elementType" }
},
"LeftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } },
"NextIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"OpenPickerIcon": { "default": "Calendar or Clock", "type": { "name": "elementType" } },
"PaperContent": { "default": "React.Fragment", "type": { "name": "elementType" } },
"Popper": { "default": "Popper from @mui/material", "type": { "name": "elementType" } },
"PreviousIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"RightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }
},
Expand Down
4 changes: 3 additions & 1 deletion docs/pages/x/api/date-pickers/mobile-date-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
"default": "(day) => day.charAt(0).toUpperCase()"
},
"defaultCalendarMonth": { "type": { "name": "any" } },
"DialogProps": { "type": { "name": "object" } },
"disabled": { "type": { "name": "bool" } },
"disableFuture": { "type": { "name": "bool" } },
"disableHighlightToday": { "type": { "name": "bool" } },
Expand Down Expand Up @@ -95,7 +94,10 @@
"slots": {
"ActionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } },
"Day": { "default": "PickersDay", "type": { "name": "elementType" } },
"Dialog": { "default": "PickersModalDialogRoot", "type": { "name": "elementType" } },
"LeftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } },
"MobilePaper": { "default": "Paper from @mui/material", "type": { "name": "elementType" } },
"MobileTransition": { "default": "Fade from @mui/material", "type": { "name": "elementType" } },
"NextIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"OpenPickerIcon": { "default": "Calendar or Clock", "type": { "name": "elementType" } },
"PreviousIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
Expand Down
4 changes: 3 additions & 1 deletion docs/pages/x/api/date-pickers/mobile-date-range-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
"default": "(day) => day.charAt(0).toUpperCase()"
},
"defaultCalendarMonth": { "type": { "name": "any" } },
"DialogProps": { "type": { "name": "object" } },
"disableAutoMonthSwitching": { "type": { "name": "bool" } },
"disabled": { "type": { "name": "bool" } },
"disableFuture": { "type": { "name": "bool" } },
Expand Down Expand Up @@ -80,7 +79,10 @@
"slots": {
"ActionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } },
"Day": { "default": "DateRangePickersDay", "type": { "name": "elementType" } },
"Dialog": { "default": "PickersModalDialogRoot", "type": { "name": "elementType" } },
"LeftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } },
"MobilePaper": { "default": "Paper from @mui/material", "type": { "name": "elementType" } },
"MobileTransition": { "default": "Fade from @mui/material", "type": { "name": "elementType" } },
"NextIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
"OpenPickerIcon": { "default": "Calendar or Clock", "type": { "name": "elementType" } },
"PreviousIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
Expand Down
Loading