[docs] Add some Selection-Controls TypeScript demos (#15408)

* Added Typescript Version for FormControlLabelPosition Componenet

* Added Typescript Version for RadioButtons Componenet

* Added Typescript Version for RadioButtonsGroup Componenet

* Add TypeScript demo for SwitchLabels componenet

* Add TypeScript demo for SwitchesGroup componenet

* any -> unknown

docs/src/pages/demos/selection-controls/FormControlLabelPosition.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormLabel from '@material-ui/core/FormLabel';
+
+function FormControlLabelPosition() {
+  const [value, setValue] = React.useState('female');
+
+  function handleChange(event: React.ChangeEvent<unknown>) {
+    setValue((event.target as HTMLInputElement).value);
+  }
+
+  return (
+    <FormControl component="fieldset">
+      <FormLabel component="legend">labelPlacement</FormLabel>
+      <RadioGroup aria-label="position" name="position" value={value} onChange={handleChange} row>
+        <FormControlLabel
+          value="top"
+          control={<Radio color="primary" />}
+          label="Top"
+          labelPlacement="top"
+        />
+        <FormControlLabel
+          value="start"
+          control={<Radio color="primary" />}
+          label="Start"
+          labelPlacement="start"
+        />
+        <FormControlLabel
+          value="bottom"
+          control={<Radio color="primary" />}
+          label="Bottom"
+          labelPlacement="bottom"
+        />
+        <FormControlLabel
+          value="end"
+          control={<Radio color="primary" />}
+          label="End"
+          labelPlacement="end"
+        />
+      </RadioGroup>
+    </FormControl>
+  );
+}
+
+export default FormControlLabelPosition;

docs/src/pages/demos/selection-controls/RadioButtons.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import green from '@material-ui/core/colors/green';
+import Radio, { RadioProps } from '@material-ui/core/Radio';
+import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
+import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
+
+const GreenRadio = withStyles({
+  root: {
+    '&:not($checked)': {
+      color: green[400],
+    },
+    '&$checked': {
+      color: green[600],
+    },
+  },
+  checked: {},
+})((props: RadioProps) => <Radio color="default" {...props} />);
+
+function RadioButtons() {
+  const [selectedValue, setSelectedValue] = React.useState('a');
+
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setSelectedValue(event.target.value);
+  }
+
+  return (
+    <div>
+      <Radio
+        checked={selectedValue === 'a'}
+        onChange={handleChange}
+        value="a"
+        name="radio-button-demo"
+        aria-label="A"
+      />
+      <Radio
+        checked={selectedValue === 'b'}
+        onChange={handleChange}
+        value="b"
+        name="radio-button-demo"
+        aria-label="B"
+      />
+      <GreenRadio
+        checked={selectedValue === 'c'}
+        onChange={handleChange}
+        value="c"
+        name="radio-button-demo"
+        aria-label="C"
+      />
+      <Radio
+        checked={selectedValue === 'd'}
+        onChange={handleChange}
+        value="d"
+        color="default"
+        name="radio-button-demo"
+        aria-label="D"
+      />
+      <Radio
+        checked={selectedValue === 'e'}
+        onChange={handleChange}
+        value="e"
+        color="default"
+        name="radio-button-demo"
+        aria-label="E"
+        icon={<RadioButtonUncheckedIcon fontSize="small" />}
+        checkedIcon={<RadioButtonCheckedIcon fontSize="small" />}
+      />
+    </div>
+  );
+}
+
+export default RadioButtons;

docs/src/pages/demos/selection-controls/RadioButtonsGroup.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormLabel from '@material-ui/core/FormLabel';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    display: 'flex',
+  },
+  formControl: {
+    margin: theme.spacing(3),
+  },
+  group: {
+    margin: theme.spacing(1, 0),
+  },
+}));
+
+function RadioButtonsGroup() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState('female');
+
+  function handleChange(event: React.ChangeEvent<unknown>) {
+    setValue((event.target as HTMLInputElement).value);
+  }
+
+  return (
+    <div className={classes.root}>
+      <FormControl component="fieldset" className={classes.formControl}>
+        <FormLabel component="legend">Gender</FormLabel>
+        <RadioGroup
+          aria-label="Gender"
+          name="gender1"
+          className={classes.group}
+          value={value}
+          onChange={handleChange}
+        >
+          <FormControlLabel value="female" control={<Radio />} label="Female" />
+          <FormControlLabel value="male" control={<Radio />} label="Male" />
+          <FormControlLabel value="other" control={<Radio />} label="Other" />
+          <FormControlLabel
+            value="disabled"
+            disabled
+            control={<Radio />}
+            label="(Disabled option)"
+          />
+        </RadioGroup>
+      </FormControl>
+      <FormControl component="fieldset" className={classes.formControl}>
+        <FormLabel component="legend">Gender</FormLabel>
+        <RadioGroup
+          aria-label="gender"
+          name="gender2"
+          className={classes.group}
+          value={value}
+          onChange={handleChange}
+        >
+          <FormControlLabel
+            value="female"
+            control={<Radio color="primary" />}
+            label="Female"
+            labelPlacement="start"
+          />
+          <FormControlLabel
+            value="male"
+            control={<Radio color="primary" />}
+            label="Male"
+            labelPlacement="start"
+          />
+          <FormControlLabel
+            value="other"
+            control={<Radio color="primary" />}
+            label="Other"
+            labelPlacement="start"
+          />
+          <FormControlLabel
+            value="disabled"
+            disabled
+            control={<Radio />}
+            label="(Disabled option)"
+            labelPlacement="start"
+          />
+        </RadioGroup>
+        <FormHelperText>labelPlacement start</FormHelperText>
+      </FormControl>
+    </div>
+  );
+}
+
+export default RadioButtonsGroup;

docs/src/pages/demos/selection-controls/SwitchLabels.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+
+function SwitchLabels() {
+  const [state, setState] = React.useState({
+    checkedA: true,
+    checkedB: true,
+  });
+
+  const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [name]: event.target.checked });
+  };
+
+  return (
+    <FormGroup row>
+      <FormControlLabel
+        control={
+          <Switch checked={state.checkedA} onChange={handleChange('checkedA')} value="checkedA" />
+        }
+        label="Secondary"
+      />
+      <FormControlLabel
+        control={
+          <Switch
+            checked={state.checkedB}
+            onChange={handleChange('checkedB')}
+            value="checkedB"
+            color="primary"
+          />
+        }
+        label="Primary"
+      />
+      <FormControlLabel control={<Switch value="checkedC" />} label="Uncontrolled" />
+      <FormControlLabel disabled control={<Switch value="checkedD" />} label="Disabled" />
+      <FormControlLabel disabled control={<Switch checked value="checkedE" />} label="Disabled" />
+    </FormGroup>
+  );
+}
+
+export default SwitchLabels;

docs/src/pages/demos/selection-controls/SwitchesGroup.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import Switch from '@material-ui/core/Switch';
+
+function SwitchesGroup() {
+  const [state, setState] = React.useState({
+    gilad: true,
+    jason: false,
+    antoine: true,
+  });
+
+  const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [name]: event.target.checked });
+  };
+
+  return (
+    <FormControl component="fieldset">
+      <FormLabel component="legend">Assign responsibility</FormLabel>
+      <FormGroup>
+        <FormControlLabel
+          control={<Switch checked={state.gilad} onChange={handleChange('gilad')} value="gilad" />}
+          label="Gilad Gray"
+        />
+        <FormControlLabel
+          control={<Switch checked={state.jason} onChange={handleChange('jason')} value="jason" />}
+          label="Jason Killian"
+        />
+        <FormControlLabel
+          control={
+            <Switch checked={state.antoine} onChange={handleChange('antoine')} value="antoine" />
+          }
+          label="Antoine Llorca"
+        />
+      </FormGroup>
+      <FormHelperText>Be careful</FormHelperText>
+    </FormControl>
+  );
+}
+
+export default SwitchesGroup;