Skip to content

Commit 706daf4

Browse files
slax57slax57
authored
Merge pull request #10686 from marmelab/resource-specific-translations
Allow resource specific translations for pages and buttons
2 parents dcb7de6 + 5a9ea03 commit 706daf4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+2098
-231
lines changed

‎docs/Buttons.md‎

Lines changed: 247 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -552,14 +552,83 @@ Base component for most react-admin buttons. Responsive (displays only the icon
552552
| Prop | Required | Type | Default | Description |
553553
| ------------ | -------- | ------------------------------ | ------- | ---------------------------------------- |
554554
| `alignIcon` | Optional | `'left' | 'right` | `'left'` | Icon position relative to the label |
555-
| `children` | Optional | `ReactElement` | - | icon to use |
555+
| `children` | Optional | `ReactNode` | - | icon to use |
556556
| `className` | Optional | `string` | - | Class name to customize the look and feel of the button element itself |
557557
| `color` | Optional | `'default' | 'inherit'| 'primary' | 'secondary'` | `'primary'` | Label and icon color |
558558
| `disabled` | Optional | `boolean` | `false` | If `true`, the button will be disabled |
559+
| `label` | Optional | `ReactNode` | `false` | The button label |
559560
| `size` | Optional | `'large' | 'medium' | 'small'` | `'small'` | Button size |
560561

561562
Other props are passed down to [the underlying Material UI `<Button>`](https://mui.com/material-ui/api/button/).
562563

564+
### `alignIcon`
565+
566+
The icon position relative to the label. Defaults to `left`.
567+
568+
```tsx
569+
<Button label="Ban user" onClick={handleClick} alignIcon="right" />
570+
```
571+
572+
### `children`
573+
574+
The button icon:
575+
576+
```tsx
577+
<Button label="Ban user" onClick={handleClick}>
578+
<BanIcon />
579+
</Button>
580+
```
581+
582+
### `className`
583+
584+
The button CSS classes:
585+
586+
```tsx
587+
<Button label="Ban user" onClick={handleClick} className="ban-button" />
588+
```
589+
590+
### `color`
591+
592+
The button label and icon color. Accepts `default`, `inherit`, `primary`, `secondary` or `error`.
593+
594+
```tsx
595+
<Button label="Ban user" onClick={handleClick} color="secondary" />
596+
```
597+
598+
### `disabled`
599+
600+
A boolean value indicating whether the button is disabled.
601+
602+
```tsx
603+
<Button label="Ban user" onClick={handleClick} disabled={canBanUsers} />
604+
```
605+
606+
### `label`
607+
608+
A ReactNode used as the button label.
609+
610+
If you pass a string, it will be automatically translated, so you can use either a simple string or a translation key:
611+
612+
```tsx
613+
<Button label="Ban user" onClick={handleClick} />
614+
<Button label="myapp.actions.ban_user" onClick={handleClick} />
615+
```
616+
617+
Pass `false` or `null` if you don't want a label at all:
618+
619+
```tsx
620+
<Button label={false} onClick={handleClick} />
621+
<Button label={null} onClick={handleClick} />
622+
```
623+
624+
### `size`
625+
626+
The button size. Accepts `large`, `medium` or `small`. Defaults to `small`.
627+
628+
```tsx
629+
<Button label="Ban user" onClick={handleClick} size="large" />
630+
```
631+
563632
### `sx`: CSS API
564633

565634
| Rule name | Description |
@@ -694,7 +763,7 @@ const CommentList = () => (
694763
| Prop | Required | Type | Default | Description |
695764
| ------------- | -------- | --------------- | ------------------ | -------------------------------------------- |
696765
| `resource` | Optional | `string` | - | Target resource, e.g. 'posts' |
697-
| `label` | Optional | `string` | 'ra.action.create' | label or translation message to use |
766+
| `label` | Optional | `string` | - | label or translation message to use |
698767
| `icon` | Optional | `ReactElement` | - | iconElement, e.g. `<CommentIcon />` |
699768
| `scrollToTop` | Optional | `boolean` | `true` | Scroll to top after link |
700769

@@ -704,6 +773,44 @@ It also supports [all the other `<Button>` props](#button).
704773

705774
**Tip:** To allow users to create a record without leaving the current view, use the [`<CreateInDialogButton>`](./CreateInDialogButton.md) component.
706775

776+
### `label`
777+
778+
By default, the label for the `<CreateButton>` is the translation key `ra.action.create` that translates to "Create".
779+
780+
You can customize this label by providing a resource specific translation with the key `resources.RESOURCE.action.create` (e.g. `resources.posts.action.create`):
781+
782+
```js
783+
// in src/i18n/en.js
784+
import englishMessages from 'ra-language-english';
785+
786+
export const en = {
787+
...englishMessages,
788+
resources: {
789+
posts: {
790+
name: 'Post |||| Posts',
791+
action: {
792+
create: 'New post'
793+
}
794+
},
795+
},
796+
...
797+
};
798+
```
799+
800+
You can also customize this label by specifying a custom `label` prop:
801+
802+
```jsx
803+
export const PostCreateButton = () => (
804+
<CreateButton label="New post" />
805+
);
806+
```
807+
808+
Custom labels are automatically translated, so you can use a translation key, too:
809+
810+
```jsx
811+
<CreateButton label="resources.comments.actions.create" />
812+
```
813+
707814
### `scrollToTop`
708815

709816
By default, `<CreateButton>` scrolls the page to the top after redirecting. You can disable it as follows:
@@ -766,7 +873,7 @@ You can also call it with a record and a resource:
766873
| Prop | Required | Type | Default | Description |
767874
|-------------------- |----------|--------------------------------- |-------------------|-------------------------------------------------------------------------|
768875
| `className` | Optional | `string` | - | Class name to customize the look and feel of the button element itself |
769-
| `label` | Optional | `string` | 'Delete' | label or translation message to use |
876+
| `label` | Optional | `string` | - | label or translation message to use |
770877
| `icon` | Optional | `ReactElement` | `<DeleteIcon>` | iconElement, e.g. `<CommentIcon />` |
771878
| `mutationMode` | Optional | `string` | `'undoable'` | Mutation mode (`'undoable'`, `'pessimistic'` or `'optimistic'`) |
772879
| `mutation Options` | Optional | | null | options for react-query `useMutation` hook |
@@ -780,7 +887,27 @@ You can also call it with a record and a resource:
780887

781888
By default, the label is `Delete` in English. In other languages, it's the translation of the `'ra.action.delete'` key.
782889

783-
To customize the `<DeleteButton>` label, you can either change the translation in your i18nProvider, or pass a `label` prop:
890+
You can customize this label by providing a resource specific translation with the key `resources.RESOURCE.action.delete` (e.g. `resources.posts.action.delete`):
891+
892+
```js
893+
// in src/i18n/en.js
894+
import englishMessages from 'ra-language-english';
895+
896+
export const en = {
897+
...englishMessages,
898+
resources: {
899+
posts: {
900+
name: 'Post |||| Posts',
901+
action: {
902+
delete: 'Permanently remove %{recordRepresentation}'
903+
}
904+
},
905+
},
906+
...
907+
};
908+
```
909+
910+
You can also customize this label by specifying a custom `label` prop:
784911

785912
```jsx
786913
<DeleteButton label="Delete this comment" />
@@ -975,7 +1102,7 @@ const CommentShow = () => (
9751102
| ------------- | -------- | --------------- | ---------------- | ------------------------------------------------ |
9761103
| `resource` | Optional | `string` | - | Resource to link to, e.g. 'posts' |
9771104
| `record` | Optional | `Object` | - | Record to link to, e.g. `{ id: 12, foo: 'bar' }` |
978-
| `label` | Optional | `string` | 'ra.action.edit' | Label or translation message to use |
1105+
| `label` | Optional | `string` | - | Label or translation message to use |
9791106
| `icon` | Optional | `ReactElement` | - | Icon element, e.g. `<CommentIcon />` |
9801107
| `scrollToTop` | Optional | `boolean` | `true` | Scroll to top after link |
9811108

@@ -987,6 +1114,45 @@ It also supports [all the other `<Button>` props](#button).
9871114

9881115
**Tip:** To allow users to edit a record without leaving the current view, use the [`<EditInDialogButton>`](./EditInDialogButton.md) component.
9891116

1117+
### `label`
1118+
1119+
By default, the label for the `<EditButton>` is the translation key `ra.action.edit` that translates to "Edit".
1120+
1121+
You can customize this label by providing a resource specific translation with the key `resources.RESOURCE.action.edit` (e.g. `resources.posts.action.edit`):
1122+
1123+
```js
1124+
// in src/i18n/en.js
1125+
import englishMessages from 'ra-language-english';
1126+
1127+
export const en = {
1128+
...englishMessages,
1129+
resources: {
1130+
posts: {
1131+
name: 'Post |||| Posts',
1132+
action: {
1133+
edit: 'Modify %{recordRepresentation}'
1134+
}
1135+
},
1136+
},
1137+
...
1138+
};
1139+
```
1140+
1141+
You can also customize this label by specifying a custom `label` prop:
1142+
1143+
1144+
```jsx
1145+
export const PostEditButton = () => (
1146+
<EditButton label="Modify" />
1147+
);
1148+
```
1149+
1150+
Custom labels are automatically translated, so you can use a translation key, too:
1151+
1152+
```jsx
1153+
<EditButton label="resources.comments.actions.edit" />
1154+
```
1155+
9901156
### `scrollToTop`
9911157

9921158
By default, `<EditButton>` scrolls the page to the top after redirecting. You can disable it as follows:
@@ -1152,12 +1318,48 @@ export const PostShow = () => (
11521318
| Prop | Required | Type | Default | Description |
11531319
| ------------- | -------- | --------------- | ---------------- | ---------------------------------------------- |
11541320
| `resource` | Optional | `string` | - | target resource, e.g. 'posts' |
1155-
| `label` | Optional | `string` | 'ra.action.list' | label or translation message to use |
1321+
| `label` | Optional | `string` | - | label or translation message to use |
11561322
| `icon` | Optional | `ReactElement` | - | iconElement, e.g. `<CommentIcon />` |
11571323
| `scrollToTop` | Optional | `boolean` | `true` | Scroll to top after link |
11581324

11591325
It also supports [all the other `<Button>` props](#button).
11601326

1327+
### `label`
1328+
1329+
By default, the label is `List` in English. In other languages, it's the translation of the `'ra.action.list'` key.
1330+
1331+
You can customize this label by providing a resource specific translation with the key `resources.RESOURCE.action.list` (e.g. `resources.posts.action.list`):
1332+
1333+
```js
1334+
// in src/i18n/en.js
1335+
import englishMessages from 'ra-language-english';
1336+
1337+
export const en = {
1338+
...englishMessages,
1339+
resources: {
1340+
posts: {
1341+
name: 'Post |||| Posts',
1342+
action: {
1343+
list: 'See all posts'
1344+
}
1345+
},
1346+
},
1347+
...
1348+
};
1349+
```
1350+
1351+
You can also customize this label by specifying a custom `label` prop:
1352+
1353+
```jsx
1354+
<ListButton label="See all comments" />
1355+
```
1356+
1357+
Custom labels are automatically translated, so you can use a translation key, too:
1358+
1359+
```jsx
1360+
<ListButton label="resources.comments.actions.list" />
1361+
```
1362+
11611363
### `scrollToTop`
11621364

11631365
By default, `<ListButton>` scrolls the page to the top after redirecting. You can disable it as follows:
@@ -1296,7 +1498,7 @@ const CommentEdit = () => (
12961498
| `resource` | Optional | `string` | - | The target resource, e.g. 'posts' |
12971499
| `record` | Optional | `Object` | - | Record to link to, e.g. `{ id: 12, foo: 'bar' }` |
12981500
| `component` | Optional | `ReactElement` | - | Base path to resource, e.g. '/posts' |
1299-
| `label` | Optional | `string` | 'ra.action.show' | Label or translation message to use |
1501+
| `label` | Optional | `string` | - | Label or translation message to use |
13001502
| `icon` | Optional | `ReactElement` | - | Icon element, e.g. `<CommentIcon />` |
13011503
| `scrollToTop` | Optional | `boolean` | `true` | Scroll to top after link |
13021504

@@ -1306,6 +1508,44 @@ It also supports [all the other `<Button>` props](#button).
13061508

13071509
**Tip**: If you want to link to the Show view manually, use the `/{resource}/{record.id}/show` location.
13081510

1511+
### `label`
1512+
1513+
By default, the label for the `<ShowButton>` is the translation key `ra.action.show` that translates to "Show".
1514+
1515+
You can customize this label by providing a resource specific translation with the key `resources.RESOURCE.action.show` (e.g. `resources.posts.action.show`):
1516+
1517+
```js
1518+
// in src/i18n/en.js
1519+
import englishMessages from 'ra-language-english';
1520+
1521+
export const en = {
1522+
...englishMessages,
1523+
resources: {
1524+
posts: {
1525+
name: 'Post |||| Posts',
1526+
action: {
1527+
show: 'Display %{recordRepresentation}'
1528+
}
1529+
},
1530+
},
1531+
...
1532+
};
1533+
```
1534+
1535+
You can also customize this label by specifying a custom `label` prop:
1536+
1537+
```jsx
1538+
export const PostShowButton = () => (
1539+
<ShowButton label="Display" />
1540+
);
1541+
```
1542+
1543+
Custom labels are automatically translated, so you can use a translation key, too:
1544+
1545+
```jsx
1546+
<ShowButton label="resources.comments.actions.show" />
1547+
```
1548+
13091549
### `scrollToTop`
13101550

13111551
By default, `<ShowButton>` scrolls the page to the top after redirecting. You can disable it as follows:

‎docs/Create.md‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -342,9 +342,29 @@ To override the style of all instances of `<Create>` components using the [appli
342342

343343
## `title`
344344

345-
By default, the title for the `Create` view is "Create [resource_name]".
345+
By default, the title for the `Create` view is the translation key `ra.page.create` that translates to "Create [resource_name]" as we also pass the translation of the [resource name](./TranslationTranslating.md#translating-resource-and-field-names) in its singular form.
346346

347-
You can customize this title by specifying a custom `title` prop:
347+
You can customize this title by providing a resource specific translation with the key `resources.RESOURCE.page.create` (e.g. `resources.posts.page.create`):
348+
349+
```js
350+
// in src/i18n/en.js
351+
import englishMessages from 'ra-language-english';
352+
353+
export const en = {
354+
...englishMessages,
355+
resources: {
356+
posts: {
357+
name: 'Post |||| Posts',
358+
page: {
359+
create: 'New post'
360+
}
361+
},
362+
},
363+
...
364+
};
365+
```
366+
367+
You can also customize this title by specifying a custom `title` prop:
348368

349369
```jsx
350370
export const PostCreate = () => (

‎docs/Edit.md‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -571,9 +571,29 @@ To override the style of all instances of `<Edit>` components using the [applica
571571

572572
## `title`
573573

574-
By default, the title for the Edit view is “Edit [resource_name] [record representation]”. Check the [`<Resource recordRepresentation>`](./Resource.md#recordrepresentation) prop for more details.
574+
By default, the title for the Edit view is the translation key `ra.page.edit` that translates to “Edit [resource_name] [record representation]”. Check the [`<Resource recordRepresentation>`](./Resource.md#recordrepresentation) prop for more details.
575575

576-
You can customize this title by specifying a custom `title` string:
576+
You can customize this title by providing a resource specific translation with the key `resources.RESOURCE.page.edit` (e.g. `resources.posts.page.edit`):
577+
578+
```js
579+
// in src/i18n/en.js
580+
import englishMessages from 'ra-language-english';
581+
582+
export const en = {
583+
...englishMessages,
584+
resources: {
585+
posts: {
586+
name: 'Post |||| Posts',
587+
page: {
588+
edit: 'Update post "%{recordRepresentation}"'
589+
}
590+
},
591+
},
592+
...
593+
};
594+
```
595+
596+
You can also customize this title by specifying a custom `title` string:
577597

578598
```jsx
579599
export const PostEdit = () => (

0 commit comments

Comments
 (0)