Add support for fullWitdh and sx prop to TranslatableInputs

packages/ra-ui-materialui/src/input/TranslatableInputs.stories.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
+import englishMessages from 'ra-language-english';
+
+import { AdminContext } from '../AdminContext';
+import { Create } from '../detail';
+import { SimpleForm } from '../form';
+import { TranslatableInputs } from './TranslatableInputs';
+import { FormInspector } from './common';
+import { TextInput } from './TextInput';
+
+export default { title: 'ra-ui-materialui/input/TranslatableInputs' };
+
+export const Basic = () => (
+    <Wrapper>
+        <TranslatableInputs locales={['en', 'fr']}>
+            <TextInput source="title" />
+            <TextInput source="description" />
+        </TranslatableInputs>
+    </Wrapper>
+);
+
+export const FullWidth = () => (
+    <Wrapper>
+        <TranslatableInputs locales={['en', 'fr']} fullWidth>
+            <TextInput source="title" />
+            <TextInput source="description" />
+        </TranslatableInputs>
+    </Wrapper>
+);
+
+const i18nProvider = polyglotI18nProvider(() => englishMessages);
+
+const Wrapper = ({ children }) => (
+    <AdminContext i18nProvider={i18nProvider}>
+        <Create resource="posts">
+            <SimpleForm>
+                {children}
+                <FormInspector name="published" />
+            </SimpleForm>
+        </Create>
+    </AdminContext>
+);

packages/ra-ui-materialui/src/input/TranslatableInputs.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import { SxProps, styled } from '@mui/material/styles';
 import { ReactElement, ReactNode } from 'react';
 import {
     TranslatableContextProvider,
@@ -8,6 +8,7 @@ import {
 } from 'ra-core';
 import { TranslatableInputsTabs } from './TranslatableInputsTabs';
 import { TranslatableInputsTabContent } from './TranslatableInputsTabContent';
+import clsx from 'clsx';
 
 /**
  * Provides a way to edit multiple languages for any input passed as children.
@@ -29,15 +30,15 @@ import { TranslatableInputsTabContent } from './TranslatableInputsTabContent';
  * <TranslatableInputs locales={['en', 'fr']}>
  *     <TextInput source="title" />
  *     <RichTextInput source="description" />
- * </Translatable>
+ * </TranslatableInputs>
  *
  * @example <caption>With a custom language selector</caption>
  * <TranslatableInputs
  *     selector={<MyLanguageSelector />}
  *     locales={['en', 'fr']}
  * >
  *     <TextInput source="title" />
- * </Translatable>
+ * </TranslatableInputs>
  *
  * const MyLanguageSelector = () => {
  *     const {
@@ -74,11 +75,17 @@ export const TranslatableInputs = (
         children,
         variant,
         margin,
+        sx,
     } = props;
     const context = useTranslatable({ defaultLocale, locales });
 
     return (
-        <Root className={className}>
+        <Root
+            className={clsx(className, TranslatableInputsClasses.root, {
+                [TranslatableInputsClasses.fullWidth]: props.fullWidth,
+            })}
+            sx={sx}
+        >
             <TranslatableContextProvider value={context}>
                 {selector}
                 {locales.map(locale => (
@@ -101,18 +108,28 @@ export interface TranslatableInputsProps extends UseTranslatableOptions {
     className?: string;
     selector?: ReactElement;
     children: ReactNode;
+    fullWidth?: boolean;
     groupKey?: string;
     margin?: 'none' | 'normal' | 'dense';
     variant?: 'standard' | 'outlined' | 'filled';
+    sx?: SxProps;
 }
 
 const PREFIX = 'RaTranslatableInputs';
 
+export const TranslatableInputsClasses = {
+    root: `${PREFIX}-root`,
+    fullWidth: `${PREFIX}-fullWidth`,
+};
 const Root = styled('div', {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
 })(({ theme }) => ({
     flexGrow: 1,
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(0.5),
+
+    [`&.${TranslatableInputsClasses.fullWidth}`]: {
+        width: '100%',
+    },
 }));