[SwitchBase] Fix ignoring disabled from FormControl

docs/pages/api/checkbox.md

@@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">checkedIcon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;CheckBoxIcon /></span> | The icon to display when the component is checked. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'default'</span> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
-| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the switch will be disabled. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the switch will be disabled. |
 | <span class="prop-name">disableRipple</span> | <span class="prop-type">bool</span> |  | If `true`, the ripple effect will be disabled. |
 | <span class="prop-name">icon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;CheckBoxOutlineBlankIcon /></span> | The icon to display when the component is unchecked. |
 | <span class="prop-name">id</span> | <span class="prop-type">string</span> |  | The id of the `input` element. |

docs/pages/api/radio.md

@@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">checkedIcon</span> | <span class="prop-type">node</span> |  | The icon to display when the component is checked. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'default'</span> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
-| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the switch will be disabled. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the switch will be disabled. |
 | <span class="prop-name">disableRipple</span> | <span class="prop-type">bool</span> |  | If `true`, the ripple effect will be disabled. |
 | <span class="prop-name">icon</span> | <span class="prop-type">node</span> |  | The icon to display when the component is unchecked. |
 | <span class="prop-name">id</span> | <span class="prop-type">string</span> |  | The id of the `input` element. |

docs/pages/api/switch.md

@@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">checkedIcon</span> | <span class="prop-type">node</span> |  | The icon to display when the component is checked. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'default'</span> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
-| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the switch will be disabled. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the switch will be disabled. |
 | <span class="prop-name">disableRipple</span> | <span class="prop-type">bool</span> |  | If `true`, the ripple effect will be disabled. |
 | <span class="prop-name">edge</span> | <span class="prop-type">'start'<br>&#124;&nbsp;'end'<br>&#124;&nbsp;false</span> | <span class="prop-default">false</span> | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). |
 | <span class="prop-name">icon</span> | <span class="prop-type">node</span> |  | The icon to display when the component is unchecked. |

framer/Material-UI.framerfx/code/Avatar.tsx

@@ -6,6 +6,7 @@ import MuiAvatar from '@material-ui/core/Avatar';
 import { Icon } from './Icon';
 
 interface Props {
+  variant?: 'circle' | 'rounded' | 'square';
   backgroundColor?: string;
   textColor?: string;
   icon?: string;
@@ -17,6 +18,7 @@ interface Props {
 }
 
 const defaultProps: Props = {
+  variant: 'circle',
   backgroundColor: '#4154af',
   textColor: undefined,
   icon: 'face',
@@ -52,6 +54,11 @@ export const Avatar: React.SFC<Props> = (props: Props) => {
 Avatar.defaultProps = defaultProps;
 
 addPropertyControls(Avatar, {
+  variant: {
+    type: ControlType.Enum,
+    title: 'Variant',
+    options: ['circle', 'rounded', 'square'],
+  },
   backgroundColor: {
     type: ControlType.Color,
     title: 'Background color',

framer/Material-UI.framerfx/code/Button.tsx

@@ -8,6 +8,7 @@ import { Icon } from './Icon';
 interface Props {
   color?: 'default' | 'inherit' | 'primary' | 'secondary';
   disabled?: boolean;
+  disableElevation?: boolean;
   endIcon?: string;
   fullWidth?: boolean;
   href?: string;
@@ -24,6 +25,7 @@ interface Props {
 const defaultProps: Props = {
   color: 'default',
   disabled: false,
+  disableElevation: false,
   endIcon: undefined,
   fullWidth: false,
   size: 'medium',
@@ -73,6 +75,10 @@ addPropertyControls(Button, {
     type: ControlType.Boolean,
     title: 'Disabled',
   },
+  disableElevation: {
+    type: ControlType.Boolean,
+    title: 'Disable elevation',
+  },
   endIcon: {
     type: ControlType.String,
     title: 'End icon',

framer/Material-UI.framerfx/code/Checkbox.tsx

@@ -8,7 +8,7 @@ import MuiCheckbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
 export function Checkbox(props) {
-  const { checked: checkedProp, label, onChange, ...other } = props;
+  const { checked: checkedProp, label, onChange, size, ...other } = props;
   // tslint:disable-next-line: ban-ts-ignore
   // @ts-ignore
 
@@ -27,7 +27,7 @@ export function Checkbox(props) {
     setChecked(checkedProp);
   }, [checkedProp]);
 
-  const control = <MuiCheckbox checked={checked} onChange={handleChange} />;
+  const control = <MuiCheckbox checked={checked} onChange={handleChange} size={size} />;
 
   return <FormControlLabel control={control} label={label} {...other} />;
 }
@@ -36,6 +36,7 @@ Checkbox.defaultProps = {
   checked: false,
   color: 'secondary',
   disabled: false,
+  size: 'medium',
   label: 'Checkbox',
   width: 100,
   height: 42,
@@ -55,6 +56,11 @@ addPropertyControls(Checkbox, {
     type: ControlType.Boolean,
     title: 'Disabled',
   },
+  size: {
+    type: ControlType.Enum,
+    title: 'Size',
+    options: ['small', 'medium'],
+  },
   label: {
     type: ControlType.String,
     title: 'Label',

framer/Material-UI.framerfx/code/Paper.tsx

@@ -7,13 +7,15 @@ import MuiPaper from '@material-ui/core/Paper';
 interface Props {
   elevation?: number;
   square?: boolean;
+  variant?: 'elevation' | 'outlined';
   width?: number;
   height?: number;
 }
 
 const defaultProps: Props = {
   elevation: 2,
   square: false,
+  variant: 'elevation',
   width: 100,
   height: 100,
 };
@@ -37,4 +39,9 @@ addPropertyControls(Paper, {
     type: ControlType.Boolean,
     title: 'Square',
   },
+  variant: {
+    type: ControlType.Enum,
+    title: 'Variant',
+    options: ['elevation', 'outlined'],
+  },
 });

framer/Material-UI.framerfx/code/Radio.tsx

@@ -10,20 +10,22 @@ import MuiRadio from '@material-ui/core/Radio';
 interface Props {
   color?: 'primary' | 'secondary' | 'default';
   disabled?: boolean;
+  size?: 'small' | 'medium';
   label?: string;
   width?: number;
   height?: number;
 }
 
 export function Radio(props) {
-  const { label, ...other } = props;
+  const { label, size, ...other } = props;
 
-  return <FormControlLabel control={<MuiRadio />} label={label} {...other} />;
+  return <FormControlLabel control={<MuiRadio size={size} />} label={label} {...other} />;
 }
 
 Radio.defaultProps = {
   color: 'secondary',
   disabled: false,
+  size: 'medium',
   label: 'Radio',
   width: '100%',
   height: 42,
@@ -39,6 +41,11 @@ addPropertyControls(Radio, {
     type: ControlType.Boolean,
     title: 'Disabled',
   },
+  size: {
+    type: ControlType.Enum,
+    title: 'Size',
+    options: ['small', 'medium'],
+  },
   label: {
     type: ControlType.String,
     title: 'Label',

framer/Material-UI.framerfx/code/TextField.tsx

@@ -6,6 +6,7 @@ import MuiTextField from '@material-ui/core/TextField';
 
 interface Props {
   autoFocus?: boolean;
+  color?: 'primary' | 'secondary';
   disabled?: boolean;
   error?: boolean;
   fullWidth?: boolean;
@@ -14,13 +15,15 @@ interface Props {
   multiline?: boolean;
   placeholder?: string;
   required?: boolean;
+  size?: 'small' | 'medium';
   variant?: 'standard' | 'outlined' | 'filled';
   width?: number;
   height?: number;
 }
 
 const defaultProps: Props = {
   autoFocus: false,
+  color: 'primary',
   disabled: false,
   error: false,
   fullWidth: true,
@@ -47,6 +50,11 @@ addPropertyControls(TextField, {
     type: ControlType.Boolean,
     title: 'Auto focus',
   },
+  color: {
+    type: ControlType.Enum,
+    title: 'Color',
+    options: ['primary', 'secondary'],
+  },
   disabled: {
     type: ControlType.Boolean,
     title: 'Disabled',
@@ -79,6 +87,11 @@ addPropertyControls(TextField, {
     type: ControlType.Boolean,
     title: 'Required',
   },
+  size: {
+    type: ControlType.Enum,
+    title: 'Size',
+    options: ['small', 'medium'],
+  },
   variant: {
     type: ControlType.Enum,
     title: 'Variant',