[core] Improve support for extended props in theme

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" } },

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

@@ -6,12 +6,10 @@ import { Avatar } from './Avatar';
 
 interface Props {
   clickable: boolean;
-  color: 'default' | 'primary' | 'secondary';
   deleteIcon: string;
   disabled: boolean;
   icon: string;
   label: string;
-  size: 'medium' | 'small';
   avatarImageFile: string;
   avatarImageUrl: string;
   deletable: boolean;
@@ -50,12 +48,10 @@ export function Chip(props: Props): JSX.Element {
 
 Chip.defaultProps = {
   clickable: true,
-  color: 'default' as 'default',
   deleteIcon: '',
   disabled: false,
   icon: 'star',
   label: 'Chip',
-  size: 'medium' as 'medium',
   avatarImageFile: '',
   avatarImageUrl: '',
   deletable: false,
@@ -69,11 +65,6 @@ addPropertyControls(Chip, {
     type: ControlType.Boolean,
     title: 'Clickable',
   },
-  color: {
-    type: ControlType.Enum,
-    title: 'Color',
-    options: ['default', 'primary', 'secondary'],
-  },
   deleteIcon: {
     type: ControlType.String,
     title: 'Delete icon',
@@ -90,11 +81,6 @@ addPropertyControls(Chip, {
     type: ControlType.String,
     title: 'Label',
   },
-  size: {
-    type: ControlType.Enum,
-    title: 'Size',
-    options: ['medium', 'small'],
-  },
   avatarImageFile: {
     type: ControlType.Image,
     title: 'Avatar Image File',

framer/scripts/framerConfig.js

@@ -130,6 +130,8 @@ export const componentSettings = {
       // FIXME: `Union`
       'sx',
       'variant',
+      'color',
+      'size',
     ],
     propValues: {
       avatarImageFile: "''",

packages/material-ui/src/Chip/Chip.d.ts

@@ -6,6 +6,10 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface ChipPropsVariantOverrides {}
 
+export interface ChipPropsSizeOverrides {}
+
+export interface ChipPropsColorOverrides {}
+
 export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P & {
     /**
@@ -109,7 +113,7 @@ export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
      * The color of the component. It supports those theme colors that make sense for this component.
      * @default 'default'
      */
-    color?: Exclude<PropTypes.Color, 'inherit'>;
+    color?: OverridableStringUnion<Exclude<PropTypes.Color, 'inherit'>, ChipPropsColorOverrides>;
     /**
      * Override the default delete icon element. Shown only if `onDelete` is set.
      */
@@ -136,7 +140,7 @@ export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
      * The size of the component.
      * @default 'medium'
      */
-    size?: 'small' | 'medium';
+    size?: OverridableStringUnion<'small' | 'medium', ChipPropsSizeOverrides>;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */

packages/material-ui/src/Chip/Chip.js

@@ -519,7 +519,10 @@ Chip.propTypes /* remove-proptypes */ = {
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'default'
    */
-  color: PropTypes.oneOf(['default', 'primary', 'secondary']),
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['default', 'primary', 'secondary']),
+    PropTypes.string,
+  ]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
@@ -563,7 +566,10 @@ Chip.propTypes /* remove-proptypes */ = {
    * The size of the component.
    * @default 'medium'
    */
-  size: PropTypes.oneOf(['medium', 'small']),
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['medium', 'small']),
+    PropTypes.string,
+  ]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */