Merge pull request #6484 from marmelab/concise-translatable-input

Reduce TranslatableInputs margin

Author: djhi

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

@@ -4,6 +4,7 @@ import {
     TranslatableContextProvider,
     useTranslatable,
     UseTranslatableOptions,
+    InputProps,
 } from 'ra-core';
 import { TranslatableInputsTabs } from './TranslatableInputsTabs';
 import { TranslatableInputsTabContent } from './TranslatableInputsTabContent';
@@ -69,6 +70,8 @@ export const TranslatableInputs = (props: TranslatableProps): ReactElement => {
         groupKey = '',
         selector = <TranslatableInputsTabs groupKey={groupKey} />,
         children,
+        variant,
+        margin,
     } = props;
     const context = useTranslatable({ defaultLocale, locales });
     const classes = useStyles(props);
@@ -82,6 +85,8 @@ export const TranslatableInputs = (props: TranslatableProps): ReactElement => {
                         key={locale}
                         locale={locale}
                         groupKey={groupKey}
+                        variant={variant}
+                        margin={margin}
                     >
                         {children}
                     </TranslatableInputsTabContent>
@@ -91,7 +96,7 @@ export const TranslatableInputs = (props: TranslatableProps): ReactElement => {
     );
 };
 
-export interface TranslatableProps extends UseTranslatableOptions {
+export interface TranslatableProps extends UseTranslatableOptions, InputProps {
     selector?: ReactElement;
     children: ReactNode;
     groupKey?: string;

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

@@ -24,14 +24,21 @@ export const TranslatableInputsTab = (
             label={translate(`ra.locales.${locale}`, {
                 _: capitalize(locale),
             })}
-            className={invalid && touched ? classes.error : undefined}
+            className={`${classes.root} ${
+                invalid && touched ? classes.error : ''
+            }`}
             {...rest}
         />
     );
 };
 
 const useStyles = makeStyles(
     theme => ({
+        root: {
+            fontSize: '0.8em',
+            minHeight: theme.spacing(3),
+            minWidth: theme.spacing(6),
+        },
         error: { color: theme.palette.error.main },
     }),
     { name: 'RaTranslatableInputsTab' }

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

@@ -90,7 +90,10 @@ const useStyles = makeStyles(
     theme => ({
         root: {
             flexGrow: 1,
-            padding: theme.spacing(2),
+            paddingLeft: theme.spacing(2),
+            paddingRight: theme.spacing(2),
+            paddingTop: theme.spacing(1),
+            paddingBottom: theme.spacing(1),
             borderRadius: 0,
             borderBottomLeftRadius: theme.shape.borderRadius,
             borderBottomRightRadius: theme.shape.borderRadius,

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

@@ -28,6 +28,7 @@ export const TranslatableInputsTabs = (
                 onChange={handleChange}
                 indicatorColor="primary"
                 textColor="primary"
+                className={classes.tabs}
                 {...tabsProps}
             >
                 {locales.map(locale => (
@@ -57,6 +58,9 @@ const useStyles = makeStyles(
             borderTopRightRadius: theme.shape.borderRadius,
             border: `1px solid ${theme.palette.divider}`,
         },
+        tabs: {
+            minHeight: theme.spacing(3),
+        },
     }),
     { name: 'RaTranslatableInputsTabs' }
 );