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.

Sign up for GitHub

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

[DataGrid] Include MUI core component localizations in localeText #1913

Merged
merged 9 commits into from
Jun 18, 2021
Merged

[DataGrid] Include MUI core component localizations in localeText #1913

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ec6b49b
Include core component translations without duplicating
DanailH Jun 16, 2021
d425b3a
Update docs
DanailH Jun 16, 2021
8d9e5fc
only add MuiTablePagination translations
DanailH Jun 17, 2021
8f42808
Update docs
DanailH Jun 17, 2021
fd998f9
fix docs
DanailH Jun 17, 2021
16955a3
Update docs/src/pages/components/data-grid/localization/localization.md
DanailH Jun 18, 2021
186fd72
Update docs/src/pages/components/data-grid/localization/localization.md
DanailH Jun 18, 2021
3de6ae8
Update docs
DanailH Jun 18, 2021
9cd4f15
Pull latest
DanailH Jun 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/grid/_modules_/grid/components/GridPagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ export const GridPagination = React.forwardRef<
: []
}
rowsPerPage={paginationState.pageSize}
{...apiRef!.current.getLocaleText('MuiTablePagination')}
{...getPaginationChangeHandlers()}
{...props}
/>
Expand Down
8 changes: 8 additions & 0 deletions packages/grid/_modules_/grid/constants/localeTextConstants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,4 +98,12 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = {
// Boolean cell text
booleanCellTrueLabel: 'true',
booleanCellFalseLabel: 'false',

// Core components keys
MuiTablePagination: {},
MuiPagination: {},
MuiAlert: {},
MuiBreadcrumbs: {},
MuiRating: {},
MuiAutocomplete: {},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't natively use all these components. Why should we add them all?

Copy link
Member

@oliviertassinari oliviertassinari Jun 16, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One question I would have is, let's say we want to implement Ant Design, as a design specification. How does these change fit?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't, correct but for some of them, it does make sense to have them. Technically we only use the MuiTablePagination so we can only keep that one and add the rest on demand if we happen to use them in the future. The benefit is that that way all the localizations are kept together.

@oliviertassinari regarding the Ant Design - I didn't understand the problem - is it if we use a different pagination component?

Actually, these are only here because the way that the getLocaleText API works is that it throws an error if the key doesn't exist. If that was not the case we woudn't need to keep these here at all.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would keep only MuiTablePagination. If we add all of them it might create doubts for who is doing translations.

Copy link
Member

@oliviertassinari oliviertassinari Jun 16, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it if we use a different pagination component?

Different design specs can be supported in different ways. The most likely path (>80%) we will take is that we will expose the same MuiPagination structure, but styled differently. The only thing that we would need to do is to reinject the new components. So we might be able to use the same translation keys, as we would display the same content. (I was initially worried about the coupling of the translation keys, all good)

};
7 changes: 6 additions & 1 deletion packages/grid/_modules_/grid/models/api/gridLocaleTextApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { Localization as CoreLocalization } from '@material-ui/core/locale';

// @ts-ignore
DanailH marked this conversation as resolved.
Show resolved Hide resolved
type MuiComponentsLocalization = CoreLocalization['props'] | CoreLocalization['components'];

/**
* Set the types of the texts in the grid.
*/
export interface GridLocaleText {
export interface GridLocaleText extends Partial<MuiComponentsLocalization> {
// Root
noRowsLabel: string;
noResultsOverlayLabel: string;
Expand Down
6 changes: 2 additions & 4 deletions packages/grid/_modules_/grid/utils/getGridLocalization.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,18 @@ export const getGridLocalization = (
components: {
MuiDataGrid: {
defaultProps: {
localeText: gridTranslations,
localeText: { ...gridTranslations, ...coreTranslations?.components },
},
},
...coreTranslations?.components,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to revert this line and its v4 counterpart below. If another component from the core is used, it will not get translations.

Copy link
Member

@oliviertassinari oliviertassinari Jun 16, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@m4theushw It seems that you envision a different solution. This change seems to be OK/aligned with the intent to have all the translations happening inside MuiDataGrid.localeText, even for the core components.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have no problem with appending the core translations into MuiDataGrid.localeText. My point is that if another component from the core (e.g. Alert) is used outside the DataGrid it will not get translations. That's because in the docs we recommend to use the locale from the data-grid package to create the theme. Open this CodeSandbox and note that the standalone TablePagination is not translated.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see your worry - I will update the docs to match this implementation. That's why it's marked as a breaking change because you will no longer import all translations from the X package, you would need a mixed solution depending on your case.

Copy link
Member

@oliviertassinari oliviertassinari Jun 18, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Open this CodeSandbox and note that the standalone TablePagination is not translated.

The table component not translated sounds like the expected behavior, translations do no longer leak.

},
};
}

return {
props: {
MuiDataGrid: {
localeText: gridTranslations,
localeText: { ...gridTranslations, ...coreTranslations?.props },
},
...coreTranslations?.props,
},
};
};