[material-ui][Button] Add loading feature to Button

docs/pages/material-ui/api/button.json

@@ -15,8 +15,24 @@
     "disableFocusRipple": { "type": { "name": "bool" }, "default": "false" },
     "disableRipple": { "type": { "name": "bool" }, "default": "false" },
     "endIcon": { "type": { "name": "node" } },
+    "endIconLoadingEnd": { "type": { "name": "string" } },
     "fullWidth": { "type": { "name": "bool" }, "default": "false" },
     "href": { "type": { "name": "string" } },
+    "loading": { "type": { "name": "bool" }, "default": "false" },
+    "loadingIndicator": {
+      "type": { "name": "node" },
+      "default": "<CircularProgress color=\"inherit\" size={16} />"
+    },
+    "loadingIndicatorCenter": { "type": { "name": "string" } },
+    "loadingIndicatorEnd": { "type": { "name": "string" } },
+    "loadingIndicatorStart": { "type": { "name": "string" } },
+    "loadingPosition": {
+      "type": {
+        "name": "enum",
+        "description": "'center'<br>&#124;&nbsp;'end'<br>&#124;&nbsp;'start'"
+      },
+      "default": "'center'"
+    },
     "size": {
       "type": {
         "name": "union",
@@ -25,6 +41,7 @@
       "default": "'medium'"
     },
     "startIcon": { "type": { "name": "node" } },
+    "startIconLoadingStart": { "type": { "name": "string" } },
     "sx": {
       "type": {
         "name": "union",
@@ -182,6 +199,12 @@
       "description": "Styles applied to the endIcon element if supplied.",
       "isGlobal": false
     },
+    {
+      "key": "endIconLoadingEnd",
+      "className": "MuiButton-endIconLoadingEnd",
+      "description": "Styles applied to the endIcon element if `loading={true}` and `loadingPosition=\"end\"`.",
+      "isGlobal": false
+    },
     {
       "key": "focusVisible",
       "className": "Mui-focusVisible",
@@ -221,6 +244,36 @@
       "isGlobal": false,
       "isDeprecated": true
     },
+    {
+      "key": "loading",
+      "className": "MuiButton-loading",
+      "description": "Styles applied to the root element if `loading={true}`.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingIndicator",
+      "className": "MuiButton-loadingIndicator",
+      "description": "Styles applied to the loadingIndicator element.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingIndicatorCenter",
+      "className": "MuiButton-loadingIndicatorCenter",
+      "description": "Styles applied to the loadingIndicator element if `loadingPosition=\"center\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingIndicatorEnd",
+      "className": "MuiButton-loadingIndicatorEnd",
+      "description": "Styles applied to the loadingIndicator element if `loadingPosition=\"end\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingIndicatorStart",
+      "className": "MuiButton-loadingIndicatorStart",
+      "description": "Styles applied to the loadingIndicator element if `loadingPosition=\"start\"`.",
+      "isGlobal": false
+    },
     {
       "key": "outlined",
       "className": "MuiButton-outlined",
@@ -327,6 +380,12 @@
       "description": "Styles applied to the startIcon element if supplied.",
       "isGlobal": false
     },
+    {
+      "key": "startIconLoadingStart",
+      "className": "MuiButton-startIconLoadingStart",
+      "description": "Styles applied to the startIcon element if `loading={true}` and `loadingPosition=\"start\"`.",
+      "isGlobal": false
+    },
     {
       "key": "text",
       "className": "MuiButton-text",

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

@@ -18,16 +18,40 @@
       "description": "If <code>true</code>, the ripple effect is disabled.<br>⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the <code>.Mui-focusVisible</code> class."
     },
     "endIcon": { "description": "Element placed after the children." },
+    "endIconLoadingEnd": {
+      "description": "Styles applied to the endIcon element if <code>loading={true}</code> and <code>loadingPosition=&quot;end&quot;</code>."
+    },
     "fullWidth": {
       "description": "If <code>true</code>, the button will take up the full width of its container."
     },
     "href": {
       "description": "The URL to link to when the button is clicked. If defined, an <code>a</code> element will be used as the root node."
     },
+    "loading": {
+      "description": "If <code>true</code>, the loading indicator is shown and the button becomes disabled."
+    },
+    "loadingIndicator": {
+      "description": "Element placed before the children if the button is in loading state. The node should contain an element with <code>role=&quot;progressbar&quot;</code> with an accessible name. By default we render a <code>CircularProgress</code> that is labelled by the button itself."
+    },
+    "loadingIndicatorCenter": {
+      "description": "Styles applied to the loadingIndicator element if <code>loadingPosition=&quot;center&quot;</code>."
+    },
+    "loadingIndicatorEnd": {
+      "description": "Styles applied to the loadingIndicator element if <code>loadingPosition=&quot;end&quot;</code>."
+    },
+    "loadingIndicatorStart": {
+      "description": "Styles applied to the loadingIndicator element if <code>loadingPosition=&quot;start&quot;</code>."
+    },
+    "loadingPosition": {
+      "description": "The loading indicator can be positioned on the start, end, or the center of the button."
+    },
     "size": {
       "description": "The size of the component. <code>small</code> is equivalent to the dense button styling."
     },
     "startIcon": { "description": "Element placed before the children." },
+    "startIconLoadingStart": {
+      "description": "Styles applied to the startIcon element if <code>loading={true}</code> and <code>loadingPosition=&quot;start&quot;</code>."
+    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
@@ -149,6 +173,11 @@
       "nodeName": "the endIcon element",
       "conditions": "supplied"
     },
+    "endIconLoadingEnd": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the endIcon element",
+      "conditions": "<code>loading={true}</code> and <code>loadingPosition=\"end\"</code>"
+    },
     "focusVisible": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the ButtonBase root element",
@@ -178,6 +207,30 @@
       "conditions": "supplied and <code>size=\"small\"</code>",
       "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-icon\">.MuiButton-icon</a> and <a href=\"/material-ui/api/button/#button-classes-sizeSmall\">.MuiButtonSizeSmall</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
+    "loading": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>loading={true}</code>"
+    },
+    "loadingIndicator": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the loadingIndicator element"
+    },
+    "loadingIndicatorCenter": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the loadingIndicator element",
+      "conditions": "<code>loadingPosition=\"center\"</code>"
+    },
+    "loadingIndicatorEnd": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the loadingIndicator element",
+      "conditions": "<code>loadingPosition=\"end\"</code>"
+    },
+    "loadingIndicatorStart": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the loadingIndicator element",
+      "conditions": "<code>loadingPosition=\"start\"</code>"
+    },
     "outlined": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -264,6 +317,11 @@
       "nodeName": "the startIcon element",
       "conditions": "supplied"
     },
+    "startIconLoadingStart": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the startIcon element",
+      "conditions": "<code>loading={true}</code> and <code>loadingPosition=\"start\"</code>"
+    },
     "text": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",

packages/mui-lab/src/LoadingButton/LoadingButton.test.js

@@ -20,13 +20,13 @@ describe('<LoadingButton />', () => {
   }));
 
   it('is in tab-order by default', () => {
-    render(<LoadingButton />);
+    render(<Button />);
 
     expect(screen.getByRole('button')).to.have.property('tabIndex', 0);
   });
 
   it('prop: classes can be appended to MuiButton', () => {
-    render(<LoadingButton variant="outlined" classes={{ outlined: 'loading-button-outlined' }} />);
+    render(<Button variant="outlined" classes={{ outlined: 'loading-button-outlined' }} />);
     const button = screen.getByRole('button');
 
     expect(button).to.have.class('MuiButton-outlined');
@@ -35,21 +35,21 @@ describe('<LoadingButton />', () => {
 
   describe('prop: loading', () => {
     it('disables the button', () => {
-      render(<LoadingButton loading />);
+      render(<Button loading />);
 
       const button = screen.getByRole('button');
       expect(button).to.have.property('tabIndex', -1);
       expect(button).to.have.property('disabled', true);
     });
 
     it('cannot be enabled while `loading`', () => {
-      render(<LoadingButton disabled={false} loading />);
+      render(<Button disabled={false} loading />);
 
       expect(screen.getByRole('button')).to.have.property('disabled', true);
     });
 
     it('renders a progressbar that is labelled by the button', () => {
-      render(<LoadingButton loading>Submit</LoadingButton>);
+      render(<Button loading>Submit</Button>);
 
       const button = screen.getByRole('button');
       const progressbar = within(button).getByRole('progressbar');
@@ -59,16 +59,16 @@ describe('<LoadingButton />', () => {
 
   describe('prop: loadingIndicator', () => {
     it('is not rendered by default', () => {
-      render(<LoadingButton loadingIndicator="loading">Test</LoadingButton>);
+      render(<Button loadingIndicator="loading">Test</Button>);
 
       expect(screen.getByRole('button')).to.have.text('Test');
     });
 
     it('is rendered before the children when `loading`', () => {
       render(
-        <LoadingButton loadingIndicator="loading…" loading>
+        <Button loadingIndicator="loading…" loading>
           Test
-        </LoadingButton>,
+        </Button>,
       );
 
       expect(screen.getByRole('button')).to.have.text('loading…Test');
@@ -79,7 +79,7 @@ describe('<LoadingButton />', () => {
     it('correctly passes props to children', () => {
       const { getByRole } = render(
         <ButtonGroup variant="contained" size="large" color="secondary">
-          <LoadingButton />
+          <Button />
         </ButtonGroup>,
       );
       const button = getByRole('button');
@@ -91,9 +91,9 @@ describe('<LoadingButton />', () => {
     it('correctly applies position classes to loading buttons', () => {
       render(
         <ButtonGroup>
-          <LoadingButton>Button 1</LoadingButton>
-          <LoadingButton>Button 2</LoadingButton>
-          <LoadingButton>Button 3</LoadingButton>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
         </ButtonGroup>,
       );
 

packages/mui-material/src/Button/Button.d.ts

@@ -60,6 +60,33 @@ export interface ButtonOwnProps {
    * If defined, an `a` element will be used as the root node.
    */
   href?: string;
+  /**
+   * If `true`, the loading indicator is shown and the button becomes disabled.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default we render a `CircularProgress` that is labelled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator?: React.ReactNode;
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition?: 'start' | 'end' | 'center';
+  /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */
+  loadingIndicatorCenter?: string;
+  /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */
+  loadingIndicatorStart?: string;
+  /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */
+  loadingIndicatorEnd?: string;
+  /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */
+  endIconLoadingEnd?: string;
+  /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */
+  startIconLoadingStart?: string;
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.