[pickers] Remove utils and value params from translations

[arthurbalduini]

Changelog

Pickers

• Some translation keys no longer require utils and the date object as parameters, but only the formatted value as a string. The keys affected by this changes are: clockLabelText, openDatePickerDialogue and openTimePickerDialogue.
  If you have customized those translation keys, you have to update them following the examples below:

  • If you are setting a custom value in a picker component:

  -clockLabelText: (view, time, utils) =>
  -   `Select ${view}. ${
  -     time === null || !utils.isValid(time)
  -       ? 'No time selected'
  -       : `Selected time is ${utils.format(time, 'fullTime')}`
  -   }`
  +clockLabelText: (view, formattedTime) =>
  +   `Select ${view}. ${
  +     formattedTime == null ? 'No time selected' : `Selected time is ${formattedTime}`
  +   }`
  
  -openDatePickerDialogue: (value, utils) =>
  -  value !== null && utils.isValid(value)
  -    ? `Choose date, selected date is ${utils.format(value, 'fullDate')}`
  -    : 'Choose date',
  +openDatePickerDialogue: (formattedDate) =>
  +  formattedDate ? `Choose date, selected date is ${formattedDate}` : 'Choose date'
  
  -openTimePickerDialogue: (value, utils) =>
  -  value !== null && utils.isValid(value)
  -    ? `Choose time, selected time is ${utils.format(value, 'fullTime')}`
  -    : 'Choose time',
  +openTimePickerDialogue: (formattedTime) =>
  +  formattedTime ? `Choose time, selected time is ${formattedTime}` : 'Choose time'

  • If you are setting a custom value in the LocalizationProvider:

   <LocalizationProvider localeText={{
  -   clockLabelText: (view, time, utils) =>
  -     `Select ${view}. ${
  -       time === null || !utils.isValid(time)
  -         ? 'No time selected'
  -         : `Selected time is ${utils.format(time, 'fullTime')}`
  -     }`
  +   clockLabelText: (view, formattedTime) =>
  +     `Select ${view}. ${
  +       formattedTime == null ? 'No time selected' : `Selected time is ${formattedTime}`
  +     }`
  -   openDatePickerDialogue: (value, utils) =>
  -     value !== null && utils.isValid(value)
  -      ? `Choose date, selected date is ${utils.format(value, 'fullDate')}`
  -      : 'Choose date',
  +   openDatePickerDialogue: (formattedDate) =>
  +     formattedDate ? `Choose date, selected date is ${formattedDate}` : 'Choose date'
  -   openTimePickerDialogue: (value, utils) =>
  -     value !== null && utils.isValid(value)
  -       ? `Choose time, selected time is ${utils.format(value, 'fullTime')}`
  -       : 'Choose time',
  +   openTimePickerDialogue: (formattedTime) =>
  +     formattedTime ? `Choose time, selected time is ${formattedTime}` : 'Choose time'
   }} >

  • If you using this translation key in a custom component:

   const translations = usePickersTranslations();
  
  -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')
  +);
  
  -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')
  +);
  
  -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')
  +);

[mui-bot]

Localization writing tips ✍️

Seems you are updating localization 🌍 files.

Thank you for contributing to the localization! 🎉 To make your PR perfect, here is a list of elements to check: ✔️

• Verify if the PR title respects the release format. Here are two examples (depending if you update or add a locale file)

  [l10n] Improve Swedish (sv-SE) locale
  [l10n] Add Danish (da-DK) locale

• Update the documentation of supported locales by running pnpm l10n
• Clean files with pnpm prettier.

Deploy preview: https://deploy-preview-14986--material-ui-x.netlify.app/

Updated pages:

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

Generated by 🚫 dangerJS against d88e457

[flaviendelangle]

Awesome work 🙏

Can you take care of adding the migration guide (you can copy paste the doc page from #14651 and just replace the actual sections)?

Don't forget the small BC on PickersInputLocaleText which is public 👍

No codemod required here IMHO

[arthurbalduini]

Don't forget the small BC on PickersInputLocaleText which is public 👍

I also mentioned other exported types that no longer receive a parameter.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[flaviendelangle]

I would suggest just doing on diff per translation key.
The migration guide can be very lengthy if it helps people migrate (see this section for a very long migration content 😆 )

So something like:

The following translation key no longer receive the `utils` and the date object:

- `openDatePickerDialogue`:

  ```diff
  // If you are setting a custom value for this translation key in a picker component or in the `LocalizationProvider`
  -<DatePicker localeText={{ openDatePickerDialogue: (date, utils) => string; }} />
  +<DatePicker localeText={{ openDatePickerDialogue: (formattedDate) => string; }} />

  // If you using this translation key in a custom component
   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'));
  ```

  - `openTimePickerDialogue`:

  ```diff
  ```

[LukasTy]

LGTM, thank you for handling it. 🙏

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[LukasTy]

Thank you for taking care of it. 🙏

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[flaviendelangle]

Thanks for the very detailed migration guide 🙏