From 88fa20f44b1a9933827789bf0460af3b3a86d2f5 Mon Sep 17 00:00:00 2001
From: kodai <33568829+kodai3@users.noreply.github.com>
Date: Mon, 27 Jul 2020 22:53:34 +0900
Subject: [PATCH] [docs] Add useRadioGroup section (#21910)

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
---
 .../components/radio-buttons/UseRadioGroup.js | 48 +++++++++++++++++++
 .../radio-buttons/UseRadioGroup.tsx           | 44 +++++++++++++++++
 .../components/radio-buttons/radio-buttons.md | 24 ++++++++++
 3 files changed, 116 insertions(+)
 create mode 100644 docs/src/pages/components/radio-buttons/UseRadioGroup.js
 create mode 100644 docs/src/pages/components/radio-buttons/UseRadioGroup.tsx

diff --git a/docs/src/pages/components/radio-buttons/UseRadioGroup.js b/docs/src/pages/components/radio-buttons/UseRadioGroup.js
new file mode 100644
index 00000000000000..d04ad417931d8f
--- /dev/null
+++ b/docs/src/pages/components/radio-buttons/UseRadioGroup.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import RadioGroup, { useRadioGroup } from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
+
+const useStyles = makeStyles((theme) => ({
+  labelChecked: {
+    color: theme.palette.secondary.main,
+  },
+}));
+
+function MyFormControlLabel(props) {
+  const classes = useStyles();
+  const radioGroup = useRadioGroup();
+
+  let checked = false;
+
+  if (radioGroup) {
+    checked = radioGroup.value === props.value;
+  }
+
+  return (
+    <FormControlLabel
+      classes={{
+        label: checked ? classes.labelChecked : '',
+      }}
+      {...props}
+    />
+  );
+}
+
+MyFormControlLabel.propTypes = {
+  /**
+   * The value of the component.
+   */
+  value: PropTypes.any,
+};
+
+export default function UseRadioGroup() {
+  return (
+    <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
new file mode 100644
index 00000000000000..18e4b295d7f77e
--- /dev/null
+++ b/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+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) =>
+  createStyles({
+    labelChecked: {
+      color: theme.palette.secondary.main,
+    },
+  }),
+);
+
+function MyFormControlLabel(props: FormControlLabelProps) {
+  const classes = useStyles();
+  const radioGroup = useRadioGroup();
+
+  let checked = false;
+
+  if (radioGroup) {
+    checked = radioGroup.value === props.value;
+  }
+
+  return (
+    <FormControlLabel
+      classes={{
+        label: checked ? classes.labelChecked : '',
+      }}
+      {...props}
+    />
+  );
+}
+
+export default function UseRadioGroup() {
+  return (
+    <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 7eab4299035cc0..9e815e64727754 100644
--- a/docs/src/pages/components/radio-buttons/radio-buttons.md
+++ b/docs/src/pages/components/radio-buttons/radio-buttons.md
@@ -45,6 +45,30 @@ Here is an example of customizing the component. You can learn more about this i
 
 {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}}
 
+## `useRadioGroup`
+
+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_):
+
+- `value.name` (_String_ [optional]): The name used to reference the value of the control.
+- `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
 
 - [Checkboxes vs. Radio Buttons](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/)