From d64a1686270d264ce2bacba5448d555df16586c7 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Fri, 22 Jan 2021 12:22:45 +0100
Subject: [PATCH 01/27] Introduce TranslatableInputs and TranslatableFields

---
 .../ra-core/src/i18n/TranslatableContext.ts   |  20 +++
 .../src/i18n/TranslatableContextProvider.tsx  |  20 +++
 packages/ra-core/src/i18n/index.ts            |   4 +
 packages/ra-core/src/i18n/useTranslatable.ts  |  56 ++++++++
 .../src/i18n/useTranslatableContext.ts        |  20 +++
 .../ra-ui-materialui/src/field/TextField.tsx  |   1 +
 .../src/field/TranslatableFields.tsx          | 125 ++++++++++++++++++
 .../src/field/TranslatableFieldsTab.tsx       |  28 ++++
 .../field/TranslatableFieldsTabContent.tsx    |  85 ++++++++++++
 .../src/field/TranslatableFieldsTabs.tsx      |  47 +++++++
 packages/ra-ui-materialui/src/field/index.ts  |   3 +
 .../src/input/TranslatableInputs.tsx          | 104 +++++++++++++++
 .../src/input/TranslatableInputsTab.tsx       |  39 ++++++
 .../input/TranslatableInputsTabContent.tsx    |  65 +++++++++
 .../src/input/TranslatableInputsTabs.tsx      |  50 +++++++
 packages/ra-ui-materialui/src/input/index.ts  |   4 +
 16 files changed, 671 insertions(+)
 create mode 100644 packages/ra-core/src/i18n/TranslatableContext.ts
 create mode 100644 packages/ra-core/src/i18n/TranslatableContextProvider.tsx
 create mode 100644 packages/ra-core/src/i18n/useTranslatable.ts
 create mode 100644 packages/ra-core/src/i18n/useTranslatableContext.ts
 create mode 100644 packages/ra-ui-materialui/src/field/TranslatableFields.tsx
 create mode 100644 packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
 create mode 100644 packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
 create mode 100644 packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx
 create mode 100644 packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
 create mode 100644 packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
 create mode 100644 packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
 create mode 100644 packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx

diff --git a/packages/ra-core/src/i18n/TranslatableContext.ts b/packages/ra-core/src/i18n/TranslatableContext.ts
new file mode 100644
index 00000000000..9fd80b7621c
--- /dev/null
+++ b/packages/ra-core/src/i18n/TranslatableContext.ts
@@ -0,0 +1,20 @@
+import { createContext } from 'react';
+
+export const TranslatableContext = createContext<TranslatableContextValue>(
+    undefined
+);
+
+export interface TranslatableContextValue {
+    getInputLabel: GetTranslatableInputLabel;
+    getSource: GetTranslatableSource;
+    languages: string[];
+    selectedLanguage: string;
+    selectLanguage: SelectTranslatableLanguage;
+}
+
+export type GetTranslatableSource = (
+    field: string,
+    language?: string
+) => string;
+export type GetTranslatableInputLabel = (field: string) => string;
+export type SelectTranslatableLanguage = (language: string) => void;
diff --git a/packages/ra-core/src/i18n/TranslatableContextProvider.tsx b/packages/ra-core/src/i18n/TranslatableContextProvider.tsx
new file mode 100644
index 00000000000..c564655e46d
--- /dev/null
+++ b/packages/ra-core/src/i18n/TranslatableContextProvider.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ReactElement, ReactNode } from 'react';
+import {
+    TranslatableContext,
+    TranslatableContextValue,
+} from './TranslatableContext';
+
+export const TranslatableContextProvider = ({
+    children,
+    value,
+}: {
+    children: ReactNode;
+    value: TranslatableContextValue;
+}): ReactElement => {
+    return (
+        <TranslatableContext.Provider value={value}>
+            {children}
+        </TranslatableContext.Provider>
+    );
+};
diff --git a/packages/ra-core/src/i18n/index.ts b/packages/ra-core/src/i18n/index.ts
index 9782fedf160..27d7d7289ee 100644
--- a/packages/ra-core/src/i18n/index.ts
+++ b/packages/ra-core/src/i18n/index.ts
@@ -24,3 +24,7 @@ export const DEFAULT_LOCALE = 'en';
 export * from './TranslationUtils';
 export * from './TranslationContext';
 export * from './TranslationMessages';
+export * from './TranslatableContext';
+export * from './TranslatableContextProvider';
+export * from './useTranslatable';
+export * from './useTranslatableContext';
diff --git a/packages/ra-core/src/i18n/useTranslatable.ts b/packages/ra-core/src/i18n/useTranslatable.ts
new file mode 100644
index 00000000000..c265d5ebaf4
--- /dev/null
+++ b/packages/ra-core/src/i18n/useTranslatable.ts
@@ -0,0 +1,56 @@
+import { useState, useMemo } from 'react';
+import { useResourceContext } from '../core';
+import { getFieldLabelTranslationArgs } from '../util';
+import { TranslatableContextValue } from './TranslatableContext';
+import useTranslate from './useTranslate';
+
+/**
+ * Hook supplying the logic to translate a field value in multiple languages.
+ *
+ * @param options The hook options
+ * @param {string} options.defaultLanguage The locale of the default selected language. Defaults to 'en'.
+ * @param {Language[]} options.languages An array of the supported languages. Each is an object with a locale and a name property. For example { locale: 'en', name: 'English' }.
+ *
+ * @returns
+ * An object with following properties and methods:
+ * - selectedLanguage: The locale of the currently selected language
+ * - languages: An array of the supported languages
+ * - getLabelInput: A function which returns the translated label for the given field
+ * - getSource: A function which returns the source for the given field
+ * - selectLanguage: A function which set the selected language
+ */
+export const useTranslatable = (
+    options: UseTranslatableOptions
+): TranslatableContextValue => {
+    const { defaultLanguage = 'en', languages } = options;
+    const [selectedLanguage, setSelectedLanguage] = useState(defaultLanguage);
+    const resource = useResourceContext({});
+    const translate = useTranslate();
+
+    const context = useMemo<TranslatableContextValue>(
+        () => ({
+            getSource: (source: string, locale: string = selectedLanguage) =>
+                `${source}.${locale}`,
+            getInputLabel: (source: string) => {
+                return translate(
+                    ...getFieldLabelTranslationArgs({
+                        source,
+                        resource,
+                        label: undefined,
+                    })
+                );
+            },
+            languages,
+            selectedLanguage,
+            selectLanguage: setSelectedLanguage,
+        }),
+        [languages, resource, selectedLanguage, translate]
+    );
+
+    return context;
+};
+
+export type UseTranslatableOptions = {
+    defaultLanguage?: string;
+    languages: string[];
+};
diff --git a/packages/ra-core/src/i18n/useTranslatableContext.ts b/packages/ra-core/src/i18n/useTranslatableContext.ts
new file mode 100644
index 00000000000..4364f84fc92
--- /dev/null
+++ b/packages/ra-core/src/i18n/useTranslatableContext.ts
@@ -0,0 +1,20 @@
+import { useContext } from 'react';
+import {
+    TranslatableContext,
+    TranslatableContextValue,
+} from './TranslatableContext';
+
+/**
+ * Gives access to the current TranslatableContext.
+ */
+export const useTranslatableContext = (): TranslatableContextValue => {
+    const context = useContext(TranslatableContext);
+
+    if (!context) {
+        throw new Error(
+            'useTranslatableContext must be used inside a TranslatableContextProvider'
+        );
+    }
+
+    return context;
+};
diff --git a/packages/ra-ui-materialui/src/field/TextField.tsx b/packages/ra-ui-materialui/src/field/TextField.tsx
index ea13e4fc4f8..6e5097f9c0b 100644
--- a/packages/ra-ui-materialui/src/field/TextField.tsx
+++ b/packages/ra-ui-materialui/src/field/TextField.tsx
@@ -9,6 +9,7 @@ import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
 const TextField: FC<TextFieldProps> = memo<TextFieldProps>(
     ({ className, source, record = {}, emptyText, ...rest }) => {
         const value = get(record, source);
+        console.log({ record, source });
 
         return (
             <Typography
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
new file mode 100644
index 00000000000..35d8b096e5d
--- /dev/null
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { ReactElement, ReactNode } from 'react';
+import {
+    TranslatableContextProvider,
+    useTranslatable,
+    TranslatableContextValue,
+    UseTranslatableOptions,
+    Record,
+} from 'ra-core';
+import { TranslatableFieldsTabs } from './TranslatableFieldsTabs';
+import { TranslatableFieldsTabContent } from './TranslatableFieldsTabContent';
+import { makeStyles } from '@material-ui/core/styles';
+import { ClassesOverride } from '../types';
+
+/**
+ * Provides a way to show multiple languages for any fields passed as children.
+ *
+ * @example <caption>Basic usage</caption>
+ * <TranslatableFields
+ *     languages={[
+ *         { locale: 'en', name: 'English' }
+ *         { locale: 'fr', name: 'Français' }
+ *     ]}
+ * >
+ *     {({ getSource }) => (
+ *         <>
+ *             <TextField source={getSource('title')} />
+ *             <TextField source={getSource('description')} />
+ *         </>
+ *     )}
+ * </TranslatableFields>
+ *
+ * @example <caption>With a custom language selector</caption>
+ * <TranslatableFields
+ *     selector={<MyLanguageSelector />}
+ *     languages={[
+ *         { locale: 'en', name: 'English' }
+ *         { locale: 'fr', name: 'Français' }
+ *     ]}
+ * >
+ *     {({ getSource }) => (
+ *         <TextField source={getSource('title')} />
+ *     )}
+ * <TranslatableFields>
+>
+ *
+ * const MyLanguageSelector = () => {
+ *     const {
+ *         languages,
+ *         selectedLanguage,
+ *         selectLanguage,
+ *     } = useTranslatable(availableLanguages, validate);
+ *
+ *     return (
+ *         <select onChange={selectLanguage}>
+ *             {languages.map((language) => (
+ *                 <option selected={language.locale === selectedLanguage}>
+ *                     {language.name}
+ *                 </option>
+ *             ))}
+ *        </select>
+ *     );
+ * }
+ *
+ * * @param props The component props
+ * * @param {string} props.defaultLanguage The language selected by default (accept the language locale). Default to 'en'.
+ * * @param {Language[]} props.languages An array of the possible languages in the form: `[{ locale: 'en', language: 'English' }].
+ * * @param {ReactElement} props.selector The element responsible for selecting a language. Defaults to Material UI tabs.
+ */
+export const TranslatableFields = (
+    props: TranslatableFieldsProps
+): ReactElement => {
+    const {
+        defaultLanguage = 'en',
+        languages,
+        selector = <TranslatableFieldsTabs />,
+        children,
+        record,
+        resource,
+        basePath,
+    } = props;
+    const context = useTranslatable({ defaultLanguage, languages });
+    const classes = useStyles(props);
+
+    return (
+        <div className={classes.root}>
+            <TranslatableContextProvider value={context}>
+                {selector}
+                {typeof children === 'function'
+                    ? children(context)
+                    : languages.map(language => (
+                          <TranslatableFieldsTabContent
+                              key={language}
+                              basePath={basePath}
+                              locale={language}
+                              record={record}
+                              resource={resource}
+                          >
+                              {children}
+                          </TranslatableFieldsTabContent>
+                      ))}
+            </TranslatableContextProvider>
+        </div>
+    );
+};
+
+export interface TranslatableFieldsProps extends UseTranslatableOptions {
+    basePath: string;
+    children: ReactNode | TranslatableRenderFunction;
+    classes?: ClassesOverride<typeof useStyles>;
+    record: Record;
+    resource: string;
+    selector?: ReactElement;
+}
+
+export type TranslatableRenderFunction = (
+    context: TranslatableContextValue
+) => ReactNode;
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        flexGrow: 1,
+        backgroundColor: theme.palette.background.default,
+    },
+}));
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
new file mode 100644
index 00000000000..f27f2c30d53
--- /dev/null
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import Tab, { TabProps } from '@material-ui/core/Tab';
+import { useTranslate } from 'ra-core';
+import { capitalize } from 'inflection';
+
+/**
+ * Single tab which select a language TranslatableFields component.
+ * @see TranslatableFields
+ */
+export const TranslatableFieldsTab = (
+    props: TranslatableFieldsTabProps & TabProps
+) => {
+    const { locale, ...rest } = props;
+    const translate = useTranslate();
+
+    return (
+        <Tab
+            label={translate(`ra.languages.${locale}`, {
+                _: capitalize(locale),
+            })}
+            {...rest}
+        />
+    );
+};
+
+interface TranslatableFieldsTabProps {
+    locale: string;
+}
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
new file mode 100644
index 00000000000..371229a88b7
--- /dev/null
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import {
+    Children,
+    cloneElement,
+    isValidElement,
+    ReactElement,
+    ReactNode,
+} from 'react';
+import { useTranslatableContext, Record } from 'ra-core';
+import { makeStyles } from '@material-ui/core/styles';
+import { ClassesOverride } from '../types';
+import { Labeled } from '../input';
+
+/**
+ * Default container for a group of translatable fields inside a TranslatableFields components.
+ * @see TranslatableFields
+ */
+export const TranslatableFieldsTabContent = (
+    props: LanguageTabProps
+): ReactElement => {
+    const { basePath, children, locale, record, resource, ...other } = props;
+    const {
+        selectedLanguage,
+        getInputLabel,
+        getSource,
+    } = useTranslatableContext();
+    const classes = useStyles(props);
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={selectedLanguage !== locale}
+            id={`translatable-${locale}`}
+            aria-labelledby={`translatable-${locale}`}
+            className={classes.root}
+            {...other}
+        >
+            {Children.map(children, field =>
+                isValidElement(field) && field.props.addLabel ? (
+                    <Labeled
+                        record={record}
+                        resource={resource}
+                        basePath={basePath}
+                        label={field.props.label}
+                        source={field.props.source}
+                        disabled={false}
+                    >
+                        {cloneElement(field, {
+                            ...field.props,
+                            label: getInputLabel(field.props.source),
+                            source: getSource(field.props.source),
+                        })}
+                    </Labeled>
+                ) : typeof field === 'string' ? (
+                    field
+                ) : (
+                    isValidElement(field) &&
+                    cloneElement(field, {
+                        ...field.props,
+                        label: getInputLabel(field.props.source),
+                        source: getSource(field.props.source),
+                    })
+                )
+            )}
+        </div>
+    );
+};
+
+export type LanguageTabProps = {
+    basePath: string;
+    children: ReactNode;
+    classes: ClassesOverride<typeof useStyles>;
+    formGroupKeyPrefix?: string;
+    locale: string;
+    record: Record;
+    resource: string;
+};
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        flexGrow: 1,
+        padding: theme.spacing(1),
+        backgroundColor: theme.palette.background.default,
+    },
+}));
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx
new file mode 100644
index 00000000000..1511e766def
--- /dev/null
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ReactElement } from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs, { TabsProps } from '@material-ui/core/Tabs';
+import { useTranslatableContext } from 'ra-core';
+import { TranslatableFieldsTab } from './TranslatableFieldsTab';
+import { AppBarProps } from '../layout';
+
+/**
+ * Default language selector for the TranslatableFields component. Generates a tab for each specified language.
+ * @see TranslatableFields
+ */
+export const TranslatableFieldsTabs = ({
+    TabsProps: tabsProps,
+}: LanguagesTabsProps & AppBarProps): ReactElement => {
+    const {
+        languages,
+        selectLanguage,
+        selectedLanguage,
+    } = useTranslatableContext();
+
+    const handleChange = (event, newLanguage): void => {
+        selectLanguage(newLanguage);
+    };
+
+    return (
+        <AppBar position="static">
+            <Tabs
+                value={selectedLanguage}
+                onChange={handleChange}
+                {...tabsProps}
+            >
+                {languages.map(locale => (
+                    <TranslatableFieldsTab
+                        key={locale}
+                        value={locale}
+                        locale={locale}
+                    />
+                ))}
+            </Tabs>
+        </AppBar>
+    );
+};
+
+export interface LanguagesTabsProps {
+    TabsProps?: TabsProps;
+}
diff --git a/packages/ra-ui-materialui/src/field/index.ts b/packages/ra-ui-materialui/src/field/index.ts
index 35f759ded05..41e310c21a0 100644
--- a/packages/ra-ui-materialui/src/field/index.ts
+++ b/packages/ra-ui-materialui/src/field/index.ts
@@ -21,6 +21,9 @@ import UrlField, { UrlFieldProps } from './UrlField';
 import sanitizeFieldRestProps from './sanitizeFieldRestProps';
 import { FieldProps } from './types';
 
+export * from './TranslatableFields';
+export * from './TranslatableFieldsTabContent';
+
 export {
     ArrayField,
     BooleanField,
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
new file mode 100644
index 00000000000..8200cfd9395
--- /dev/null
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { ReactElement, ReactNode } from 'react';
+import {
+    TranslatableContextProvider,
+    useTranslatable,
+    TranslatableContextValue,
+    UseTranslatableOptions,
+} from 'ra-core';
+import { TranslatableInputsTabs } from './TranslatableInputsTabs';
+import { TranslatableInputsTabContent } from './TranslatableInputsTabContent';
+
+/**
+ * Provides a way to edit multiple languages for any inputs passed as children.
+ *
+ * @example <caption>Basic usage</caption>
+ * <Translatable
+ *     languages={[
+ *         { locale: 'en', name: 'English' }
+ *         { locale: 'fr', name: 'Français' }
+ *     ]}
+ * >
+ *     {({ getSource }) => (
+ *         <>
+ *             <TextInput source={getSource('title')} />
+ *             <RichTextInput source={getSource('description')} />
+ *         </>
+ *     )}
+ * </Translatable>
+ *
+ * @example <caption>With a custom language selector</caption>
+ * <Translatable
+ *     selector={<MyLanguageSelector />}
+ *     languages={[
+ *         { locale: 'en', name: 'English' }
+ *         { locale: 'fr', name: 'Français' }
+ *     ]}
+ * >
+ *     {({ getSource }) => (
+ *         <TextInput source={getSource('title')} />
+ *     )}
+ * </Translatable>
+ *
+ * const MyLanguageSelector = () => {
+ *     const {
+ *         languages,
+ *         selectedLanguage,
+ *         selectLanguage,
+ *     } = useTranslatable(availableLanguages, validate);
+ *
+ *     return (
+ *         <select onChange={selectLanguage}>
+ *             {languages.map((language) => (
+ *                 <option selected={language.locale === selectedLanguage}>
+ *                     {language.name}
+ *                 </option>
+ *             ))}
+ *        </select>
+ *     );
+ * }
+ *
+ * * @param props The component props
+ * * @param {string} props.defaultLanguage The language selected by default (accept the language locale). Default to 'en'.
+ * * @param {Language[]} props.languages An array of the possible languages in the form: `[{ locale: 'en', language: 'English' }].
+ * * @param {ReactElement} props.selector The element responsible for selecting a language. Defaults to Material UI tabs.
+ */
+export const TranslatableInputs = (props: TranslatableProps): ReactElement => {
+    const {
+        defaultLanguage = 'en',
+        languages,
+        formGroupKeyPrefix,
+        selector = (
+            <TranslatableInputsTabs formGroupKeyPrefix={formGroupKeyPrefix} />
+        ),
+        children,
+    } = props;
+    const context = useTranslatable({ defaultLanguage, languages });
+
+    return (
+        <TranslatableContextProvider value={context}>
+            {selector}
+            {typeof children === 'function'
+                ? children(context)
+                : languages.map(language => (
+                      <TranslatableInputsTabContent
+                          key={language}
+                          locale={language}
+                          formGroupKeyPrefix={formGroupKeyPrefix}
+                      >
+                          {children}
+                      </TranslatableInputsTabContent>
+                  ))}
+        </TranslatableContextProvider>
+    );
+};
+
+export interface TranslatableProps extends UseTranslatableOptions {
+    selector?: ReactElement;
+    children: ReactNode | TranslatableRenderFunction;
+    formGroupKeyPrefix?: string;
+}
+
+export type TranslatableRenderFunction = (
+    context: TranslatableContextValue
+) => ReactNode;
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
new file mode 100644
index 00000000000..1f411524e64
--- /dev/null
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import Tab, { TabProps } from '@material-ui/core/Tab';
+import { useFormGroup, useTranslate } from 'ra-core';
+import { makeStyles } from '@material-ui/core/styles';
+import { ClassesOverride } from '../types';
+import { capitalize } from 'inflection';
+
+/**
+ * Single tab which select a language TranslatableInputs component.
+ * @see TranslatableInputs
+ */
+export const TranslatebleInputsTab = (
+    props: TranslatebleInputsTabProps & TabProps
+) => {
+    const { formGroupKeyPrefix, locale, ...rest } = props;
+    const { invalid } = useFormGroup(`${formGroupKeyPrefix}${locale}`);
+    const classes = useStyles(props);
+    const translate = useTranslate();
+
+    return (
+        <Tab
+            label={translate(`ra.languages.${locale}`, {
+                _: capitalize(locale),
+            })}
+            className={invalid ? classes.error : undefined}
+            {...rest}
+        />
+    );
+};
+
+const useStyles = makeStyles(theme => ({
+    error: { color: theme.palette.error.main },
+}));
+
+interface TranslatebleInputsTabProps {
+    classes?: ClassesOverride<typeof useStyles>;
+    formGroupKeyPrefix?: string;
+    locale: string;
+}
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
new file mode 100644
index 00000000000..e4908bfa3fa
--- /dev/null
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import {
+    Children,
+    cloneElement,
+    isValidElement,
+    ReactElement,
+    ReactNode,
+} from 'react';
+import { FormGroupContextProvider, useTranslatableContext } from 'ra-core';
+import { makeStyles } from '@material-ui/core/styles';
+import { ClassesOverride } from '../types';
+
+/**
+ * Default container for a group of translatable inputs inside a TranslatableInputs components.
+ * @see TranslatableInputs
+ */
+export const TranslatableInputsTabContent = (
+    props: LanguageTabProps
+): ReactElement => {
+    const { children, formGroupKeyPrefix = '', locale, ...other } = props;
+    const {
+        selectedLanguage,
+        getInputLabel,
+        getSource,
+    } = useTranslatableContext();
+    const classes = useStyles(props);
+
+    return (
+        <FormGroupContextProvider name={`${formGroupKeyPrefix}${locale}`}>
+            <div
+                role="tabpanel"
+                hidden={selectedLanguage !== locale}
+                id={`translatable-${locale}`}
+                aria-labelledby={`translatable-${locale}`}
+                className={classes.root}
+                {...other}
+            >
+                {Children.map(children, child =>
+                    isValidElement(child)
+                        ? cloneElement(child, {
+                              ...child.props,
+                              label: getInputLabel(child.props.source),
+                              source: getSource(child.props.source),
+                          })
+                        : null
+                )}
+            </div>
+        </FormGroupContextProvider>
+    );
+};
+
+export type LanguageTabProps = {
+    children: ReactNode;
+    classes?: ClassesOverride<typeof useStyles>;
+    formGroupKeyPrefix?: string;
+    locale: string;
+};
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        flexGrow: 1,
+        padding: theme.spacing(1),
+        backgroundColor: theme.palette.background.default,
+    },
+}));
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx
new file mode 100644
index 00000000000..0552d7d2041
--- /dev/null
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { ReactElement } from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs, { TabsProps } from '@material-ui/core/Tabs';
+import { useTranslatableContext } from 'ra-core';
+import { TranslatebleInputsTab } from './TranslatableInputsTab';
+import { AppBarProps } from '../layout';
+
+/**
+ * Default language selector for the TranslatableInputs component. Generates a tab for each specified language.
+ * @see TranslatableInputs
+ */
+export const TranslatableInputsTabs = ({
+    formGroupKeyPrefix,
+    TabsProps: tabsProps,
+}: TranslatableInputsTabsProps & AppBarProps): ReactElement => {
+    const {
+        languages,
+        selectLanguage,
+        selectedLanguage,
+    } = useTranslatableContext();
+
+    const handleChange = (event, newLanguage): void => {
+        selectLanguage(newLanguage);
+    };
+
+    return (
+        <AppBar position="static">
+            <Tabs
+                value={selectedLanguage}
+                onChange={handleChange}
+                {...tabsProps}
+            >
+                {languages.map(locale => (
+                    <TranslatebleInputsTab
+                        key={locale}
+                        value={locale}
+                        locale={locale}
+                        formGroupKeyPrefix={formGroupKeyPrefix}
+                    />
+                ))}
+            </Tabs>
+        </AppBar>
+    );
+};
+
+export interface TranslatableInputsTabsProps {
+    formGroupKeyPrefix?: string;
+    TabsProps?: TabsProps;
+}
diff --git a/packages/ra-ui-materialui/src/input/index.ts b/packages/ra-ui-materialui/src/input/index.ts
index e9bd5a6a53a..cfd161068b8 100644
--- a/packages/ra-ui-materialui/src/input/index.ts
+++ b/packages/ra-ui-materialui/src/input/index.ts
@@ -22,6 +22,10 @@ import SelectArrayInput from './SelectArrayInput';
 import SelectInput from './SelectInput';
 import TextInput from './TextInput';
 import sanitizeInputRestProps from './sanitizeInputRestProps';
+export * from './TranslatableInputs';
+export * from './TranslatableInputsTabContent';
+export * from './TranslatableInputsTabs';
+export * from './TranslatableInputsTab';
 
 export {
     ArrayInput,

From 36fa1071d4a9918d0a7bd5e0bafb8e088da18a0c Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Fri, 22 Jan 2021 12:23:08 +0100
Subject: [PATCH 02/27] Update simple example with translatable tags names

---
 examples/simple/src/data.js                   | 38 +++++++++----------
 examples/simple/src/posts/PostList.js         |  4 +-
 examples/simple/src/posts/PostShow.js         |  4 +-
 .../simple/src/posts/TagReferenceInput.js     |  2 +-
 examples/simple/src/tags/TagCreate.js         |  5 ++-
 examples/simple/src/tags/TagEdit.js           |  5 ++-
 examples/simple/src/tags/TagList.js           | 11 +++++-
 examples/simple/src/tags/TagShow.js           | 11 +++++-
 8 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/examples/simple/src/data.js b/examples/simple/src/data.js
index a11ce43ffab..2ffb0813837 100644
--- a/examples/simple/src/data.js
+++ b/examples/simple/src/data.js
@@ -380,110 +380,110 @@ export default {
     tags: [
         {
             id: 1,
-            name: 'Sport',
+            name: { en: 'Sport' },
             published: 1,
         },
         {
             id: 2,
-            name: 'Technology',
+            name: { en: 'Technology' },
             published: false,
         },
         {
             id: 3,
-            name: 'Code',
+            name: { en: 'Code' },
             published: true,
         },
         {
             id: 4,
-            name: 'Photo',
+            name: { en: 'Photo' },
             published: false,
         },
         {
             id: 5,
-            name: 'Music',
+            name: { en: 'Music' },
             published: 1,
         },
         {
             id: 6,
-            name: 'Parkour',
+            name: { en: 'Parkour' },
             published: 1,
             parent_id: 1,
         },
         {
             id: 7,
-            name: 'Crossfit',
+            name: { en: 'Crossfit' },
             published: 1,
             parent_id: 1,
         },
         {
             id: 8,
-            name: 'Computing',
+            name: { en: 'Computing' },
             published: 1,
             parent_id: 2,
         },
         {
             id: 9,
-            name: 'Nanoscience',
+            name: { en: 'Nanoscience' },
             published: 1,
             parent_id: 2,
         },
         {
             id: 10,
-            name: 'Blockchain',
+            name: { en: 'Blockchain' },
             published: 1,
             parent_id: 2,
         },
         {
             id: 11,
-            name: 'Node',
+            name: { en: 'Node' },
             published: 1,
             parent_id: 3,
         },
         {
             id: 12,
-            name: 'React',
+            name: { en: 'React' },
             published: 1,
             parent_id: 3,
         },
         {
             id: 13,
-            name: 'Nature',
+            name: { en: 'Nature' },
             published: 1,
             parent_id: 4,
         },
         {
             id: 14,
-            name: 'People',
+            name: { en: 'People' },
             published: 1,
             parent_id: 4,
         },
         {
             id: 15,
-            name: 'Animals',
+            name: { en: 'Animals' },
             published: 1,
             parent_id: 13,
         },
         {
             id: 16,
-            name: 'Moutains',
+            name: { en: 'Moutains' },
             published: 1,
             parent_id: 13,
         },
         {
             id: 17,
-            name: 'Rap',
+            name: { en: 'Rap' },
             published: 1,
             parent_id: 5,
         },
         {
             id: 18,
-            name: 'Rock',
+            name: { en: 'Rock' },
             published: 1,
             parent_id: 5,
         },
         {
             id: 19,
-            name: 'World',
+            name: { en: 'World' },
             published: 1,
             parent_id: 5,
         },
diff --git a/examples/simple/src/posts/PostList.js b/examples/simple/src/posts/PostList.js
index 26cff684828..1d387f60758 100644
--- a/examples/simple/src/posts/PostList.js
+++ b/examples/simple/src/posts/PostList.js
@@ -165,7 +165,7 @@ const PostList = props => {
                         headerClassName={classes.hiddenOnSmallScreens}
                     >
                         <SingleFieldList>
-                            <ChipField source="name" size="small" />
+                            <ChipField source="name.en" size="small" />
                         </SingleFieldList>
                     </ReferenceArrayField>
                     <PostListActionToolbar>
@@ -178,6 +178,6 @@ const PostList = props => {
     );
 };
 
-const tagSort = { field: 'name', order: 'ASC' };
+const tagSort = { field: 'name.en', order: 'ASC' };
 
 export default PostList;
diff --git a/examples/simple/src/posts/PostShow.js b/examples/simple/src/posts/PostShow.js
index 7048942f388..784a888becc 100644
--- a/examples/simple/src/posts/PostShow.js
+++ b/examples/simple/src/posts/PostShow.js
@@ -70,10 +70,10 @@ const PostShow = props => {
                         <ReferenceArrayField
                             reference="tags"
                             source="tags"
-                            sort={{ field: 'name', order: 'ASC' }}
+                            sort={{ field: 'name.en', order: 'ASC' }}
                         >
                             <SingleFieldList>
-                                <ChipField source="name" />
+                                <ChipField source="name.en" />
                             </SingleFieldList>
                         </ReferenceArrayField>
                         <DateField source="published_at" />
diff --git a/examples/simple/src/posts/TagReferenceInput.js b/examples/simple/src/posts/TagReferenceInput.js
index 6e787893033..7f473d0f28b 100644
--- a/examples/simple/src/posts/TagReferenceInput.js
+++ b/examples/simple/src/posts/TagReferenceInput.js
@@ -31,7 +31,7 @@ const TagReferenceInput = ({ ...props }) => {
     return (
         <div className={classes.input}>
             <ReferenceArrayInput {...props} filter={{ published: filter }}>
-                <AutocompleteArrayInput />
+                <AutocompleteArrayInput optionText="name.en" />
             </ReferenceArrayInput>
             <Button
                 name="change-filter"
diff --git a/examples/simple/src/tags/TagCreate.js b/examples/simple/src/tags/TagCreate.js
index 6759e978ba2..08fcc1ad010 100644
--- a/examples/simple/src/tags/TagCreate.js
+++ b/examples/simple/src/tags/TagCreate.js
@@ -6,13 +6,16 @@ import {
     TextField,
     TextInput,
     required,
+    TranslatableInputs,
 } from 'react-admin';
 
 const TagCreate = props => (
     <Create {...props}>
         <SimpleForm redirect="list">
             <TextField source="id" />
-            <TextInput source="name" validate={[required()]} />
+            <TranslatableInputs languages={['en', 'fr']}>
+                <TextInput source="name" validate={[required()]} />
+            </TranslatableInputs>
         </SimpleForm>
     </Create>
 );
diff --git a/examples/simple/src/tags/TagEdit.js b/examples/simple/src/tags/TagEdit.js
index 1adf2848bf3..2ac7e376fa6 100644
--- a/examples/simple/src/tags/TagEdit.js
+++ b/examples/simple/src/tags/TagEdit.js
@@ -10,6 +10,7 @@ import {
     Datagrid,
     ResourceContextProvider,
     EditButton,
+    TranslatableInputs,
 } from 'react-admin';
 
 const TagEdit = props => (
@@ -17,7 +18,9 @@ const TagEdit = props => (
         <Edit {...props}>
             <SimpleForm redirect="list">
                 <TextField source="id" />
-                <TextInput source="name" validate={[required()]} />
+                <TranslatableInputs languages={['en', 'fr']}>
+                    <TextInput source="name" validate={[required()]} />
+                </TranslatableInputs>
             </SimpleForm>
         </Edit>
         <ResourceContextProvider resource="posts">
diff --git a/examples/simple/src/tags/TagList.js b/examples/simple/src/tags/TagList.js
index 4643ca0f169..c10d9ad0879 100644
--- a/examples/simple/src/tags/TagList.js
+++ b/examples/simple/src/tags/TagList.js
@@ -1,6 +1,12 @@
 import * as React from 'react';
 import { Fragment, useState } from 'react';
-import { ListBase, useListContext, EditButton, Title } from 'react-admin';
+import {
+    ListBase,
+    ListActions,
+    useListContext,
+    EditButton,
+    Title,
+} from 'react-admin';
 import {
     Box,
     List,
@@ -15,6 +21,7 @@ import ExpandMore from '@material-ui/icons/ExpandMore';
 
 const TagList = props => (
     <ListBase perPage={1000} {...props}>
+        <ListActions />
         <Box maxWidth="20em" marginTop="1em">
             <Card>
                 <Tree />
@@ -79,7 +86,7 @@ const SubTree = ({
                 {hasChildren && open && <ExpandLess />}
                 {hasChildren && !open && <ExpandMore />}
                 {!hasChildren && <div style={{ width: 24 }}>&nbsp;</div>}
-                <ListItemText primary={root.name} />
+                <ListItemText primary={root.name.en} />
 
                 <ListItemSecondaryAction>
                     <EditButton record={root} basePath="/tags" />
diff --git a/examples/simple/src/tags/TagShow.js b/examples/simple/src/tags/TagShow.js
index 5485189ba2c..34a9e7698d1 100644
--- a/examples/simple/src/tags/TagShow.js
+++ b/examples/simple/src/tags/TagShow.js
@@ -1,11 +1,18 @@
 import * as React from 'react';
-import { Show, SimpleShowLayout, TextField } from 'react-admin'; // eslint-disable-line import/no-unresolved
+import {
+    Show,
+    SimpleShowLayout,
+    TextField,
+    TranslatableFields,
+} from 'react-admin'; // eslint-disable-line import/no-unresolved
 
 const TagShow = props => (
     <Show {...props}>
         <SimpleShowLayout>
             <TextField source="id" />
-            <TextField source="name" />
+            <TranslatableFields languages={['en', 'fr']}>
+                <TextField source="name" />
+            </TranslatableFields>
         </SimpleShowLayout>
     </Show>
 );

From a8854ff8fa3dd672e9e18b133ebedc54d073e514 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Fri, 22 Jan 2021 14:33:21 +0100
Subject: [PATCH 03/27] Fix build

---
 packages/ra-ui-materialui/src/field/TranslatableFields.tsx  | 4 ++--
 .../src/field/TranslatableFieldsTabContent.tsx              | 6 +++---
 .../ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx   | 4 ++--
 packages/ra-ui-materialui/src/input/TranslatableInputs.tsx  | 4 ++--
 .../src/input/TranslatableInputsTabContent.tsx              | 4 ++--
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
index 35d8b096e5d..6ee7e0f94fa 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
@@ -106,14 +106,14 @@ export const TranslatableFields = (
 
 export interface TranslatableFieldsProps extends UseTranslatableOptions {
     basePath: string;
-    children: ReactNode | TranslatableRenderFunction;
+    children: ReactNode | TranslatableFieldRenderFunction;
     classes?: ClassesOverride<typeof useStyles>;
     record: Record;
     resource: string;
     selector?: ReactElement;
 }
 
-export type TranslatableRenderFunction = (
+export type TranslatableFieldRenderFunction = (
     context: TranslatableContextValue
 ) => ReactNode;
 
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
index 371229a88b7..ffb8f3d6032 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
@@ -16,7 +16,7 @@ import { Labeled } from '../input';
  * @see TranslatableFields
  */
 export const TranslatableFieldsTabContent = (
-    props: LanguageTabProps
+    props: TranslatableFieldsTabContentProps
 ): ReactElement => {
     const { basePath, children, locale, record, resource, ...other } = props;
     const {
@@ -66,10 +66,10 @@ export const TranslatableFieldsTabContent = (
     );
 };
 
-export type LanguageTabProps = {
+export type TranslatableFieldsTabContentProps = {
     basePath: string;
     children: ReactNode;
-    classes: ClassesOverride<typeof useStyles>;
+    classes?: ClassesOverride<typeof useStyles>;
     formGroupKeyPrefix?: string;
     locale: string;
     record: Record;
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx
index 1511e766def..2b062ad5c91 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx
@@ -12,7 +12,7 @@ import { AppBarProps } from '../layout';
  */
 export const TranslatableFieldsTabs = ({
     TabsProps: tabsProps,
-}: LanguagesTabsProps & AppBarProps): ReactElement => {
+}: TranslatableFieldsTabsProps & AppBarProps): ReactElement => {
     const {
         languages,
         selectLanguage,
@@ -42,6 +42,6 @@ export const TranslatableFieldsTabs = ({
     );
 };
 
-export interface LanguagesTabsProps {
+export interface TranslatableFieldsTabsProps {
     TabsProps?: TabsProps;
 }
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
index 8200cfd9395..c8e8c7c0356 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
@@ -95,10 +95,10 @@ export const TranslatableInputs = (props: TranslatableProps): ReactElement => {
 
 export interface TranslatableProps extends UseTranslatableOptions {
     selector?: ReactElement;
-    children: ReactNode | TranslatableRenderFunction;
+    children: ReactNode | TranslatableInputRenderFunction;
     formGroupKeyPrefix?: string;
 }
 
-export type TranslatableRenderFunction = (
+export type TranslatableInputRenderFunction = (
     context: TranslatableContextValue
 ) => ReactNode;
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
index e4908bfa3fa..c160289e619 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
@@ -15,7 +15,7 @@ import { ClassesOverride } from '../types';
  * @see TranslatableInputs
  */
 export const TranslatableInputsTabContent = (
-    props: LanguageTabProps
+    props: TranslatableInputsTabContentProps
 ): ReactElement => {
     const { children, formGroupKeyPrefix = '', locale, ...other } = props;
     const {
@@ -49,7 +49,7 @@ export const TranslatableInputsTabContent = (
     );
 };
 
-export type LanguageTabProps = {
+export type TranslatableInputsTabContentProps = {
     children: ReactNode;
     classes?: ClassesOverride<typeof useStyles>;
     formGroupKeyPrefix?: string;

From e7d54364b64c91adae2f42ce4bf80a0f8a584342 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Fri, 22 Jan 2021 15:07:01 +0100
Subject: [PATCH 04/27] Refactor and fix tabcontent accessibility

---
 .../ra-core/src/i18n/TranslatableContext.ts    |  2 +-
 packages/ra-core/src/i18n/useTranslatable.ts   |  2 +-
 .../ra-ui-materialui/src/field/TextField.tsx   |  1 -
 .../src/field/TranslatableFieldsTab.tsx        |  1 +
 .../src/field/TranslatableFieldsTabContent.tsx | 18 +++++++-----------
 .../src/input/TranslatableInputsTab.tsx        |  1 +
 .../src/input/TranslatableInputsTabContent.tsx | 14 +++++---------
 7 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/packages/ra-core/src/i18n/TranslatableContext.ts b/packages/ra-core/src/i18n/TranslatableContext.ts
index 9fd80b7621c..c3d0791d843 100644
--- a/packages/ra-core/src/i18n/TranslatableContext.ts
+++ b/packages/ra-core/src/i18n/TranslatableContext.ts
@@ -5,7 +5,7 @@ export const TranslatableContext = createContext<TranslatableContextValue>(
 );
 
 export interface TranslatableContextValue {
-    getInputLabel: GetTranslatableInputLabel;
+    getLabel: GetTranslatableInputLabel;
     getSource: GetTranslatableSource;
     languages: string[];
     selectedLanguage: string;
diff --git a/packages/ra-core/src/i18n/useTranslatable.ts b/packages/ra-core/src/i18n/useTranslatable.ts
index c265d5ebaf4..40fe468c26d 100644
--- a/packages/ra-core/src/i18n/useTranslatable.ts
+++ b/packages/ra-core/src/i18n/useTranslatable.ts
@@ -31,7 +31,7 @@ export const useTranslatable = (
         () => ({
             getSource: (source: string, locale: string = selectedLanguage) =>
                 `${source}.${locale}`,
-            getInputLabel: (source: string) => {
+            getLabel: (source: string) => {
                 return translate(
                     ...getFieldLabelTranslationArgs({
                         source,
diff --git a/packages/ra-ui-materialui/src/field/TextField.tsx b/packages/ra-ui-materialui/src/field/TextField.tsx
index 6e5097f9c0b..ea13e4fc4f8 100644
--- a/packages/ra-ui-materialui/src/field/TextField.tsx
+++ b/packages/ra-ui-materialui/src/field/TextField.tsx
@@ -9,7 +9,6 @@ import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
 const TextField: FC<TextFieldProps> = memo<TextFieldProps>(
     ({ className, source, record = {}, emptyText, ...rest }) => {
         const value = get(record, source);
-        console.log({ record, source });
 
         return (
             <Typography
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
index f27f2c30d53..3a646f366b9 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
@@ -15,6 +15,7 @@ export const TranslatableFieldsTab = (
 
     return (
         <Tab
+            id={`translatable-header-${locale}`}
             label={translate(`ra.languages.${locale}`, {
                 _: capitalize(locale),
             })}
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
index ffb8f3d6032..069724d37e1 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
@@ -19,19 +19,15 @@ export const TranslatableFieldsTabContent = (
     props: TranslatableFieldsTabContentProps
 ): ReactElement => {
     const { basePath, children, locale, record, resource, ...other } = props;
-    const {
-        selectedLanguage,
-        getInputLabel,
-        getSource,
-    } = useTranslatableContext();
+    const { selectedLanguage, getLabel, getSource } = useTranslatableContext();
     const classes = useStyles(props);
 
     return (
         <div
             role="tabpanel"
             hidden={selectedLanguage !== locale}
-            id={`translatable-${locale}`}
-            aria-labelledby={`translatable-${locale}`}
+            id={`translatable-content-${locale}`}
+            aria-labelledby={`translatable-header-${locale}`}
             className={classes.root}
             {...other}
         >
@@ -47,8 +43,8 @@ export const TranslatableFieldsTabContent = (
                     >
                         {cloneElement(field, {
                             ...field.props,
-                            label: getInputLabel(field.props.source),
-                            source: getSource(field.props.source),
+                            label: getLabel(field.props.source),
+                            source: getSource(field.props.source, locale),
                         })}
                     </Labeled>
                 ) : typeof field === 'string' ? (
@@ -57,8 +53,8 @@ export const TranslatableFieldsTabContent = (
                     isValidElement(field) &&
                     cloneElement(field, {
                         ...field.props,
-                        label: getInputLabel(field.props.source),
-                        source: getSource(field.props.source),
+                        label: getLabel(field.props.source),
+                        source: getSource(field.props.source, locale),
                     })
                 )
             )}
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
index 1f411524e64..a42250119c5 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
@@ -19,6 +19,7 @@ export const TranslatebleInputsTab = (
 
     return (
         <Tab
+            id={`translatable-header-${formGroupKeyPrefix}${locale}`}
             label={translate(`ra.languages.${locale}`, {
                 _: capitalize(locale),
             })}
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
index c160289e619..752f9d88805 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
@@ -18,11 +18,7 @@ export const TranslatableInputsTabContent = (
     props: TranslatableInputsTabContentProps
 ): ReactElement => {
     const { children, formGroupKeyPrefix = '', locale, ...other } = props;
-    const {
-        selectedLanguage,
-        getInputLabel,
-        getSource,
-    } = useTranslatableContext();
+    const { selectedLanguage, getLabel, getSource } = useTranslatableContext();
     const classes = useStyles(props);
 
     return (
@@ -30,8 +26,8 @@ export const TranslatableInputsTabContent = (
             <div
                 role="tabpanel"
                 hidden={selectedLanguage !== locale}
-                id={`translatable-${locale}`}
-                aria-labelledby={`translatable-${locale}`}
+                id={`translatable-content-${formGroupKeyPrefix}${locale}`}
+                aria-labelledby={`translatable-header-${formGroupKeyPrefix}${locale}`}
                 className={classes.root}
                 {...other}
             >
@@ -39,8 +35,8 @@ export const TranslatableInputsTabContent = (
                     isValidElement(child)
                         ? cloneElement(child, {
                               ...child.props,
-                              label: getInputLabel(child.props.source),
-                              source: getSource(child.props.source),
+                              label: getLabel(child.props.source),
+                              source: getSource(child.props.source, locale),
                           })
                         : null
                 )}

From 492f14423f6e3b30a788465fba4e16ab51fadff9 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Fri, 22 Jan 2021 15:07:14 +0100
Subject: [PATCH 05/27] Add TranslatableFields tests

---
 .../src/field/TranslatableFields.spec.tsx     | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx

diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
new file mode 100644
index 00000000000..469adf6199b
--- /dev/null
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import expect from 'expect';
+import { fireEvent, render } from '@testing-library/react';
+import { TranslatableFields } from './TranslatableFields';
+import TextField from './TextField';
+
+const record = {
+    id: 123,
+    name: {
+        en: 'english name',
+        fr: 'french name',
+    },
+    description: {
+        en: 'english description',
+        fr: 'french description',
+    },
+    nested: {
+        field: {
+            en: 'english nested field',
+            fr: 'french nested field',
+        },
+    },
+};
+
+describe('<TranslatableFields />', () => {
+    it('should render every field', () => {
+        const { queryByText, getByLabelText, getByText } = render(
+            <TranslatableFields
+                record={record}
+                resource="products"
+                basePath="/products"
+                languages={['en', 'fr']}
+            >
+                <TextField source="name" />
+                <TextField source="description" />
+                <TextField source="nested.field" />
+            </TranslatableFields>
+        );
+
+        expect(
+            getByLabelText('ra.languages.en').getAttribute('hidden')
+        ).toBeNull();
+        expect(
+            getByLabelText('ra.languages.fr').getAttribute('hidden')
+        ).toBeDefined();
+
+        expect(queryByText('english name')).not.toBeNull();
+        expect(queryByText('english description')).not.toBeNull();
+        expect(queryByText('english nested field')).not.toBeNull();
+
+        expect(queryByText('french name')).not.toBeNull();
+        expect(queryByText('french description')).not.toBeNull();
+        expect(queryByText('french nested field')).not.toBeNull();
+
+        fireEvent.click(getByText('ra.languages.fr'));
+        expect(
+            getByLabelText('ra.languages.en').getAttribute('hidden')
+        ).toBeDefined();
+        expect(
+            getByLabelText('ra.languages.fr').getAttribute('hidden')
+        ).toBeNull();
+    });
+});

From 8e26012815392f44fd5bb7b578130783593764a8 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Fri, 22 Jan 2021 15:24:42 +0100
Subject: [PATCH 06/27] Added TranslatableInputs tests

---
 .../src/field/TranslatableFields.spec.tsx     |   2 +-
 .../src/input/TranslatableInputs.spec.tsx     | 120 ++++++++++++++++++
 .../src/input/TranslatableInputs.tsx          |   2 +-
 3 files changed, 122 insertions(+), 2 deletions(-)
 create mode 100644 packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx

diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
index 469adf6199b..307cfce5222 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
@@ -23,7 +23,7 @@ const record = {
 };
 
 describe('<TranslatableFields />', () => {
-    it('should render every field', () => {
+    it('should render every fields for every languages', () => {
         const { queryByText, getByLabelText, getByText } = render(
             <TranslatableFields
                 record={record}
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
new file mode 100644
index 00000000000..aafbe2b82d2
--- /dev/null
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
@@ -0,0 +1,120 @@
+import * as React from 'react';
+import expect from 'expect';
+import { fireEvent } from '@testing-library/react';
+import { TranslatableInputs } from './TranslatableInputs';
+import TextInput from './TextInput';
+import { FormWithRedirect, renderWithRedux } from 'ra-core';
+
+const record = {
+    id: 123,
+    name: {
+        en: 'english name',
+        fr: 'french name',
+    },
+    description: {
+        en: 'english description',
+        fr: 'french description',
+    },
+    nested: {
+        field: {
+            en: 'english nested field',
+            fr: 'french nested field',
+        },
+    },
+};
+
+describe('<TranslatableInputs />', () => {
+    it('should display every inputs for every languages', () => {
+        const save = jest.fn();
+        const {
+            queryByDisplayValue,
+            getByLabelText,
+            getByText,
+        } = renderWithRedux(
+            <FormWithRedirect
+                record={record}
+                save={save}
+                render={() => (
+                    <TranslatableInputs languages={['en', 'fr']}>
+                        <TextInput source="name" />
+                        <TextInput source="description" />
+                        <TextInput source="nested.field" />
+                    </TranslatableInputs>
+                )}
+            />
+        );
+
+        expect(
+            getByLabelText('ra.languages.en').getAttribute('hidden')
+        ).toBeNull();
+        expect(
+            getByLabelText('ra.languages.fr').getAttribute('hidden')
+        ).toBeDefined();
+
+        expect(queryByDisplayValue('english name')).not.toBeNull();
+        expect(queryByDisplayValue('english description')).not.toBeNull();
+        expect(queryByDisplayValue('english nested field')).not.toBeNull();
+
+        expect(queryByDisplayValue('french name')).not.toBeNull();
+        expect(queryByDisplayValue('french description')).not.toBeNull();
+        expect(queryByDisplayValue('french nested field')).not.toBeNull();
+
+        fireEvent.click(getByText('ra.languages.fr'));
+        expect(
+            getByLabelText('ra.languages.en').getAttribute('hidden')
+        ).toBeDefined();
+        expect(
+            getByLabelText('ra.languages.fr').getAttribute('hidden')
+        ).toBeNull();
+    });
+
+    it('should allow to update any input for any language', () => {
+        const save = jest.fn();
+        const { queryByDisplayValue, getByText } = renderWithRedux(
+            <FormWithRedirect
+                record={record}
+                save={save}
+                render={({ handleSubmit }) => (
+                    <form onSubmit={handleSubmit}>
+                        <TranslatableInputs languages={['en', 'fr']}>
+                            <TextInput source="name" />
+                            <TextInput source="description" />
+                            <TextInput source="nested.field" />
+                        </TranslatableInputs>
+                        <button type="submit">save</button>
+                    </form>
+                )}
+            />
+        );
+
+        fireEvent.change(queryByDisplayValue('english name'), {
+            target: { value: 'english name updated' },
+        });
+        fireEvent.click(getByText('ra.languages.fr'));
+        fireEvent.change(queryByDisplayValue('french nested field'), {
+            target: { value: 'french nested field updated' },
+        });
+        fireEvent.click(getByText('save'));
+
+        expect(save).toHaveBeenCalledWith(
+            {
+                id: 123,
+                name: {
+                    en: 'english name updated',
+                    fr: 'french name',
+                },
+                description: {
+                    en: 'english description',
+                    fr: 'french description',
+                },
+                nested: {
+                    field: {
+                        en: 'english nested field',
+                        fr: 'french nested field updated',
+                    },
+                },
+            },
+            undefined
+        );
+    });
+});
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
index c8e8c7c0356..5ca53eb6885 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
@@ -67,7 +67,7 @@ export const TranslatableInputs = (props: TranslatableProps): ReactElement => {
     const {
         defaultLanguage = 'en',
         languages,
-        formGroupKeyPrefix,
+        formGroupKeyPrefix = '',
         selector = (
             <TranslatableInputsTabs formGroupKeyPrefix={formGroupKeyPrefix} />
         ),

From e9f7aa63b9c7b70bdf78e7e8c197fdd5eb39786b Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Fri, 22 Jan 2021 16:33:33 +0100
Subject: [PATCH 07/27] Add selector customization test for TranslatableFields

---
 .../src/field/TranslatableFields.spec.tsx     | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
index 307cfce5222..b40300c7b27 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
@@ -3,6 +3,7 @@ import expect from 'expect';
 import { fireEvent, render } from '@testing-library/react';
 import { TranslatableFields } from './TranslatableFields';
 import TextField from './TextField';
+import { useTranslatableContext } from 'ra-core';
 
 const record = {
     id: 123,
@@ -60,4 +61,68 @@ describe('<TranslatableFields />', () => {
             getByLabelText('ra.languages.fr').getAttribute('hidden')
         ).toBeNull();
     });
+
+    it('should allow to customize the language selector', () => {
+        const Selector = () => {
+            const {
+                languages,
+                selectLanguage,
+                selectedLanguage,
+            } = useTranslatableContext();
+
+            const handleChange = (event): void => {
+                console.log(event.target.value);
+                selectLanguage(event.target.value);
+            };
+
+            return (
+                <select
+                    aria-label="select language"
+                    onChange={handleChange}
+                    value={selectedLanguage}
+                >
+                    {languages.map(locale => (
+                        <option
+                            key={locale}
+                            value={locale}
+                            id={`translatable-header-${locale}`}
+                        >
+                            {locale}
+                        </option>
+                    ))}
+                </select>
+            );
+        };
+
+        const { queryByText, getByLabelText } = render(
+            <TranslatableFields
+                record={record}
+                resource="products"
+                basePath="/products"
+                languages={['en', 'fr']}
+                selector={<Selector />}
+            >
+                <TextField source="name" />
+                <TextField source="description" />
+                <TextField source="nested.field" />
+            </TranslatableFields>
+        );
+
+        expect(getByLabelText('en').getAttribute('hidden')).toBeNull();
+        expect(getByLabelText('fr').getAttribute('hidden')).toBeDefined();
+
+        expect(queryByText('english name')).not.toBeNull();
+        expect(queryByText('english description')).not.toBeNull();
+        expect(queryByText('english nested field')).not.toBeNull();
+
+        expect(queryByText('french name')).not.toBeNull();
+        expect(queryByText('french description')).not.toBeNull();
+        expect(queryByText('french nested field')).not.toBeNull();
+
+        fireEvent.change(getByLabelText('select language'), {
+            target: { value: 'fr' },
+        });
+        expect(getByLabelText('en').getAttribute('hidden')).toBeDefined();
+        expect(getByLabelText('fr').getAttribute('hidden')).toBeNull();
+    });
 });

From 715316dc99a8f768c87eb844655c48027e13cbd4 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Fri, 22 Jan 2021 17:09:38 +0100
Subject: [PATCH 08/27] Rename getLabel function type

---
 packages/ra-core/src/i18n/TranslatableContext.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ra-core/src/i18n/TranslatableContext.ts b/packages/ra-core/src/i18n/TranslatableContext.ts
index c3d0791d843..a869db29acf 100644
--- a/packages/ra-core/src/i18n/TranslatableContext.ts
+++ b/packages/ra-core/src/i18n/TranslatableContext.ts
@@ -5,7 +5,7 @@ export const TranslatableContext = createContext<TranslatableContextValue>(
 );
 
 export interface TranslatableContextValue {
-    getLabel: GetTranslatableInputLabel;
+    getLabel: GetTranslatableLabel;
     getSource: GetTranslatableSource;
     languages: string[];
     selectedLanguage: string;
@@ -16,5 +16,5 @@ export type GetTranslatableSource = (
     field: string,
     language?: string
 ) => string;
-export type GetTranslatableInputLabel = (field: string) => string;
+export type GetTranslatableLabel = (field: string) => string;
 export type SelectTranslatableLanguage = (language: string) => void;

From 04be2657fb001a3f5b1fedeb40bfc4a15df95d4e Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Fri, 22 Jan 2021 17:12:03 +0100
Subject: [PATCH 09/27] Remove children render function

---
 .../src/field/TranslatableFields.tsx          | 31 +++++++------------
 .../src/input/TranslatableInputs.tsx          | 27 ++++++----------
 2 files changed, 22 insertions(+), 36 deletions(-)

diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
index 6ee7e0f94fa..8e41df13034 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
@@ -3,7 +3,6 @@ import { ReactElement, ReactNode } from 'react';
 import {
     TranslatableContextProvider,
     useTranslatable,
-    TranslatableContextValue,
     UseTranslatableOptions,
     Record,
 } from 'ra-core';
@@ -86,19 +85,17 @@ export const TranslatableFields = (
         <div className={classes.root}>
             <TranslatableContextProvider value={context}>
                 {selector}
-                {typeof children === 'function'
-                    ? children(context)
-                    : languages.map(language => (
-                          <TranslatableFieldsTabContent
-                              key={language}
-                              basePath={basePath}
-                              locale={language}
-                              record={record}
-                              resource={resource}
-                          >
-                              {children}
-                          </TranslatableFieldsTabContent>
-                      ))}
+                {languages.map(language => (
+                    <TranslatableFieldsTabContent
+                        key={language}
+                        basePath={basePath}
+                        locale={language}
+                        record={record}
+                        resource={resource}
+                    >
+                        {children}
+                    </TranslatableFieldsTabContent>
+                ))}
             </TranslatableContextProvider>
         </div>
     );
@@ -106,17 +103,13 @@ export const TranslatableFields = (
 
 export interface TranslatableFieldsProps extends UseTranslatableOptions {
     basePath: string;
-    children: ReactNode | TranslatableFieldRenderFunction;
+    children: ReactNode;
     classes?: ClassesOverride<typeof useStyles>;
     record: Record;
     resource: string;
     selector?: ReactElement;
 }
 
-export type TranslatableFieldRenderFunction = (
-    context: TranslatableContextValue
-) => ReactNode;
-
 const useStyles = makeStyles(theme => ({
     root: {
         flexGrow: 1,
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
index 5ca53eb6885..546f1311d2b 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
@@ -3,7 +3,6 @@ import { ReactElement, ReactNode } from 'react';
 import {
     TranslatableContextProvider,
     useTranslatable,
-    TranslatableContextValue,
     UseTranslatableOptions,
 } from 'ra-core';
 import { TranslatableInputsTabs } from './TranslatableInputsTabs';
@@ -78,27 +77,21 @@ export const TranslatableInputs = (props: TranslatableProps): ReactElement => {
     return (
         <TranslatableContextProvider value={context}>
             {selector}
-            {typeof children === 'function'
-                ? children(context)
-                : languages.map(language => (
-                      <TranslatableInputsTabContent
-                          key={language}
-                          locale={language}
-                          formGroupKeyPrefix={formGroupKeyPrefix}
-                      >
-                          {children}
-                      </TranslatableInputsTabContent>
-                  ))}
+            {languages.map(language => (
+                <TranslatableInputsTabContent
+                    key={language}
+                    locale={language}
+                    formGroupKeyPrefix={formGroupKeyPrefix}
+                >
+                    {children}
+                </TranslatableInputsTabContent>
+            ))}
         </TranslatableContextProvider>
     );
 };
 
 export interface TranslatableProps extends UseTranslatableOptions {
     selector?: ReactElement;
-    children: ReactNode | TranslatableInputRenderFunction;
+    children: ReactNode;
     formGroupKeyPrefix?: string;
 }
-
-export type TranslatableInputRenderFunction = (
-    context: TranslatableContextValue
-) => ReactNode;

From de9042ab70fb0cea40cd2f1fb465c64ca716708a Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Fri, 22 Jan 2021 17:30:06 +0100
Subject: [PATCH 10/27] Use locale instead of language

---
 .../ra-core/src/i18n/TranslatableContext.ts   | 13 ++--
 packages/ra-core/src/i18n/useTranslatable.ts  | 28 ++++-----
 .../src/field/TranslatableFields.spec.tsx     | 34 +++++------
 .../src/field/TranslatableFields.tsx          | 58 +++++++-----------
 .../src/field/TranslatableFieldsTab.tsx       |  4 +-
 .../field/TranslatableFieldsTabContent.tsx    |  4 +-
 .../src/field/TranslatableFieldsTabs.tsx      | 20 ++-----
 .../src/input/TranslatableInputs.spec.tsx     | 20 +++----
 .../src/input/TranslatableInputs.tsx          | 60 +++++++------------
 .../src/input/TranslatableInputsTab.tsx       |  4 +-
 .../input/TranslatableInputsTabContent.tsx    |  4 +-
 .../src/input/TranslatableInputsTabs.tsx      | 20 ++-----
 12 files changed, 111 insertions(+), 158 deletions(-)

diff --git a/packages/ra-core/src/i18n/TranslatableContext.ts b/packages/ra-core/src/i18n/TranslatableContext.ts
index a869db29acf..bb3fed77657 100644
--- a/packages/ra-core/src/i18n/TranslatableContext.ts
+++ b/packages/ra-core/src/i18n/TranslatableContext.ts
@@ -7,14 +7,11 @@ export const TranslatableContext = createContext<TranslatableContextValue>(
 export interface TranslatableContextValue {
     getLabel: GetTranslatableLabel;
     getSource: GetTranslatableSource;
-    languages: string[];
-    selectedLanguage: string;
-    selectLanguage: SelectTranslatableLanguage;
+    locales: string[];
+    selectedLocale: string;
+    selectLocale: SelectTranslatableLocale;
 }
 
-export type GetTranslatableSource = (
-    field: string,
-    language?: string
-) => string;
+export type GetTranslatableSource = (field: string, locale?: string) => string;
 export type GetTranslatableLabel = (field: string) => string;
-export type SelectTranslatableLanguage = (language: string) => void;
+export type SelectTranslatableLocale = (locale: string) => void;
diff --git a/packages/ra-core/src/i18n/useTranslatable.ts b/packages/ra-core/src/i18n/useTranslatable.ts
index 40fe468c26d..d10e92a048c 100644
--- a/packages/ra-core/src/i18n/useTranslatable.ts
+++ b/packages/ra-core/src/i18n/useTranslatable.ts
@@ -8,28 +8,28 @@ import useTranslate from './useTranslate';
  * Hook supplying the logic to translate a field value in multiple languages.
  *
  * @param options The hook options
- * @param {string} options.defaultLanguage The locale of the default selected language. Defaults to 'en'.
- * @param {Language[]} options.languages An array of the supported languages. Each is an object with a locale and a name property. For example { locale: 'en', name: 'English' }.
+ * @param {string} options.defaultLocale The locale of the default selected locale. Defaults to 'en'.
+ * @param {strong[]} options.locales An array of the supported locales. Each is an object with a locale and a name property. For example { locale: 'en', name: 'English' }.
  *
  * @returns
  * An object with following properties and methods:
- * - selectedLanguage: The locale of the currently selected language
- * - languages: An array of the supported languages
+ * - selectedLocale: The locale of the currently selected locale
+ * - locales: An array of the supported locales
  * - getLabelInput: A function which returns the translated label for the given field
  * - getSource: A function which returns the source for the given field
- * - selectLanguage: A function which set the selected language
+ * - selectLocale: A function which set the selected locale
  */
 export const useTranslatable = (
     options: UseTranslatableOptions
 ): TranslatableContextValue => {
-    const { defaultLanguage = 'en', languages } = options;
-    const [selectedLanguage, setSelectedLanguage] = useState(defaultLanguage);
+    const { defaultLocale = 'en', locales } = options;
+    const [selectedLocale, setSelectedLocale] = useState(defaultLocale);
     const resource = useResourceContext({});
     const translate = useTranslate();
 
     const context = useMemo<TranslatableContextValue>(
         () => ({
-            getSource: (source: string, locale: string = selectedLanguage) =>
+            getSource: (source: string, locale: string = selectedLocale) =>
                 `${source}.${locale}`,
             getLabel: (source: string) => {
                 return translate(
@@ -40,17 +40,17 @@ export const useTranslatable = (
                     })
                 );
             },
-            languages,
-            selectedLanguage,
-            selectLanguage: setSelectedLanguage,
+            locales,
+            selectedLocale,
+            selectLocale: setSelectedLocale,
         }),
-        [languages, resource, selectedLanguage, translate]
+        [locales, resource, selectedLocale, translate]
     );
 
     return context;
 };
 
 export type UseTranslatableOptions = {
-    defaultLanguage?: string;
-    languages: string[];
+    defaultLocale?: string;
+    locales: string[];
 };
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
index b40300c7b27..8ac419e9433 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
@@ -24,13 +24,13 @@ const record = {
 };
 
 describe('<TranslatableFields />', () => {
-    it('should render every fields for every languages', () => {
+    it('should render every fields for every locales', () => {
         const { queryByText, getByLabelText, getByText } = render(
             <TranslatableFields
                 record={record}
                 resource="products"
                 basePath="/products"
-                languages={['en', 'fr']}
+                locales={['en', 'fr']}
             >
                 <TextField source="name" />
                 <TextField source="description" />
@@ -39,10 +39,10 @@ describe('<TranslatableFields />', () => {
         );
 
         expect(
-            getByLabelText('ra.languages.en').getAttribute('hidden')
+            getByLabelText('ra.locales.en').getAttribute('hidden')
         ).toBeNull();
         expect(
-            getByLabelText('ra.languages.fr').getAttribute('hidden')
+            getByLabelText('ra.locales.fr').getAttribute('hidden')
         ).toBeDefined();
 
         expect(queryByText('english name')).not.toBeNull();
@@ -53,35 +53,35 @@ describe('<TranslatableFields />', () => {
         expect(queryByText('french description')).not.toBeNull();
         expect(queryByText('french nested field')).not.toBeNull();
 
-        fireEvent.click(getByText('ra.languages.fr'));
+        fireEvent.click(getByText('ra.locales.fr'));
         expect(
-            getByLabelText('ra.languages.en').getAttribute('hidden')
+            getByLabelText('ra.locales.en').getAttribute('hidden')
         ).toBeDefined();
         expect(
-            getByLabelText('ra.languages.fr').getAttribute('hidden')
+            getByLabelText('ra.locales.fr').getAttribute('hidden')
         ).toBeNull();
     });
 
-    it('should allow to customize the language selector', () => {
+    it('should allow to customize the locale selector', () => {
         const Selector = () => {
             const {
-                languages,
-                selectLanguage,
-                selectedLanguage,
+                locales,
+                selectLocale,
+                selectedLocale,
             } = useTranslatableContext();
 
             const handleChange = (event): void => {
                 console.log(event.target.value);
-                selectLanguage(event.target.value);
+                selectLocale(event.target.value);
             };
 
             return (
                 <select
-                    aria-label="select language"
+                    aria-label="select locale"
                     onChange={handleChange}
-                    value={selectedLanguage}
+                    value={selectedLocale}
                 >
-                    {languages.map(locale => (
+                    {locales.map(locale => (
                         <option
                             key={locale}
                             value={locale}
@@ -99,7 +99,7 @@ describe('<TranslatableFields />', () => {
                 record={record}
                 resource="products"
                 basePath="/products"
-                languages={['en', 'fr']}
+                locales={['en', 'fr']}
                 selector={<Selector />}
             >
                 <TextField source="name" />
@@ -119,7 +119,7 @@ describe('<TranslatableFields />', () => {
         expect(queryByText('french description')).not.toBeNull();
         expect(queryByText('french nested field')).not.toBeNull();
 
-        fireEvent.change(getByLabelText('select language'), {
+        fireEvent.change(getByLabelText('select locale'), {
             target: { value: 'fr' },
         });
         expect(getByLabelText('en').getAttribute('hidden')).toBeDefined();
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
index 8e41df13034..f7d4ea5fc43 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
@@ -15,46 +15,32 @@ import { ClassesOverride } from '../types';
  * Provides a way to show multiple languages for any fields passed as children.
  *
  * @example <caption>Basic usage</caption>
- * <TranslatableFields
- *     languages={[
- *         { locale: 'en', name: 'English' }
- *         { locale: 'fr', name: 'Français' }
- *     ]}
- * >
- *     {({ getSource }) => (
- *         <>
- *             <TextField source={getSource('title')} />
- *             <TextField source={getSource('description')} />
- *         </>
- *     )}
+ * <TranslatableFields locales={['en', 'fr']}>
+ *     <TextField source={getSource('title')} />
+ *     <TextField source={getSource('description')} />
  * </TranslatableFields>
  *
  * @example <caption>With a custom language selector</caption>
  * <TranslatableFields
  *     selector={<MyLanguageSelector />}
- *     languages={[
- *         { locale: 'en', name: 'English' }
- *         { locale: 'fr', name: 'Français' }
- *     ]}
+ *     locales={['en', 'fr']}
  * >
- *     {({ getSource }) => (
- *         <TextField source={getSource('title')} />
- *     )}
+ *     <TextField source={getSource('title')} />
  * <TranslatableFields>
 >
  *
  * const MyLanguageSelector = () => {
  *     const {
- *         languages,
- *         selectedLanguage,
- *         selectLanguage,
- *     } = useTranslatable(availableLanguages, validate);
+ *         locales,
+ *         selectedLocale,
+ *         selectLocale,
+ *     } = useTranslatableContext();
  *
  *     return (
- *         <select onChange={selectLanguage}>
- *             {languages.map((language) => (
- *                 <option selected={language.locale === selectedLanguage}>
- *                     {language.name}
+ *         <select onChange={selectLocale}>
+ *             {locales.map((locale) => (
+ *                 <option selected={locale.locale === selectedLocale}>
+ *                     {locale.name}
  *                 </option>
  *             ))}
  *        </select>
@@ -62,34 +48,34 @@ import { ClassesOverride } from '../types';
  * }
  *
  * * @param props The component props
- * * @param {string} props.defaultLanguage The language selected by default (accept the language locale). Default to 'en'.
- * * @param {Language[]} props.languages An array of the possible languages in the form: `[{ locale: 'en', language: 'English' }].
- * * @param {ReactElement} props.selector The element responsible for selecting a language. Defaults to Material UI tabs.
+ * * @param {string} props.defaultLocale The locale selected by default. Default to 'en'.
+ * * @param {string[]} props.locales An array of the possible locales in the form. For example [{ 'en', 'fr' }].
+ * * @param {ReactElement} props.selector The element responsible for selecting a locale. Defaults to Material UI tabs.
  */
 export const TranslatableFields = (
     props: TranslatableFieldsProps
 ): ReactElement => {
     const {
-        defaultLanguage = 'en',
-        languages,
+        defaultLocale = 'en',
+        locales,
         selector = <TranslatableFieldsTabs />,
         children,
         record,
         resource,
         basePath,
     } = props;
-    const context = useTranslatable({ defaultLanguage, languages });
+    const context = useTranslatable({ defaultLocale, locales });
     const classes = useStyles(props);
 
     return (
         <div className={classes.root}>
             <TranslatableContextProvider value={context}>
                 {selector}
-                {languages.map(language => (
+                {locales.map(locale => (
                     <TranslatableFieldsTabContent
-                        key={language}
+                        key={locale}
                         basePath={basePath}
-                        locale={language}
+                        locale={locale}
                         record={record}
                         resource={resource}
                     >
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
index 3a646f366b9..b607f28dedd 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
@@ -4,7 +4,7 @@ import { useTranslate } from 'ra-core';
 import { capitalize } from 'inflection';
 
 /**
- * Single tab which select a language TranslatableFields component.
+ * Single tab which select a locale in a TranslatableFields component.
  * @see TranslatableFields
  */
 export const TranslatableFieldsTab = (
@@ -16,7 +16,7 @@ export const TranslatableFieldsTab = (
     return (
         <Tab
             id={`translatable-header-${locale}`}
-            label={translate(`ra.languages.${locale}`, {
+            label={translate(`ra.locales.${locale}`, {
                 _: capitalize(locale),
             })}
             {...rest}
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
index 069724d37e1..e61cc7254b3 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
@@ -19,13 +19,13 @@ export const TranslatableFieldsTabContent = (
     props: TranslatableFieldsTabContentProps
 ): ReactElement => {
     const { basePath, children, locale, record, resource, ...other } = props;
-    const { selectedLanguage, getLabel, getSource } = useTranslatableContext();
+    const { selectedLocale, getLabel, getSource } = useTranslatableContext();
     const classes = useStyles(props);
 
     return (
         <div
             role="tabpanel"
-            hidden={selectedLanguage !== locale}
+            hidden={selectedLocale !== locale}
             id={`translatable-content-${locale}`}
             aria-labelledby={`translatable-header-${locale}`}
             className={classes.root}
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx
index 2b062ad5c91..f971d0c5298 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx
@@ -7,30 +7,22 @@ import { TranslatableFieldsTab } from './TranslatableFieldsTab';
 import { AppBarProps } from '../layout';
 
 /**
- * Default language selector for the TranslatableFields component. Generates a tab for each specified language.
+ * Default locale selector for the TranslatableFields component. Generates a tab for each specified locale.
  * @see TranslatableFields
  */
 export const TranslatableFieldsTabs = ({
     TabsProps: tabsProps,
 }: TranslatableFieldsTabsProps & AppBarProps): ReactElement => {
-    const {
-        languages,
-        selectLanguage,
-        selectedLanguage,
-    } = useTranslatableContext();
+    const { locales, selectLocale, selectedLocale } = useTranslatableContext();
 
-    const handleChange = (event, newLanguage): void => {
-        selectLanguage(newLanguage);
+    const handleChange = (event, newLocale): void => {
+        selectLocale(newLocale);
     };
 
     return (
         <AppBar position="static">
-            <Tabs
-                value={selectedLanguage}
-                onChange={handleChange}
-                {...tabsProps}
-            >
-                {languages.map(locale => (
+            <Tabs value={selectedLocale} onChange={handleChange} {...tabsProps}>
+                {locales.map(locale => (
                     <TranslatableFieldsTab
                         key={locale}
                         value={locale}
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
index aafbe2b82d2..b588a98b297 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
@@ -24,7 +24,7 @@ const record = {
 };
 
 describe('<TranslatableInputs />', () => {
-    it('should display every inputs for every languages', () => {
+    it('should display every inputs for every locales', () => {
         const save = jest.fn();
         const {
             queryByDisplayValue,
@@ -35,7 +35,7 @@ describe('<TranslatableInputs />', () => {
                 record={record}
                 save={save}
                 render={() => (
-                    <TranslatableInputs languages={['en', 'fr']}>
+                    <TranslatableInputs locales={['en', 'fr']}>
                         <TextInput source="name" />
                         <TextInput source="description" />
                         <TextInput source="nested.field" />
@@ -45,10 +45,10 @@ describe('<TranslatableInputs />', () => {
         );
 
         expect(
-            getByLabelText('ra.languages.en').getAttribute('hidden')
+            getByLabelText('ra.locales.en').getAttribute('hidden')
         ).toBeNull();
         expect(
-            getByLabelText('ra.languages.fr').getAttribute('hidden')
+            getByLabelText('ra.locales.fr').getAttribute('hidden')
         ).toBeDefined();
 
         expect(queryByDisplayValue('english name')).not.toBeNull();
@@ -59,16 +59,16 @@ describe('<TranslatableInputs />', () => {
         expect(queryByDisplayValue('french description')).not.toBeNull();
         expect(queryByDisplayValue('french nested field')).not.toBeNull();
 
-        fireEvent.click(getByText('ra.languages.fr'));
+        fireEvent.click(getByText('ra.locales.fr'));
         expect(
-            getByLabelText('ra.languages.en').getAttribute('hidden')
+            getByLabelText('ra.locales.en').getAttribute('hidden')
         ).toBeDefined();
         expect(
-            getByLabelText('ra.languages.fr').getAttribute('hidden')
+            getByLabelText('ra.locales.fr').getAttribute('hidden')
         ).toBeNull();
     });
 
-    it('should allow to update any input for any language', () => {
+    it('should allow to update any input for any locale', () => {
         const save = jest.fn();
         const { queryByDisplayValue, getByText } = renderWithRedux(
             <FormWithRedirect
@@ -76,7 +76,7 @@ describe('<TranslatableInputs />', () => {
                 save={save}
                 render={({ handleSubmit }) => (
                     <form onSubmit={handleSubmit}>
-                        <TranslatableInputs languages={['en', 'fr']}>
+                        <TranslatableInputs locales={['en', 'fr']}>
                             <TextInput source="name" />
                             <TextInput source="description" />
                             <TextInput source="nested.field" />
@@ -90,7 +90,7 @@ describe('<TranslatableInputs />', () => {
         fireEvent.change(queryByDisplayValue('english name'), {
             target: { value: 'english name updated' },
         });
-        fireEvent.click(getByText('ra.languages.fr'));
+        fireEvent.click(getByText('ra.locales.fr'));
         fireEvent.change(queryByDisplayValue('french nested field'), {
             target: { value: 'french nested field updated' },
         });
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
index 546f1311d2b..c70759f6c7d 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
@@ -12,45 +12,31 @@ import { TranslatableInputsTabContent } from './TranslatableInputsTabContent';
  * Provides a way to edit multiple languages for any inputs passed as children.
  *
  * @example <caption>Basic usage</caption>
- * <Translatable
- *     languages={[
- *         { locale: 'en', name: 'English' }
- *         { locale: 'fr', name: 'Français' }
- *     ]}
- * >
- *     {({ getSource }) => (
- *         <>
- *             <TextInput source={getSource('title')} />
- *             <RichTextInput source={getSource('description')} />
- *         </>
- *     )}
+ * <TranslatableInputs locales={['en', 'fr']}>
+ *     <TextInput source="title" />
+ *     <RichTextInput source="description" />
  * </Translatable>
  *
  * @example <caption>With a custom language selector</caption>
- * <Translatable
+ * <TranslatableInputs
  *     selector={<MyLanguageSelector />}
- *     languages={[
- *         { locale: 'en', name: 'English' }
- *         { locale: 'fr', name: 'Français' }
- *     ]}
+ *     locales={['en', 'fr']}
  * >
- *     {({ getSource }) => (
- *         <TextInput source={getSource('title')} />
- *     )}
+ *     <TextInput source="title" />
  * </Translatable>
  *
  * const MyLanguageSelector = () => {
  *     const {
- *         languages,
- *         selectedLanguage,
- *         selectLanguage,
- *     } = useTranslatable(availableLanguages, validate);
+ *         locales,
+ *         selectedLocale,
+ *         selectLocale,
+ *     } = useTranslatableContext();
  *
  *     return (
- *         <select onChange={selectLanguage}>
- *             {languages.map((language) => (
- *                 <option selected={language.locale === selectedLanguage}>
- *                     {language.name}
+ *         <select onChange={event => selectLocale(event.target.value)}>
+ *             {locales.map((locale) => (
+ *                 <option selected={locale === selectedLocale}>
+ *                     {locale}
  *                 </option>
  *             ))}
  *        </select>
@@ -58,29 +44,29 @@ import { TranslatableInputsTabContent } from './TranslatableInputsTabContent';
  * }
  *
  * * @param props The component props
- * * @param {string} props.defaultLanguage The language selected by default (accept the language locale). Default to 'en'.
- * * @param {Language[]} props.languages An array of the possible languages in the form: `[{ locale: 'en', language: 'English' }].
- * * @param {ReactElement} props.selector The element responsible for selecting a language. Defaults to Material UI tabs.
+ * * @param {string} props.defaultLocale The locale selected by default. Default to 'en'.
+ * * @param {string[]} props.locales An array of the possible locales. For example: `['en', 'fr'].
+ * * @param {ReactElement} props.selector The element responsible for selecting a locale. Defaults to Material UI tabs.
  */
 export const TranslatableInputs = (props: TranslatableProps): ReactElement => {
     const {
-        defaultLanguage = 'en',
-        languages,
+        defaultLocale = 'en',
+        locales,
         formGroupKeyPrefix = '',
         selector = (
             <TranslatableInputsTabs formGroupKeyPrefix={formGroupKeyPrefix} />
         ),
         children,
     } = props;
-    const context = useTranslatable({ defaultLanguage, languages });
+    const context = useTranslatable({ defaultLocale, locales });
 
     return (
         <TranslatableContextProvider value={context}>
             {selector}
-            {languages.map(language => (
+            {locales.map(locale => (
                 <TranslatableInputsTabContent
-                    key={language}
-                    locale={language}
+                    key={locale}
+                    locale={locale}
                     formGroupKeyPrefix={formGroupKeyPrefix}
                 >
                     {children}
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
index a42250119c5..68ec0294245 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
@@ -6,7 +6,7 @@ import { ClassesOverride } from '../types';
 import { capitalize } from 'inflection';
 
 /**
- * Single tab which select a language TranslatableInputs component.
+ * Single tab which select a locale in a TranslatableInputs component.
  * @see TranslatableInputs
  */
 export const TranslatebleInputsTab = (
@@ -20,7 +20,7 @@ export const TranslatebleInputsTab = (
     return (
         <Tab
             id={`translatable-header-${formGroupKeyPrefix}${locale}`}
-            label={translate(`ra.languages.${locale}`, {
+            label={translate(`ra.locales.${locale}`, {
                 _: capitalize(locale),
             })}
             className={invalid ? classes.error : undefined}
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
index 752f9d88805..a5ffbc52004 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
@@ -18,14 +18,14 @@ export const TranslatableInputsTabContent = (
     props: TranslatableInputsTabContentProps
 ): ReactElement => {
     const { children, formGroupKeyPrefix = '', locale, ...other } = props;
-    const { selectedLanguage, getLabel, getSource } = useTranslatableContext();
+    const { selectedLocale, getLabel, getSource } = useTranslatableContext();
     const classes = useStyles(props);
 
     return (
         <FormGroupContextProvider name={`${formGroupKeyPrefix}${locale}`}>
             <div
                 role="tabpanel"
-                hidden={selectedLanguage !== locale}
+                hidden={selectedLocale !== locale}
                 id={`translatable-content-${formGroupKeyPrefix}${locale}`}
                 aria-labelledby={`translatable-header-${formGroupKeyPrefix}${locale}`}
                 className={classes.root}
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx
index 0552d7d2041..1cad4ccf38b 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx
@@ -7,31 +7,23 @@ import { TranslatebleInputsTab } from './TranslatableInputsTab';
 import { AppBarProps } from '../layout';
 
 /**
- * Default language selector for the TranslatableInputs component. Generates a tab for each specified language.
+ * Default locale selector for the TranslatableInputs component. Generates a tab for each specified locale.
  * @see TranslatableInputs
  */
 export const TranslatableInputsTabs = ({
     formGroupKeyPrefix,
     TabsProps: tabsProps,
 }: TranslatableInputsTabsProps & AppBarProps): ReactElement => {
-    const {
-        languages,
-        selectLanguage,
-        selectedLanguage,
-    } = useTranslatableContext();
+    const { locales, selectLocale, selectedLocale } = useTranslatableContext();
 
-    const handleChange = (event, newLanguage): void => {
-        selectLanguage(newLanguage);
+    const handleChange = (event, newLocale): void => {
+        selectLocale(newLocale);
     };
 
     return (
         <AppBar position="static">
-            <Tabs
-                value={selectedLanguage}
-                onChange={handleChange}
-                {...tabsProps}
-            >
-                {languages.map(locale => (
+            <Tabs value={selectedLocale} onChange={handleChange} {...tabsProps}>
+                {locales.map(locale => (
                     <TranslatebleInputsTab
                         key={locale}
                         value={locale}

From 14585db0f49b654cc956afeb0d43441b0f6aa19c Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Fri, 22 Jan 2021 17:49:56 +0100
Subject: [PATCH 11/27] Fix example

---
 examples/simple/src/tags/TagCreate.js | 2 +-
 examples/simple/src/tags/TagEdit.js   | 2 +-
 examples/simple/src/tags/TagShow.js   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/simple/src/tags/TagCreate.js b/examples/simple/src/tags/TagCreate.js
index 08fcc1ad010..38f54becce4 100644
--- a/examples/simple/src/tags/TagCreate.js
+++ b/examples/simple/src/tags/TagCreate.js
@@ -13,7 +13,7 @@ const TagCreate = props => (
     <Create {...props}>
         <SimpleForm redirect="list">
             <TextField source="id" />
-            <TranslatableInputs languages={['en', 'fr']}>
+            <TranslatableInputs locales={['en', 'fr']}>
                 <TextInput source="name" validate={[required()]} />
             </TranslatableInputs>
         </SimpleForm>
diff --git a/examples/simple/src/tags/TagEdit.js b/examples/simple/src/tags/TagEdit.js
index 2ac7e376fa6..f7e1a872dbe 100644
--- a/examples/simple/src/tags/TagEdit.js
+++ b/examples/simple/src/tags/TagEdit.js
@@ -18,7 +18,7 @@ const TagEdit = props => (
         <Edit {...props}>
             <SimpleForm redirect="list">
                 <TextField source="id" />
-                <TranslatableInputs languages={['en', 'fr']}>
+                <TranslatableInputs locales={['en', 'fr']}>
                     <TextInput source="name" validate={[required()]} />
                 </TranslatableInputs>
             </SimpleForm>
diff --git a/examples/simple/src/tags/TagShow.js b/examples/simple/src/tags/TagShow.js
index 34a9e7698d1..be90fe8bab4 100644
--- a/examples/simple/src/tags/TagShow.js
+++ b/examples/simple/src/tags/TagShow.js
@@ -10,7 +10,7 @@ const TagShow = props => (
     <Show {...props}>
         <SimpleShowLayout>
             <TextField source="id" />
-            <TranslatableFields languages={['en', 'fr']}>
+            <TranslatableFields locales={['en', 'fr']}>
                 <TextField source="name" />
             </TranslatableFields>
         </SimpleShowLayout>

From 6e4b7223f840415f0b8e292d01ddaa1f135b323c Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Fri, 22 Jan 2021 17:50:20 +0100
Subject: [PATCH 12/27] Introduce group prefix foe fields & ensure each field
 is wrapped in a div

---
 .../src/field/TranslatableFields.tsx          |  5 +-
 .../src/field/TranslatableFieldsTab.tsx       |  7 +-
 .../field/TranslatableFieldsTabContent.tsx    | 71 +++++++++++--------
 .../src/field/TranslatableFieldsTabs.tsx      |  3 +
 .../src/input/TranslatableInputsTab.tsx       |  2 +-
 5 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
index f7d4ea5fc43..cf88f6431c5 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
@@ -58,7 +58,8 @@ export const TranslatableFields = (
     const {
         defaultLocale = 'en',
         locales,
-        selector = <TranslatableFieldsTabs />,
+        groupPrefix = '',
+        selector = <TranslatableFieldsTabs groupPrefix={groupPrefix} />,
         children,
         record,
         resource,
@@ -78,6 +79,7 @@ export const TranslatableFields = (
                         locale={locale}
                         record={record}
                         resource={resource}
+                        groupPrefix={groupPrefix}
                     >
                         {children}
                     </TranslatableFieldsTabContent>
@@ -94,6 +96,7 @@ export interface TranslatableFieldsProps extends UseTranslatableOptions {
     record: Record;
     resource: string;
     selector?: ReactElement;
+    groupPrefix?: string;
 }
 
 const useStyles = makeStyles(theme => ({
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
index b607f28dedd..dabc41e1967 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
@@ -10,13 +10,13 @@ import { capitalize } from 'inflection';
 export const TranslatableFieldsTab = (
     props: TranslatableFieldsTabProps & TabProps
 ) => {
-    const { locale, ...rest } = props;
+    const { locale, groupPrefix = '', ...rest } = props;
     const translate = useTranslate();
 
     return (
         <Tab
-            id={`translatable-header-${locale}`}
-            label={translate(`ra.locales.${locale}`, {
+            id={`translatable-header-${groupPrefix}${locale}`}
+            label={translate(`ra.locales.${groupPrefix}${locale}`, {
                 _: capitalize(locale),
             })}
             {...rest}
@@ -26,4 +26,5 @@ export const TranslatableFieldsTab = (
 
 interface TranslatableFieldsTabProps {
     locale: string;
+    groupPrefix?: string;
 }
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
index e61cc7254b3..75096b2ef1d 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
@@ -18,7 +18,15 @@ import { Labeled } from '../input';
 export const TranslatableFieldsTabContent = (
     props: TranslatableFieldsTabContentProps
 ): ReactElement => {
-    const { basePath, children, locale, record, resource, ...other } = props;
+    const {
+        basePath,
+        children,
+        groupPrefix = '',
+        locale,
+        record,
+        resource,
+        ...other
+    } = props;
     const { selectedLocale, getLabel, getSource } = useTranslatableContext();
     const classes = useStyles(props);
 
@@ -26,37 +34,43 @@ export const TranslatableFieldsTabContent = (
         <div
             role="tabpanel"
             hidden={selectedLocale !== locale}
-            id={`translatable-content-${locale}`}
-            aria-labelledby={`translatable-header-${locale}`}
+            id={`translatable-content-${groupPrefix}${locale}`}
+            aria-labelledby={`translatable-header-${groupPrefix}${locale}`}
             className={classes.root}
             {...other}
         >
             {Children.map(children, field =>
-                isValidElement(field) && field.props.addLabel ? (
-                    <Labeled
-                        record={record}
-                        resource={resource}
-                        basePath={basePath}
-                        label={field.props.label}
-                        source={field.props.source}
-                        disabled={false}
-                    >
-                        {cloneElement(field, {
-                            ...field.props,
-                            label: getLabel(field.props.source),
-                            source: getSource(field.props.source, locale),
-                        })}
-                    </Labeled>
-                ) : typeof field === 'string' ? (
-                    field
-                ) : (
-                    isValidElement(field) &&
-                    cloneElement(field, {
-                        ...field.props,
-                        label: getLabel(field.props.source),
-                        source: getSource(field.props.source, locale),
-                    })
-                )
+                field && isValidElement<any>(field) ? (
+                    <div key={field.props.source}>
+                        {field.props.addLabel ? (
+                            <Labeled
+                                record={record}
+                                resource={resource}
+                                basePath={basePath}
+                                label={field.props.label}
+                                source={field.props.source}
+                                disabled={false}
+                            >
+                                {cloneElement(field, {
+                                    ...field.props,
+                                    label: getLabel(field.props.source),
+                                    source: getSource(
+                                        field.props.source,
+                                        locale
+                                    ),
+                                })}
+                            </Labeled>
+                        ) : typeof field === 'string' ? (
+                            field
+                        ) : (
+                            cloneElement(field, {
+                                ...field.props,
+                                label: getLabel(field.props.source),
+                                source: getSource(field.props.source, locale),
+                            })
+                        )}
+                    </div>
+                ) : null
             )}
         </div>
     );
@@ -67,6 +81,7 @@ export type TranslatableFieldsTabContentProps = {
     children: ReactNode;
     classes?: ClassesOverride<typeof useStyles>;
     formGroupKeyPrefix?: string;
+    groupPrefix: string;
     locale: string;
     record: Record;
     resource: string;
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx
index f971d0c5298..3a2e4cecb87 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx
@@ -11,6 +11,7 @@ import { AppBarProps } from '../layout';
  * @see TranslatableFields
  */
 export const TranslatableFieldsTabs = ({
+    groupPrefix,
     TabsProps: tabsProps,
 }: TranslatableFieldsTabsProps & AppBarProps): ReactElement => {
     const { locales, selectLocale, selectedLocale } = useTranslatableContext();
@@ -27,6 +28,7 @@ export const TranslatableFieldsTabs = ({
                         key={locale}
                         value={locale}
                         locale={locale}
+                        groupPrefix={groupPrefix}
                     />
                 ))}
             </Tabs>
@@ -36,4 +38,5 @@ export const TranslatableFieldsTabs = ({
 
 export interface TranslatableFieldsTabsProps {
     TabsProps?: TabsProps;
+    groupPrefix?: string;
 }
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
index 68ec0294245..fde089608bd 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
@@ -12,7 +12,7 @@ import { capitalize } from 'inflection';
 export const TranslatebleInputsTab = (
     props: TranslatebleInputsTabProps & TabProps
 ) => {
-    const { formGroupKeyPrefix, locale, ...rest } = props;
+    const { formGroupKeyPrefix = '', locale, ...rest } = props;
     const { invalid } = useFormGroup(`${formGroupKeyPrefix}${locale}`);
     const classes = useStyles(props);
     const translate = useTranslate();

From f91f9a7f4f7d416eb39d4f8600ec37dfb3ca3f51 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Mon, 25 Jan 2021 10:03:08 +0100
Subject: [PATCH 13/27] More tests

---
 .../src/field/TranslatableFields.spec.tsx     |  9 +--
 .../src/input/TranslatableInputs.spec.tsx     | 78 ++++++++++++++++++-
 2 files changed, 79 insertions(+), 8 deletions(-)

diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
index 8ac419e9433..96779c96a62 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
@@ -43,7 +43,7 @@ describe('<TranslatableFields />', () => {
         ).toBeNull();
         expect(
             getByLabelText('ra.locales.fr').getAttribute('hidden')
-        ).toBeDefined();
+        ).not.toBeNull();
 
         expect(queryByText('english name')).not.toBeNull();
         expect(queryByText('english description')).not.toBeNull();
@@ -56,7 +56,7 @@ describe('<TranslatableFields />', () => {
         fireEvent.click(getByText('ra.locales.fr'));
         expect(
             getByLabelText('ra.locales.en').getAttribute('hidden')
-        ).toBeDefined();
+        ).not.toBeNull();
         expect(
             getByLabelText('ra.locales.fr').getAttribute('hidden')
         ).toBeNull();
@@ -71,7 +71,6 @@ describe('<TranslatableFields />', () => {
             } = useTranslatableContext();
 
             const handleChange = (event): void => {
-                console.log(event.target.value);
                 selectLocale(event.target.value);
             };
 
@@ -109,7 +108,7 @@ describe('<TranslatableFields />', () => {
         );
 
         expect(getByLabelText('en').getAttribute('hidden')).toBeNull();
-        expect(getByLabelText('fr').getAttribute('hidden')).toBeDefined();
+        expect(getByLabelText('fr').getAttribute('hidden')).not.toBeNull();
 
         expect(queryByText('english name')).not.toBeNull();
         expect(queryByText('english description')).not.toBeNull();
@@ -122,7 +121,7 @@ describe('<TranslatableFields />', () => {
         fireEvent.change(getByLabelText('select locale'), {
             target: { value: 'fr' },
         });
-        expect(getByLabelText('en').getAttribute('hidden')).toBeDefined();
+        expect(getByLabelText('en').getAttribute('hidden')).not.toBeNull();
         expect(getByLabelText('fr').getAttribute('hidden')).toBeNull();
     });
 });
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
index b588a98b297..b6a14654440 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
@@ -3,7 +3,11 @@ import expect from 'expect';
 import { fireEvent } from '@testing-library/react';
 import { TranslatableInputs } from './TranslatableInputs';
 import TextInput from './TextInput';
-import { FormWithRedirect, renderWithRedux } from 'ra-core';
+import {
+    FormWithRedirect,
+    renderWithRedux,
+    useTranslatableContext,
+} from 'ra-core';
 
 const record = {
     id: 123,
@@ -49,7 +53,7 @@ describe('<TranslatableInputs />', () => {
         ).toBeNull();
         expect(
             getByLabelText('ra.locales.fr').getAttribute('hidden')
-        ).toBeDefined();
+        ).not.toBeNull();
 
         expect(queryByDisplayValue('english name')).not.toBeNull();
         expect(queryByDisplayValue('english description')).not.toBeNull();
@@ -62,7 +66,7 @@ describe('<TranslatableInputs />', () => {
         fireEvent.click(getByText('ra.locales.fr'));
         expect(
             getByLabelText('ra.locales.en').getAttribute('hidden')
-        ).toBeDefined();
+        ).not.toBeNull();
         expect(
             getByLabelText('ra.locales.fr').getAttribute('hidden')
         ).toBeNull();
@@ -117,4 +121,72 @@ describe('<TranslatableInputs />', () => {
             undefined
         );
     });
+
+    it('should allow to customize the locale selector', () => {
+        const Selector = () => {
+            const {
+                locales,
+                selectLocale,
+                selectedLocale,
+            } = useTranslatableContext();
+
+            const handleChange = (event): void => {
+                selectLocale(event.target.value);
+            };
+
+            return (
+                <select
+                    aria-label="select locale"
+                    onChange={handleChange}
+                    value={selectedLocale}
+                >
+                    {locales.map(locale => (
+                        <option
+                            key={locale}
+                            value={locale}
+                            id={`translatable-header-${locale}`}
+                        >
+                            {locale}
+                        </option>
+                    ))}
+                </select>
+            );
+        };
+
+        const { getByLabelText, queryByDisplayValue } = renderWithRedux(
+            <FormWithRedirect
+                record={record}
+                render={({ handleSubmit }) => (
+                    <form onSubmit={handleSubmit}>
+                        <TranslatableInputs
+                            locales={['en', 'fr']}
+                            selector={<Selector />}
+                        >
+                            <TextInput source="name" />
+                            <TextInput source="description" />
+                            <TextInput source="nested.field" />
+                        </TranslatableInputs>
+                        <button type="submit">save</button>
+                    </form>
+                )}
+            />
+        );
+
+        expect(getByLabelText('en').getAttribute('hidden')).toBeNull();
+        expect(getByLabelText('fr').getAttribute('hidden')).not.toBeNull();
+
+        expect(queryByDisplayValue('english name')).not.toBeNull();
+        expect(queryByDisplayValue('english description')).not.toBeNull();
+        expect(queryByDisplayValue('english nested field')).not.toBeNull();
+
+        expect(queryByDisplayValue('french name')).not.toBeNull();
+        expect(queryByDisplayValue('french description')).not.toBeNull();
+        expect(queryByDisplayValue('french nested field')).not.toBeNull();
+
+        fireEvent.change(getByLabelText('select locale'), {
+            target: { value: 'fr' },
+        });
+        expect(getByLabelText('en').getAttribute('hidden')).not.toBeNull();
+        expect(getByLabelText('fr').getAttribute('hidden')).toBeNull();
+    });
 });

From 186ac8b3a078238cfa9ce2f1f5d93bb108711ca4 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 26 Jan 2021 09:46:51 +0100
Subject: [PATCH 14/27] Uniformize group prefix as groupKey

---
 packages/ra-core/src/i18n/useTranslatable.ts         |  4 +++-
 .../src/field/TranslatableFields.tsx                 | 10 +++++-----
 .../src/field/TranslatableFieldsTab.tsx              |  8 ++++----
 .../src/field/TranslatableFieldsTabContent.tsx       |  8 ++++----
 .../src/field/TranslatableFieldsTabs.tsx             |  6 +++---
 .../src/input/TranslatableInputs.tsx                 | 12 +++++-------
 .../src/input/TranslatableInputsTab.tsx              |  8 ++++----
 .../src/input/TranslatableInputsTabContent.tsx       | 10 +++++-----
 .../src/input/TranslatableInputsTabs.tsx             |  6 +++---
 9 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/packages/ra-core/src/i18n/useTranslatable.ts b/packages/ra-core/src/i18n/useTranslatable.ts
index d10e92a048c..98afbab0b63 100644
--- a/packages/ra-core/src/i18n/useTranslatable.ts
+++ b/packages/ra-core/src/i18n/useTranslatable.ts
@@ -2,6 +2,7 @@ import { useState, useMemo } from 'react';
 import { useResourceContext } from '../core';
 import { getFieldLabelTranslationArgs } from '../util';
 import { TranslatableContextValue } from './TranslatableContext';
+import useLocale from './useLocale';
 import useTranslate from './useTranslate';
 
 /**
@@ -22,7 +23,8 @@ import useTranslate from './useTranslate';
 export const useTranslatable = (
     options: UseTranslatableOptions
 ): TranslatableContextValue => {
-    const { defaultLocale = 'en', locales } = options;
+    const localeFromUI = useLocale();
+    const { defaultLocale = localeFromUI, locales } = options;
     const [selectedLocale, setSelectedLocale] = useState(defaultLocale);
     const resource = useResourceContext({});
     const translate = useTranslate();
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
index cf88f6431c5..7e49ee6d25e 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
@@ -56,10 +56,10 @@ export const TranslatableFields = (
     props: TranslatableFieldsProps
 ): ReactElement => {
     const {
-        defaultLocale = 'en',
+        defaultLocale,
         locales,
-        groupPrefix = '',
-        selector = <TranslatableFieldsTabs groupPrefix={groupPrefix} />,
+        groupKey = '',
+        selector = <TranslatableFieldsTabs groupKey={groupKey} />,
         children,
         record,
         resource,
@@ -79,7 +79,7 @@ export const TranslatableFields = (
                         locale={locale}
                         record={record}
                         resource={resource}
-                        groupPrefix={groupPrefix}
+                        groupKey={groupKey}
                     >
                         {children}
                     </TranslatableFieldsTabContent>
@@ -96,7 +96,7 @@ export interface TranslatableFieldsProps extends UseTranslatableOptions {
     record: Record;
     resource: string;
     selector?: ReactElement;
-    groupPrefix?: string;
+    groupKey?: string;
 }
 
 const useStyles = makeStyles(theme => ({
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
index dabc41e1967..a129ac8bd9d 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
@@ -10,13 +10,13 @@ import { capitalize } from 'inflection';
 export const TranslatableFieldsTab = (
     props: TranslatableFieldsTabProps & TabProps
 ) => {
-    const { locale, groupPrefix = '', ...rest } = props;
+    const { locale, groupKey = '', ...rest } = props;
     const translate = useTranslate();
 
     return (
         <Tab
-            id={`translatable-header-${groupPrefix}${locale}`}
-            label={translate(`ra.locales.${groupPrefix}${locale}`, {
+            id={`translatable-header-${groupKey}${locale}`}
+            label={translate(`ra.locales.${groupKey}${locale}`, {
                 _: capitalize(locale),
             })}
             {...rest}
@@ -26,5 +26,5 @@ export const TranslatableFieldsTab = (
 
 interface TranslatableFieldsTabProps {
     locale: string;
-    groupPrefix?: string;
+    groupKey?: string;
 }
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
index 75096b2ef1d..7f930d55cb9 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
@@ -21,7 +21,7 @@ export const TranslatableFieldsTabContent = (
     const {
         basePath,
         children,
-        groupPrefix = '',
+        groupKey = '',
         locale,
         record,
         resource,
@@ -34,8 +34,8 @@ export const TranslatableFieldsTabContent = (
         <div
             role="tabpanel"
             hidden={selectedLocale !== locale}
-            id={`translatable-content-${groupPrefix}${locale}`}
-            aria-labelledby={`translatable-header-${groupPrefix}${locale}`}
+            id={`translatable-content-${groupKey}${locale}`}
+            aria-labelledby={`translatable-header-${groupKey}${locale}`}
             className={classes.root}
             {...other}
         >
@@ -81,7 +81,7 @@ export type TranslatableFieldsTabContentProps = {
     children: ReactNode;
     classes?: ClassesOverride<typeof useStyles>;
     formGroupKeyPrefix?: string;
-    groupPrefix: string;
+    groupKey: string;
     locale: string;
     record: Record;
     resource: string;
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx
index 3a2e4cecb87..05c93c8f055 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabs.tsx
@@ -11,7 +11,7 @@ import { AppBarProps } from '../layout';
  * @see TranslatableFields
  */
 export const TranslatableFieldsTabs = ({
-    groupPrefix,
+    groupKey,
     TabsProps: tabsProps,
 }: TranslatableFieldsTabsProps & AppBarProps): ReactElement => {
     const { locales, selectLocale, selectedLocale } = useTranslatableContext();
@@ -28,7 +28,7 @@ export const TranslatableFieldsTabs = ({
                         key={locale}
                         value={locale}
                         locale={locale}
-                        groupPrefix={groupPrefix}
+                        groupKey={groupKey}
                     />
                 ))}
             </Tabs>
@@ -38,5 +38,5 @@ export const TranslatableFieldsTabs = ({
 
 export interface TranslatableFieldsTabsProps {
     TabsProps?: TabsProps;
-    groupPrefix?: string;
+    groupKey?: string;
 }
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
index c70759f6c7d..758f873fae1 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
@@ -50,12 +50,10 @@ import { TranslatableInputsTabContent } from './TranslatableInputsTabContent';
  */
 export const TranslatableInputs = (props: TranslatableProps): ReactElement => {
     const {
-        defaultLocale = 'en',
+        defaultLocale,
         locales,
-        formGroupKeyPrefix = '',
-        selector = (
-            <TranslatableInputsTabs formGroupKeyPrefix={formGroupKeyPrefix} />
-        ),
+        groupKey = '',
+        selector = <TranslatableInputsTabs groupKey={groupKey} />,
         children,
     } = props;
     const context = useTranslatable({ defaultLocale, locales });
@@ -67,7 +65,7 @@ export const TranslatableInputs = (props: TranslatableProps): ReactElement => {
                 <TranslatableInputsTabContent
                     key={locale}
                     locale={locale}
-                    formGroupKeyPrefix={formGroupKeyPrefix}
+                    groupKey={groupKey}
                 >
                     {children}
                 </TranslatableInputsTabContent>
@@ -79,5 +77,5 @@ export const TranslatableInputs = (props: TranslatableProps): ReactElement => {
 export interface TranslatableProps extends UseTranslatableOptions {
     selector?: ReactElement;
     children: ReactNode;
-    formGroupKeyPrefix?: string;
+    groupKey?: string;
 }
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
index fde089608bd..486f63ddf5d 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
@@ -12,14 +12,14 @@ import { capitalize } from 'inflection';
 export const TranslatebleInputsTab = (
     props: TranslatebleInputsTabProps & TabProps
 ) => {
-    const { formGroupKeyPrefix = '', locale, ...rest } = props;
-    const { invalid } = useFormGroup(`${formGroupKeyPrefix}${locale}`);
+    const { groupKey = '', locale, ...rest } = props;
+    const { invalid } = useFormGroup(`${groupKey}${locale}`);
     const classes = useStyles(props);
     const translate = useTranslate();
 
     return (
         <Tab
-            id={`translatable-header-${formGroupKeyPrefix}${locale}`}
+            id={`translatable-header-${groupKey}${locale}`}
             label={translate(`ra.locales.${locale}`, {
                 _: capitalize(locale),
             })}
@@ -35,6 +35,6 @@ const useStyles = makeStyles(theme => ({
 
 interface TranslatebleInputsTabProps {
     classes?: ClassesOverride<typeof useStyles>;
-    formGroupKeyPrefix?: string;
+    groupKey?: string;
     locale: string;
 }
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
index a5ffbc52004..47f1b3204a6 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
@@ -17,17 +17,17 @@ import { ClassesOverride } from '../types';
 export const TranslatableInputsTabContent = (
     props: TranslatableInputsTabContentProps
 ): ReactElement => {
-    const { children, formGroupKeyPrefix = '', locale, ...other } = props;
+    const { children, groupKey = '', locale, ...other } = props;
     const { selectedLocale, getLabel, getSource } = useTranslatableContext();
     const classes = useStyles(props);
 
     return (
-        <FormGroupContextProvider name={`${formGroupKeyPrefix}${locale}`}>
+        <FormGroupContextProvider name={`${groupKey}${locale}`}>
             <div
                 role="tabpanel"
                 hidden={selectedLocale !== locale}
-                id={`translatable-content-${formGroupKeyPrefix}${locale}`}
-                aria-labelledby={`translatable-header-${formGroupKeyPrefix}${locale}`}
+                id={`translatable-content-${groupKey}${locale}`}
+                aria-labelledby={`translatable-header-${groupKey}${locale}`}
                 className={classes.root}
                 {...other}
             >
@@ -48,7 +48,7 @@ export const TranslatableInputsTabContent = (
 export type TranslatableInputsTabContentProps = {
     children: ReactNode;
     classes?: ClassesOverride<typeof useStyles>;
-    formGroupKeyPrefix?: string;
+    groupKey?: string;
     locale: string;
 };
 
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx
index 1cad4ccf38b..19a87a0f8b2 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx
@@ -11,7 +11,7 @@ import { AppBarProps } from '../layout';
  * @see TranslatableInputs
  */
 export const TranslatableInputsTabs = ({
-    formGroupKeyPrefix,
+    groupKey,
     TabsProps: tabsProps,
 }: TranslatableInputsTabsProps & AppBarProps): ReactElement => {
     const { locales, selectLocale, selectedLocale } = useTranslatableContext();
@@ -28,7 +28,7 @@ export const TranslatableInputsTabs = ({
                         key={locale}
                         value={locale}
                         locale={locale}
-                        formGroupKeyPrefix={formGroupKeyPrefix}
+                        groupKey={groupKey}
                     />
                 ))}
             </Tabs>
@@ -37,6 +37,6 @@ export const TranslatableInputsTabs = ({
 };
 
 export interface TranslatableInputsTabsProps {
-    formGroupKeyPrefix?: string;
+    groupKey?: string;
     TabsProps?: TabsProps;
 }

From 5ed5ce516ebb4f0f0843f1e91b598a4233b32208 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 26 Jan 2021 09:47:21 +0100
Subject: [PATCH 15/27] Update PostShow example to showcase dynamic display
 dependant on current locale

---
 examples/simple/src/posts/PostShow.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/examples/simple/src/posts/PostShow.js b/examples/simple/src/posts/PostShow.js
index 784a888becc..756715bd76f 100644
--- a/examples/simple/src/posts/PostShow.js
+++ b/examples/simple/src/posts/PostShow.js
@@ -20,6 +20,7 @@ import {
     TextField,
     UrlField,
     useShowController,
+    useLocale,
 } from 'react-admin';
 import { Link } from 'react-router-dom';
 import Button from '@material-ui/core/Button';
@@ -39,6 +40,7 @@ const CreateRelatedComment = ({ record }) => (
 
 const PostShow = props => {
     const controllerProps = useShowController(props);
+    const locale = useLocale();
     return (
         <ShowContextProvider value={controllerProps}>
             <ShowView title={<PostTitle />}>
@@ -70,10 +72,10 @@ const PostShow = props => {
                         <ReferenceArrayField
                             reference="tags"
                             source="tags"
-                            sort={{ field: 'name.en', order: 'ASC' }}
+                            sort={{ field: `name.${locale}`, order: 'ASC' }}
                         >
                             <SingleFieldList>
-                                <ChipField source="name.en" />
+                                <ChipField source={`name.${locale}`} />
                             </SingleFieldList>
                         </ReferenceArrayField>
                         <DateField source="published_at" />

From 85231cd78eba6a18244010576f2aee16fd2444d4 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 26 Jan 2021 09:47:40 +0100
Subject: [PATCH 16/27] Initial documentation

---
 docs/Fields.md | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++
 docs/Inputs.md | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 182 insertions(+)

diff --git a/docs/Fields.md b/docs/Fields.md
index fb9045d74be..fb819b29a5d 100644
--- a/docs/Fields.md
+++ b/docs/Fields.md
@@ -1106,6 +1106,97 @@ export const PostShow = (props) => (
 );
 ```
 
+## Translatable Fields
+
+You may have fields which are translated in multiple languages and want users to verify each translation. To display them, you can use the `<TranslatableFields>` components which expect the translatable fields to have the following structure:
+
+```js
+{
+    name: {
+        en: 'The english value',
+        fr: 'The french value',
+        tlh: 'The klingon value',
+    }
+}
+```
+
+This is how to use it:
+
+```jsx
+<TranslatableFields locales={['en', 'fr']}>
+    <TextField source="name">
+    <TextField source="description">
+</TranslatableFields>
+```
+
+You may override the locale selected by default using the `defaultLocale` prop which react-admin sets to the current UI locale when not provided.
+
+```jsx
+<TranslatableFields locales={['en', 'fr']} defaultLocale="fr">
+    <TextField source="name">
+    <TextField source="description">
+</TranslatableFields>
+```
+
+By default, `<TranslatableFields>` will allow users to select the displayed locale using Material-ui tabs with the locale code as their labels.
+
+You may override the tabs labels using translation keys following this format: 'ra.locales.locale_code'. For example `ra.locales.en` or `ra.locales.fr`.
+
+You may override the language selector using the `selector` prop which accept a React element:
+
+```jsx
+const Selector = () => {
+    const {
+        locales,
+        selectLocale,
+        selectedLocale,
+    } = useTranslatableContext();
+
+    const handleChange = (event): void => {
+        selectLocale(event.target.value);
+    };
+
+    return (
+        <select
+            aria-label="Select the locale"
+            onChange={handleChange}
+            value={selectedLocale}
+        >
+            {locales.map(locale => (
+                <option
+                    key={locale}
+                    value={locale}
+                    // This allows to correctly links the containers for each locale to their labels
+                    id={`translatable-header-${locale}`}
+                >
+                    {locale}
+                </option>
+            ))}
+        </select>
+    );
+};
+
+<TranslatableFields
+    record={record}
+    resource="products"
+    basePath="/products"
+    locales={['en', 'fr']}
+    selector={<Selector />}
+>
+    <TextField source="name" />
+    <TextField source="description" />
+</TranslatableFields>
+```
+
+If you have multiple `TranslatableFields` on the same page, you should specify a `groupKey` so that react-admin can create unique identifiers for accessibility.
+
+```jsx
+<TranslatableFields locales={['en', 'fr']} groupKey="essential-fields">
+    <TextField source="name">
+    <TextField source="description">
+</TranslatableFields>
+```
+
 ## Recipes
 
 ### Styling Fields
diff --git a/docs/Inputs.md b/docs/Inputs.md
index a9c8daa38ef..2ade7193f9a 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -1673,6 +1673,97 @@ export default ArtistEdit;
 
 Check [the `ra-relationships` documentation](https://marmelab.com/ra-enterprise/modules/ra-relationships#referencemanytomanyinput) for more details.
 
+## Translatable Inputs
+
+You may have inputs which are translated in multiple languages and want users to edit translations for each language separately. To display them, you can use the `<TranslatableInputs>` components which expect the translatable fields to have the following structure:
+
+```js
+{
+    name: {
+        en: 'The english value',
+        fr: 'The french value',
+        tlh: 'The klingon value',
+    }
+}
+```
+
+This is how to use it:
+
+```jsx
+<TranslatableInputs locales={['en', 'fr']}>
+    <TextInput source="name">
+    <RichTextInput source="description">
+</TranslatableInputs>
+```
+
+You may override the locale selected by default using the `defaultLocale` prop which react-admin sets to the current UI locale when not provided.
+
+```jsx
+<TranslatableInputs locales={['en', 'fr']} defaultLocale="fr">
+    <TextInput source="name">
+    <RichTextInput source="description">
+</TranslatableInputs>
+```
+
+By default, `<TranslatableInputs>` will allow users to select the displayed locale using Material-ui tabs with the locale code as their labels.
+
+You may override the tabs labels using translation keys following this format: 'ra.locales.locale_code'. For example `ra.locales.en` or `ra.locales.fr`.
+
+You may override the language selector using the `selector` prop which accept a React element:
+
+```jsx
+const Selector = () => {
+    const {
+        locales,
+        selectLocale,
+        selectedLocale,
+    } = useTranslatableContext();
+
+    const handleChange = (event): void => {
+        selectLocale(event.target.value);
+    };
+
+    return (
+        <select
+            aria-label="Select the locale"
+            onChange={handleChange}
+            value={selectedLocale}
+        >
+            {locales.map(locale => (
+                <option
+                    key={locale}
+                    value={locale}
+                    // This allows to correctly links the containers for each locale to their labels
+                    id={`translatable-header-${locale}`}
+                >
+                    {locale}
+                </option>
+            ))}
+        </select>
+    );
+};
+
+<TranslatableInputs
+    record={record}
+    resource="products"
+    basePath="/products"
+    locales={['en', 'fr']}
+    selector={<Selector />}
+>
+    <TextInput source="name" />
+    <RichTextInput source="description" />
+</TranslatableInputs>
+```
+
+If you have multiple `TranslatableInputs` on the same page, you should specify a `groupKey` so that react-admin can create unique identifiers for accessibility.
+
+```jsx
+<TranslatableInputs locales={['en', 'fr']} groupKey="essential-fields">
+    <TextInput source="name">
+    <RichTextInput source="description">
+</TranslatableInputs>
+```
+
 ## Recipes 
 
 ### Transforming Input Value to/from Record

From 2429b038b51ce072a7b1e57cee1e1a3df02bfc63 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 26 Jan 2021 10:43:18 +0100
Subject: [PATCH 17/27] Add note about displaying single translations

---
 docs/Fields.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/docs/Fields.md b/docs/Fields.md
index fb819b29a5d..09c75c3c12f 100644
--- a/docs/Fields.md
+++ b/docs/Fields.md
@@ -1197,6 +1197,41 @@ If you have multiple `TranslatableFields` on the same page, you should specify a
 </TranslatableFields>
 ```
 
+### Using Translatable Fields In List or Show views
+
+The `TranslatableFields` component is not meant to be used inside a `List` as you probably don't want to have tabs inside multiple lines. The simple solution to display a translatable value would be to specify its source like this: `name.en`. However, you may want to display its translation for the current admin locale.
+
+In this case, you'll have to get the current locale through the `useLocale` hook and set the translatable field `source` dynamically.
+
+```jsx
+const PostList = (props) => {
+    const locale = useLocale();
+
+    return (
+        <List {...props}>
+            <Datagrid>
+                <TextField source={`name.${locale}`}>
+                <ReferenceArrayField
+                    label="Tags"
+                    reference="tags"
+                    source="tags"
+                    sortBy="tags.name"
+                    sort={{ field: `name.${locale}`, order: 'ASC' }}
+                >
+                    <SingleFieldList>
+                        <ChipField source={`name.${locale}`} size="small" />
+                    </SingleFieldList>
+                </ReferenceArrayField>
+            </Datagrid>
+        </List>
+    )
+}
+```
+
+Note that you can't have an [optimized](https://marmelab.com/react-admin/List.html#performance) Datagrid when doing so as changing the locale wouldn't trigger a render of its children.
+
+The same pattern applise to show views when you don't want to display all translations: get the locale from the `useLocale` hook and dynamically set the `source` prop of the translatable fields.
+
 ## Recipes
 
 ### Styling Fields

From ca97d14dff22f305d3e872c44bffa99ffc3d40ca Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 26 Jan 2021 14:12:24 +0100
Subject: [PATCH 18/27] Apply suggestions from code review

Co-authored-by: Francois Zaninotto <francois@marmelab.com>
---
 docs/Fields.md                                       | 12 ++++++------
 docs/Inputs.md                                       |  8 ++++----
 .../src/field/TranslatableFields.spec.tsx            |  2 +-
 .../src/field/TranslatableFields.tsx                 |  2 +-
 .../src/field/TranslatableFieldsTab.tsx              |  2 +-
 .../src/input/TranslatableInputs.spec.tsx            |  2 +-
 .../src/input/TranslatableInputs.tsx                 |  2 +-
 .../src/input/TranslatableInputsTab.tsx              |  2 +-
 .../src/input/TranslatableInputsTabContent.tsx       |  2 +-
 9 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/docs/Fields.md b/docs/Fields.md
index 09c75c3c12f..a4513f9368b 100644
--- a/docs/Fields.md
+++ b/docs/Fields.md
@@ -1108,7 +1108,7 @@ export const PostShow = (props) => (
 
 ## Translatable Fields
 
-You may have fields which are translated in multiple languages and want users to verify each translation. To display them, you can use the `<TranslatableFields>` components which expect the translatable fields to have the following structure:
+You may have fields which are translated in multiple languages and want users to verify each translation. To display them, you can use the `<TranslatableFields>` component, which expects the translatable values to have the following structure:
 
 ```js
 {
@@ -1140,9 +1140,9 @@ You may override the locale selected by default using the `defaultLocale` prop w
 
 By default, `<TranslatableFields>` will allow users to select the displayed locale using Material-ui tabs with the locale code as their labels.
 
-You may override the tabs labels using translation keys following this format: 'ra.locales.locale_code'. For example `ra.locales.en` or `ra.locales.fr`.
+You may override the tabs labels using translation keys following this format: 'ra.locales.[locale_code]'. For instance, `ra.locales.en` or `ra.locales.fr`.
 
-You may override the language selector using the `selector` prop which accept a React element:
+You may override the language selector using the `selector` prop, which accepts a React element:
 
 ```jsx
 const Selector = () => {
@@ -1166,7 +1166,7 @@ const Selector = () => {
                 <option
                     key={locale}
                     value={locale}
-                    // This allows to correctly links the containers for each locale to their labels
+                    // This allows to correctly link the containers for each locale to their labels
                     id={`translatable-header-${locale}`}
                 >
                     {locale}
@@ -1228,9 +1228,9 @@ const PostList = (props) => {
 }
 ```
 
-Note that you can't have an [optimized](https://marmelab.com/react-admin/List.html#performance) Datagrid when doing so as changing the locale wouldn't trigger a render of its children.
+Note that you can't have an [optimized](https://marmelab.com/react-admin/List.html#performance) Datagrid when doing so, as changing the locale wouldn't trigger a render of its children.
 
-The same pattern applise to show views when you don't want to display all translations: get the locale from the `useLocale` hook and dynamically set the `source` prop of the translatable fields.
+The same pattern applies to show views when you don't want to display all translations: get the locale from the `useLocale` hook and dynamically set the `source` prop of the translatable fields.
 
 ## Recipes
 
diff --git a/docs/Inputs.md b/docs/Inputs.md
index 2ade7193f9a..3e74aa0963b 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -1675,7 +1675,7 @@ Check [the `ra-relationships` documentation](https://marmelab.com/ra-enterprise/
 
 ## Translatable Inputs
 
-You may have inputs which are translated in multiple languages and want users to edit translations for each language separately. To display them, you can use the `<TranslatableInputs>` components which expect the translatable fields to have the following structure:
+You may have inputs which are translated in multiple languages and want users to edit translations for each language separately. To display them, you can use the `<TranslatableInputs>` component, which expects the translatable values to have the following structure:
 
 ```js
 {
@@ -1707,9 +1707,9 @@ You may override the locale selected by default using the `defaultLocale` prop w
 
 By default, `<TranslatableInputs>` will allow users to select the displayed locale using Material-ui tabs with the locale code as their labels.
 
-You may override the tabs labels using translation keys following this format: 'ra.locales.locale_code'. For example `ra.locales.en` or `ra.locales.fr`.
+You may override the tabs labels using translation keys following this format: 'ra.locales.[locale_code]'. For instance, `ra.locales.en` or `ra.locales.fr`.
 
-You may override the language selector using the `selector` prop which accept a React element:
+You may override the language selector using the `selector` prop, which accepts a React element:
 
 ```jsx
 const Selector = () => {
@@ -1733,7 +1733,7 @@ const Selector = () => {
                 <option
                     key={locale}
                     value={locale}
-                    // This allows to correctly links the containers for each locale to their labels
+                    // This allows to correctly link the containers for each locale to their labels
                     id={`translatable-header-${locale}`}
                 >
                     {locale}
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
index 96779c96a62..ea47772ff8c 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.spec.tsx
@@ -24,7 +24,7 @@ const record = {
 };
 
 describe('<TranslatableFields />', () => {
-    it('should render every fields for every locales', () => {
+    it('should render every field for every locale', () => {
         const { queryByText, getByLabelText, getByText } = render(
             <TranslatableFields
                 record={record}
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
index 7e49ee6d25e..e4551c97e07 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
@@ -12,7 +12,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { ClassesOverride } from '../types';
 
 /**
- * Provides a way to show multiple languages for any fields passed as children.
+ * Provides a way to show multiple languages for any field passed as children.
  *
  * @example <caption>Basic usage</caption>
  * <TranslatableFields locales={['en', 'fr']}>
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
index a129ac8bd9d..d62d3f2dec3 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTab.tsx
@@ -4,7 +4,7 @@ import { useTranslate } from 'ra-core';
 import { capitalize } from 'inflection';
 
 /**
- * Single tab which select a locale in a TranslatableFields component.
+ * Single tab that selects a locale in a TranslatableFields component.
  * @see TranslatableFields
  */
 export const TranslatableFieldsTab = (
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
index b6a14654440..fe7d5e3e3e9 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
@@ -28,7 +28,7 @@ const record = {
 };
 
 describe('<TranslatableInputs />', () => {
-    it('should display every inputs for every locales', () => {
+    it('should display every input for every locale', () => {
         const save = jest.fn();
         const {
             queryByDisplayValue,
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
index 758f873fae1..af8e26f4369 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
@@ -9,7 +9,7 @@ import { TranslatableInputsTabs } from './TranslatableInputsTabs';
 import { TranslatableInputsTabContent } from './TranslatableInputsTabContent';
 
 /**
- * Provides a way to edit multiple languages for any inputs passed as children.
+ * Provides a way to edit multiple languages for any input passed as children.
  *
  * @example <caption>Basic usage</caption>
  * <TranslatableInputs locales={['en', 'fr']}>
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
index 486f63ddf5d..d473618b64f 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
@@ -6,7 +6,7 @@ import { ClassesOverride } from '../types';
 import { capitalize } from 'inflection';
 
 /**
- * Single tab which select a locale in a TranslatableInputs component.
+ * Single tab that selects a locale in a TranslatableInputs component.
  * @see TranslatableInputs
  */
 export const TranslatebleInputsTab = (
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
index 47f1b3204a6..3e6dba1d3c6 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
@@ -11,7 +11,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { ClassesOverride } from '../types';
 
 /**
- * Default container for a group of translatable inputs inside a TranslatableInputs components.
+ * Default container for a group of translatable inputs inside a TranslatableInputs component.
  * @see TranslatableInputs
  */
 export const TranslatableInputsTabContent = (

From 44f1ab701350dde64a8036fd20618518c00680c3 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 26 Jan 2021 15:21:01 +0100
Subject: [PATCH 19/27] Apply review on documentation

---
 docs/Fields.md                                   |  7 ++++++-
 docs/Inputs.md                                   | 16 +++++++++++++++-
 .../src/field/TranslatableFields.tsx             | 13 +++++++++++++
 .../src/input/TranslatableInputs.tsx             | 13 +++++++++++++
 4 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/docs/Fields.md b/docs/Fields.md
index a4513f9368b..a9b09cf7550 100644
--- a/docs/Fields.md
+++ b/docs/Fields.md
@@ -1116,6 +1116,11 @@ You may have fields which are translated in multiple languages and want users to
         en: 'The english value',
         fr: 'The french value',
         tlh: 'The klingon value',
+    },
+    description: {
+        en: 'The english value',
+        fr: 'The french value',
+        tlh: 'The klingon value',
     }
 }
 ```
@@ -1129,7 +1134,7 @@ This is how to use it:
 </TranslatableFields>
 ```
 
-You may override the locale selected by default using the `defaultLocale` prop which react-admin sets to the current UI locale when not provided.
+React-admin uses the user locale as the default locale in this field. You can override this setting using the `defaultLocale` prop.
 
 ```jsx
 <TranslatableFields locales={['en', 'fr']} defaultLocale="fr">
diff --git a/docs/Inputs.md b/docs/Inputs.md
index 3e74aa0963b..00c3fffe66b 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -1683,6 +1683,11 @@ You may have inputs which are translated in multiple languages and want users to
         en: 'The english value',
         fr: 'The french value',
         tlh: 'The klingon value',
+    },
+    description: {
+        en: 'The english value',
+        fr: 'The french value',
+        tlh: 'The klingon value',
     }
 }
 ```
@@ -1696,7 +1701,7 @@ This is how to use it:
 </TranslatableInputs>
 ```
 
-You may override the locale selected by default using the `defaultLocale` prop which react-admin sets to the current UI locale when not provided.
+React-admin uses the user locale as the default locale in this field. You can override this setting using the `defaultLocale` prop.
 
 ```jsx
 <TranslatableInputs locales={['en', 'fr']} defaultLocale="fr">
@@ -1764,6 +1769,15 @@ If you have multiple `TranslatableInputs` on the same page, you should specify a
 </TranslatableInputs>
 ```
 
+You can add validators to any of the inputs inside a `TranslatableInputs`. If an input has some validation error, the label of its parent tab will be highlighted as invalid:
+
+```jsx
+<TranslatableInputs locales={['en', 'fr']}>
+    <TextInput source="name" validate={[required()]}>
+    <RichTextInput source="description" validate={[maxLength(100)]}>
+</TranslatableInputs>
+```
+
 ## Recipes 
 
 ### Transforming Input Value to/from Record
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
index e4551c97e07..fc1a7952375 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
@@ -13,6 +13,19 @@ import { ClassesOverride } from '../types';
 
 /**
  * Provides a way to show multiple languages for any field passed as children.
+ * It expects the translatable values to have the following structure:
+ * { 
+ *     name: {
+ *         en: 'The english value',
+ *         fr: 'The french value',
+ *         tlh: 'The klingon value',
+ *     },
+ *     description: {
+ *         en: 'The english value',
+ *         fr: 'The french value',
+ *         tlh: 'The klingon value',
+ *     }
+ * }
  *
  * @example <caption>Basic usage</caption>
  * <TranslatableFields locales={['en', 'fr']}>
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
index af8e26f4369..9b128632986 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
@@ -10,6 +10,19 @@ import { TranslatableInputsTabContent } from './TranslatableInputsTabContent';
 
 /**
  * Provides a way to edit multiple languages for any input passed as children.
+ * It expects the translatable values to have the following structure:
+ * {
+ *     name: {
+ *         en: 'The english value',
+ *         fr: 'The french value',
+ *         tlh: 'The klingon value',
+ *     },
+ *     description: {
+ *         en: 'The english value',
+ *         fr: 'The french value',
+ *         tlh: 'The klingon value',
+ *     }
+ * }
  *
  * @example <caption>Basic usage</caption>
  * <TranslatableInputs locales={['en', 'fr']}>

From f2687ac6f4ab51f3d49211f3b2b9a4a7bc7e7b4f Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 26 Jan 2021 15:31:41 +0100
Subject: [PATCH 20/27] Ensure styles are overridable

---
 .../src/field/TranslatableFields.tsx          | 17 +++++---
 .../field/TranslatableFieldsTabContent.tsx    | 19 +++++----
 .../src/input/TranslatableInputs.tsx          | 40 +++++++++++++------
 .../src/input/TranslatableInputsTab.tsx       | 11 +++--
 .../input/TranslatableInputsTabContent.tsx    | 19 +++++----
 5 files changed, 71 insertions(+), 35 deletions(-)

diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
index fc1a7952375..aba933c12c0 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
@@ -112,9 +112,14 @@ export interface TranslatableFieldsProps extends UseTranslatableOptions {
     groupKey?: string;
 }
 
-const useStyles = makeStyles(theme => ({
-    root: {
-        flexGrow: 1,
-        backgroundColor: theme.palette.background.default,
-    },
-}));
+const useStyles = makeStyles(
+    theme => ({
+        root: {
+            flexGrow: 1,
+            backgroundColor: theme.palette.background.default,
+        },
+    }),
+    {
+        name: 'RaTranslatableFields',
+    }
+);
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
index 7f930d55cb9..bfc2a692383 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx
@@ -87,10 +87,15 @@ export type TranslatableFieldsTabContentProps = {
     resource: string;
 };
 
-const useStyles = makeStyles(theme => ({
-    root: {
-        flexGrow: 1,
-        padding: theme.spacing(1),
-        backgroundColor: theme.palette.background.default,
-    },
-}));
+const useStyles = makeStyles(
+    theme => ({
+        root: {
+            flexGrow: 1,
+            padding: theme.spacing(1),
+            backgroundColor: theme.palette.background.default,
+        },
+    }),
+    {
+        name: 'RaTranslatableFieldsTabContent',
+    }
+);
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
index 9b128632986..53a25df3016 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
@@ -7,6 +7,7 @@ import {
 } from 'ra-core';
 import { TranslatableInputsTabs } from './TranslatableInputsTabs';
 import { TranslatableInputsTabContent } from './TranslatableInputsTabContent';
+import { makeStyles } from '@material-ui/core/styles';
 
 /**
  * Provides a way to edit multiple languages for any input passed as children.
@@ -70,20 +71,23 @@ export const TranslatableInputs = (props: TranslatableProps): ReactElement => {
         children,
     } = props;
     const context = useTranslatable({ defaultLocale, locales });
+    const classes = useStyles(props);
 
     return (
-        <TranslatableContextProvider value={context}>
-            {selector}
-            {locales.map(locale => (
-                <TranslatableInputsTabContent
-                    key={locale}
-                    locale={locale}
-                    groupKey={groupKey}
-                >
-                    {children}
-                </TranslatableInputsTabContent>
-            ))}
-        </TranslatableContextProvider>
+        <div className={classes.root}>
+            <TranslatableContextProvider value={context}>
+                {selector}
+                {locales.map(locale => (
+                    <TranslatableInputsTabContent
+                        key={locale}
+                        locale={locale}
+                        groupKey={groupKey}
+                    >
+                        {children}
+                    </TranslatableInputsTabContent>
+                ))}
+            </TranslatableContextProvider>
+        </div>
     );
 };
 
@@ -92,3 +96,15 @@ export interface TranslatableProps extends UseTranslatableOptions {
     children: ReactNode;
     groupKey?: string;
 }
+
+const useStyles = makeStyles(
+    theme => ({
+        root: {
+            flexGrow: 1,
+            backgroundColor: theme.palette.background.default,
+        },
+    }),
+    {
+        name: 'RaTranslatableInputs',
+    }
+);
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
index d473618b64f..a9079c874f6 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
@@ -29,9 +29,14 @@ export const TranslatebleInputsTab = (
     );
 };
 
-const useStyles = makeStyles(theme => ({
-    error: { color: theme.palette.error.main },
-}));
+const useStyles = makeStyles(
+    theme => ({
+        error: { color: theme.palette.error.main },
+    }),
+    {
+        name: 'RaTranslatableInputsTab',
+    }
+);
 
 interface TranslatebleInputsTabProps {
     classes?: ClassesOverride<typeof useStyles>;
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
index 3e6dba1d3c6..7c384a845a0 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
@@ -52,10 +52,15 @@ export type TranslatableInputsTabContentProps = {
     locale: string;
 };
 
-const useStyles = makeStyles(theme => ({
-    root: {
-        flexGrow: 1,
-        padding: theme.spacing(1),
-        backgroundColor: theme.palette.background.default,
-    },
-}));
+const useStyles = makeStyles(
+    theme => ({
+        root: {
+            flexGrow: 1,
+            padding: theme.spacing(1),
+            backgroundColor: theme.palette.background.default,
+        },
+    }),
+    {
+        name: 'RaTranslatableInputsTabContent',
+    }
+);

From 7fb4b09f8589e6583765c72e029b00acbcaf7669 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 26 Jan 2021 16:21:04 +0100
Subject: [PATCH 21/27] Fix typo

---
 .../ra-ui-materialui/src/input/TranslatableInputsTab.tsx  | 8 ++++----
 .../ra-ui-materialui/src/input/TranslatableInputsTabs.tsx | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
index a9079c874f6..3cf297669b0 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
@@ -9,10 +9,10 @@ import { capitalize } from 'inflection';
  * Single tab that selects a locale in a TranslatableInputs component.
  * @see TranslatableInputs
  */
-export const TranslatebleInputsTab = (
-    props: TranslatebleInputsTabProps & TabProps
+export const TranslatableInputsTab = (
+    props: TranslatableInputsTabProps & TabProps
 ) => {
-    const { groupKey = '', locale, ...rest } = props;
+    const { groupKey = '', locale, classes: classesOverride, ...rest } = props;
     const { invalid } = useFormGroup(`${groupKey}${locale}`);
     const classes = useStyles(props);
     const translate = useTranslate();
@@ -38,7 +38,7 @@ const useStyles = makeStyles(
     }
 );
 
-interface TranslatebleInputsTabProps {
+interface TranslatableInputsTabProps {
     classes?: ClassesOverride<typeof useStyles>;
     groupKey?: string;
     locale: string;
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx
index 19a87a0f8b2..64ac9658c5b 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx
@@ -3,7 +3,7 @@ import { ReactElement } from 'react';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs, { TabsProps } from '@material-ui/core/Tabs';
 import { useTranslatableContext } from 'ra-core';
-import { TranslatebleInputsTab } from './TranslatableInputsTab';
+import { TranslatableInputsTab } from './TranslatableInputsTab';
 import { AppBarProps } from '../layout';
 
 /**
@@ -24,7 +24,7 @@ export const TranslatableInputsTabs = ({
         <AppBar position="static">
             <Tabs value={selectedLocale} onChange={handleChange} {...tabsProps}>
                 {locales.map(locale => (
-                    <TranslatebleInputsTab
+                    <TranslatableInputsTab
                         key={locale}
                         value={locale}
                         locale={locale}

From 08c56ade8f6b325b3df2a6de5cf519b41a04eaf6 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 26 Jan 2021 16:21:12 +0100
Subject: [PATCH 22/27] Add validation test

---
 .../src/input/TranslatableInputs.spec.tsx     | 79 +++++++++++++++++++
 1 file changed, 79 insertions(+)

diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
index fe7d5e3e3e9..308a855158c 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
@@ -6,8 +6,11 @@ import TextInput from './TextInput';
 import {
     FormWithRedirect,
     renderWithRedux,
+    required,
     useTranslatableContext,
 } from 'ra-core';
+import { TranslatableInputsTab } from './TranslatableInputsTab';
+import { Tabs } from '@material-ui/core';
 
 const record = {
     id: 123,
@@ -72,6 +75,82 @@ describe('<TranslatableInputs />', () => {
         ).toBeNull();
     });
 
+    it('should display validation errors and highlight the tab which has invalid inputs', () => {
+        const save = jest.fn();
+
+        const Selector = () => {
+            const {
+                locales,
+                selectLocale,
+                selectedLocale,
+            } = useTranslatableContext();
+
+            const handleChange = (event, newLocale): void => {
+                selectLocale(newLocale);
+            };
+
+            return (
+                <Tabs value={selectedLocale} onChange={handleChange}>
+                    {locales.map(locale => (
+                        <TranslatableInputsTab
+                            key={locale}
+                            value={locale}
+                            locale={locale}
+                            classes={{ error: 'error' }}
+                        />
+                    ))}
+                </Tabs>
+            );
+        };
+
+        const {
+            queryByText,
+            getByLabelText,
+            getAllByLabelText,
+            getByText,
+            getAllByRole,
+            debug,
+        } = renderWithRedux(
+            <FormWithRedirect
+                save={save}
+                render={() => (
+                    <TranslatableInputs
+                        locales={['en', 'fr']}
+                        selector={<Selector />}
+                    >
+                        <TextInput source="name" validate={required()} />
+                    </TranslatableInputs>
+                )}
+            />
+        );
+
+        expect(
+            getByLabelText('ra.locales.en').getAttribute('hidden')
+        ).toBeNull();
+        expect(
+            getByLabelText('ra.locales.fr').getAttribute('hidden')
+        ).not.toBeNull();
+
+        fireEvent.change(
+            getAllByLabelText('resources.undefined.fields.name *')[0],
+            {
+                target: { value: 'english value' },
+            }
+        );
+        fireEvent.click(getByText('ra.locales.fr'));
+        fireEvent.focus(
+            getAllByLabelText('resources.undefined.fields.name *')[1]
+        );
+        fireEvent.blur(
+            getAllByLabelText('resources.undefined.fields.name *')[1]
+        );
+        expect(queryByText('ra.validation.required')).not.toBeNull();
+        fireEvent.click(getByText('ra.locales.en'));
+        const tabs = getAllByRole('tab');
+        expect(tabs[1].getAttribute('id')).toEqual('translatable-header-fr');
+        expect(tabs[1].classList.contains('error')).toEqual(true);
+    });
+
     it('should allow to update any input for any locale', () => {
         const save = jest.fn();
         const { queryByDisplayValue, getByText } = renderWithRedux(

From fac67a20e54566f13cbbc84adf84f111e20b6a6e Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 26 Jan 2021 16:36:10 +0100
Subject: [PATCH 23/27] Documentation for useTranslatableContext

---
 .../src/i18n/useTranslatableContext.ts        | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/ra-core/src/i18n/useTranslatableContext.ts b/packages/ra-core/src/i18n/useTranslatableContext.ts
index 4364f84fc92..952f5732998 100644
--- a/packages/ra-core/src/i18n/useTranslatableContext.ts
+++ b/packages/ra-core/src/i18n/useTranslatableContext.ts
@@ -6,6 +6,32 @@ import {
 
 /**
  * Gives access to the current TranslatableContext.
+ *
+ * @example
+ * <TranslatableFields
+ *     selector={<MyLanguageSelector />}
+ *     locales={['en', 'fr']}
+ * >
+ *     <TextField source={getSource('title')} />
+ * <TranslatableFields>
+ *
+ * const MyLanguageSelector = () => {
+ *     const {
+ *         locales,
+ *         selectedLocale,
+ *         selectLocale,
+ *     } = useTranslatableContext();
+ *
+ *     return (
+ *         <select onChange={selectLocale}>
+ *             {locales.map((locale) => (
+ *                 <option selected={locale.locale === selectedLocale}>
+ *                     {locale.name}
+ *                 </option>
+ *             ))}
+ *        </select>
+ *     );
+ * }
  */
 export const useTranslatableContext = (): TranslatableContextValue => {
     const context = useContext(TranslatableContext);

From feedb0dee10b2010cefffdddd59943bda82bade7 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 26 Jan 2021 16:36:24 +0100
Subject: [PATCH 24/27] Documentation Fix display

---
 docs/Fields.md | 4 +++-
 docs/Inputs.md | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/Fields.md b/docs/Fields.md
index a9b09cf7550..c249f36a816 100644
--- a/docs/Fields.md
+++ b/docs/Fields.md
@@ -1145,7 +1145,7 @@ React-admin uses the user locale as the default locale in this field. You can ov
 
 By default, `<TranslatableFields>` will allow users to select the displayed locale using Material-ui tabs with the locale code as their labels.
 
-You may override the tabs labels using translation keys following this format: 'ra.locales.[locale_code]'. For instance, `ra.locales.en` or `ra.locales.fr`.
+You may override the tabs labels using translation keys following this format: `ra.locales.[locale_code]`. For instance, `ra.locales.en` or `ra.locales.fr`.
 
 You may override the language selector using the `selector` prop, which accepts a React element:
 
@@ -1208,6 +1208,7 @@ The `TranslatableFields` component is not meant to be used inside a `List` as yo
 
 In this case, you'll have to get the current locale through the `useLocale` hook and set the translatable field `source` dynamically.
 
+{% raw %}
 ```jsx
 const PostList = (props) => {
     const locale = useLocale();
@@ -1232,6 +1233,7 @@ const PostList = (props) => {
     )
 }
 ```
+{% endraw %}
 
 Note that you can't have an [optimized](https://marmelab.com/react-admin/List.html#performance) Datagrid when doing so, as changing the locale wouldn't trigger a render of its children.
 
diff --git a/docs/Inputs.md b/docs/Inputs.md
index 00c3fffe66b..d402964effa 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -1712,7 +1712,7 @@ React-admin uses the user locale as the default locale in this field. You can ov
 
 By default, `<TranslatableInputs>` will allow users to select the displayed locale using Material-ui tabs with the locale code as their labels.
 
-You may override the tabs labels using translation keys following this format: 'ra.locales.[locale_code]'. For instance, `ra.locales.en` or `ra.locales.fr`.
+You may override the tabs labels using translation keys following this format: `ra.locales.[locale_code]`. For instance, `ra.locales.en` or `ra.locales.fr`.
 
 You may override the language selector using the `selector` prop, which accepts a React element:
 

From b7942ad50915fbe4ad38c4be6800c415287198c2 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 26 Jan 2021 16:36:39 +0100
Subject: [PATCH 25/27] Add Section In Translation Documentation

---
 docs/Translation.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/docs/Translation.md b/docs/Translation.md
index b2fa0d0901a..1014fcc88d6 100644
--- a/docs/Translation.md
+++ b/docs/Translation.md
@@ -697,3 +697,24 @@ const i18nProvider = polyglotI18nProvider(locale =>
 **Tip**: Check [the Polyglot documentation](https://airbnb.io/polyglot.js/#options-overview) for a list of options you can pass to Polyglot at startup. 
 
 This solution is all-or-nothing: you can't silence only *some* missing translation warnings. An alternative solution consists of passing a default translation using the `_` translation option, as explained in the [Using Specific Polyglot Features section](#using-specific-polyglot-features) above. 
+
+## Translating Record Fields
+
+You may have fields which are translated in multiple languages and want users to see and edit each translation. To display them, you can use the [`<TranslatableFields>`](/Fields.html#translatable-fields) component. To allow their edition, you can use the [`<TranslatableInputs>`](/Inputs.html#translatable-inputs) component.
+
+They both expects the translatable values to have the following structure:
+
+```js
+{
+    name: {
+        en: 'The english value',
+        fr: 'The french value',
+        tlh: 'The klingon value',
+    },
+    description: {
+        en: 'The english value',
+        fr: 'The french value',
+        tlh: 'The klingon value',
+    }
+}
+```

From da4003f22830d664f390346a7d98dee1f275a8c1 Mon Sep 17 00:00:00 2001
From: Francois Zaninotto <francois@marmelab.com>
Date: Tue, 26 Jan 2021 18:12:04 +0100
Subject: [PATCH 26/27] Update Translation.md

---
 docs/Translation.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/Translation.md b/docs/Translation.md
index 1014fcc88d6..189e7154e0a 100644
--- a/docs/Translation.md
+++ b/docs/Translation.md
@@ -700,9 +700,12 @@ This solution is all-or-nothing: you can't silence only *some* missing translati
 
 ## Translating Record Fields
 
-You may have fields which are translated in multiple languages and want users to see and edit each translation. To display them, you can use the [`<TranslatableFields>`](/Fields.html#translatable-fields) component. To allow their edition, you can use the [`<TranslatableInputs>`](/Inputs.html#translatable-inputs) component.
+Some of your records may contain fields that are translated in multiple languages. It's common, in such cases, to offer an interface allowing admin users to see and edit each translation. React-admin provides 2 components for that:
 
-They both expects the translatable values to have the following structure:
+- To display translatable fields, use the [`<TranslatableFields>`](/Fields.html#translatable-fields) component
+- To edit translatable fields, use the [`<TranslatableInputs>`](/Inputs.html#translatable-inputs) component
+
+They both expect the translatable values to have the following structure:
 
 ```js
 {

From 74b79d4042c957898d8acf51a8361278f830ca3e Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Wed, 27 Jan 2021 09:05:13 +0100
Subject: [PATCH 27/27] Fix linter warning

---
 packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
index 308a855158c..1262d4a6e25 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputs.spec.tsx
@@ -109,7 +109,6 @@ describe('<TranslatableInputs />', () => {
             getAllByLabelText,
             getByText,
             getAllByRole,
-            debug,
         } = renderWithRedux(
             <FormWithRedirect
                 save={save}