Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme localization for DataGrid doesn't apply with custom translations #3796

Closed
2 tasks done
kasperfilstrup opened this issue Jan 31, 2022 · 3 comments
Closed
2 tasks done
Labels
component: data grid This is the name of the generic UI component, not the React module! l10n localization

Comments

@kasperfilstrup
Copy link

kasperfilstrup commented Jan 31, 2022

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

The language doesn't apply when passing in translations for DataGridPro to our custom theme. However, passing the custom translation directly to DataGridPro using localeText does apply.

Expected behavior 🤔

I would assume that the themed localization would apply globally to all instances of DataGridPro, so that we didn't have to pass the custom translations around to each and every implementation of DataGridPro.

Steps to reproduce 🕹

Steps:

  1. Import daDK from locales
  2. Create custom translation (for your language which DataGridPro doesn't support out of the box)
  3. Create a theme, appending the danish locale and the custom translation to the end of the createTheme({}, danish, customGridLocale)
  4. Wrap DataGridPro in your themeprovider, providing your theme with translations.

Codesandbox example

Context 🔦

I'm trying to translate DataGridPro.

Your environment 🌎

`npx @mui/envinfo`
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID 💳 (optional)

#34405

@kasperfilstrup kasperfilstrup added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 31, 2022
@alexfauquette
Copy link
Member

That is because translation must indicate in which MUI component they behave. See for example how local file works for daDK in core.
https://github.com/mui-org/material-ui/blob/d3c609ba4e14cd6c1c553fb9454f72fe576649f7/packages/mui-material/src/locale/index.ts#L616

For now, X-team has only one component, the DataGrid. So we use a helper method getGridLocalization
https://github.com/mui-org/material-ui-x/blob/70a372129854b609a1b352167e40ac01c45fdd6c/packages/grid/_modules_/grid/utils/getGridLocalization.ts#L13

You can copy it to make your code works as follow:
https://codesandbox.io/s/datagridpro-v5-theme-localization-doesnt-apply-forked-0i199?file=/src/App.tsx

It is also possible to add your translations to the project

@kasperfilstrup
Copy link
Author

Thank you very much Alexandre! 🙏

You're welcome to use my translations for Danish if you want to. If you need me to manually add them as a contribution, please tell me how to approach this. 🙂

@alexfauquette
Copy link
Member

Thanks for the translation. I made the PR #3800 next release should contain Danish locale :)

@flaviendelangle flaviendelangle added component: data grid This is the name of the generic UI component, not the React module! l10n localization and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! l10n localization
Projects
None yet
Development

No branches or pull requests

3 participants