Merge pull request #3974 from marmelab/Fix-radiobuttongroupinput-labe…

…l-size [RFR] Fix RadioButtonGroupInput label size
marmelab · Nov 14, 2019 · 58a170a · 58a170a
2 parents 7339e37 + e28580f
commit 58a170a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git 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
@@ -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,
@@ -104,7 +107,6 @@ export const RadioButtonGroupInput: FunctionComponent<
 
     const {
         id,
-        input,
         isRequired,
         meta: { error, touched },
     } = useInput({
@@ -122,7 +124,7 @@ export const RadioButtonGroupInput: FunctionComponent<
     return (
         <FormControl
             component="fieldset"
-            margin="normal"
+            margin={margin}
             error={touched && !!error}
             {...sanitizeRestProps(rest)}
         >
@@ -135,7 +137,7 @@ export const RadioButtonGroupInput: FunctionComponent<
                 />
             </FormLabel>
 
-            <RadioGroup id={id} {...input} {...options}>
+            <RadioGroup id={id} row={row} {...options}>
                 {choices.map(choice => (
                     <RadioButtonGroupInputItem
                         key={get(choice, optionValue)}
@@ -179,6 +181,7 @@ RadioButtonGroupInput.defaultProps = {
     options: {},
     optionText: 'name',
     optionValue: 'id',
+    row: true,
     translateChoice: true,
 };
 

diff --git 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} />}
         />
     );
 };