From 79f4bd6c34320bbbf6bc48b0a7bb7d43110606e4 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Mon, 18 Dec 2023 11:01:09 +0200
Subject: [PATCH] [docs] Improve Pickers `name` prop examples (#11422)

---
 docs/data/date-pickers/date-picker/FormPropsDatePickers.js  | 4 ++--
 docs/data/date-pickers/date-picker/FormPropsDatePickers.tsx | 4 ++--
 .../date-picker/FormPropsDatePickers.tsx.preview            | 2 +-
 .../date-range-picker/SingleInputDateRangePicker.js         | 5 ++++-
 .../date-range-picker/SingleInputDateRangePicker.tsx        | 5 ++++-
 .../SingleInputDateRangePicker.tsx.preview                  | 5 ++++-
 .../date-pickers/date-range-picker/date-range-picker.md     | 3 ++-
 .../date-time-picker/FormPropsDateTimePickers.js            | 6 ++++--
 .../date-time-picker/FormPropsDateTimePickers.tsx           | 6 ++++--
 .../date-time-picker/FormPropsDateTimePickers.tsx.preview   | 2 +-
 docs/data/date-pickers/time-picker/FormPropsTimePickers.js  | 4 ++--
 docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx | 4 ++--
 .../time-picker/FormPropsTimePickers.tsx.preview            | 2 +-
 13 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/docs/data/date-pickers/date-picker/FormPropsDatePickers.js b/docs/data/date-pickers/date-picker/FormPropsDatePickers.js
index d71e69ac54770..a2dd3e24aae33 100644
--- a/docs/data/date-pickers/date-picker/FormPropsDatePickers.js
+++ b/docs/data/date-pickers/date-picker/FormPropsDatePickers.js
@@ -7,10 +7,10 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 export default function FormPropsDatePickers() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['DatePicker', 'DatePicker']}>
+      <DemoContainer components={['DatePicker', 'DatePicker', 'DatePicker']}>
         <DatePicker label="disabled" disabled />
         <DatePicker label="readOnly" readOnly />
-        <DatePicker label="name" name="date_picker" />
+        <DatePicker label="name" name="startDate" />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-picker/FormPropsDatePickers.tsx b/docs/data/date-pickers/date-picker/FormPropsDatePickers.tsx
index d71e69ac54770..a2dd3e24aae33 100644
--- a/docs/data/date-pickers/date-picker/FormPropsDatePickers.tsx
+++ b/docs/data/date-pickers/date-picker/FormPropsDatePickers.tsx
@@ -7,10 +7,10 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 export default function FormPropsDatePickers() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['DatePicker', 'DatePicker']}>
+      <DemoContainer components={['DatePicker', 'DatePicker', 'DatePicker']}>
         <DatePicker label="disabled" disabled />
         <DatePicker label="readOnly" readOnly />
-        <DatePicker label="name" name="date_picker" />
+        <DatePicker label="name" name="startDate" />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-picker/FormPropsDatePickers.tsx.preview b/docs/data/date-pickers/date-picker/FormPropsDatePickers.tsx.preview
index c77ca96450dc7..05b78ff271463 100644
--- a/docs/data/date-pickers/date-picker/FormPropsDatePickers.tsx.preview
+++ b/docs/data/date-pickers/date-picker/FormPropsDatePickers.tsx.preview
@@ -1,3 +1,3 @@
 <DatePicker label="disabled" disabled />
 <DatePicker label="readOnly" readOnly />
-<DatePicker label="name" name="date_picker" />
\ No newline at end of file
+<DatePicker label="name" name="startDate" />
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.js b/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.js
index b8da0581dc95a..370d41244bff4 100644
--- a/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.js
+++ b/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.js
@@ -9,7 +9,10 @@ export default function SingleInputDateRangePicker() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['SingleInputDateRangeField']}>
-        <DateRangePicker slots={{ field: SingleInputDateRangeField }} />
+        <DateRangePicker
+          slots={{ field: SingleInputDateRangeField }}
+          name="allowedRange"
+        />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.tsx b/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.tsx
index b8da0581dc95a..370d41244bff4 100644
--- a/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.tsx
+++ b/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.tsx
@@ -9,7 +9,10 @@ export default function SingleInputDateRangePicker() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['SingleInputDateRangeField']}>
-        <DateRangePicker slots={{ field: SingleInputDateRangeField }} />
+        <DateRangePicker
+          slots={{ field: SingleInputDateRangeField }}
+          name="allowedRange"
+        />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.tsx.preview b/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.tsx.preview
index 4e535cce01177..1987a076f5e41 100644
--- a/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.tsx.preview
+++ b/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.tsx.preview
@@ -1 +1,4 @@
-<DateRangePicker slots={{ field: SingleInputDateRangeField }} />
\ No newline at end of file
+<DateRangePicker
+  slots={{ field: SingleInputDateRangeField }}
+  name="allowedRange"
+/>
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-range-picker/date-range-picker.md b/docs/data/date-pickers/date-range-picker/date-range-picker.md
index ccbc5864cead4..b0431b3a2f9eb 100644
--- a/docs/data/date-pickers/date-range-picker/date-range-picker.md
+++ b/docs/data/date-pickers/date-range-picker/date-range-picker.md
@@ -83,7 +83,8 @@ This prop will be ignored on the mobile picker.
 
 ### Use a single input field
 
-You can pass the `SingleInputDateRangeField` component to the Date Range Picker to use it for keyboard editing:
+You can pass the `SingleInputDateRangeField` component to the Date Range Picker to use it for keyboard editing.
+In such case the Picker component can pass the `name` prop to the input.
 
 {{"demo": "SingleInputDateRangePicker.js"}}
 
diff --git a/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.js b/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.js
index 5f0e4e489b920..dc694fb1638e1 100644
--- a/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.js
+++ b/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.js
@@ -7,10 +7,12 @@ import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 export default function FormPropsDateTimePickers() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['DateTimePicker', 'DateTimePicker']}>
+      <DemoContainer
+        components={['DateTimePicker', 'DateTimePicker', 'DateTimePicker']}
+      >
         <DateTimePicker label="disabled" disabled />
         <DateTimePicker label="readOnly" readOnly />
-        <DateTimePicker label="name" name="date_time_picker" />
+        <DateTimePicker label="name" name="startDateTime" />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx b/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx
index 5f0e4e489b920..dc694fb1638e1 100644
--- a/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx
+++ b/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx
@@ -7,10 +7,12 @@ import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 export default function FormPropsDateTimePickers() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['DateTimePicker', 'DateTimePicker']}>
+      <DemoContainer
+        components={['DateTimePicker', 'DateTimePicker', 'DateTimePicker']}
+      >
         <DateTimePicker label="disabled" disabled />
         <DateTimePicker label="readOnly" readOnly />
-        <DateTimePicker label="name" name="date_time_picker" />
+        <DateTimePicker label="name" name="startDateTime" />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx.preview b/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx.preview
index 8a29c7f098938..e08cee3ebb7ef 100644
--- a/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx.preview
+++ b/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx.preview
@@ -1,3 +1,3 @@
 <DateTimePicker label="disabled" disabled />
 <DateTimePicker label="readOnly" readOnly />
-<DateTimePicker label="name" name="date_time_picker" />
\ No newline at end of file
+<DateTimePicker label="name" name="startDateTime" />
\ No newline at end of file
diff --git a/docs/data/date-pickers/time-picker/FormPropsTimePickers.js b/docs/data/date-pickers/time-picker/FormPropsTimePickers.js
index 948647fa93952..69fce946e55dc 100644
--- a/docs/data/date-pickers/time-picker/FormPropsTimePickers.js
+++ b/docs/data/date-pickers/time-picker/FormPropsTimePickers.js
@@ -7,10 +7,10 @@ import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 export default function FormPropsTimePickers() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['TimePicker', 'TimePicker']}>
+      <DemoContainer components={['TimePicker', 'TimePicker', 'TimePicker']}>
         <TimePicker label="disabled" disabled />
         <TimePicker label="readOnly" readOnly />
-        <TimePicker label="name" name="time_picker" />
+        <TimePicker label="name" name="startTime" />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx b/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx
index 948647fa93952..69fce946e55dc 100644
--- a/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx
+++ b/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx
@@ -7,10 +7,10 @@ import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 export default function FormPropsTimePickers() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['TimePicker', 'TimePicker']}>
+      <DemoContainer components={['TimePicker', 'TimePicker', 'TimePicker']}>
         <TimePicker label="disabled" disabled />
         <TimePicker label="readOnly" readOnly />
-        <TimePicker label="name" name="time_picker" />
+        <TimePicker label="name" name="startTime" />
       </DemoContainer>
     </LocalizationProvider>
   );
diff --git a/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx.preview b/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx.preview
index 02a34bd0c0c7b..7a4f93871d1ef 100644
--- a/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx.preview
+++ b/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx.preview
@@ -1,3 +1,3 @@
 <TimePicker label="disabled" disabled />
 <TimePicker label="readOnly" readOnly />
-<TimePicker label="name" name="time_picker" />
\ No newline at end of file
+<TimePicker label="name" name="startTime" />
\ No newline at end of file