polish

mui · Jul 24, 2020 · 938e0b7 · 938e0b7
1 parent ccf466f
commit 938e0b7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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