[docs] Add PickersPopper component to customization playground (@Lu…

…kasTy) (#15397) Co-authored-by: Lukas Tyla <[email protected]>
mui · Nov 13, 2024 · 5ab3eec · 5ab3eec
1 parent dd0ea70
commit 5ab3eec
Showing 1 changed file with 29 additions and 5 deletions.
diff --git a/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx b/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx
@@ -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'],
@@ -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'],
@@ -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: [
@@ -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'],
@@ -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'] },
       },
     },
@@ -289,6 +289,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',
+        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<Dayjs> = {