[LoadingButton] Introduce new component

docs/pages/api-docs/busy-button.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/busy-button';
+const requireRaw = require.context('!raw-loader!./', false, /\/busy-button\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/busy-button.md

@@ -0,0 +1,72 @@
+---
+filename: /packages/material-ui/src/BusyButton/BusyButton.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# BusyButton API
+
+<p class="description">The API documentation of the BusyButton React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import BusyButton from '@material-ui/core/BusyButton';
+// or
+import { BusyButton } from '@material-ui/core';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Component name
+
+The `MuiBusyButton` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the button. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the button will be disabled. |
+| <span class="prop-name">pending</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | The content of the button. |
+| <span class="prop-name">pendingIndicator</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;CircularProgress color="inherit" size={16} /></span> | Element placed before the children if the button is in pending state. |
+| <span class="prop-name">pendingPosition</span> | <span class="prop-type">'start'<br>&#124;&nbsp;'end'<br>&#124;&nbsp;'center'</span> | <span class="prop-default">'center'</span> | The pending indicator can be positioned on the start, end, or the center of the button. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element ([Button](/api/button/)).
+
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiBusyButton-root</span> | Styles applied to the root element.
+| <span class="prop-name">pending</span> | <span class="prop-name">.MuiBusyButton-pending</span> | Styles applied to the root element if `pending={true}`.
+| <span class="prop-name">pendingIndicator</span> | <span class="prop-name">.MuiBusyButton-pendingIndicator</span> | Styles applied to the pendingIndicator element.
+| <span class="prop-name">pendingIndicatorCenter</span> | <span class="prop-name">.MuiBusyButton-pendingIndicatorCenter</span> | Styles applied to the pendingIndicator element if `pendingPosition="center"`.
+| <span class="prop-name">pendingIndicatorStart</span> | <span class="prop-name">.MuiBusyButton-pendingIndicatorStart</span> | Styles applied to the pendingIndicator element if `pendingPosition="start"`.
+| <span class="prop-name">pendingIndicatorEnd</span> | <span class="prop-name">.MuiBusyButton-pendingIndicatorEnd</span> | Styles applied to the pendingIndicator element if `pendingPosition="end"`.
+| <span class="prop-name">endIconLoadingEnd</span> | <span class="prop-name">.MuiBusyButton-endIconLoadingEnd</span> | Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`.
+| <span class="prop-name">startIconLoadingStart</span> | <span class="prop-name">.MuiBusyButton-startIconLoadingStart</span> | Styles applied to the startIcon element if `pending={true}` and `pendingPosition="start"`.
+| <span class="prop-name">labelLoadingCenter</span> | <span class="prop-name">.MuiBusyButton-labelLoadingCenter</span> | Styles applied to the label element if `pending={true}` and `pendingPosition="center"`.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/BusyButton/BusyButton.js) for more detail.
+
+## Inheritance
+
+The props of the [Button](/api/button/) component are also available.
+You can take advantage of this behavior to [target nested components](/guides/api/#spread).
+
+## Demos
+
+- [Buttons](/components/buttons/)
+

docs/src/pages/components/buttons/BusyButtons.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import BusyButton from '@material-ui/core/BusyButton';
+import SaveIcon from '@material-ui/icons/Save';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& button': {
+      margin: theme.spacing(1),
+    },
+  },
+}));
+
+export default function BusyButtons() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <BusyButton variant="outlined" pending>
+        Submit
+      </BusyButton>
+      <BusyButton variant="outlined" pending pendingIndicator="Loading...">
+        Fetch data
+      </BusyButton>
+      <BusyButton variant="outlined" pending pendingPosition="start" startIcon={<SaveIcon />}>
+        Save
+      </BusyButton>
+    </div>
+  );
+}

docs/src/pages/components/buttons/BusyButtons.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import BusyButton from '@material-ui/core/BusyButton';
+import SaveIcon from '@material-ui/icons/Save';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& button': {
+      margin: theme.spacing(1),
+    },
+  },
+}));
+
+export default function BusyButtons() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <BusyButton variant="outlined" pending>
+        Submit
+      </BusyButton>
+      <BusyButton variant="outlined" pending pendingIndicator="Loading...">
+        Fetch data
+      </BusyButton>
+      <BusyButton variant="outlined" pending pendingPosition="start" startIcon={<SaveIcon />}>
+        Save
+      </BusyButton>
+    </div>
+  );
+}

docs/src/pages/components/buttons/BusyButtonsTransition.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import BusyButton from '@material-ui/core/BusyButton';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+import SaveIcon from '@material-ui/icons/Save';
+import SendIcon from '@material-ui/icons/Send';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& button': {
+      margin: theme.spacing(1),
+    },
+  },
+  switch: {
+    display: 'block',
+  },
+}));
+
+export default function BusyButtonsTransition() {
+  const classes = useStyles();
+  const [pending, setPending] = React.useState(false);
+
+  return (
+    <div className={classes.root}>
+      <FormControlLabel
+        control={
+          <Switch
+            checked={pending}
+            onChange={() => setPending(!pending)}
+            name="pending"
+            color="primary"
+          />
+        }
+        className={classes.switch}
+        label="Pending"
+      />
+      <BusyButton variant="outlined" pending={pending}>
+        Submit
+      </BusyButton>
+      <BusyButton variant="outlined" pending={pending} pendingIndicator="Loading...">
+        Fetch data
+      </BusyButton>
+      <BusyButton
+        variant="contained"
+        color="primary"
+        pending={pending}
+        pendingPosition="end"
+        endIcon={<SendIcon />}
+      >
+        Send
+      </BusyButton>
+      <BusyButton
+        variant="contained"
+        color="secondary"
+        pending={pending}
+        pendingPosition="start"
+        startIcon={<SaveIcon />}
+      >
+        Save
+      </BusyButton>
+    </div>
+  );
+}

docs/src/pages/components/buttons/BusyButtonsTransition.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import BusyButton from '@material-ui/core/BusyButton';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+import SaveIcon from '@material-ui/icons/Save';
+import SendIcon from '@material-ui/icons/Send';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& button': {
+      margin: theme.spacing(1),
+    },
+  },
+  switch: {
+    display: 'block',
+  },
+}));
+
+export default function BusyButtonsTransition() {
+  const classes = useStyles();
+  const [pending, setPending] = React.useState(false);
+
+  return (
+    <div className={classes.root}>
+      <FormControlLabel
+        control={
+          <Switch
+            checked={pending}
+            onChange={() => setPending(!pending)}
+            name="pending"
+            color="primary"
+          />
+        }
+        className={classes.switch}
+        label="Pending"
+      />
+      <BusyButton variant="outlined" pending={pending}>
+        Submit
+      </BusyButton>
+      <BusyButton variant="outlined" pending={pending} pendingIndicator="Loading...">
+        Fetch data
+      </BusyButton>
+      <BusyButton
+        variant="contained"
+        color="primary"
+        pending={pending}
+        pendingPosition="end"
+        endIcon={<SendIcon />}
+      >
+        Send
+      </BusyButton>
+      <BusyButton
+        variant="contained"
+        color="secondary"
+        pending={pending}
+        pendingPosition="start"
+        startIcon={<SaveIcon />}
+      >
+        Save
+      </BusyButton>
+    </div>
+  );
+}

docs/src/pages/components/buttons/buttons.md

@@ -1,6 +1,6 @@
 ---
 title: Button React component
-components: Button, IconButton, ButtonBase
+components: Button, IconButton, ButtonBase, BusyButton
 ---
 
 # Button
@@ -94,6 +94,16 @@ Here are some examples of customizing the component. You can learn more about th
 
 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/button).
 
+## Busy buttons
+
+The busy buttons can show pending state and disable interactions.
+
+{{"demo": "pages/components/buttons/BusyButtons.js"}}
+
+Toggle the switch to see the transition between the different states.
+
+{{"demo": "pages/components/buttons/BusyButtonsTransition.js"}}
+
 ## Complex Buttons
 
 The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`.

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

@@ -0,0 +1,46 @@
+import { ExtendButton, ExtendButtonTypeMap } from '../Button';
+import { OverrideProps } from '../OverridableComponent';
+
+export type BusyButtonTypeMap<
+  P = {},
+  D extends React.ElementType = 'button'
+> = ExtendButtonTypeMap<{
+  props: P & {
+    /**
+     * The content of the button.
+     */
+    pending?: boolean;
+    /**
+     * Element placed before the children if the button is in pending state.
+     */
+    pendingIndicator?: React.ReactNode;
+    /**
+     * The pending indicator can be positioned on the start, end, or the center of the button.
+     */
+    pendingPosition?: 'start' | 'end' | 'center';
+  };
+  defaultComponent: D;
+  classKey: BusyButtonClassKey;
+}>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Buttons](https://material-ui.com/components/buttons/)
+ *
+ * API:
+ *
+ * - [BusyButton API](https://material-ui.com/api/busy-button/)
+ * - inherits [Button API](https://material-ui.com/api/button/)
+ */
+declare const BusyButton: ExtendButton<BusyButtonTypeMap>;
+
+export type BusyButtonProps<
+  D extends React.ElementType = BusyButtonTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<BusyButtonTypeMap<P, D>, D>;
+
+export type BusyButtonClassKey = 'root' | 'pending';
+
+export default BusyButton;