[Chip] Migrate to emotion

docs/pages/api-docs/chip.json

@@ -21,6 +21,7 @@
       "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" },
       "default": "'medium'"
     },
+    "sx": { "type": { "name": "object" } },
     "variant": {
       "type": {
         "name": "union",
@@ -34,6 +35,7 @@
     "classes": [
       "root",
       "sizeSmall",
+      "sizeMedium",
       "colorPrimary",
       "colorSecondary",
       "disabled",
@@ -49,16 +51,20 @@
       "outlinedSecondary",
       "avatar",
       "avatarSmall",
+      "avatarMedium",
       "avatarColorPrimary",
       "avatarColorSecondary",
       "icon",
       "iconSmall",
+      "iconMedium",
       "iconColorPrimary",
       "iconColorSecondary",
       "label",
       "labelSmall",
+      "labelMedium",
       "deleteIcon",
       "deleteIconSmall",
+      "deleteIconMedium",
       "deleteIconColorPrimary",
       "deleteIconColorSecondary",
       "deleteIconOutlinedColorPrimary",
@@ -73,6 +79,6 @@
   "filename": "/packages/material-ui/src/Chip/Chip.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/chips/\">Chips</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/chip/chip.json

@@ -13,6 +13,7 @@
     "label": "The content of the component.",
     "onDelete": "Callback fired when the delete icon is clicked. If set, the delete icon will be shown.",
     "size": "The size of the component.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
     "variant": "The variant to use."
   },
   "classDescriptions": {
@@ -22,6 +23,11 @@
       "nodeName": "the root element",
       "conditions": "<code>size=\"small\"</code>"
     },
+    "sizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
     "colorPrimary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -96,6 +102,11 @@
       "nodeName": "the avatar element",
       "conditions": "<code>size=\"small\"</code>"
     },
+    "avatarMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the avatar element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
     "avatarColorPrimary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the avatar element",
@@ -112,6 +123,11 @@
       "nodeName": "the icon element",
       "conditions": "<code>size=\"small\"</code>"
     },
+    "iconMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
     "iconColorPrimary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the icon element",
@@ -131,6 +147,11 @@
       "nodeName": "the label `span` element",
       "conditions": "<code>size=\"small\"</code>"
     },
+    "labelMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the label `span` element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
     "deleteIcon": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the deleteIcon element"
@@ -140,6 +161,11 @@
       "nodeName": "the deleteIcon element",
       "conditions": "<code>size=\"small\"</code>"
     },
+    "deleteIconMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the deleteIcon element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
     "deleteIconColorPrimary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the deleteIcon element",

framer/scripts/framerConfig.js

@@ -127,6 +127,7 @@ export const componentSettings = {
       'children',
       'onDelete',
       // FIXME: `Union`
+      'sx',
       'variant',
     ],
     propValues: {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { OverridableStringUnion } from '@material-ui/types';
-import { PropTypes } from '..';
+import { SxProps } from '@material-ui/system';
+import { PropTypes, Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface ChipPropsVariantOverrides {}
@@ -25,6 +26,8 @@ export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
       root?: string;
       /** Styles applied to the root element if `size="small"`. */
       sizeSmall?: string;
+      /** Styles applied to the root element if `size="medium"`. */
+      sizeMedium?: string;
       /** Styles applied to the root element if `color="primary"`. */
       colorPrimary?: string;
       /** Styles applied to the root element if `color="secondary"`. */
@@ -55,6 +58,8 @@ export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
       avatar?: string;
       /** Styles applied to the avatar element if `size="small"`. */
       avatarSmall?: string;
+      /** Styles applied to the avatar element if `size="medium"`. */
+      avatarMedium?: string;
       /** Styles applied to the avatar element if `color="primary"`. */
       avatarColorPrimary?: string;
       /** Styles applied to the avatar element if `color="secondary"`. */
@@ -63,6 +68,8 @@ export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
       icon?: string;
       /** Styles applied to the icon element if `size="small"`. */
       iconSmall?: string;
+      /** Styles applied to the icon element if `size="medium"`. */
+      iconMedium?: string;
       /** Styles applied to the icon element if `color="primary"`. */
       iconColorPrimary?: string;
       /** Styles applied to the icon element if `color="secondary"`. */
@@ -71,10 +78,14 @@ export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
       label?: string;
       /** Styles applied to the label `span` element if `size="small"`. */
       labelSmall?: string;
+      /** Styles applied to the label `span` element if `size="medium"`. */
+      labelMedium?: string;
       /** Styles applied to the deleteIcon element. */
       deleteIcon?: string;
       /** Styles applied to the deleteIcon element if `size="small"`. */
       deleteIconSmall?: string;
+      /** Styles applied to the deleteIcon element if `size="medium"`. */
+      deleteIconMedium?: string;
       /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */
       deleteIconColorPrimary?: string;
       /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */
@@ -126,6 +137,10 @@ export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
      * @default 'medium'
      */
     size?: 'small' | 'medium';
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
     /**
      * The variant to use.
      * @default 'filled'