[Switch] Migrate to emotion

docs/pages/api-docs/switch.json

@@ -30,6 +30,7 @@
       "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" },
       "default": "'medium'"
     },
+    "sx": { "type": { "name": "object" } },
     "value": { "type": { "name": "any" } }
   },
   "name": "Switch",
@@ -42,6 +43,7 @@
       "colorPrimary",
       "colorSecondary",
       "sizeSmall",
+      "sizeMedium",
       "checked",
       "disabled",
       "input",
@@ -56,6 +58,6 @@
   "filename": "/packages/material-ui/src/Switch/Switch.js",
   "inheritance": { "component": "IconButton", "pathname": "/api/icon-button/" },
   "demos": "<ul><li><a href=\"/components/switches/\">Switches</a></li>\n<li><a href=\"/components/transfer-list/\">Transfer List</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/switch/switch.json

@@ -16,6 +16,7 @@
     "onChange": "Callback fired when the state is changed.<br><br><strong>Signature:</strong><br><code>function(event: object) =&gt; void</code><br><em>event:</em> The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string). You can pull out the new checked state by accessing <code>event.target.checked</code> (boolean).",
     "required": "If <code>true</code>, the <code>input</code> element is required.",
     "size": "The size of the component. <code>small</code> is equivalent to the dense switch styling.",
+    "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.",
     "value": "The value of the component. The DOM API casts this to a string. The browser uses &quot;on&quot; as the default value."
   },
   "classDescriptions": {
@@ -49,6 +50,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>"
+    },
     "checked": {
       "description": "Pseudo-class applied to {{nodeName}}.",
       "nodeName": "the internal `SwitchBase` component's `checked` class"

framer/scripts/framerConfig.js

@@ -302,7 +302,7 @@ export const componentSettings = {
     template: 'snackbar_content.txt',
   },
   Switch: {
-    ignoredProps: ['checkedIcon', 'edge', 'icon', 'onChange', 'required', 'type', 'value'],
+    ignoredProps: ['checkedIcon', 'edge', 'icon', 'onChange', 'required', 'sx', 'type', 'value'],
     propValues: {
       label: "'Switch'",
       width: 100,

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { InternalStandardProps as StandardProps } from '..';
+import { SxProps } from '@material-ui/system';
+import { InternalStandardProps as StandardProps, Theme } from '..';
 import { SwitchBaseProps } from '../internal/SwitchBase';
 
 export interface SwitchProps
@@ -26,6 +27,8 @@ export interface SwitchProps
     colorSecondary?: string;
     /** Styles applied to the root element if `size="small"`. */
     sizeSmall?: string;
+    /** Styles applied to the root element if `size="medium"`. */
+    sizeMedium?: string;
     /** Pseudo-class applied to the internal `SwitchBase` component's `checked` class. */
     checked?: string;
     /** Pseudo-class applied to the internal SwitchBase component's disabled class. */
@@ -56,6 +59,10 @@ export interface SwitchProps
    * @default 'medium'
    */
   size?: 'small' | 'medium';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
   /**
    * The value of the component. The DOM API casts this to a string.
    * The browser uses "on" as the default value.