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

[docs] Add PickersPopper component to customization playground #15305

Merged
merged 2 commits into from
Nov 13, 2024
Merged

[docs] Add PickersPopper component to customization playground #15305

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
605e21e
[docs] Add `PickersPopper` component to customization playground
LukasTy Nov 6, 2024
73977e4
Change the default `PickersPopper` slot to `paper`
LukasTy Nov 7, 2024
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
34 changes: 29 additions & 5 deletions docs/data/date-pickers/date-picker/examplesConfig.styling.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export const datePickerExamples: PickersSubcomponentType = {
parentSlot: 'layout',
parentComponent: 'PickersLayout',
comments:
'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a wtyled component',
'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a styled component',
},
},
slots: ['root'],
Expand All @@ -187,7 +187,7 @@ export const datePickerExamples: PickersSubcomponentType = {
parentSlot: 'layout',
parentComponent: 'PickersLayout',
comments:
'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a wtyled component',
'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a styled component',
},
},
slots: ['root', 'label', 'labelContainer', 'switchViewButton', 'switchViewIcon'],
Expand All @@ -208,7 +208,7 @@ export const datePickerExamples: PickersSubcomponentType = {
parentSlot: 'layout',
parentComponent: 'PickersLayout',
comments:
'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a wtyled component',
'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a styled component',
},
},
slots: [
Expand All @@ -235,7 +235,7 @@ export const datePickerExamples: PickersSubcomponentType = {
parentSlot: 'layout',
parentComponent: 'PickersLayout',
comments:
'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a wtyled component',
'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a styled component',
},
},
slots: ['root', 'today'],
Expand All @@ -259,7 +259,7 @@ export const datePickerExamples: PickersSubcomponentType = {
parentSlot: 'layout',
parentComponent: 'PickersLayout',
comments:
'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a wtyled component',
'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a styled component',
componentProps: { views: ['month'] },
},
},
Expand Down Expand Up @@ -290,6 +290,30 @@ export const datePickerExamples: PickersSubcomponentType = {
slots: ['root'],
moreInformation: <TextFieldMoreInfo />,
},
PickersPopper: {
examples: {
customTheme: {
type: 'success',
parentSlot: 'paper',
},
sxProp: {
type: 'warning',
parentSlot: 'popper',
current: true,
comments:
'Because of the structure of the DesktopDatePicker, the `sx` prop needs to be applied to the `popper` slot',
},
styledComponents: {
type: 'warning',
parentSlot: 'desktopPaper',
parentComponent: 'Paper',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PickersPopper is an internal component, I think that it is better to show the compromise of overriding it with MuiPaper instead. 🤔

current: true,
comments:
'Because of the structure of the DesktopDatePicker and the way the popper renders, the `desktopPaper` slot will need to be replaced with a styled component',
},
},
slots: ['paper', 'root'],
},
};

const pickerProps: DatePickerProps = {
Expand Down