From 4519b74866e8ef73d189560edea5ce85b59189b3 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Mon, 2 Aug 2021 16:51:35 +0200
Subject: [PATCH] Reduce TranslatableInputs margin

---
 .../ra-ui-materialui/src/input/TranslatableInputs.tsx    | 7 ++++++-
 .../ra-ui-materialui/src/input/TranslatableInputsTab.tsx | 9 ++++++++-
 .../src/input/TranslatableInputsTabContent.tsx           | 5 ++++-
 .../src/input/TranslatableInputsTabs.tsx                 | 4 ++++
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
index b8b1e8e6b84..97c1f7a4163 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputs.tsx
+++ b/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;
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
index 9a48783ffb1..fe27899fb3d 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
+++ b/packages/ra-ui-materialui/src/input/TranslatableInputsTab.tsx
@@ -24,7 +24,9 @@ export const TranslatableInputsTab = (
             label={translate(`ra.locales.${locale}`, {
                 _: capitalize(locale),
             })}
-            className={invalid && touched ? classes.error : undefined}
+            className={`${classes.root} ${
+                invalid && touched ? classes.error : ''
+            }`}
             {...rest}
         />
     );
@@ -32,6 +34,11 @@ export const TranslatableInputsTab = (
 
 const useStyles = makeStyles(
     theme => ({
+        root: {
+            fontSize: '0.8em',
+            minHeight: theme.spacing(3),
+            minWidth: theme.spacing(6),
+        },
         error: { color: theme.palette.error.main },
     }),
     { name: 'RaTranslatableInputsTab' }
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
index b8e3d352890..d5ca649dede 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTabContent.tsx
+++ b/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,
diff --git a/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx b/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx
index 66ab6c26841..6c05f096dad 100644
--- a/packages/ra-ui-materialui/src/input/TranslatableInputsTabs.tsx
+++ b/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' }
 );