[LoadingButton] Introduce new component

docs/pages/api-docs/loading-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/loading-button';
+const requireRaw = require.context('!raw-loader!./', false, /\/loading-button\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import LoadingButton from '@material-ui/core/LoadingButton';
+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 LoadingButtons() {
+  const classes = useStyles();
+  const [loading, setLoading] = React.useState(false);
+
+  return (
+    <div className={classes.root}>
+      <FormControlLabel
+        control={
+          <Switch
+            checked={loading}
+            onChange={() => setLoading(!loading)}
+            name="loading"
+            color="primary"
+          />
+        }
+        className={classes.switch}
+        label="Loading"
+      />
+      <LoadingButton variant="outlined" loading={loading} loadingIndicatorPosition="center">
+        Fetch data
+      </LoadingButton>
+      <LoadingButton
+        variant="outlined"
+        loading={loading}
+        loadingIndicator="Loading..."
+        loadingIndicatorPosition="center"
+      >
+        Submit
+      </LoadingButton>
+      <LoadingButton
+        variant="contained"
+        color="primary"
+        loading={loading}
+        loadingIndicatorPosition="end"
+        endIcon={<SendIcon />}
+      >
+        Send
+      </LoadingButton>
+      <LoadingButton
+        variant="contained"
+        color="secondary"
+        loading={loading}
+        startIcon={<SaveIcon />}
+      >
+        Save
+      </LoadingButton>
+    </div>
+  );
+}

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import LoadingButton from '@material-ui/core/LoadingButton';
+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 LoadingButtons() {
+  const classes = useStyles();
+  const [loading, setLoading] = React.useState(false);
+
+  return (
+    <div className={classes.root}>
+      <FormControlLabel
+        control={
+          <Switch
+            checked={loading}
+            onChange={() => setLoading(!loading)}
+            name="loading"
+            color="primary"
+          />
+        }
+        className={classes.switch}
+        label="Loading"
+      />
+      <LoadingButton variant="outlined" loading={loading} loadingIndicatorPosition="center">
+        Fetch data
+      </LoadingButton>
+      <LoadingButton
+        variant="outlined"
+        loading={loading}
+        loadingIndicator="Loading..."
+        loadingIndicatorPosition="center"
+      >
+        Submit
+      </LoadingButton>
+      <LoadingButton
+        variant="contained"
+        color="primary"
+        loading={loading}
+        loadingIndicatorPosition="end"
+        endIcon={<SendIcon />}
+      >
+        Send
+      </LoadingButton>
+      <LoadingButton
+        variant="contained"
+        color="secondary"
+        loading={loading}
+        startIcon={<SaveIcon />}
+      >
+        Save
+      </LoadingButton>
+    </div>
+  );
+}

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

@@ -1,6 +1,6 @@
 ---
 title: Button React component
-components: Button, IconButton, ButtonBase
+components: Button, IconButton, ButtonBase, LoadingButton
 ---
 
 # Button
@@ -94,6 +94,12 @@ 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).
 
+## Loading Buttons
+
+The loading buttons can show loading state and disable interactions.
+
+{{"demo": "pages/components/buttons/LoadingButtons.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/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import { PropTypes } from '..';
 import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
-import { OverrideProps } from '../OverridableComponent';
+import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent';
 
 export type ButtonTypeMap<
   P = {},
@@ -58,6 +58,22 @@ export type ButtonTypeMap<
   classKey: ButtonClassKey;
 }>;
 
+/**
+ * utility to create component types that inherit props from ButtonBase.
+ * This component has an additional overload if the `href` prop is set which
+ * can make extension quite tricky
+ */
+export interface ExtendButtonTypeMap<M extends OverridableTypeMap> {
+  props: M['props'] & ButtonTypeMap['props'];
+  defaultComponent: M['defaultComponent'];
+  classKey: M['classKey'];
+}
+
+export type ExtendButton<M extends OverridableTypeMap> = ((
+  props: { href: string } & OverrideProps<ExtendButtonBaseTypeMap<M>, 'a'>
+) => JSX.Element) &
+  OverridableComponent<ExtendButtonBaseTypeMap<M>>;
+
 /**
  *
  * Demos:

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

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

packages/material-ui/src/LoadingButton/LoadingButton.js

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import withStyles from '../styles/withStyles';
+import capitalize from '../utils/capitalize';
+import Button from '../Button';
+import CircularProgress from '../CircularProgress';
+
+export const styles = () => ({
+  /* Styles applied to the root element. */
+  root: {},
+  /* Styles applied to the root element if `loading={true}`. */
+  loading: {},
+  /* Styles applied to the loadingIndicator element. */
+  loadingIndicator: {
+    position: 'absolute',
+    visibility: 'visible',
+  },
+  /* Styles applied to the loadingIndicator element if `loadingIndicatorPosition="center"`. */
+  loadingIndicatorCenter: {
+    left: '50%',
+    transform: 'translate(-50%)',
+  },
+  /* Styles applied to the loadingIndicator element if `loadingIndicatorPosition="start"`. */
+  loadingIndicatorStart: {
+    left: 10,
+  },
+  /* Styles applied to the loadingIndicator element if `loadingIndicatorPosition="end"`. */
+  loadingIndicatorEnd: {
+    right: 10,
+  },
+  /* Styles applied to the endIcon element if `loading={true}` and `loadingIndicatorPosition="end"`. */
+  endIconLoadingEnd: {
+    visibility: 'hidden'
+  },
+  /* Styles applied to the startIcon element if `loading={true}` and `loadingIndicatorPosition="start"`. */
+  startIconLoadingStart: {
+    visibility: 'hidden'
+  },
+  /* Styles applied to the label element if `loading={true}` and `loadingIndicatorPosition="center"`. */
+  labelLoadingCenter: {
+    visibility: 'hidden',
+  },
+});
+
+const LoadingButton = React.forwardRef(function LoadingButton(props, ref) {
+  const {
+    classes,
+    className,
+    disabled = false,
+    loading = false,
+    loadingIndicatorPosition = 'start',
+    children,
+    loadingIndicator = <CircularProgress color="inherit" size={16} />,
+    ...other
+  } = props;
+
+  return (
+    <Button
+      className={clsx(
+        classes.root,
+        {
+          [classes.loading]: loading,
+        },
+        className,
+      )}
+      disabled={disabled || loading}
+      ref={ref}
+      classes={{
+        startIcon: classes[`startIcon${loading ? 'Loading' : ''}${capitalize(loadingIndicatorPosition)}`],
+        endIcon: classes[`endIcon${loading ? 'Loading' : ''}${capitalize(loadingIndicatorPosition)}`],
+        label: classes[`label${loading ? 'Loading' : ''}${capitalize(loadingIndicatorPosition)}`]
+      }}
+      {...other}
+    >
+      {loading && <div className={clsx(classes.loadingIndicator, classes[`loadingIndicator${capitalize(loadingIndicatorPosition)}`])}>{loadingIndicator}</div>}
+      {children}
+    </Button>
+  );
+});
+
+export default withStyles(styles, { name: 'MuiLoadingButton' })(LoadingButton);

packages/material-ui/src/LoadingButton/LoadingButton.test.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { getClasses } from '@material-ui/core/test-utils';
+import createMount from 'test/utils/createMount';
+import describeConformance from '../test-utils/describeConformance';
+import LoadingButton from './LoadingButton';
+import Button from '../Button';
+
+describe('<LoadingButton />', () => {
+  const mount = createMount();
+  let classes;
+
+  before(() => {
+    classes = getClasses(<LoadingButton>Hello World</LoadingButton>);
+  });
+
+  describeConformance(<LoadingButton>Conformance?</LoadingButton>, () => ({
+    classes,
+    inheritComponent: Button,
+    mount,
+    refInstanceof: window.HTMLButtonElement,
+    skip: ['componentProp'],
+  }));
+});

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

@@ -0,0 +1,2 @@
+export { default } from './LoadingButton';
+export * from './LoadingButton';

packages/material-ui/src/LoadingButton/index.js

@@ -0,0 +1 @@
+export { default } from './LoadingButton';

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

@@ -91,6 +91,9 @@ export * from './ButtonBase';
 export { default as ButtonGroup } from './ButtonGroup';
 export * from './ButtonGroup';
 
+export { default as LoadingButton } from './LoadingButton';
+export * from './LoadingButton';
+
 export { default as Card } from './Card';
 export * from './Card';
 

packages/material-ui/src/index.js

@@ -39,6 +39,9 @@ export * from './ButtonBase';
 export { default as ButtonGroup } from './ButtonGroup';
 export * from './ButtonGroup';
 
+export { default as LoadingButton } from './LoadingButton';
+export * from './LoadingButton';
+
 export { default as Card } from './Card';
 export * from './Card';