From 938e0b75fbff2cd17921d681e3603a72e870309e Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Fri, 24 Jul 2020 23:33:19 +0200
Subject: [PATCH] polish

---
 .../components/radio-buttons/UseRadioGroup.js |  9 +++----
 .../radio-buttons/UseRadioGroup.tsx           | 24 +++++++++----------
 .../components/radio-buttons/radio-buttons.md | 12 ++++++++--
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/docs/src/pages/components/radio-buttons/UseRadioGroup.js b/docs/src/pages/components/radio-buttons/UseRadioGroup.js
index 47d06a86086d03..d04ad417931d8f 100644
--- a/docs/src/pages/components/radio-buttons/UseRadioGroup.js
+++ b/docs/src/pages/components/radio-buttons/UseRadioGroup.js
@@ -8,14 +8,11 @@ import Radio from '@material-ui/core/Radio';
 const useStyles = makeStyles((theme) => ({
   labelChecked: {
     color: theme.palette.secondary.main,
-    fontWeight: 'bold',
-    textDecoration: 'underline',
   },
 }));
 
-const MyFormControlLabel = (props) => {
+function MyFormControlLabel(props) {
   const classes = useStyles();
-
   const radioGroup = useRadioGroup();
 
   let checked = false;
@@ -32,7 +29,7 @@ const MyFormControlLabel = (props) => {
       {...props}
     />
   );
-};
+}
 
 MyFormControlLabel.propTypes = {
   /**
@@ -43,7 +40,7 @@ MyFormControlLabel.propTypes = {
 
 export default function UseRadioGroup() {
   return (
-    <RadioGroup defaultValue="first">
+    <RadioGroup name="use-radio-group" defaultValue="first">
       <MyFormControlLabel value="first" label="First" control={<Radio />} />
       <MyFormControlLabel value="second" label="Second" control={<Radio />} />
     </RadioGroup>
diff --git a/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx b/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx
index 97e6b6b4ed9aaa..18e4b295d7f77e 100644
--- a/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx
+++ b/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx
@@ -1,22 +1,21 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
 import RadioGroup, { useRadioGroup } from '@material-ui/core/RadioGroup';
 import FormControlLabel, {
   FormControlLabelProps,
 } from '@material-ui/core/FormControlLabel';
 import Radio from '@material-ui/core/Radio';
 
-const useStyles = makeStyles((theme) => ({
-  labelChecked: {
-    color: theme.palette.secondary.main,
-    fontWeight: 'bold',
-    textDecoration: 'underline',
-  },
-}));
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    labelChecked: {
+      color: theme.palette.secondary.main,
+    },
+  }),
+);
 
-const MyFormControlLabel = (props: FormControlLabelProps) => {
+function MyFormControlLabel(props: FormControlLabelProps) {
   const classes = useStyles();
-
   const radioGroup = useRadioGroup();
 
   let checked = false;
@@ -33,13 +32,12 @@ const MyFormControlLabel = (props: FormControlLabelProps) => {
       {...props}
     />
   );
-};
+}
 
 export default function UseRadioGroup() {
   return (
-    <RadioGroup defaultValue="first">
+    <RadioGroup name="use-radio-group" defaultValue="first">
       <MyFormControlLabel value="first" label="First" control={<Radio />} />
-
       <MyFormControlLabel value="second" label="Second" control={<Radio />} />
     </RadioGroup>
   );
diff --git a/docs/src/pages/components/radio-buttons/radio-buttons.md b/docs/src/pages/components/radio-buttons/radio-buttons.md
index 67f12d9e2788d4..9e815e64727754 100644
--- a/docs/src/pages/components/radio-buttons/radio-buttons.md
+++ b/docs/src/pages/components/radio-buttons/radio-buttons.md
@@ -47,10 +47,16 @@ Here is an example of customizing the component. You can learn more about this i
 
 ## `useRadioGroup`
 
-For advanced customization use cases, we expose a `useRadioGroup()` hook.
-It returns the context value of RadioGroupContext.
+For advanced customization use cases, a `useRadioGroup()` hook is exposed.
+It returns the context value of the parent radio group.
 The Radio component uses this hook internally.
 
+### API
+
+```jsx
+import { useRadioGroup } from '@material-ui/core/RadioGroup';
+```
+
 #### Returns
 
 `value` (_Object_):
@@ -59,6 +65,8 @@ The Radio component uses this hook internally.
 - `value.onChange` (_Void_ [optional]): Callback fired when a radio button is selected.
 - `value.value` (_Any_ [optional]): Value of the selected radio button.
 
+#### Example
+
 {{"demo": "pages/components/radio-buttons/UseRadioGroup.js"}}
 
 ## When to use