From 3fb109294b21450af258c4ea924f37d72025b2de Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Tue, 12 Nov 2019 22:31:05 +0100
Subject: [PATCH 1/2] Fix RadioButtonGroupInput label size

Closes #3955
---
 .../src/input/CheckboxGroupInput.tsx              |  5 +++--
 .../src/input/RadioButtonGroupInput.tsx           | 15 ++++++++++-----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
index f57b2399814..be5ea498e83 100644
--- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
+++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
@@ -23,7 +23,7 @@ const sanitizeRestProps = ({
 const useStyles = makeStyles(theme => ({
     root: {},
     label: {
-        transform: 'translate(0, 1.5px) scale(0.75)',
+        transform: 'translate(0, 8px) scale(0.75)',
         transformOrigin: `top ${theme.direction === 'ltr' ? 'left' : 'right'}`,
     },
 }));
@@ -97,6 +97,7 @@ const CheckboxGroupInput: FunctionComponent<
     format,
     helperText,
     label,
+    margin = 'dense',
     onBlur,
     onChange,
     onFocus,
@@ -154,7 +155,7 @@ const CheckboxGroupInput: FunctionComponent<
     return (
         <FormControl
             component="fieldset"
-            margin="normal"
+            margin={margin}
             error={touched && !!error}
             {...sanitizeRestProps(rest)}
         >
diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
index ebb838978d8..2ceba5bbcbc 100644
--- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
+++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
@@ -16,11 +16,12 @@ import sanitizeRestProps from './sanitizeRestProps';
 import InputHelperText from './InputHelperText';
 import RadioButtonGroupInputItem from './RadioButtonGroupInputItem';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
     label: {
-        position: 'relative',
+        transform: 'translate(0, 5px) scale(0.75)',
+        transformOrigin: `top ${theme.direction === 'ltr' ? 'left' : 'right'}`,
     },
-});
+}));
 
 /**
  * An Input component for a radio button group, using an array of objects for the options
@@ -87,6 +88,7 @@ export const RadioButtonGroupInput: FunctionComponent<
     format,
     helperText,
     label,
+    margin = 'dense',
     onBlur,
     onChange,
     onFocus,
@@ -95,6 +97,7 @@ export const RadioButtonGroupInput: FunctionComponent<
     optionValue,
     parse,
     resource,
+    row,
     source,
     translateChoice,
     validate,
@@ -115,6 +118,7 @@ export const RadioButtonGroupInput: FunctionComponent<
         parse,
         resource,
         source,
+        type: 'radio',
         validate,
         ...rest,
     });
@@ -122,7 +126,7 @@ export const RadioButtonGroupInput: FunctionComponent<
     return (
         <FormControl
             component="fieldset"
-            margin="normal"
+            margin={margin}
             error={touched && !!error}
             {...sanitizeRestProps(rest)}
         >
@@ -135,7 +139,7 @@ export const RadioButtonGroupInput: FunctionComponent<
                 />
             </FormLabel>
 
-            <RadioGroup id={id} {...input} {...options}>
+            <RadioGroup id={id} row={row} {...input} {...options}>
                 {choices.map(choice => (
                     <RadioButtonGroupInputItem
                         key={get(choice, optionValue)}
@@ -179,6 +183,7 @@ RadioButtonGroupInput.defaultProps = {
     options: {},
     optionText: 'name',
     optionValue: 'id',
+    row: true,
     translateChoice: true,
 };
 

From e28580fb5c601a5d55608e3bfc119181c035ed7e Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Wed, 13 Nov 2019 22:31:12 +0100
Subject: [PATCH 2/2] Fix RadioButtonGroupInput value binding

---
 .../src/input/RadioButtonGroupInput.tsx         |  4 +---
 .../src/input/RadioButtonGroupInputItem.tsx     | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
index 2ceba5bbcbc..e2ec097f990 100644
--- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
+++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
@@ -107,7 +107,6 @@ export const RadioButtonGroupInput: FunctionComponent<
 
     const {
         id,
-        input,
         isRequired,
         meta: { error, touched },
     } = useInput({
@@ -118,7 +117,6 @@ export const RadioButtonGroupInput: FunctionComponent<
         parse,
         resource,
         source,
-        type: 'radio',
         validate,
         ...rest,
     });
@@ -139,7 +137,7 @@ export const RadioButtonGroupInput: FunctionComponent<
                 />
             </FormLabel>
 
-            <RadioGroup id={id} row={row} {...input} {...options}>
+            <RadioGroup id={id} row={row} {...options}>
                 {choices.map(choice => (
                     <RadioButtonGroupInputItem
                         key={get(choice, optionValue)}
diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.tsx
index a9320e46f5f..3fbf345ebf0 100644
--- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.tsx
+++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useField } from 'react-final-form';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Radio from '@material-ui/core/Radio';
 import { useChoices } from 'ra-core';
@@ -15,16 +16,22 @@ const RadioButtonGroupInputItem = ({
         optionValue,
         translateChoice,
     });
+    const label = getChoiceText(choice);
+    const value = getChoiceValue(choice);
+    const {
+        input: { type, ...inputProps },
+    } = useField(source, {
+        type: 'radio',
+        value,
+    });
 
-    const choiceName = getChoiceText(choice);
-    const nodeId = `${source}_${getChoiceValue(choice)}`;
+    const nodeId = `${source}_${label}`;
 
     return (
         <FormControlLabel
+            label={label}
             htmlFor={nodeId}
-            value={getChoiceValue(choice)}
-            control={<Radio id={nodeId} color="primary" />}
-            label={choiceName}
+            control={<Radio id={nodeId} color="primary" {...inputProps} />}
         />
     );
 };