[core] Improve support for extended props in theme (#25934)

mui · Apr 26, 2021 · 1d3b2af · 1d3b2af
1 parent f3e4ac4
commit 1d3b2af
Show file tree

Hide file tree

Showing 64 changed files with 361 additions and 197 deletions.
diff --git a/docs/pages/api-docs/autocomplete.json b/docs/pages/api-docs/autocomplete.json
@@ -69,7 +69,10 @@
     "renderTags": { "type": { "name": "func" } },
     "selectOnFocus": { "type": { "name": "bool" }, "default": "!props.freeSolo" },
     "size": {
-      "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" },
+      "type": {
+        "name": "union",
+        "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+      },
       "default": "'medium'"
     },
     "sx": { "type": { "name": "object" } },

diff --git a/docs/pages/api-docs/checkbox.json b/docs/pages/api-docs/checkbox.json
@@ -5,8 +5,8 @@
     "classes": { "type": { "name": "object" } },
     "color": {
       "type": {
-        "name": "enum",
-        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'"
+        "name": "union",
+        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
       },
       "default": "'secondary'"
     },
@@ -22,7 +22,10 @@
     "onChange": { "type": { "name": "func" } },
     "required": { "type": { "name": "bool" } },
     "size": {
-      "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" },
+      "type": {
+        "name": "union",
+        "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+      },
       "default": "'medium'"
     },
     "sx": { "type": { "name": "object" } },

diff --git a/docs/pages/api-docs/chip.json b/docs/pages/api-docs/chip.json
@@ -6,8 +6,8 @@
     "clickable": { "type": { "name": "bool" } },
     "color": {
       "type": {
-        "name": "enum",
-        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'"
+        "name": "union",
+        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
       },
       "default": "'default'"
     },
@@ -18,7 +18,10 @@
     "label": { "type": { "name": "node" } },
     "onDelete": { "type": { "name": "func" } },
     "size": {
-      "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" },
+      "type": {
+        "name": "union",
+        "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+      },
       "default": "'medium'"
     },
     "sx": { "type": { "name": "object" } },

diff --git a/docs/pages/api-docs/fab.json b/docs/pages/api-docs/fab.json
@@ -4,8 +4,8 @@
     "classes": { "type": { "name": "object" } },
     "color": {
       "type": {
-        "name": "enum",
-        "description": "'default'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'"
+        "name": "union",
+        "description": "'default'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
       },
       "default": "'default'"
     },
@@ -16,8 +16,8 @@
     "href": { "type": { "name": "string" } },
     "size": {
       "type": {
-        "name": "enum",
-        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'"
+        "name": "union",
+        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
       },
       "default": "'large'"
     },

diff --git a/docs/pages/api-docs/filled-input.json b/docs/pages/api-docs/filled-input.json
@@ -3,7 +3,12 @@
     "autoComplete": { "type": { "name": "string" } },
     "autoFocus": { "type": { "name": "bool" } },
     "classes": { "type": { "name": "object" } },
-    "color": { "type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" } },
+    "color": {
+      "type": {
+        "name": "union",
+        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+      }
+    },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
     "disableUnderline": { "type": { "name": "bool" } },

diff --git a/docs/pages/api-docs/icon.json b/docs/pages/api-docs/icon.json
@@ -5,16 +5,16 @@
     "classes": { "type": { "name": "object" } },
     "color": {
       "type": {
-        "name": "enum",
-        "description": "'action'<br>&#124;&nbsp;'disabled'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'"
+        "name": "union",
+        "description": "'action'<br>&#124;&nbsp;'disabled'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
       },
       "default": "'inherit'"
     },
     "component": { "type": { "name": "elementType" } },
     "fontSize": {
       "type": {
-        "name": "enum",
-        "description": "'inherit'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'"
+        "name": "union",
+        "description": "'inherit'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },

diff --git a/docs/pages/api-docs/input-base.json b/docs/pages/api-docs/input-base.json
@@ -3,7 +3,12 @@
     "autoComplete": { "type": { "name": "string" } },
     "autoFocus": { "type": { "name": "bool" } },
     "classes": { "type": { "name": "object" } },
-    "color": { "type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" } },
+    "color": {
+      "type": {
+        "name": "union",
+        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+      }
+    },
     "components": {
       "type": { "name": "shape", "description": "{ Input?: elementType, Root?: elementType }" },
       "default": "{}"

diff --git a/docs/pages/api-docs/input.json b/docs/pages/api-docs/input.json
@@ -3,7 +3,12 @@
     "autoComplete": { "type": { "name": "string" } },
     "autoFocus": { "type": { "name": "bool" } },
     "classes": { "type": { "name": "object" } },
-    "color": { "type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" } },
+    "color": {
+      "type": {
+        "name": "union",
+        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+      }
+    },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
     "disableUnderline": { "type": { "name": "bool" } },

diff --git a/docs/pages/api-docs/outlined-input.json b/docs/pages/api-docs/outlined-input.json
@@ -3,7 +3,12 @@
     "autoComplete": { "type": { "name": "string" } },
     "autoFocus": { "type": { "name": "bool" } },
     "classes": { "type": { "name": "object" } },
-    "color": { "type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" } },
+    "color": {
+      "type": {
+        "name": "union",
+        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+      }
+    },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
     "endAdornment": { "type": { "name": "node" } },

diff --git a/docs/pages/api-docs/pagination-item.json b/docs/pages/api-docs/pagination-item.json
@@ -3,8 +3,8 @@
     "classes": { "type": { "name": "object" } },
     "color": {
       "type": {
-        "name": "enum",
-        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'standard'"
+        "name": "union",
+        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'standard'<br>&#124;&nbsp;string"
       },
       "default": "'standard'"
     },
@@ -18,8 +18,8 @@
     },
     "size": {
       "type": {
-        "name": "enum",
-        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'"
+        "name": "union",
+        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },

diff --git a/docs/pages/api-docs/pagination.json b/docs/pages/api-docs/pagination.json
@@ -4,8 +4,8 @@
     "classes": { "type": { "name": "object" } },
     "color": {
       "type": {
-        "name": "enum",
-        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'standard'"
+        "name": "union",
+        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'standard'<br>&#124;&nbsp;string"
       },
       "default": "'standard'"
     },
@@ -30,8 +30,8 @@
     "siblingCount": { "type": { "name": "custom", "description": "integer" }, "default": "1" },
     "size": {
       "type": {
-        "name": "enum",
-        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'"
+        "name": "union",
+        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },

diff --git a/docs/pages/api-docs/radio.json b/docs/pages/api-docs/radio.json
@@ -5,8 +5,8 @@
     "classes": { "type": { "name": "object" } },
     "color": {
       "type": {
-        "name": "enum",
-        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'"
+        "name": "union",
+        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
       },
       "default": "'secondary'"
     },
@@ -20,7 +20,10 @@
     "onChange": { "type": { "name": "func" } },
     "required": { "type": { "name": "bool" } },
     "size": {
-      "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" },
+      "type": {
+        "name": "union",
+        "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+      },
       "default": "'medium'"
     },
     "sx": { "type": { "name": "object" } },

diff --git a/docs/pages/api-docs/slider.json b/docs/pages/api-docs/slider.json
@@ -5,7 +5,10 @@
     "aria-valuetext": { "type": { "name": "custom", "description": "string" } },
     "classes": { "type": { "name": "object" } },
     "color": {
-      "type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" },
+      "type": {
+        "name": "union",
+        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+      },
       "default": "'primary'"
     },
     "component": { "type": { "name": "elementType" } },

diff --git a/docs/pages/api-docs/svg-icon.json b/docs/pages/api-docs/svg-icon.json
@@ -4,16 +4,16 @@
     "classes": { "type": { "name": "object" } },
     "color": {
       "type": {
-        "name": "enum",
-        "description": "'action'<br>&#124;&nbsp;'disabled'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'"
+        "name": "union",
+        "description": "'action'<br>&#124;&nbsp;'disabled'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
       },
       "default": "'inherit'"
     },
     "component": { "type": { "name": "elementType" } },
     "fontSize": {
       "type": {
-        "name": "enum",
-        "description": "'inherit'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'"
+        "name": "union",
+        "description": "'inherit'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },

diff --git a/docs/pages/api-docs/switch.json b/docs/pages/api-docs/switch.json
@@ -5,8 +5,8 @@
     "classes": { "type": { "name": "object" } },
     "color": {
       "type": {
-        "name": "enum",
-        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'"
+        "name": "union",
+        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
       },
       "default": "'secondary'"
     },
@@ -27,7 +27,10 @@
     "onChange": { "type": { "name": "func" } },
     "required": { "type": { "name": "bool" } },
     "size": {
-      "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" },
+      "type": {
+        "name": "union",
+        "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+      },
       "default": "'medium'"
     },
     "sx": { "type": { "name": "object" } },

diff --git a/docs/pages/api-docs/table.json b/docs/pages/api-docs/table.json
@@ -11,7 +11,10 @@
       "default": "'normal'"
     },
     "size": {
-      "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" },
+      "type": {
+        "name": "union",
+        "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+      },
       "default": "'medium'"
     },
     "stickyHeader": { "type": { "name": "bool" } },

diff --git a/docs/pages/api-docs/toggle-button-group.json b/docs/pages/api-docs/toggle-button-group.json
@@ -18,8 +18,8 @@
     },
     "size": {
       "type": {
-        "name": "enum",
-        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'"
+        "name": "union",
+        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },

diff --git a/docs/pages/api-docs/toggle-button.json b/docs/pages/api-docs/toggle-button.json
@@ -17,8 +17,8 @@
     "selected": { "type": { "name": "bool" } },
     "size": {
       "type": {
-        "name": "enum",
-        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'"
+        "name": "union",
+        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },

diff --git a/framer/Material-UI.framerfx/code/Checkbox.tsx b/framer/Material-UI.framerfx/code/Checkbox.tsx
@@ -5,18 +5,24 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 
 interface Props {
   checked: boolean;
-  color: 'default' | 'primary' | 'secondary';
   defaultChecked?: boolean;
   disabled: boolean;
-  size: 'medium' | 'small';
   label: string;
   width: number | string;
   height: number;
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
 }
 
 export function Checkbox(props: Props): JSX.Element {
-  const { checked: checkedProp, label, onChange, size, ...other } = props;
+  const {
+    checked: checkedProp,
+    label,
+    onChange,
+    // @ts-ignore -- untyped
+    size,
+    ...other
+  } = props;
+
   const [checked, setChecked] = React.useState(false);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -37,9 +43,7 @@ export function Checkbox(props: Props): JSX.Element {
 
 Checkbox.defaultProps = {
   checked: false,
-  color: 'secondary' as 'secondary',
   disabled: false,
-  size: 'medium' as 'medium',
   label: 'Checkbox',
   width: 100,
   height: 42,
@@ -50,11 +54,6 @@ addPropertyControls(Checkbox, {
     type: ControlType.Boolean,
     title: 'Checked',
   },
-  color: {
-    type: ControlType.Enum,
-    title: 'Color',
-    options: ['default', 'primary', 'secondary'],
-  },
   defaultChecked: {
     type: ControlType.Boolean,
     title: 'Default checked',
@@ -63,11 +62,6 @@ addPropertyControls(Checkbox, {
     type: ControlType.Boolean,
     title: 'Disabled',
   },
-  size: {
-    type: ControlType.Enum,
-    title: 'Size',
-    options: ['medium', 'small'],
-  },
   label: {
     type: ControlType.String,
     title: 'Label',