[pickers] Add l10n support #4517

alexfauquette · 2022-04-15T15:57:30Z

new doc page: https://deploy-preview-4517--material-ui-x.netlify.app/x/react-date-pickers/localization/

Initial solution

To support localization we could define an object with defaultProps to provide needed translations at all components.

I wanted to have something similar to the DataGrid: one file per location. The problem is that we have much more than one component here and it's hard to list for each component which translation key do they need.

In this draft PR What I propose to do is to add a localText prop to every component we export and set the default value with the ThemeProvider

Another option could be to Create a fake component 'MuiPickers' of 'MuiPickersLocale' such that components reads default props of both as follow

const inPropsWithLocale = useThemeProps({ props: inProps, name: 'MuiPickers' });
const props = useThemeProps({ props: inPropsWithLocale, name });

Current Solution

The LocalizationProvider accepts a new prop: localeText that contains all the translations

Components that were setting translation by default have now their props deprecated. If no prop is provided, the local text is obtained from useLocaleText. All keys are available in enUS and contributors can add other translations

About where the defaults are set:

the left/right arrows text depends on the component. For calendars it is "prev/next month" for clocks it is "prev/next view" so the default must be set in the parent component
the cancel, ok, start, ... were sometimes set in the exported component, sometime in the internal. SInce they do not carry, I put them into the internal component to check deprecated props are not used only once

Works for a follow-up PR

Support functions such as the defaultGetClockLabelText
Adapt yarn l10n script for the new files

mui-bot · 2022-04-15T16:02:45Z

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	335.6	571.8	390.5	429.64	85.428
Sort 100k rows	ms	560.4	1,190.6	1,190.6	927.82	218.923
Select 100k rows	ms	187.1	277	226.7	224.92	32.166
Deselect 100k rows	ms	116.5	303.9	193.1	205.62	61.081

Generated by 🚫 dangerJS against e95d233

flaviendelangle · 2022-04-20T07:13:25Z

@mnajdova @oliviertassinari I would be interested in your opinion about the theme structure here (see @alexfauquette PR description)

Another point : should we drop the prop (rightArrowButtonText for instance) ?
Or at least deprecate them and remove them in a few weeks (we are in alpha but maybe we want the migration to be smooth, as it is not very painful to support both temporarily).

m4theushw · 2022-04-20T16:26:05Z

The DataGrid has a single entry, the DataGrid, which allows users to change all translations in one place. This doesn't happen with the pickers, you can use DatePicker but also only MobileDatePicker. What is common to all is the LocalizationProvider wrapping them. What about adding localeText to it?

Another point : should we drop the prop (rightArrowButtonText for instance) ?

Yes, I think. In the DataGrid we don't have props to change specific string inside internal components, everything comes from localeText.

alexfauquette · 2022-04-21T12:29:09Z

Following @m4theushw recommendation, I moved the localeText prop to the LocalizationProvider component.

This allows to update the text as follow:

import translation from the package
jsx const theme = createTheme(frFR) <ThemeProvider theme={theme}>
set directly localeText to the component
jsx <LocalizationProvider dateAdapter={AdapterDateFns} localeText={frFR.components.MuiLocalizationProvider.defaultProps.localeText} >

When a prop for text is not undefined it put the following message in the console.

Props for translation are deprecated. See https://mui.com/x/react-date-pickers/localization for more information.
deprecated props observed:
- leftArrowButtonText
- rightArrowButtonText

Also added a page for the localization

alexfauquette · 2022-04-21T16:25:08Z

.eslintrc.js

@@ -61,7 +61,7 @@ module.exports = {
      parserOptions: { tsconfigRootDir: __dirname, project: ['./tsconfig.json'] },
    },
    {
-      files: ['docs/src/pages/components/**/*.js', 'docs/src/pages/components/**/*.tsx'],
+      files: ['docs/data/**/*.js', 'docs/data/**/*.tsx'],


Just realized this rule was not applied

flaviendelangle · 2022-04-25T17:16:41Z

@alexfauquette the title still contain Draft but the PR is ready for review, can I review it ?

alexfauquette · 2022-04-26T07:21:38Z

@flaviendelangle Yes you can review it. Since it is affecting a lot of files, I've redo the commits such as you can review commit by commit

flaviendelangle · 2022-04-26T08:13:43Z

Truth is, I would delete the current props instead of deprecating them
I think we are changing to much stuff to handle a real deprecation period.

github-actions · 2022-04-26T09:44:08Z

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

alexfauquette · 2022-04-26T13:19:48Z

When removing props, I realized I was breaking the action buttons, because they rely on the definition of cancelText and okText to know if they should appear

Need #4655 to be done in order to distinguish the button content and if it should be rendered

flaviendelangle · 2022-04-26T13:21:17Z

Need #4655 to be done in order to distinguish the button content and if it should be rendered

OK, I was thinking that doing #4655 while keeping the old props would be hard
But if I can remove them while doing #4655 then perfect.

flaviendelangle

Great work !
That will be so much cleaner with it

flaviendelangle · 2022-04-27T09:18:16Z

docs/data/date-pickers/localization/LocalizedDatePicker.tsx

+  const [locale, setLocale] = React.useState<keyof typeof maskMap>('ru');
+  const [value, setValue] = React.useState<Date | null>(new Date());
+
+  const selectLocale = (newLocale: any) => {


We can probably type it correctly

Create a LocalKey type type LocalKey = keyof typeof maskMap and use it both for the state init and here

This is a copy past from other pages so I created a dedicated issue #4915

docs/data/date-pickers/localization/LocalizedDatePicker.tsx

flaviendelangle · 2022-04-27T09:22:08Z

docs/data/date-pickers/localization/localization.md

+
+# Pickers - Localization
+
+<p class="description">Pickers allow to support users from different locales, with formatting, RTL, and localized strings.</p>


Suggested change

<p class="description">Pickers allow to support users from different locales, with formatting, RTL, and localized strings.</p>

<p class="description">Date and time pickers allow to support users from different locales, with formatting, RTL, and localized strings.</p>

The official naming of the project is "Date and time pickers"
I think we can shortcut with "pickers" when inside a page that already clearly scoped the topic.
But for a title / description we should probably be explicit

Same for the title I think

On the Getting Start page we have "Date / Time pickers" which is not great I think (https://mui.com/x/react-date-pickers/getting-started/)

@samuelsycamore I you have a preference

docs/data/date-pickers/localization/localization.md

flaviendelangle · 2022-04-27T09:23:36Z

docs/data/date-pickers/localization/localization.md

+
+Localization can impact pickers components rendering in two distincts ways: The date format, and the components attributes such as `aria-label`.
+
+### Date-engine locale


Not a fan a date-engine but I don't have a better naming

packages/x-date-pickers/src/internals/utils/warning.ts

packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx

packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx

packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts

github-actions · 2022-04-29T12:18:05Z

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

github-actions · 2022-04-29T12:51:13Z

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

github-actions · 2022-05-04T12:24:59Z

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

alexfauquette requested review from flaviendelangle and m4theushw April 19, 2022 07:53

m4theushw removed their request for review April 20, 2022 18:51

alexfauquette commented Apr 21, 2022

View reviewed changes

alexfauquette marked this pull request as ready for review April 22, 2022 15:01

m4theushw mentioned this pull request Apr 25, 2022

[pickers] getViewSwitchingButtonText prop does not work #4446

Closed

2 tasks

alexfauquette changed the title ~~[Draft] l10n support~~ l10n support Apr 26, 2022

alexfauquette added 8 commits April 26, 2022 09:03

fix export default naming

aa38ce9

provide locale text

db0418b

deprecate props and use localeText instead

5e3bef1

add doc page

d25eca1

fixup! deprecate props and use localeText instead

cc9089d

inherited deprecated

5693329

fix tests

25dfbaf

scripts

9f5233a

alexfauquette force-pushed the draf-l10n-support branch from e07cb43 to 9f5233a Compare April 26, 2022 07:18

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 26, 2022

Merge remote-tracking branch 'upstream/master' into draf-l10n-support

c47cce2

alexfauquette added the on hold There is a blocker, we need to wait label Apr 26, 2022

flaviendelangle reviewed Apr 27, 2022

View reviewed changes

alexfauquette added 4 commits April 29, 2022 11:42

forgotten props

2ae5b0c

prettier

4a07623

variouse feedbacks

3f5ba41

docs:api

36aa82d

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 29, 2022

alexfauquette added 2 commits April 29, 2022 12:22

rename locale to adapterLocale

bf23f6b

resolve localeText as PropTypes.object

1c54505

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 29, 2022

Merge remote-tracking branch 'upstream/master' into draf-l10n-support

b99e9e4

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 29, 2022

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 29, 2022

flaviendelangle added l10n localization component: pickers This is the name of the generic UI component, not the React module! labels Apr 29, 2022

flaviendelangle mentioned this pull request May 2, 2022

[pickers] Missing emptyLabel feature on datepicker and timepicker #4592

Closed

1 task

Merge remote-tracking branch 'upstream/master' into draf-l10n-support

b9e73fa

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels May 4, 2022

alexfauquette self-assigned this May 12, 2022

Merge remote-tracking branch 'upstream/master' into draf-l10n-support

b9eb4cb

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 17, 2022

This was referenced May 17, 2022

[core] Update l10n script for pickers #4914

Closed

[docs] Type pickers demo #4915

Closed

[pickers] Allows to customize all texts with localeText #4916

Closed

Flavien feedbacks

e95d233

alexfauquette changed the title ~~l10n support~~ [pickers] Add l10n support May 17, 2022

alexfauquette merged commit aaaadf9 into mui:master May 17, 2022

alexfauquette added a commit to alexfauquette/mui-x that referenced this pull request Aug 26, 2022

[pickers] Add l10n support (mui#4517)

8ec07bf

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[pickers] Add l10n support #4517

[pickers] Add l10n support #4517

alexfauquette commented Apr 15, 2022 •

edited

Loading

mui-bot commented Apr 15, 2022 •

edited

Loading

flaviendelangle commented Apr 20, 2022

m4theushw commented Apr 20, 2022 •

edited

Loading

alexfauquette commented Apr 21, 2022 •

edited

Loading

alexfauquette Apr 21, 2022

flaviendelangle commented Apr 25, 2022

alexfauquette commented Apr 26, 2022

flaviendelangle commented Apr 26, 2022

github-actions bot commented Apr 26, 2022

alexfauquette commented Apr 26, 2022

flaviendelangle commented Apr 26, 2022

flaviendelangle left a comment

flaviendelangle Apr 27, 2022

alexfauquette May 17, 2022

flaviendelangle Apr 27, 2022

flaviendelangle Apr 27, 2022

github-actions bot commented Apr 29, 2022

github-actions bot commented Apr 29, 2022

github-actions bot commented May 4, 2022


		# Pickers - Localization

		<p class="description">Pickers allow to support users from different locales, with formatting, RTL, and localized strings.</p>

	<p class="description">Pickers allow to support users from different locales, with formatting, RTL, and localized strings.</p>
	<p class="description">Date and time pickers allow to support users from different locales, with formatting, RTL, and localized strings.</p>


		Localization can impact pickers components rendering in two distincts ways: The date format, and the components attributes such as `aria-label`.

		### Date-engine locale

[pickers] Add l10n support #4517

[pickers] Add l10n support #4517

Conversation

alexfauquette commented Apr 15, 2022 • edited Loading

Initial solution

Current Solution

Works for a follow-up PR

mui-bot commented Apr 15, 2022 • edited Loading

flaviendelangle commented Apr 20, 2022

m4theushw commented Apr 20, 2022 • edited Loading

alexfauquette commented Apr 21, 2022 • edited Loading

alexfauquette Apr 21, 2022

Choose a reason for hiding this comment

flaviendelangle commented Apr 25, 2022

alexfauquette commented Apr 26, 2022

flaviendelangle commented Apr 26, 2022

github-actions bot commented Apr 26, 2022

alexfauquette commented Apr 26, 2022

flaviendelangle commented Apr 26, 2022

flaviendelangle left a comment

Choose a reason for hiding this comment

flaviendelangle Apr 27, 2022

Choose a reason for hiding this comment

alexfauquette May 17, 2022

Choose a reason for hiding this comment

flaviendelangle Apr 27, 2022

Choose a reason for hiding this comment

flaviendelangle Apr 27, 2022

Choose a reason for hiding this comment

github-actions bot commented Apr 29, 2022

github-actions bot commented Apr 29, 2022

github-actions bot commented May 4, 2022

alexfauquette commented Apr 15, 2022 •

edited

Loading

mui-bot commented Apr 15, 2022 •

edited

Loading

m4theushw commented Apr 20, 2022 •

edited

Loading

alexfauquette commented Apr 21, 2022 •

edited

Loading