diff --git a/docs/pages/api/checkbox.md b/docs/pages/api/checkbox.md
index 40c85aa0b2c45c..fbbb20c82a420a 100644
--- a/docs/pages/api/checkbox.md
+++ b/docs/pages/api/checkbox.md
@@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| checkedIcon | node | <CheckBoxIcon /> | The icon to display when the component is checked. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| color | 'primary'
| 'secondary'
| 'default' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. |
-| disabled | bool | false | If `true`, the switch will be disabled. |
+| disabled | bool | | If `true`, the switch will be disabled. |
| disableRipple | bool | | If `true`, the ripple effect will be disabled. |
| icon | node | <CheckBoxOutlineBlankIcon /> | The icon to display when the component is unchecked. |
| id | string | | The id of the `input` element. |
diff --git a/docs/pages/api/radio.md b/docs/pages/api/radio.md
index 81cf13146a8198..92aaeca8d38a42 100644
--- a/docs/pages/api/radio.md
+++ b/docs/pages/api/radio.md
@@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| checkedIcon | node | | The icon to display when the component is checked. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| color | 'primary'
| 'secondary'
| 'default' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. |
-| disabled | bool | false | If `true`, the switch will be disabled. |
+| disabled | bool | | If `true`, the switch will be disabled. |
| disableRipple | bool | | If `true`, the ripple effect will be disabled. |
| icon | node | | The icon to display when the component is unchecked. |
| id | string | | The id of the `input` element. |
diff --git a/docs/pages/api/switch.md b/docs/pages/api/switch.md
index c2e8109decddc7..e33b56c704c50c 100644
--- a/docs/pages/api/switch.md
+++ b/docs/pages/api/switch.md
@@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| checkedIcon | node | | The icon to display when the component is checked. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| color | 'primary'
| 'secondary'
| 'default' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. |
-| disabled | bool | false | If `true`, the switch will be disabled. |
+| disabled | bool | | If `true`, the switch will be disabled. |
| disableRipple | bool | | If `true`, the ripple effect will be disabled. |
| edge | 'start'
| 'end'
| false | false | 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). |
| icon | node | | The icon to display when the component is unchecked. |
diff --git a/framer/Material-UI.framerfx/code/Avatar.tsx b/framer/Material-UI.framerfx/code/Avatar.tsx
index 6d14037dc59706..a5f5d3a47d9ef5 100644
--- a/framer/Material-UI.framerfx/code/Avatar.tsx
+++ b/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) => {
Avatar.defaultProps = defaultProps;
addPropertyControls(Avatar, {
+ variant: {
+ type: ControlType.Enum,
+ title: 'Variant',
+ options: ['circle', 'rounded', 'square'],
+ },
backgroundColor: {
type: ControlType.Color,
title: 'Background color',
diff --git a/framer/Material-UI.framerfx/code/Button.tsx b/framer/Material-UI.framerfx/code/Button.tsx
index 8202375a9df6d7..2501d076d8678c 100644
--- a/framer/Material-UI.framerfx/code/Button.tsx
+++ b/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',
diff --git a/framer/Material-UI.framerfx/code/Checkbox.tsx b/framer/Material-UI.framerfx/code/Checkbox.tsx
index 1ed4354c358651..97480fed41c1c9 100644
--- a/framer/Material-UI.framerfx/code/Checkbox.tsx
+++ b/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 = ;
+ const control = ;
return ;
}
@@ -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',
diff --git a/framer/Material-UI.framerfx/code/Paper.tsx b/framer/Material-UI.framerfx/code/Paper.tsx
index 88f0ecc95ac9a0..7c79a4815ac715 100644
--- a/framer/Material-UI.framerfx/code/Paper.tsx
+++ b/framer/Material-UI.framerfx/code/Paper.tsx
@@ -7,6 +7,7 @@ import MuiPaper from '@material-ui/core/Paper';
interface Props {
elevation?: number;
square?: boolean;
+ variant?: 'elevation' | 'outlined';
width?: number;
height?: number;
}
@@ -14,6 +15,7 @@ interface Props {
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'],
+ },
});
diff --git a/framer/Material-UI.framerfx/code/Radio.tsx b/framer/Material-UI.framerfx/code/Radio.tsx
index 65aa36ae13c3fc..22329d8b5b441c 100644
--- a/framer/Material-UI.framerfx/code/Radio.tsx
+++ b/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 } label={label} {...other} />;
+ return } 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',
diff --git a/framer/Material-UI.framerfx/code/TextField.tsx b/framer/Material-UI.framerfx/code/TextField.tsx
index 9275aaf5e35859..7271f5adb4ffff 100644
--- a/framer/Material-UI.framerfx/code/TextField.tsx
+++ b/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,6 +15,7 @@ interface Props {
multiline?: boolean;
placeholder?: string;
required?: boolean;
+ size?: 'small' | 'medium';
variant?: 'standard' | 'outlined' | 'filled';
width?: number;
height?: number;
@@ -21,6 +23,7 @@ interface Props {
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',
diff --git a/framer/Material-UI.framerfx/design/document.json b/framer/Material-UI.framerfx/design/document.json
index 08221eba00cfef..9121cd6f0ec235 100644
--- a/framer/Material-UI.framerfx/design/document.json
+++ b/framer/Material-UI.framerfx/design/document.json
@@ -32,11 +32,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -58,7 +55,8 @@
"codeComponentIdentifier" : ".\/Paper.tsx_Paper",
"codeComponentProps" : {
"elevation" : 9,
- "square" : false
+ "square" : false,
+ "variant" : "elevation"
},
"codeOverrideEnabled" : false,
"constraintsLocked" : false,
@@ -116,11 +114,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -202,11 +197,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -288,11 +280,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -374,11 +363,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -460,11 +446,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -547,11 +530,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -634,11 +614,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -734,11 +711,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -821,11 +795,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -849,7 +820,8 @@
"checked" : false,
"color" : "secondary",
"disabled" : false,
- "label" : "Checkbox"
+ "label" : "Checkbox",
+ "size" : "medium"
},
"codeOverrideEnabled" : false,
"constraintsLocked" : false,
@@ -907,11 +879,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -1001,11 +970,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -1095,11 +1061,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -1189,11 +1152,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -1219,7 +1179,8 @@
"imageFile" : "",
"imageUrl" : "",
"label" : "MB",
- "textColor" : "#09F"
+ "textColor" : "#09F",
+ "variant" : "circle"
},
"codeOverrideEnabled" : true,
"codeOverrideFile" : ".\/Examples.tsx",
@@ -1280,11 +1241,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -1310,7 +1268,8 @@
"imageFile" : "",
"imageUrl" : "",
"label" : "MB",
- "textColor" : "hsl(0, 0%, 100%)"
+ "textColor" : "hsl(0, 0%, 100%)",
+ "variant" : "circle"
},
"codeOverrideEnabled" : false,
"constraintsLocked" : false,
@@ -1368,11 +1327,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -1395,6 +1351,7 @@
"codeComponentProps" : {
"color" : "default",
"disabled" : false,
+ "disableElevation" : false,
"endIcon" : "",
"endIconTheme" : "Filled",
"fullWidth" : false,
@@ -1461,11 +1418,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -1488,6 +1442,7 @@
"codeComponentProps" : {
"color" : "primary",
"disabled" : false,
+ "disableElevation" : false,
"endIcon" : "",
"endIconTheme" : "Filled",
"fullWidth" : false,
@@ -1554,11 +1509,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -1581,6 +1533,7 @@
"codeComponentProps" : {
"color" : "secondary",
"disabled" : false,
+ "disableElevation" : false,
"endIcon" : "",
"endIconTheme" : "Filled",
"fullWidth" : false,
@@ -1647,11 +1600,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -1674,6 +1624,7 @@
"codeComponentProps" : {
"color" : "default",
"disabled" : false,
+ "disableElevation" : false,
"endIcon" : "",
"endIconTheme" : "Filled",
"fullWidth" : false,
@@ -1740,11 +1691,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -1767,6 +1715,7 @@
"codeComponentProps" : {
"color" : "primary",
"disabled" : false,
+ "disableElevation" : false,
"endIcon" : "",
"endIconTheme" : "Filled",
"fullWidth" : false,
@@ -1833,11 +1782,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -1860,6 +1806,7 @@
"codeComponentProps" : {
"color" : "secondary",
"disabled" : false,
+ "disableElevation" : false,
"endIcon" : "",
"endIconTheme" : "Filled",
"fullWidth" : false,
@@ -1926,11 +1873,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -1953,6 +1897,7 @@
"codeComponentProps" : {
"color" : "default",
"disabled" : false,
+ "disableElevation" : false,
"endIcon" : "",
"endIconTheme" : "Filled",
"fullWidth" : false,
@@ -2019,11 +1964,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -2046,6 +1988,7 @@
"codeComponentProps" : {
"color" : "primary",
"disabled" : false,
+ "disableElevation" : false,
"endIcon" : "",
"endIconTheme" : "Filled",
"fullWidth" : false,
@@ -2112,11 +2055,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -2139,6 +2079,7 @@
"codeComponentProps" : {
"color" : "secondary",
"disabled" : false,
+ "disableElevation" : false,
"endIcon" : "star",
"endIconTheme" : "Filled",
"fullWidth" : false,
@@ -2205,11 +2146,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -2320,11 +2258,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -2405,11 +2340,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -2490,11 +2422,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -2575,11 +2504,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -2660,11 +2586,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -2745,11 +2668,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -2915,11 +2835,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -2941,6 +2858,7 @@
"codeComponentIdentifier" : ".\/TextField.tsx_TextField",
"codeComponentProps" : {
"autoFocus" : false,
+ "color" : "primary",
"disabled" : false,
"error" : true,
"fullWidth" : true,
@@ -2949,6 +2867,7 @@
"multiline" : false,
"placeholder" : "Text",
"required" : false,
+ "size" : "small",
"variant" : "outlined"
},
"codeOverrideEnabled" : false,
@@ -3007,11 +2926,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -3033,6 +2949,7 @@
"codeComponentIdentifier" : ".\/TextField.tsx_TextField",
"codeComponentProps" : {
"autoFocus" : false,
+ "color" : "primary",
"disabled" : false,
"error" : false,
"fullWidth" : true,
@@ -3041,6 +2958,7 @@
"multiline" : false,
"placeholder" : "Text",
"required" : false,
+ "size" : "small",
"variant" : "filled"
},
"codeOverrideEnabled" : false,
@@ -3099,11 +3017,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -3125,6 +3040,7 @@
"codeComponentIdentifier" : ".\/TextField.tsx_TextField",
"codeComponentProps" : {
"autoFocus" : false,
+ "color" : "primary",
"disabled" : false,
"error" : false,
"fullWidth" : true,
@@ -3133,6 +3049,7 @@
"multiline" : false,
"placeholder" : "Text",
"required" : false,
+ "size" : "small",
"variant" : "standard"
},
"codeOverrideEnabled" : false,
@@ -3191,11 +3108,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -3598,7 +3512,8 @@
"imageFile" : "",
"imageUrl" : "https:\/\/i.pravatar.cc\/300",
"label" : "MB",
- "textColor" : "#09F"
+ "textColor" : "#09F",
+ "variant" : "circle"
},
"codeOverrideEnabled" : false,
"constraintsLocked" : false,
@@ -3654,7 +3569,8 @@
"codeComponentProps" : {
"color" : "secondary",
"disabled" : false,
- "label" : "Radio"
+ "label" : "Radio",
+ "size" : "medium"
},
"codeOverrideEnabled" : false,
"constraintsLocked" : false,
@@ -3910,11 +3826,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -4000,11 +3913,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -4122,11 +4032,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -4244,11 +4151,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -4366,11 +4270,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -4456,11 +4357,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -4676,11 +4574,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -4775,11 +4670,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -4874,11 +4766,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -4973,11 +4862,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -5072,11 +4958,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
@@ -5539,7 +5422,8 @@
"codeComponentIdentifier" : ".\/Paper.tsx_Paper",
"codeComponentProps" : {
"elevation" : 2,
- "square" : false
+ "square" : false,
+ "variant" : "elevation"
},
"codeOverrideEnabled" : false,
"constraintsLocked" : false,
@@ -5725,6 +5609,7 @@
"codeComponentProps" : {
"color" : "primary",
"disabled" : false,
+ "disableElevation" : false,
"endIcon" : "",
"endIconTheme" : "Filled",
"fullWidth" : false,
@@ -5900,6 +5785,7 @@
"codeComponentIdentifier" : ".\/TextField.tsx_TextField",
"codeComponentProps" : {
"autoFocus" : false,
+ "color" : "primary",
"disabled" : false,
"error" : false,
"fullWidth" : true,
@@ -5908,6 +5794,7 @@
"multiline" : false,
"placeholder" : "",
"required" : false,
+ "size" : "small",
"variant" : "standard"
},
"codeOverrideEnabled" : false,
@@ -5963,6 +5850,7 @@
"codeComponentIdentifier" : ".\/TextField.tsx_TextField",
"codeComponentProps" : {
"autoFocus" : false,
+ "color" : "primary",
"disabled" : false,
"error" : false,
"fullWidth" : true,
@@ -5971,6 +5859,7 @@
"multiline" : false,
"placeholder" : "",
"required" : false,
+ "size" : "small",
"variant" : "outlined"
},
"codeOverrideEnabled" : false,
@@ -6026,6 +5915,7 @@
"codeComponentIdentifier" : ".\/TextField.tsx_TextField",
"codeComponentProps" : {
"autoFocus" : false,
+ "color" : "primary",
"disabled" : false,
"error" : false,
"fullWidth" : true,
@@ -6034,6 +5924,7 @@
"multiline" : true,
"placeholder" : "",
"required" : false,
+ "size" : "small",
"variant" : "filled"
},
"codeOverrideEnabled" : false,
@@ -6091,7 +5982,8 @@
"checked" : false,
"color" : "secondary",
"disabled" : false,
- "label" : "Checkbox"
+ "label" : "Checkbox",
+ "size" : "medium"
},
"codeOverrideEnabled" : false,
"constraintsLocked" : false,
@@ -6208,7 +6100,8 @@
"imageFile" : "",
"imageUrl" : "https:\/\/i.pravatar.cc\/300",
"label" : "MB",
- "textColor" : "#09F"
+ "textColor" : "#09F",
+ "variant" : "circle"
},
"codeOverrideEnabled" : false,
"constraintsLocked" : false,
@@ -6325,11 +6218,8 @@
"__class" : "CodeComponentNode",
"aspectRatio" : null,
"blur" : 12,
- "blurEnabled" : 0,
- "blurType" : "layer",
"borderBottom" : 1,
"borderColor" : "#222",
- "borderEnabled" : 0,
"borderLeft" : 1,
"borderPerSide" : false,
"borderRight" : 1,
diff --git a/framer/Material-UI.framerfx/package.json b/framer/Material-UI.framerfx/package.json
index 0fbfe379d9da41..2bd2a0b955156d 100644
--- a/framer/Material-UI.framerfx/package.json
+++ b/framer/Material-UI.framerfx/package.json
@@ -29,4 +29,4 @@
"displayName": "Material-UI",
"id": "ee255265-d0d6-4999-a685-9461c1248b6a"
}
-}
\ No newline at end of file
+}
diff --git a/framer/package.json b/framer/package.json
index ae93cd716c7b6b..28b2dfbbaa0e2c 100644
--- a/framer/package.json
+++ b/framer/package.json
@@ -20,4 +20,4 @@
"build:styles": "cross-env BABEL_ENV=test babel-node --config-file ../babel.config.js ./scripts/buildFramer.js ../packages/material-ui-styles/src ./Material-UI.framerfx/code",
"prettier": "prettier --write --config ../prettier.config.js './**/*.{js,tsx}'"
}
-}
\ No newline at end of file
+}
diff --git a/framer/scripts/additionalProps.js b/framer/scripts/additionalProps.js
index f8cffc1fe51e6b..d1325af26e6e20 100644
--- a/framer/scripts/additionalProps.js
+++ b/framer/scripts/additionalProps.js
@@ -92,6 +92,10 @@ const additionalProps = component => {
return props.deletable === false;
},
},
+ disabled: {
+ type: { name: 'boolean' },
+ defaultValue: { value: false },
+ },
elevation: {
type: { name: 'number', min: 0, max: 24 },
defaultValue: { value: componentSettings[component].propValues.elevation },
diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js
index 56c49ef9a6f6f5..cd6a0d625b5110 100644
--- a/framer/scripts/framerConfig.js
+++ b/framer/scripts/framerConfig.js
@@ -94,6 +94,7 @@ export const componentSettings = {
width: 100,
height: 42,
checked: false,
+ disabled: false,
},
template: 'selection_control.txt',
},
@@ -215,6 +216,7 @@ export const componentSettings = {
label: "'Radio'",
width: "'100%'",
height: 42,
+ disabled: false,
},
template: 'radio.txt',
},
@@ -235,6 +237,7 @@ export const componentSettings = {
'getAriaValueText',
'onChange',
'onChangeCommitted',
+ 'scale',
'ThumbComponent',
'value',
'ValueLabelComponent',
@@ -264,6 +267,7 @@ export const componentSettings = {
width: 100,
height: 38,
checked: 'false',
+ disabled: false,
},
template: 'switch.txt',
},
diff --git a/framer/scripts/templates/radio.txt b/framer/scripts/templates/radio.txt
index 036580cc880917..4c70b076f79908 100644
--- a/framer/scripts/templates/radio.txt
+++ b/framer/scripts/templates/radio.txt
@@ -13,10 +13,10 @@ interface Props {
}
export function «componentName»(props) {
- const { label, ...other } = props;
+ const { label, size, ...other } = props;
return (
- } label={label} {...other} />
+ } label={label} {...other} />
);
}
diff --git a/framer/scripts/templates/selection_control.txt b/framer/scripts/templates/selection_control.txt
index 25fe8b6db11bc8..874071d4e48808 100644
--- a/framer/scripts/templates/selection_control.txt
+++ b/framer/scripts/templates/selection_control.txt
@@ -9,7 +9,7 @@ import Mui«componentName» from '@material-ui/core/«componentName»';
import FormControlLabel from '@material-ui/core/FormControlLabel';
export function «componentName»(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
@@ -28,7 +28,7 @@ export function «componentName»(props) {
setChecked(checkedProp);
}, [checkedProp]);
- const control = ;
+ const control = ;
return ;
}
diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js
index 9a8a721b34e275..45fdf813e9868f 100644
--- a/packages/material-ui/src/Checkbox/Checkbox.js
+++ b/packages/material-ui/src/Checkbox/Checkbox.js
@@ -64,7 +64,6 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
checkedIcon = defaultCheckedIcon,
classes,
color = 'secondary',
- disabled = false,
icon = defaultIcon,
indeterminate = false,
indeterminateIcon = defaultIndeterminateIcon,
@@ -95,7 +94,6 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
fontSize: size === 'small' ? 'small' : 'default',
})}
ref={ref}
- disabled={disabled}
{...other}
/>
);
diff --git a/packages/material-ui/src/Checkbox/Checkbox.test.js b/packages/material-ui/src/Checkbox/Checkbox.test.js
index a358613e3ce879..313514d7f3d4eb 100644
--- a/packages/material-ui/src/Checkbox/Checkbox.test.js
+++ b/packages/material-ui/src/Checkbox/Checkbox.test.js
@@ -1,11 +1,14 @@
import React from 'react';
-import { assert } from 'chai';
+import { assert, expect } from 'chai';
import { getClasses, createMount } from '@material-ui/core/test-utils';
import describeConformance from '../test-utils/describeConformance';
+import { createClientRender } from 'test/utils/createClientRender';
import Checkbox from './Checkbox';
+import FormControl from '../FormControl';
import IconButton from '../IconButton';
describe('', () => {
+ const render = createClientRender();
let classes;
let mount;
@@ -14,16 +17,13 @@ describe('', () => {
mount = createMount({ strict: true });
});
- after(() => {
- mount.cleanUp();
- });
-
describeConformance(, () => ({
classes,
inheritComponent: IconButton,
mount,
refInstanceof: window.HTMLSpanElement,
skip: ['componentProp'],
+ after: () => mount.cleanUp(),
}));
it('should have the classes required for Checkbox', () => {
@@ -38,4 +38,50 @@ describe('', () => {
assert.strictEqual(wrapper.find('svg[data-mui-test="IndeterminateCheckBoxIcon"]').length, 1);
});
});
+
+ describe('with FormControl', () => {
+ describe('enabled', () => {
+ it('should not have the disabled class', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ expect(getByRole('checkbox')).not.to.have.attribute('disabled');
+ });
+
+ it('should be overridden by props', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ expect(getByRole('checkbox')).to.have.attribute('disabled');
+ });
+ });
+
+ describe('disabled', () => {
+ it('should have the disabled class', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ expect(getByRole('checkbox')).to.have.attribute('disabled');
+ });
+
+ it('should be overridden by props', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ expect(getByRole('checkbox')).not.to.have.attribute('disabled');
+ });
+ });
+ });
});
diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js
index 9fee569953d487..1758d3f27b4efc 100644
--- a/packages/material-ui/src/Radio/Radio.js
+++ b/packages/material-ui/src/Radio/Radio.js
@@ -61,7 +61,6 @@ const Radio = React.forwardRef(function Radio(props, ref) {
checked: checkedProp,
classes,
color = 'secondary',
- disabled = false,
name: nameProp,
onChange: onChangeProp,
size = 'medium',
@@ -99,7 +98,6 @@ const Radio = React.forwardRef(function Radio(props, ref) {
checked={checked}
onChange={onChange}
ref={ref}
- disabled={disabled}
{...other}
/>
);
diff --git a/packages/material-ui/src/Radio/Radio.test.js b/packages/material-ui/src/Radio/Radio.test.js
index e911e0b849c10e..102bab4e9aa874 100644
--- a/packages/material-ui/src/Radio/Radio.test.js
+++ b/packages/material-ui/src/Radio/Radio.test.js
@@ -1,11 +1,14 @@
import React from 'react';
-import { assert } from 'chai';
+import { assert, expect } from 'chai';
import { getClasses, createMount } from '@material-ui/core/test-utils';
import describeConformance from '@material-ui/core/test-utils/describeConformance';
-import Radio from './Radio';
+import { createClientRender } from 'test/utils/createClientRender';
+import FormControl from '../FormControl';
import IconButton from '../IconButton';
+import Radio from './Radio';
describe('', () => {
+ const render = createClientRender();
let classes;
let mount;
@@ -14,16 +17,13 @@ describe('', () => {
mount = createMount({ strict: true });
});
- after(() => {
- mount.cleanUp();
- });
-
describeConformance(, () => ({
classes,
inheritComponent: IconButton,
mount,
refInstanceof: window.HTMLSpanElement,
skip: ['componentProp'],
+ after: () => mount.cleanUp(),
}));
describe('styleSheet', () => {
@@ -47,4 +47,50 @@ describe('', () => {
assert.strictEqual(wrapper.find('svg[data-mui-test="RadioButtonCheckedIcon"]').length, 1);
});
});
+
+ describe('with FormControl', () => {
+ describe('enabled', () => {
+ it('should not have the disabled class', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ expect(getByRole('radio')).not.to.have.attribute('disabled');
+ });
+
+ it('should be overridden by props', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ expect(getByRole('radio')).to.have.attribute('disabled');
+ });
+ });
+
+ describe('disabled', () => {
+ it('should have the disabled class', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ expect(getByRole('radio')).to.have.attribute('disabled');
+ });
+
+ it('should be overridden by props', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ expect(getByRole('radio')).not.to.have.attribute('disabled');
+ });
+ });
+ });
});
diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js
index 5e95a7edd9a2c7..4edc1f35cdebda 100644
--- a/packages/material-ui/src/Switch/Switch.js
+++ b/packages/material-ui/src/Switch/Switch.js
@@ -151,7 +151,6 @@ const Switch = React.forwardRef(function Switch(props, ref) {
classes,
className,
color = 'secondary',
- disabled = false,
edge = false,
size = 'medium',
...other
@@ -182,7 +181,6 @@ const Switch = React.forwardRef(function Switch(props, ref) {
disabled: classes.disabled,
}}
ref={ref}
- disabled={disabled}
{...other}
/>
diff --git a/packages/material-ui/src/Switch/Switch.test.js b/packages/material-ui/src/Switch/Switch.test.js
index 01531dfe29f043..79727012cd8c3e 100644
--- a/packages/material-ui/src/Switch/Switch.test.js
+++ b/packages/material-ui/src/Switch/Switch.test.js
@@ -3,6 +3,7 @@ import { expect } from 'chai';
import { createMount, getClasses } from '@material-ui/core/test-utils';
import describeConformance from '../test-utils/describeConformance';
import { createClientRender, fireEvent } from 'test/utils/createClientRender';
+import FormControl from '../FormControl';
import Switch from './Switch';
describe('', () => {
@@ -87,4 +88,50 @@ describe('', () => {
expect(getByRole('checkbox')).to.have.property('checked', false);
});
+
+ describe('with FormControl', () => {
+ describe('enabled', () => {
+ it('should not have the disabled class', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ expect(getByRole('checkbox')).not.to.have.attribute('disabled');
+ });
+
+ it('should be overridden by props', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ expect(getByRole('checkbox')).to.have.attribute('disabled');
+ });
+ });
+
+ describe('disabled', () => {
+ it('should have the disabled class', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ expect(getByRole('checkbox')).to.have.attribute('disabled');
+ });
+
+ it('should be overridden by props', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ expect(getByRole('checkbox')).not.to.have.attribute('disabled');
+ });
+ });
+ });
});
diff --git a/packages/material-ui/src/internal/SwitchBase.test.js b/packages/material-ui/src/internal/SwitchBase.test.js
index be08cd25fe667c..a5900fcd144223 100644
--- a/packages/material-ui/src/internal/SwitchBase.test.js
+++ b/packages/material-ui/src/internal/SwitchBase.test.js
@@ -259,17 +259,18 @@ describe('', () => {
describe('with FormControl', () => {
describe('enabled', () => {
it('should not have the disabled class', () => {
- const { getByTestId } = render(
+ const { getByRole, getByTestId } = render(
,
);
expect(getByTestId('root')).not.to.have.class(classes.disabled);
+ expect(getByRole('checkbox')).not.to.have.attribute('disabled');
});
it('should be overridden by props', () => {
- const { getByTestId } = render(
+ const { getByRole, getByTestId } = render(
', () => {
);
expect(getByTestId('root')).to.have.class(classes.disabled);
+ expect(getByRole('checkbox')).to.have.attribute('disabled');
});
});
describe('disabled', () => {
it('should have the disabled class', () => {
- const { getByTestId } = render(
+ const { getByRole, getByTestId } = render(
,
);
expect(getByTestId('root')).to.have.class(classes.disabled);
+ expect(getByRole('checkbox')).to.have.attribute('disabled');
});
it('should be overridden by props', () => {
- const { getByTestId } = render(
-
+ const { getByRole, getByTestId } = render(
+
', () => {
);
expect(getByTestId('root')).not.to.have.class(classes.disabled);
+ expect(getByRole('checkbox')).not.to.have.attribute('disabled');
});
});
});
@@ -327,7 +331,6 @@ describe('', () => {