improve migration doc

docs/data/migration/migration-pickers-v7/migration-pickers-v7.md

@@ -259,24 +259,61 @@ const theme = createTheme({
 
 ## Stop passing `utils` and the date/time object to some translation keys
 
-The following translation keys expect to receive a function: `openDatePickerDialogue`, `openTimePickerDialogue`, or `clockLabelText`. If you are customizing the translation of those keys, you no longer need to provide `utils` and the date/time object to it, but only the formatted date/time value as a string. This affects the customization of those translation keys that on different contexts:
+If you are customizing the translation of those keys, you no longer need to provide `utils` and the date/time object to it, but only the formatted date/time value as a string.
 
-Translations on a single component:
+When migrating to v8, you must have a small refactor on the usage of those keys:
 
-```diff
--<DatePicker localeText={{ openDatePickerDialogue: (date, utils) => string; }} />
-+<DatePicker localeText={{ openDatePickerDialogue: (formattedDate) => string; }} />
-```
+- `openDatePickerDialogue`:
 
-Translations on custom components passed as slots:
+  ```diff
+   // If you are setting a custom value in a picker component
+  -<DatePicker localeText={{ openDatePickerDialogue: (date, utils) => string; }} />
+  +<DatePicker localeText={{ openDatePickerDialogue: (formattedDate) => string; }} />
 
-```diff
- const translations = useTranslations();
--const openDatePickerDialogue = translations.openTimePickerDialogue(value, {} as any, value == null ? null : value.format('MM/DD/YYY'));
-+const openDatePickerDialogue = translations.openDatePickerDialogue(value == null ? null : value.format('MM/DD/YYY'));
-```
+   // If you are setting a custom value in the `LocalizationProvider`
+  -<LocalizationProvider localeText={{ openDatePickerDialogue: (date, utils) => string; }} >
+  +<LocalizationProvider localeText={{ openDatePickerDialogue: (formattedDate) => string; }} >
+
+   // If you using this translation key in a custom component
+   const translations = useTranslations();
+  -const openDatePickerDialogue = translations.openDatePickerDialogue(value, {} as any, value == null ? null : value.format('MM/DD/YYY'));
+  +const openDatePickerDialogue = translations.openDatePickerDialogue(value == null ? null : value.format('MM/DD/YYY'));
+  ```
+
+  - `openTimePickerDialogue`:
+
+  ```diff
+   // If you are setting a custom value in a picker component or in the `LocalizationProvider`
+  -<DatePicker localeText={{ openTimePickerDialogue: (time, utils) => string; }} />
+  +<DatePicker localeText={{ openTimePickerDialogue: (formattedTime) => string; }} />
 
-Notice that `clockLabelText` expects an additional parameter with the time view.
+   // If you are setting a custom value in the `LocalizationProvider`
+  -<LocalizationProvider localeText={{ openTimePickerDialogue: (time, utils) => string; }} >
+  +<LocalizationProvider localeText={{ openTimePickerDialogue: (formattedTime) => string; }} >
+
+   // If you using this translation key in a custom component
+   const translations = useTranslations();
+  -const openTimePickerDialogue = translations.openTimePickerDialogue(value, {} as any, value == null ? null : value.format('hh:mm:ss'));
+  +const openTimePickerDialogue = translations.openTimePickerDialogue(value == null ? null : value.format('hh:mm:ss'));
+  ```
+
+  - `clockLabelText`:
+
+  ```diff
+   // If you are setting a custom value in a picker component or in the `LocalizationProvider`
+  -<DatePicker localeText={{ clockLabelText: (view, time, utils) => string; }} />
+  +<DatePicker localeText={{ clockLabelText: (view, formattedTime) => string; }} />
+
+   // If you are setting a custom value in the `LocalizationProvider`
+  -<LocalizationProvider localeText={{ clockLabelText: (view, time, utils) => string; }} >
+  +<LocalizationProvider localeText={{ clockLabelText: (view, formattedTime) => string; }} >
+
+
+   // If you using this translation key in a custom component
+   const translations = useTranslations();
+  -const clockLabelText = translations.clockLabelText(view, value, {} as any, value == null ? null : value.format('hh:mm:ss'));
+  +const clockLabelText = translations.clockLabelText(view, value == null ? null : value.format('hh:mm:ss'));
+  ```
 
 Also the following types and interfaces no longer receive a generic type parameter: