[Button] Migrate LoadingButton to emotion

docs/pages/api-docs/loading-button.json

@@ -14,12 +14,48 @@
         "description": "'start'<br>&#124;&nbsp;'end'<br>&#124;&nbsp;'center'"
       },
       "default": "'center'"
-    }
+    },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "LoadingButton",
   "styles": {
     "classes": [
       "root",
+      "label",
+      "text",
+      "textInherit",
+      "textPrimary",
+      "textSecondary",
+      "outlined",
+      "outlinedInherit",
+      "outlinedPrimary",
+      "outlinedSecondary",
+      "contained",
+      "containedInherit",
+      "containedPrimary",
+      "containedSecondary",
+      "disableElevation",
+      "focusVisible",
+      "disabled",
+      "colorInherit",
+      "textSizeSmall",
+      "textSizeMedium",
+      "textSizeLarge",
+      "outlinedSizeSmall",
+      "outlinedSizeMedium",
+      "outlinedSizeLarge",
+      "containedSizeSmall",
+      "containedSizeMedium",
+      "containedSizeLarge",
+      "sizeSmall",
+      "sizeMedium",
+      "sizeLarge",
+      "fullWidth",
+      "startIcon",
+      "endIcon",
+      "iconSizeSmall",
+      "iconSizeMedium",
+      "iconSizeLarge",
       "loading",
       "loadingIndicator",
       "loadingIndicatorCenter",
@@ -29,14 +65,14 @@
       "startIconLoadingStart",
       "labelLoadingCenter"
     ],
-    "globalClasses": {},
+    "globalClasses": { "focusVisible": "Mui-focusVisible", "disabled": "Mui-disabled" },
     "name": "MuiLoadingButton"
   },
   "spread": true,
   "forwardsRefTo": "HTMLButtonElement",
   "filename": "/packages/material-ui-lab/src/LoadingButton/LoadingButton.js",
   "inheritance": { "component": "Button", "pathname": "/api/button/" },
   "demos": "<ul><li><a href=\"/components/buttons/\">Buttons</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/loading-button/loading-button.json

@@ -6,10 +6,185 @@
     "disabled": "If <code>true</code>, the component is disabled.",
     "loading": "If <code>true</code>, the loading indicator is shown.",
     "loadingIndicator": "Element placed before the children if the button is in loading state.",
-    "loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button."
+    "loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button.",
+    "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."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },
+    "label": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the span element that wraps the children"
+    },
+    "text": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code>"
+    },
+    "textInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"inherit\"</code>"
+    },
+    "textPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"primary\"</code>"
+    },
+    "textSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"secondary\"</code>"
+    },
+    "outlined": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "outlinedInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"inherit\"</code>"
+    },
+    "outlinedPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"primary\"</code>"
+    },
+    "outlinedSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"secondary\"</code>"
+    },
+    "contained": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code>"
+    },
+    "containedInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"inherit\"</code>"
+    },
+    "containedPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"primary\"</code>"
+    },
+    "containedSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"secondary\"</code>"
+    },
+    "disableElevation": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disableElevation={true}</code>"
+    },
+    "focusVisible": {
+      "description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the ButtonBase root element",
+      "conditions": "the button is keyboard focused"
+    },
+    "disabled": {
+      "description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disabled={true}</code>"
+    },
+    "colorInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"inherit\"</code>"
+    },
+    "textSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code> and <code>variant=\"text\"</code>"
+    },
+    "textSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code> and <code>variant=\"text\"</code>"
+    },
+    "textSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code> and <code>variant=\"text\"</code>"
+    },
+    "outlinedSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code> and <code>variant=\"outlined\"</code>"
+    },
+    "outlinedSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code> and <code>variant=\"outlined\"</code>"
+    },
+    "outlinedSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code> and <code>variant=\"outlined\"</code>"
+    },
+    "containedSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code> and <code>variant=\"contained\"</code>"
+    },
+    "containedSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code> and <code>variant=\"contained\"</code>"
+    },
+    "containedSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code> and <code>variant=\"contained\"</code>"
+    },
+    "sizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "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>"
+    },
+    "sizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code>"
+    },
+    "fullWidth": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fullWidth={true}</code>"
+    },
+    "startIcon": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the startIcon element",
+      "conditions": "supplied"
+    },
+    "endIcon": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the endIcon element",
+      "conditions": "supplied"
+    },
+    "iconSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "supplied and <code>size=\"small\"</code>"
+    },
+    "iconSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "supplied and <code>size=\"medium\"</code>"
+    },
+    "iconSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "supplied and <code>size=\"large\"</code>"
+    },
     "loading": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",

packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts

@@ -1,5 +1,7 @@
-import { ExtendButton, ExtendButtonTypeMap } from '@material-ui/core/Button';
+import { ExtendButton, ExtendButtonTypeMap, ButtonClasses } from '@material-ui/core/Button';
 import { OverrideProps } from '@material-ui/core/OverridableComponent';
+import { Theme } from '@material-ui/core/styles';
+import { SxProps } from '@material-ui/system';
 
 export type LoadingButtonTypeMap<
   P = {},
@@ -9,7 +11,7 @@ export type LoadingButtonTypeMap<
     /**
      * Override or extend the styles applied to the component.
      */
-    classes?: {
+    classes?: Partial<ButtonClasses> & {
       /** Styles applied to the root element. */
       root?: string;
       /** Styles applied to the root element if `loading={true}`. */
@@ -44,6 +46,10 @@ export type LoadingButtonTypeMap<
      * @default 'center'
      */
     loadingPosition?: 'start' | 'end' | 'center';
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
   };
   defaultComponent: D;
 }>;