From 8361424893426ec59943664ff46d6e75c86f75d6 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 10 Jun 2020 08:24:45 +0200 Subject: [PATCH 01/35] wip --- .../pages/components/buttons/BusyButtons.js | 45 +++++++++++++++++++ .../pages/components/buttons/BusyButtons.tsx | 45 +++++++++++++++++++ docs/src/pages/components/buttons/buttons.md | 8 +++- .../src/BusyButton/BusyButton.d.ts | 45 +++++++++++++++++++ .../material-ui/src/BusyButton/BusyButton.js | 42 +++++++++++++++++ .../src/BusyButton/BusyButton.test.js | 23 ++++++++++ .../material-ui/src/BusyButton/index.d.ts | 2 + packages/material-ui/src/BusyButton/index.js | 1 + packages/material-ui/src/Button/Button.d.ts | 19 +++++++- packages/material-ui/src/index.d.ts | 3 ++ packages/material-ui/src/index.js | 3 ++ 11 files changed, 234 insertions(+), 2 deletions(-) create mode 100644 docs/src/pages/components/buttons/BusyButtons.js create mode 100644 docs/src/pages/components/buttons/BusyButtons.tsx create mode 100644 packages/material-ui/src/BusyButton/BusyButton.d.ts create mode 100644 packages/material-ui/src/BusyButton/BusyButton.js create mode 100644 packages/material-ui/src/BusyButton/BusyButton.test.js create mode 100644 packages/material-ui/src/BusyButton/index.d.ts create mode 100644 packages/material-ui/src/BusyButton/index.js diff --git a/docs/src/pages/components/buttons/BusyButtons.js b/docs/src/pages/components/buttons/BusyButtons.js new file mode 100644 index 00000000000000..12b59782e758a7 --- /dev/null +++ b/docs/src/pages/components/buttons/BusyButtons.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import BusyButton from '@material-ui/core/BusyButton'; +import FileCopyIcon from '@material-ui/icons/FileCopy'; +import SaveIcon from '@material-ui/icons/Save'; + +const useStyles = makeStyles(theme => ({ + root: { + '& button': { + margin: theme.spacing(1), + }, + }, +})); + +export default function BusyButtons() { + const classes = useStyles(); + const [loading, setLoading] = React.useState(false); + + return ( +
+ + Loading… + + } + > + Duplicate + + { + setLoading(true); + }} + startIcon={} + > + Save + +
+ ); +} \ No newline at end of file diff --git a/docs/src/pages/components/buttons/BusyButtons.tsx b/docs/src/pages/components/buttons/BusyButtons.tsx new file mode 100644 index 00000000000000..12b59782e758a7 --- /dev/null +++ b/docs/src/pages/components/buttons/BusyButtons.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import BusyButton from '@material-ui/core/BusyButton'; +import FileCopyIcon from '@material-ui/icons/FileCopy'; +import SaveIcon from '@material-ui/icons/Save'; + +const useStyles = makeStyles(theme => ({ + root: { + '& button': { + margin: theme.spacing(1), + }, + }, +})); + +export default function BusyButtons() { + const classes = useStyles(); + const [loading, setLoading] = React.useState(false); + + return ( +
+ + Loading… + + } + > + Duplicate + + { + setLoading(true); + }} + startIcon={} + > + Save + +
+ ); +} \ No newline at end of file diff --git a/docs/src/pages/components/buttons/buttons.md b/docs/src/pages/components/buttons/buttons.md index c03fee28568dac..f2c1c1998f06b4 100644 --- a/docs/src/pages/components/buttons/buttons.md +++ b/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,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). +## Busy Buttons + +The busy buttons can show loading state and disable interactions. + +{{"demo": "pages/components/buttons/BusyButtons.js"}} + ## Complex Buttons The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`. diff --git a/packages/material-ui/src/BusyButton/BusyButton.d.ts b/packages/material-ui/src/BusyButton/BusyButton.d.ts new file mode 100644 index 00000000000000..041b1f856afdf8 --- /dev/null +++ b/packages/material-ui/src/BusyButton/BusyButton.d.ts @@ -0,0 +1,45 @@ +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. + */ + loading?: boolean; + /** + * Element placed before the children if the button is in loading state. + */ + loadingIndicator?: React.ReactNode; + }; + defaultComponent: D; + classKey: BusyButtonClassKey; +}>; + +/** + * + * Demos: + * + * - [Button Group](https://material-ui.com/components/button-group/) + * - [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; + +export type BusyButtonProps< + D extends React.ElementType = BusyButtonTypeMap['defaultComponent'], + P = {} +> = OverrideProps, D>; + +export type BusyButtonClassKey = + | 'root' + | 'loading' + +export default BusyButton; diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js new file mode 100644 index 00000000000000..d2038c0654e034 --- /dev/null +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -0,0 +1,42 @@ +import * as React from 'react'; +import clsx from 'clsx'; +import withStyles from '../styles/withStyles'; +import Button from '../Button'; +import CircularProgress from '../CircularProgress'; + +export const styles = (theme) => ({ + /* Styles applied to the root element. */ + root: {}, + /* Styles applied to the root element if `loading={true}`. */ + loading: {}, +}); + +const BusyButton = React.forwardRef(function BusyButton(props, ref) { + const { + classes, + className, + disabled = false, + loading = false, + startIcon, + loadingIndicator = , + ...other + } = props; + + return ( + ); }); From fa7701df47583e6eca1257f1300b05b24a23f332 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 10 Jun 2020 21:54:44 +0200 Subject: [PATCH 06/35] fix width change when changing state --- .../src/LoadingButton/LoadingButton.js | 43 ++++++++++++++++--- 1 file changed, 38 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/LoadingButton/LoadingButton.js b/packages/material-ui/src/LoadingButton/LoadingButton.js index eb46605503fbfe..9e3bbc480fc586 100644 --- a/packages/material-ui/src/LoadingButton/LoadingButton.js +++ b/packages/material-ui/src/LoadingButton/LoadingButton.js @@ -1,6 +1,7 @@ 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'; @@ -9,6 +10,36 @@ export const styles = () => ({ 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) { @@ -18,8 +49,6 @@ const LoadingButton = React.forwardRef(function LoadingButton(props, ref) { disabled = false, loading = false, loadingIndicatorPosition = 'start', - startIcon, - endIcon, children, loadingIndicator = , ...other @@ -34,13 +63,17 @@ const LoadingButton = React.forwardRef(function LoadingButton(props, ref) { }, className, )} - startIcon={loading && loadingIndicatorPosition === 'start' ? loadingIndicator : startIcon} - endIcon={loading && loadingIndicatorPosition === 'end' ? loadingIndicator : endIcon} 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 && loadingIndicatorPosition === 'center' ? loadingIndicator : children} + {loading &&
{loadingIndicator}
} + {children} ); }); From 375cf717f202b89a6d12e2b539125b38af6dd6e6 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 12 Jun 2020 08:39:13 +0200 Subject: [PATCH 07/35] renamed props and component --- .../{LoadingButtons.tsx => BusyButtons.js} | 43 +++++----- .../{LoadingButtons.js => BusyButtons.tsx} | 40 ++++----- docs/src/pages/components/buttons/buttons.md | 8 +- .../src/BusyButton/BusyButton.d.ts | 47 +++++++++++ .../material-ui/src/BusyButton/BusyButton.js | 82 +++++++++++++++++++ .../BusyButton.test.js} | 8 +- .../material-ui/src/BusyButton/index.d.ts | 2 + packages/material-ui/src/BusyButton/index.js | 1 + .../src/LoadingButton/LoadingButton.d.ts | 47 ----------- .../src/LoadingButton/LoadingButton.js | 81 ------------------ .../material-ui/src/LoadingButton/index.d.ts | 2 - .../material-ui/src/LoadingButton/index.js | 1 - packages/material-ui/src/index.d.ts | 4 +- packages/material-ui/src/index.js | 4 +- 14 files changed, 183 insertions(+), 187 deletions(-) rename docs/src/pages/components/buttons/{LoadingButtons.tsx => BusyButtons.js} (53%) rename docs/src/pages/components/buttons/{LoadingButtons.js => BusyButtons.tsx} (58%) create mode 100644 packages/material-ui/src/BusyButton/BusyButton.d.ts create mode 100644 packages/material-ui/src/BusyButton/BusyButton.js rename packages/material-ui/src/{LoadingButton/LoadingButton.test.js => BusyButton/BusyButton.test.js} (66%) create mode 100644 packages/material-ui/src/BusyButton/index.d.ts create mode 100644 packages/material-ui/src/BusyButton/index.js delete mode 100644 packages/material-ui/src/LoadingButton/LoadingButton.d.ts delete mode 100644 packages/material-ui/src/LoadingButton/LoadingButton.js delete mode 100644 packages/material-ui/src/LoadingButton/index.d.ts delete mode 100644 packages/material-ui/src/LoadingButton/index.js diff --git a/docs/src/pages/components/buttons/LoadingButtons.tsx b/docs/src/pages/components/buttons/BusyButtons.js similarity index 53% rename from docs/src/pages/components/buttons/LoadingButtons.tsx rename to docs/src/pages/components/buttons/BusyButtons.js index 15d3083cc6fbd1..5497b778c5d282 100644 --- a/docs/src/pages/components/buttons/LoadingButtons.tsx +++ b/docs/src/pages/components/buttons/BusyButtons.js @@ -1,6 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import LoadingButton from '@material-ui/core/LoadingButton'; +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'; @@ -17,52 +17,47 @@ const useStyles = makeStyles((theme) => ({ }, })); -export default function LoadingButtons() { +export default function BusyButtons() { const classes = useStyles(); - const [loading, setLoading] = React.useState(false); + const [pending, setPending] = React.useState(false); return (
setLoading(!loading)} - name="loading" + checked={pending} + onChange={() => setPending(!pending)} + name="pending" color="primary" /> } className={classes.switch} label="Loading" /> - + Fetch data - - + Submit - - + } > Send - - } - > + + }> Save - +
); } diff --git a/docs/src/pages/components/buttons/LoadingButtons.js b/docs/src/pages/components/buttons/BusyButtons.tsx similarity index 58% rename from docs/src/pages/components/buttons/LoadingButtons.js rename to docs/src/pages/components/buttons/BusyButtons.tsx index 15d3083cc6fbd1..399fb1557954c1 100644 --- a/docs/src/pages/components/buttons/LoadingButtons.js +++ b/docs/src/pages/components/buttons/BusyButtons.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import LoadingButton from '@material-ui/core/LoadingButton'; +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'; @@ -17,52 +17,52 @@ const useStyles = makeStyles((theme) => ({ }, })); -export default function LoadingButtons() { +export default function BusyButtons() { const classes = useStyles(); - const [loading, setLoading] = React.useState(false); + const [pending, setPending] = React.useState(false); return (
setLoading(!loading)} - name="loading" + checked={pending} + onChange={() => setPending(!pending)} + name="pending" color="primary" /> } className={classes.switch} label="Loading" /> - + Fetch data - - + Submit - - + } > Send - - + } > Save - +
); } diff --git a/docs/src/pages/components/buttons/buttons.md b/docs/src/pages/components/buttons/buttons.md index 91e35ddea45dee..307761ef9e68e6 100644 --- a/docs/src/pages/components/buttons/buttons.md +++ b/docs/src/pages/components/buttons/buttons.md @@ -1,6 +1,6 @@ --- title: Button React component -components: Button, IconButton, ButtonBase, LoadingButton +components: Button, IconButton, ButtonBase, BusyButton --- # Button @@ -94,11 +94,11 @@ 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 +## Busy Buttons -The loading buttons can show loading state and disable interactions. +The busy buttons can show pending state and disable interactions. -{{"demo": "pages/components/buttons/LoadingButtons.js"}} +{{"demo": "pages/components/buttons/BusyButtons.js"}} ## Complex Buttons diff --git a/packages/material-ui/src/BusyButton/BusyButton.d.ts b/packages/material-ui/src/BusyButton/BusyButton.d.ts new file mode 100644 index 00000000000000..305505a3226e48 --- /dev/null +++ b/packages/material-ui/src/BusyButton/BusyButton.d.ts @@ -0,0 +1,47 @@ +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. + */ + pendingIndicatorPosition?: 'start' | 'end' | 'center'; + }; + defaultComponent: D; + classKey: BusyButtonClassKey; +}>; + +/** + * + * Demos: + * + * - [Button Group](https://material-ui.com/components/button-group/) + * - [Buttons](https://material-ui.com/components/buttons/) + * + * API: + * + * - [BusyButton API](https://material-ui.com/api/pending-button/) + * - inherits [Button API](https://material-ui.com/api/button/) + */ +declare const BusyButton: ExtendButton; + +export type BusyButtonProps< + D extends React.ElementType = BusyButtonTypeMap['defaultComponent'], + P = {} +> = OverrideProps, D>; + +export type BusyButtonClassKey = 'root' | 'pending'; + +export default BusyButton; diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js new file mode 100644 index 00000000000000..ec2f207be8e84c --- /dev/null +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -0,0 +1,82 @@ +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 `pending={true}`. */ + pending: {}, + /* Styles applied to the pendingIndicator element. */ + pendingIndicator: { + position: 'absolute', + visibility: 'visible', + display: 'flex', + }, + /* Styles applied to the pendingIndicator element if `pendingIndicatorPosition="center"`. */ + pendingIndicatorCenter: { + left: '50%', + transform: 'translate(-50%)', + }, + /* Styles applied to the pendingIndicator element if `pendingIndicatorPosition="start"`. */ + pendingIndicatorStart: { + left: 10, + }, + /* Styles applied to the pendingIndicator element if `pendingIndicatorPosition="end"`. */ + pendingIndicatorEnd: { + right: 10, + }, + /* Styles applied to the endIcon element if `pending={true}` and `pendingIndicatorPosition="end"`. */ + endIconLoadingEnd: { + visibility: 'hidden' + }, + /* Styles applied to the startIcon element if `pending={true}` and `pendingIndicatorPosition="start"`. */ + startIconLoadingStart: { + visibility: 'hidden' + }, + /* Styles applied to the label element if `pending={true}` and `pendingIndicatorPosition="center"`. */ + labelLoadingCenter: { + visibility: 'hidden', + }, +}); + +const BusyButton = React.forwardRef(function BusyButton(props, ref) { + const { + classes, + className, + disabled = false, + pending = false, + pendingIndicatorPosition = 'start', + children, + pendingIndicator = , + ...other + } = props; + + return ( + + ); +}); + +export default withStyles(styles, { name: 'MuiBusyButton' })(BusyButton); diff --git a/packages/material-ui/src/LoadingButton/LoadingButton.test.js b/packages/material-ui/src/BusyButton/BusyButton.test.js similarity index 66% rename from packages/material-ui/src/LoadingButton/LoadingButton.test.js rename to packages/material-ui/src/BusyButton/BusyButton.test.js index bc5d0576568fbc..740dcc6bf031b1 100644 --- a/packages/material-ui/src/LoadingButton/LoadingButton.test.js +++ b/packages/material-ui/src/BusyButton/BusyButton.test.js @@ -2,18 +2,18 @@ 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 BusyButton from './BusyButton'; import Button from '../Button'; -describe('', () => { +describe('', () => { const mount = createMount(); let classes; before(() => { - classes = getClasses(Hello World); + classes = getClasses(Hello World); }); - describeConformance(Conformance?, () => ({ + describeConformance(Conformance?, () => ({ classes, inheritComponent: Button, mount, diff --git a/packages/material-ui/src/BusyButton/index.d.ts b/packages/material-ui/src/BusyButton/index.d.ts new file mode 100644 index 00000000000000..171d2e5d501034 --- /dev/null +++ b/packages/material-ui/src/BusyButton/index.d.ts @@ -0,0 +1,2 @@ +export { default } from './BusyButton'; +export * from './BusyButton'; diff --git a/packages/material-ui/src/BusyButton/index.js b/packages/material-ui/src/BusyButton/index.js new file mode 100644 index 00000000000000..a855c87f7f2daa --- /dev/null +++ b/packages/material-ui/src/BusyButton/index.js @@ -0,0 +1 @@ +export { default } from './BusyButton'; diff --git a/packages/material-ui/src/LoadingButton/LoadingButton.d.ts b/packages/material-ui/src/LoadingButton/LoadingButton.d.ts deleted file mode 100644 index c4a5f11805bb2d..00000000000000 --- a/packages/material-ui/src/LoadingButton/LoadingButton.d.ts +++ /dev/null @@ -1,47 +0,0 @@ -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; - -export type LoadingButtonProps< - D extends React.ElementType = LoadingButtonTypeMap['defaultComponent'], - P = {} -> = OverrideProps, D>; - -export type LoadingButtonClassKey = 'root' | 'loading'; - -export default LoadingButton; diff --git a/packages/material-ui/src/LoadingButton/LoadingButton.js b/packages/material-ui/src/LoadingButton/LoadingButton.js deleted file mode 100644 index 9e3bbc480fc586..00000000000000 --- a/packages/material-ui/src/LoadingButton/LoadingButton.js +++ /dev/null @@ -1,81 +0,0 @@ -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 = , - ...other - } = props; - - return ( - - ); -}); - -export default withStyles(styles, { name: 'MuiLoadingButton' })(LoadingButton); diff --git a/packages/material-ui/src/LoadingButton/index.d.ts b/packages/material-ui/src/LoadingButton/index.d.ts deleted file mode 100644 index 421603193deae6..00000000000000 --- a/packages/material-ui/src/LoadingButton/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './LoadingButton'; -export * from './LoadingButton'; diff --git a/packages/material-ui/src/LoadingButton/index.js b/packages/material-ui/src/LoadingButton/index.js deleted file mode 100644 index b12be17a139ad5..00000000000000 --- a/packages/material-ui/src/LoadingButton/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './LoadingButton'; diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts index c968b784aceb87..4cbd630a324e75 100644 --- a/packages/material-ui/src/index.d.ts +++ b/packages/material-ui/src/index.d.ts @@ -91,8 +91,8 @@ export * from './ButtonBase'; export { default as ButtonGroup } from './ButtonGroup'; export * from './ButtonGroup'; -export { default as LoadingButton } from './LoadingButton'; -export * from './LoadingButton'; +export { default as BusyButton } from './BusyButton'; +export * from './BusyButton'; export { default as Card } from './Card'; export * from './Card'; diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js index 739eb065e2bf2a..300b8c525c0f8a 100644 --- a/packages/material-ui/src/index.js +++ b/packages/material-ui/src/index.js @@ -39,8 +39,8 @@ export * from './ButtonBase'; export { default as ButtonGroup } from './ButtonGroup'; export * from './ButtonGroup'; -export { default as LoadingButton } from './LoadingButton'; -export * from './LoadingButton'; +export { default as BusyButton } from './BusyButton'; +export * from './BusyButton'; export { default as Card } from './Card'; export * from './Card'; From 276167c8c62055cdb2f609d19bac4111d483527e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 12 Jun 2020 17:49:17 +0200 Subject: [PATCH 08/35] Update packages/material-ui/src/BusyButton/BusyButton.js Co-authored-by: Olivier Tassinari --- packages/material-ui/src/BusyButton/BusyButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js index ec2f207be8e84c..78187db148079d 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.js +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -49,7 +49,7 @@ const BusyButton = React.forwardRef(function BusyButton(props, ref) { className, disabled = false, pending = false, - pendingIndicatorPosition = 'start', + pendingIndicatorPosition = 'center', children, pendingIndicator = , ...other From e6f5a860bae1305b246e8662e1836cd339c623ac Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 12 Jun 2020 17:49:34 +0200 Subject: [PATCH 09/35] Update docs/src/pages/components/buttons/BusyButtons.js Co-authored-by: Olivier Tassinari --- docs/src/pages/components/buttons/BusyButtons.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/buttons/BusyButtons.js b/docs/src/pages/components/buttons/BusyButtons.js index 5497b778c5d282..d5b526f3173b2d 100644 --- a/docs/src/pages/components/buttons/BusyButtons.js +++ b/docs/src/pages/components/buttons/BusyButtons.js @@ -36,7 +36,7 @@ export default function BusyButtons() { label="Loading" /> - Fetch data + Submit Date: Fri, 12 Jun 2020 17:49:45 +0200 Subject: [PATCH 10/35] Update docs/src/pages/components/buttons/BusyButtons.js Co-authored-by: Olivier Tassinari --- docs/src/pages/components/buttons/BusyButtons.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/buttons/BusyButtons.js b/docs/src/pages/components/buttons/BusyButtons.js index d5b526f3173b2d..5a8fe2f1bcfa2b 100644 --- a/docs/src/pages/components/buttons/BusyButtons.js +++ b/docs/src/pages/components/buttons/BusyButtons.js @@ -44,7 +44,7 @@ export default function BusyButtons() { pendingIndicator="Loading..." pendingIndicatorPosition="center" > - Submit + Fetch data Date: Fri, 12 Jun 2020 17:51:16 +0200 Subject: [PATCH 11/35] Update packages/material-ui/src/BusyButton/BusyButton.d.ts Co-authored-by: Olivier Tassinari --- packages/material-ui/src/BusyButton/BusyButton.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/BusyButton/BusyButton.d.ts b/packages/material-ui/src/BusyButton/BusyButton.d.ts index 305505a3226e48..e69c151bf513bc 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.d.ts +++ b/packages/material-ui/src/BusyButton/BusyButton.d.ts @@ -17,7 +17,7 @@ export type BusyButtonTypeMap< /** * The pending indicator can be positioned on the start, end or the center of the Button. */ - pendingIndicatorPosition?: 'start' | 'end' | 'center'; + pendingPosition?: 'start' | 'end' | 'center'; }; defaultComponent: D; classKey: BusyButtonClassKey; From 2ea5ad05a56e35fe4d363e978b77f1282e50439c Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 12 Jun 2020 18:15:22 +0200 Subject: [PATCH 12/35] addressing comments --- .../pages/components/buttons/BusyButtons.js | 41 ++--------- .../pages/components/buttons/BusyButtons.tsx | 44 +----------- .../buttons/BusyButtonsTransition.js | 64 +++++++++++++++++ .../buttons/BusyButtonsTransition.tsx | 68 +++++++++++++++++++ docs/src/pages/components/buttons/buttons.md | 4 ++ .../material-ui/src/BusyButton/BusyButton.js | 35 ++++++---- 6 files changed, 165 insertions(+), 91 deletions(-) create mode 100644 docs/src/pages/components/buttons/BusyButtonsTransition.js create mode 100644 docs/src/pages/components/buttons/BusyButtonsTransition.tsx diff --git a/docs/src/pages/components/buttons/BusyButtons.js b/docs/src/pages/components/buttons/BusyButtons.js index 5a8fe2f1bcfa2b..fc11f35124d182 100644 --- a/docs/src/pages/components/buttons/BusyButtons.js +++ b/docs/src/pages/components/buttons/BusyButtons.js @@ -1,10 +1,7 @@ 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: { @@ -12,50 +9,20 @@ const useStyles = makeStyles((theme) => ({ margin: theme.spacing(1), }, }, - switch: { - display: 'block', - }, })); export default function BusyButtons() { const classes = useStyles(); - const [pending, setPending] = React.useState(false); return (
- setPending(!pending)} - name="pending" - color="primary" - /> - } - className={classes.switch} - label="Loading" - /> - - Submit - - + Fetch data - } - > - Send + + Submit - }> + }> Save
diff --git a/docs/src/pages/components/buttons/BusyButtons.tsx b/docs/src/pages/components/buttons/BusyButtons.tsx index 399fb1557954c1..fc11f35124d182 100644 --- a/docs/src/pages/components/buttons/BusyButtons.tsx +++ b/docs/src/pages/components/buttons/BusyButtons.tsx @@ -1,10 +1,7 @@ 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: { @@ -12,55 +9,20 @@ const useStyles = makeStyles((theme) => ({ margin: theme.spacing(1), }, }, - switch: { - display: 'block', - }, })); export default function BusyButtons() { const classes = useStyles(); - const [pending, setPending] = React.useState(false); return (
- setPending(!pending)} - name="pending" - color="primary" - /> - } - className={classes.switch} - label="Loading" - /> - + Fetch data - + Submit - } - > - Send - - } - > + }> Save
diff --git a/docs/src/pages/components/buttons/BusyButtonsTransition.js b/docs/src/pages/components/buttons/BusyButtonsTransition.js new file mode 100644 index 00000000000000..606f85f771d3cb --- /dev/null +++ b/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 BusyButtons() { + const classes = useStyles(); + const [pending, setPending] = React.useState(false); + + return ( +
+ setPending(!pending)} + name="pending" + color="primary" + /> + } + className={classes.switch} + label="Loading" + /> + + Fetch data + + + Submit + + } + > + Send + + } + > + Save + +
+ ); +} diff --git a/docs/src/pages/components/buttons/BusyButtonsTransition.tsx b/docs/src/pages/components/buttons/BusyButtonsTransition.tsx new file mode 100644 index 00000000000000..4e2d9a72123e83 --- /dev/null +++ b/docs/src/pages/components/buttons/BusyButtonsTransition.tsx @@ -0,0 +1,68 @@ +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 BusyButtons() { + const classes = useStyles(); + const [pending, setPending] = React.useState(false); + + return ( +
+ setPending(!pending)} + name="pending" + color="primary" + /> + } + className={classes.switch} + label="Loading" + /> + + Fetch data + + + Submit + + } + > + Send + + } + > + Save + +
+ ); +} diff --git a/docs/src/pages/components/buttons/buttons.md b/docs/src/pages/components/buttons/buttons.md index 307761ef9e68e6..05f6a0ad3bd1fb 100644 --- a/docs/src/pages/components/buttons/buttons.md +++ b/docs/src/pages/components/buttons/buttons.md @@ -100,6 +100,10 @@ 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`. diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js index 78187db148079d..b353c5cdaf6898 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.js +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -16,28 +16,28 @@ export const styles = () => ({ visibility: 'visible', display: 'flex', }, - /* Styles applied to the pendingIndicator element if `pendingIndicatorPosition="center"`. */ + /* Styles applied to the pendingIndicator element if `pendingPosition="center"`. */ pendingIndicatorCenter: { left: '50%', transform: 'translate(-50%)', }, - /* Styles applied to the pendingIndicator element if `pendingIndicatorPosition="start"`. */ + /* Styles applied to the pendingIndicator element if `pendingPosition="start"`. */ pendingIndicatorStart: { left: 10, }, - /* Styles applied to the pendingIndicator element if `pendingIndicatorPosition="end"`. */ + /* Styles applied to the pendingIndicator element if `pendingPosition="end"`. */ pendingIndicatorEnd: { right: 10, }, - /* Styles applied to the endIcon element if `pending={true}` and `pendingIndicatorPosition="end"`. */ + /* Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`. */ endIconLoadingEnd: { - visibility: 'hidden' + visibility: 'hidden', }, - /* Styles applied to the startIcon element if `pending={true}` and `pendingIndicatorPosition="start"`. */ + /* Styles applied to the startIcon element if `pending={true}` and `pendingPosition="start"`. */ startIconLoadingStart: { - visibility: 'hidden' + visibility: 'hidden', }, - /* Styles applied to the label element if `pending={true}` and `pendingIndicatorPosition="center"`. */ + /* Styles applied to the label element if `pending={true}` and `pendingPosition="center"`. */ labelLoadingCenter: { visibility: 'hidden', }, @@ -49,7 +49,7 @@ const BusyButton = React.forwardRef(function BusyButton(props, ref) { className, disabled = false, pending = false, - pendingIndicatorPosition = 'center', + pendingPosition = 'center', children, pendingIndicator = , ...other @@ -67,13 +67,22 @@ const BusyButton = React.forwardRef(function BusyButton(props, ref) { disabled={disabled || pending} ref={ref} classes={{ - startIcon: classes[`startIcon${pending ? 'Loading' : ''}${capitalize(pendingIndicatorPosition)}`], - endIcon: classes[`endIcon${pending ? 'Loading' : ''}${capitalize(pendingIndicatorPosition)}`], - label: classes[`label${pending ? 'Loading' : ''}${capitalize(pendingIndicatorPosition)}`] + startIcon: classes[`startIcon${pending ? 'Loading' : ''}${capitalize(pendingPosition)}`], + endIcon: classes[`endIcon${pending ? 'Loading' : ''}${capitalize(pendingPosition)}`], + label: classes[`label${pending ? 'Loading' : ''}${capitalize(pendingPosition)}`], }} {...other} > - {pending &&
{pendingIndicator}
} + {pending && ( +
+ {pendingIndicator} +
+ )} {children} ); From a0a2370d5c55fc2ae4e690c19d99c1491b3cfae3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 12 Jun 2020 18:18:24 +0200 Subject: [PATCH 13/35] fixed position --- packages/material-ui/src/BusyButton/BusyButton.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js index b353c5cdaf6898..0aed07f693d58a 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.js +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -23,11 +23,11 @@ export const styles = () => ({ }, /* Styles applied to the pendingIndicator element if `pendingPosition="start"`. */ pendingIndicatorStart: { - left: 10, + left: 16, }, /* Styles applied to the pendingIndicator element if `pendingPosition="end"`. */ pendingIndicatorEnd: { - right: 10, + right: 16, }, /* Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`. */ endIconLoadingEnd: { From e877474e96fbcd80db0c4964ae66f8234f5e64ab Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 12 Jun 2020 18:56:02 +0200 Subject: [PATCH 14/35] comments --- docs/src/pages/components/buttons/BusyButtonsTransition.js | 2 +- docs/src/pages/components/buttons/BusyButtonsTransition.tsx | 2 +- packages/material-ui/src/BusyButton/BusyButton.js | 6 ++++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/components/buttons/BusyButtonsTransition.js b/docs/src/pages/components/buttons/BusyButtonsTransition.js index 606f85f771d3cb..5ed90e6067050d 100644 --- a/docs/src/pages/components/buttons/BusyButtonsTransition.js +++ b/docs/src/pages/components/buttons/BusyButtonsTransition.js @@ -33,7 +33,7 @@ export default function BusyButtons() { /> } className={classes.switch} - label="Loading" + label="Pending" /> Fetch data diff --git a/docs/src/pages/components/buttons/BusyButtonsTransition.tsx b/docs/src/pages/components/buttons/BusyButtonsTransition.tsx index 4e2d9a72123e83..064480fcdc3a9d 100644 --- a/docs/src/pages/components/buttons/BusyButtonsTransition.tsx +++ b/docs/src/pages/components/buttons/BusyButtonsTransition.tsx @@ -33,7 +33,7 @@ export default function BusyButtons() { /> } className={classes.switch} - label="Loading" + label="Pending" /> Fetch data diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js index 0aed07f693d58a..4dc1ef8cdf8f87 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.js +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -43,15 +43,17 @@ export const styles = () => ({ }, }); +const PendingIndicator = + const BusyButton = React.forwardRef(function BusyButton(props, ref) { - const { + const { classes, className, disabled = false, pending = false, pendingPosition = 'center', children, - pendingIndicator = , + pendingIndicator = PendingIndicator, ...other } = props; From 5cf4b7462db30b3c7dc395e46d78ff0ba80e98c0 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 12 Jun 2020 20:59:33 +0200 Subject: [PATCH 15/35] proptypes --- .../pages/components/buttons/BusyButtons.js | 4 +- .../pages/components/buttons/BusyButtons.tsx | 4 +- .../material-ui/src/BusyButton/BusyButton.js | 101 ++++++++++++++++++ packages/material-ui/src/styles/props.d.ts | 1 + 4 files changed, 106 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/components/buttons/BusyButtons.js b/docs/src/pages/components/buttons/BusyButtons.js index fc11f35124d182..f4677abc135f88 100644 --- a/docs/src/pages/components/buttons/BusyButtons.js +++ b/docs/src/pages/components/buttons/BusyButtons.js @@ -17,10 +17,10 @@ export default function BusyButtons() { return (
- Fetch data + Submit - Submit + Fetch data }> Save diff --git a/docs/src/pages/components/buttons/BusyButtons.tsx b/docs/src/pages/components/buttons/BusyButtons.tsx index fc11f35124d182..f4677abc135f88 100644 --- a/docs/src/pages/components/buttons/BusyButtons.tsx +++ b/docs/src/pages/components/buttons/BusyButtons.tsx @@ -17,10 +17,10 @@ export default function BusyButtons() { return (
- Fetch data + Submit - Submit + Fetch data }> Save diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js index 4dc1ef8cdf8f87..be457cc2d23796 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.js +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -1,5 +1,6 @@ import * as React from 'react'; import clsx from 'clsx'; +import { chainPropTypes } from '@material-ui/utils'; import withStyles from '../styles/withStyles'; import capitalize from '../utils/capitalize'; import Button from '../Button'; @@ -90,4 +91,104 @@ const BusyButton = React.forwardRef(function BusyButton(props, ref) { ); }); +BusyButton.propTypes = { + /** + * The content of the button. + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css) below for more details. + */ + classes: PropTypes.object, + /** + * @ignore + */ + className: PropTypes.string, + /** + * The color of the component. It supports those theme colors that make sense for this component. + */ + color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']), + /** + * The component used for the root node. + * Either a string to use a HTML element or a component. + */ + component: PropTypes /* @typescript-to-proptypes-ignore */.elementType, + /** + * If `true`, the button will be disabled. + */ + disabled: PropTypes.bool, + /** + * If `true`, no elevation is used. + */ + disableElevation: PropTypes.bool, + /** + * If `true`, the keyboard focus ripple will be disabled. + */ + disableFocusRipple: PropTypes.bool, + /** + * If `true`, the ripple effect will be disabled. + * + * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure + * to highlight the element by applying separate styles with the `focusVisibleClassName`. + */ + disableRipple: PropTypes.bool, + /** + * Element placed after the children. + */ + endIcon: PropTypes.node, + /** + * @ignore + */ + focusVisibleClassName: PropTypes.string, + /** + * If `true`, the button will take up the full width of its container. + */ + fullWidth: PropTypes.bool, + /** + * The URL to link to when the button is clicked. + * If defined, an `a` element will be used as the root node. + */ + href: PropTypes.string, + /** + * The content of the button. + */ + pending: PropTypes.bool, + /** + * Element placed before the children if the button is in pending state. + */ + pendingIndicator: PropTypes.node, + /** + * The pending indicator can be positioned on the start, end or the center of the Button. + */ + pendingPosition: chainPropTypes(PropTypes.oneOf(['start', 'end', 'center']), (props) => { + if (props.pendingPosition === 'start' && !props.startIcon) { + return new Error(`Material-UI: The pendingPosition="start" should be used in combinatino with startIcon.`); + } + if (props.pendingPosition === 'end' && !props.endIcon) { + return new Error(`Material-UI: The pendingPosition="end" should be used in combinatino with endIcon.`); + } + return null; + }), + /** + * The size of the button. + * `small` is equivalent to the dense button styling. + */ + size: PropTypes.oneOf(['large', 'medium', 'small']), + /** + * Element placed before the children. + */ + startIcon: PropTypes.node, + /** + * @ignore + */ + type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]), + /** + * The variant to use. + */ + variant: PropTypes.oneOf(['contained', 'outlined', 'text']), +}; + + + export default withStyles(styles, { name: 'MuiBusyButton' })(BusyButton); diff --git a/packages/material-ui/src/styles/props.d.ts b/packages/material-ui/src/styles/props.d.ts index 9b58fd99286fe2..bf418368931855 100644 --- a/packages/material-ui/src/styles/props.d.ts +++ b/packages/material-ui/src/styles/props.d.ts @@ -5,6 +5,7 @@ import { BadgeProps } from '../Badge'; import { BottomNavigationActionProps } from '../BottomNavigationAction'; import { BottomNavigationProps } from '../BottomNavigation'; import { BreadcrumbsProps } from '../Breadcrumbs'; +import { BusyButtonProps } from '../BusyButton'; import { ButtonBaseProps } from '../ButtonBase'; import { ButtonGroupProps } from '../ButtonGroup'; import { ButtonProps } from '../Button'; From e1f983a017d8b98f47e8f39a6e5fd0f01f813be5 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 12 Jun 2020 21:02:35 +0200 Subject: [PATCH 16/35] proptypes --- packages/material-ui/src/BusyButton/BusyButton.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js index be457cc2d23796..72290756bdfea1 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.js +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import clsx from 'clsx'; import { chainPropTypes } from '@material-ui/utils'; import withStyles from '../styles/withStyles'; From 09c5321ae98631160c7ae78b4cce788245d6888d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 12 Jun 2020 21:35:23 +0200 Subject: [PATCH 17/35] fixed --- .../components/buttons/BusyButtonsTransition.tsx | 6 +----- packages/material-ui/src/BusyButton/BusyButton.js | 14 ++++++++------ packages/material-ui/src/styles/props.d.ts | 1 + 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/docs/src/pages/components/buttons/BusyButtonsTransition.tsx b/docs/src/pages/components/buttons/BusyButtonsTransition.tsx index 064480fcdc3a9d..5ed90e6067050d 100644 --- a/docs/src/pages/components/buttons/BusyButtonsTransition.tsx +++ b/docs/src/pages/components/buttons/BusyButtonsTransition.tsx @@ -38,11 +38,7 @@ export default function BusyButtons() { Fetch data - + Submit ({ }, }); -const PendingIndicator = +const PendingIndicator = ; const BusyButton = React.forwardRef(function BusyButton(props, ref) { - const { + const { classes, className, disabled = false, @@ -164,10 +164,14 @@ BusyButton.propTypes = { */ pendingPosition: chainPropTypes(PropTypes.oneOf(['start', 'end', 'center']), (props) => { if (props.pendingPosition === 'start' && !props.startIcon) { - return new Error(`Material-UI: The pendingPosition="start" should be used in combinatino with startIcon.`); + return new Error( + `Material-UI: The pendingPosition="start" should be used in combination with startIcon.`, + ); } if (props.pendingPosition === 'end' && !props.endIcon) { - return new Error(`Material-UI: The pendingPosition="end" should be used in combinatino with endIcon.`); + return new Error( + `Material-UI: The pendingPosition="end" should be used in combination with endIcon.`, + ); } return null; }), @@ -190,6 +194,4 @@ BusyButton.propTypes = { variant: PropTypes.oneOf(['contained', 'outlined', 'text']), }; - - export default withStyles(styles, { name: 'MuiBusyButton' })(BusyButton); diff --git a/packages/material-ui/src/styles/props.d.ts b/packages/material-ui/src/styles/props.d.ts index bf418368931855..87f8fdb016163c 100644 --- a/packages/material-ui/src/styles/props.d.ts +++ b/packages/material-ui/src/styles/props.d.ts @@ -113,6 +113,7 @@ export interface ComponentsPropsList { MuiBottomNavigation: BottomNavigationProps; MuiBottomNavigationAction: BottomNavigationActionProps; MuiBreadcrumbs: BreadcrumbsProps; + MuiBusyButton: BusyButtonProps; MuiButton: ButtonProps; MuiButtonBase: ButtonBaseProps; MuiButtonGroup: ButtonGroupProps; From b4ff58c18642203879bcbdc47ed6ae69103f2b02 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 12 Jun 2020 23:01:44 +0200 Subject: [PATCH 18/35] Update docs/src/pages/components/buttons/buttons.md --- docs/src/pages/components/buttons/buttons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/buttons/buttons.md b/docs/src/pages/components/buttons/buttons.md index 05f6a0ad3bd1fb..ac8f1d423ca98e 100644 --- a/docs/src/pages/components/buttons/buttons.md +++ b/docs/src/pages/components/buttons/buttons.md @@ -94,7 +94,7 @@ 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 +## Busy buttons The busy buttons can show pending state and disable interactions. From 4b58e574571609414f7acb448a7d192d4c2b9be3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sat, 13 Jun 2020 07:53:38 +0200 Subject: [PATCH 19/35] comments --- docs/src/pages/components/buttons/BusyButtonsTransition.js | 2 +- docs/src/pages/components/buttons/BusyButtonsTransition.tsx | 2 +- packages/material-ui/src/styles/overrides.d.ts | 2 ++ 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/buttons/BusyButtonsTransition.js b/docs/src/pages/components/buttons/BusyButtonsTransition.js index 5ed90e6067050d..97d60975f64fe6 100644 --- a/docs/src/pages/components/buttons/BusyButtonsTransition.js +++ b/docs/src/pages/components/buttons/BusyButtonsTransition.js @@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) => ({ }, })); -export default function BusyButtons() { +export default function BusyButtonsTransition() { const classes = useStyles(); const [pending, setPending] = React.useState(false); diff --git a/docs/src/pages/components/buttons/BusyButtonsTransition.tsx b/docs/src/pages/components/buttons/BusyButtonsTransition.tsx index 5ed90e6067050d..97d60975f64fe6 100644 --- a/docs/src/pages/components/buttons/BusyButtonsTransition.tsx +++ b/docs/src/pages/components/buttons/BusyButtonsTransition.tsx @@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) => ({ }, })); -export default function BusyButtons() { +export default function BusyButtonsTransition() { const classes = useStyles(); const [pending, setPending] = React.useState(false); diff --git a/packages/material-ui/src/styles/overrides.d.ts b/packages/material-ui/src/styles/overrides.d.ts index fe4dab79ef0906..bae512faa4723c 100644 --- a/packages/material-ui/src/styles/overrides.d.ts +++ b/packages/material-ui/src/styles/overrides.d.ts @@ -6,6 +6,7 @@ import { BadgeClassKey } from '../Badge'; import { BottomNavigationActionClassKey } from '../BottomNavigationAction'; import { BottomNavigationClassKey } from '../BottomNavigation'; import { BreadcrumbsClassKey } from '../Breadcrumbs'; +import { BusyButtonClassKey } from '../BusyButton'; import { ButtonBaseClassKey } from '../ButtonBase'; import { ButtonClassKey } from '../Button'; import { ButtonGroupClassKey } from '../ButtonGroup'; @@ -114,6 +115,7 @@ export interface ComponentNameToClassKey { MuiBottomNavigation: BottomNavigationClassKey; MuiBottomNavigationAction: BottomNavigationActionClassKey; MuiBreadcrumbs: BreadcrumbsClassKey; + MuiBusyButton: BusyButtonClassKey; MuiButton: ButtonClassKey; MuiButtonBase: ButtonBaseClassKey; MuiButtonGroup: ButtonGroupClassKey; From 7885994878d6d018c72b736b29c5738ca182c228 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sat, 13 Jun 2020 07:54:53 +0200 Subject: [PATCH 20/35] Update packages/material-ui/src/BusyButton/BusyButton.js Co-authored-by: Olivier Tassinari --- packages/material-ui/src/BusyButton/BusyButton.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js index 210dfa33d7e280..386cd160e88fc3 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.js +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -49,13 +49,13 @@ const PendingIndicator = ; const BusyButton = React.forwardRef(function BusyButton(props, ref) { const { + children, classes, className, disabled = false, pending = false, - pendingPosition = 'center', - children, pendingIndicator = PendingIndicator, + pendingPosition = 'center', ...other } = props; From 5e161ea3581ef4e01945980373bda7d8693950ff Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sat, 13 Jun 2020 07:55:03 +0200 Subject: [PATCH 21/35] Update packages/material-ui/src/BusyButton/BusyButton.js Co-authored-by: Olivier Tassinari --- packages/material-ui/src/BusyButton/BusyButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js index 386cd160e88fc3..5311242ee8ed6c 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.js +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -160,7 +160,7 @@ BusyButton.propTypes = { */ pendingIndicator: PropTypes.node, /** - * The pending indicator can be positioned on the start, end or the center of the Button. + * The pending indicator can be positioned on the start, end, or the center of the button. */ pendingPosition: chainPropTypes(PropTypes.oneOf(['start', 'end', 'center']), (props) => { if (props.pendingPosition === 'start' && !props.startIcon) { From a531d8cc1c9044cc331fd41dd07e995c17c1da36 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sat, 13 Jun 2020 08:03:04 +0200 Subject: [PATCH 22/35] proptypes --- packages/material-ui/src/BusyButton/BusyButton.d.ts | 2 +- packages/material-ui/src/BusyButton/BusyButton.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/BusyButton/BusyButton.d.ts b/packages/material-ui/src/BusyButton/BusyButton.d.ts index e69c151bf513bc..eb4cb257a62a3b 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.d.ts +++ b/packages/material-ui/src/BusyButton/BusyButton.d.ts @@ -15,7 +15,7 @@ export type BusyButtonTypeMap< */ pendingIndicator?: React.ReactNode; /** - * The pending indicator can be positioned on the start, end or the center of the Button. + * The pending indicator can be positioned on the start, end, or the center of the button. */ pendingPosition?: 'start' | 'end' | 'center'; }; diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js index 5311242ee8ed6c..18e0b200491492 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.js +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -93,6 +93,10 @@ const BusyButton = React.forwardRef(function BusyButton(props, ref) { }); BusyButton.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content of the button. */ From b52673959070642b0de5992fd7e33f429f0d922b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sat, 13 Jun 2020 08:16:03 +0200 Subject: [PATCH 23/35] prettier + docs:api --- .../{loading-button.js => busy-button.js} | 4 +- docs/pages/api-docs/busy-button.md | 83 +++++++++++++++++++ .../src/BusyButton/BusyButton.d.ts | 3 +- .../material-ui/src/BusyButton/BusyButton.js | 2 +- 4 files changed, 87 insertions(+), 5 deletions(-) rename docs/pages/api-docs/{loading-button.js => busy-button.js} (74%) create mode 100644 docs/pages/api-docs/busy-button.md diff --git a/docs/pages/api-docs/loading-button.js b/docs/pages/api-docs/busy-button.js similarity index 74% rename from docs/pages/api-docs/loading-button.js rename to docs/pages/api-docs/busy-button.js index ee46e68fbf7e46..bce0bff3b74c57 100644 --- a/docs/pages/api-docs/loading-button.js +++ b/docs/pages/api-docs/busy-button.js @@ -2,8 +2,8 @@ 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$/); +const pageFilename = 'api/busy-button'; +const requireRaw = require.context('!raw-loader!./', false, /\/busy-button\.md$/); export default function Page({ docs }) { return ; diff --git a/docs/pages/api-docs/busy-button.md b/docs/pages/api-docs/busy-button.md new file mode 100644 index 00000000000000..80abc687cb1eea --- /dev/null +++ b/docs/pages/api-docs/busy-button.md @@ -0,0 +1,83 @@ +--- +filename: /packages/material-ui/src/BusyButton/BusyButton.js +--- + + + +# BusyButton API + +

The API documentation of the BusyButton React component. Learn more about the props and the CSS customization points.

+ +## 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 | +|:-----|:-----|:--------|:------------| +| children | node | | The content of the button. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'default'
| 'inherit'
| 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | +| component | elementType | | The component used for the root node. Either a string to use a HTML element or a component. | +| disabled | bool | false | If `true`, the button will be disabled. | +| disableElevation | bool | | If `true`, no elevation is used. | +| disableFocusRipple | bool | | If `true`, the keyboard focus ripple will be disabled. | +| disableRipple | bool | | If `true`, the ripple effect will be disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the `focusVisibleClassName`. | +| endIcon | node | | Element placed after the children. | +| fullWidth | bool | | If `true`, the button will take up the full width of its container. | +| href | string | | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. | +| pending | bool | false | The content of the button. | +| pendingIndicator | node | <CircularProgress color="inherit" size={16} /> | Element placed before the children if the button is in pending state. | +| pendingPosition | 'start'
| 'end'
| 'center' | 'center' | The pending indicator can be positioned on the start, end, or the center of the button. | +| size | 'large'
| 'medium'
| 'small' | | The size of the button. `small` is equivalent to the dense button styling. | +| startIcon | node | | Element placed before the children. | +| variant | 'contained'
| 'outlined'
| 'text' | | The variant to use. | + +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 | +|:-----|:-------------|:------------| +| root | .MuiBusyButton-root | Styles applied to the root element. +| pending | .MuiBusyButton-pending | Styles applied to the root element if `pending={true}`. +| pendingIndicator | .MuiBusyButton-pendingIndicator | Styles applied to the pendingIndicator element. +| pendingIndicatorCenter | .MuiBusyButton-pendingIndicatorCenter | Styles applied to the pendingIndicator element if `pendingPosition="center"`. +| pendingIndicatorStart | .MuiBusyButton-pendingIndicatorStart | Styles applied to the pendingIndicator element if `pendingPosition="start"`. +| pendingIndicatorEnd | .MuiBusyButton-pendingIndicatorEnd | Styles applied to the pendingIndicator element if `pendingPosition="end"`. +| endIconLoadingEnd | .MuiBusyButton-endIconLoadingEnd | Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`. +| startIconLoadingStart | .MuiBusyButton-startIconLoadingStart | Styles applied to the startIcon element if `pending={true}` and `pendingPosition="start"`. +| labelLoadingCenter | .MuiBusyButton-labelLoadingCenter | 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/) + diff --git a/packages/material-ui/src/BusyButton/BusyButton.d.ts b/packages/material-ui/src/BusyButton/BusyButton.d.ts index eb4cb257a62a3b..34cdb0c15965a4 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.d.ts +++ b/packages/material-ui/src/BusyButton/BusyButton.d.ts @@ -27,12 +27,11 @@ export type BusyButtonTypeMap< * * Demos: * - * - [Button Group](https://material-ui.com/components/button-group/) * - [Buttons](https://material-ui.com/components/buttons/) * * API: * - * - [BusyButton API](https://material-ui.com/api/pending-button/) + * - [BusyButton API](https://material-ui.com/api/busy-button/) * - inherits [Button API](https://material-ui.com/api/button/) */ declare const BusyButton: ExtendButton; diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js index 18e0b200491492..caf02d020b7a5d 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.js +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -96,7 +96,7 @@ BusyButton.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the d.ts file and run "yarn proptypes" | - // ---------------------------------------------------------------------- + // ---------------------------------------------------------------------- /** * The content of the button. */ From ae84a9a10c76b8e8b02aa42446e3a71e10063df4 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 13 Jun 2020 11:29:12 +0200 Subject: [PATCH 24/35] yarn proptypes --disable-cache --- docs/pages/api-docs/busy-button.md | 11 ---- .../material-ui/src/BusyButton/BusyButton.js | 59 +------------------ 2 files changed, 1 insertion(+), 69 deletions(-) diff --git a/docs/pages/api-docs/busy-button.md b/docs/pages/api-docs/busy-button.md index 80abc687cb1eea..fbe6d50cb41866 100644 --- a/docs/pages/api-docs/busy-button.md +++ b/docs/pages/api-docs/busy-button.md @@ -30,21 +30,10 @@ The `MuiBusyButton` name can be used for providing [default props](/customizatio |:-----|:-----|:--------|:------------| | children | node | | The content of the button. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'default'
| 'inherit'
| 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | | The component used for the root node. Either a string to use a HTML element or a component. | | disabled | bool | false | If `true`, the button will be disabled. | -| disableElevation | bool | | If `true`, no elevation is used. | -| disableFocusRipple | bool | | If `true`, the keyboard focus ripple will be disabled. | -| disableRipple | bool | | If `true`, the ripple effect will be disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the `focusVisibleClassName`. | -| endIcon | node | | Element placed after the children. | -| fullWidth | bool | | If `true`, the button will take up the full width of its container. | -| href | string | | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. | | pending | bool | false | The content of the button. | | pendingIndicator | node | <CircularProgress color="inherit" size={16} /> | Element placed before the children if the button is in pending state. | | pendingPosition | 'start'
| 'end'
| 'center' | 'center' | The pending indicator can be positioned on the start, end, or the center of the button. | -| size | 'large'
| 'medium'
| 'small' | | The size of the button. `small` is equivalent to the dense button styling. | -| startIcon | node | | Element placed before the children. | -| variant | 'contained'
| 'outlined'
| 'text' | | The variant to use. | The `ref` is forwarded to the root element. diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js index caf02d020b7a5d..e4bb8579cabce1 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.js +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -87,6 +87,7 @@ const BusyButton = React.forwardRef(function BusyButton(props, ref) { {pendingIndicator}
)} + {children} ); @@ -110,51 +111,10 @@ BusyButton.propTypes = { * @ignore */ className: PropTypes.string, - /** - * The color of the component. It supports those theme colors that make sense for this component. - */ - color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes /* @typescript-to-proptypes-ignore */.elementType, /** * If `true`, the button will be disabled. */ disabled: PropTypes.bool, - /** - * If `true`, no elevation is used. - */ - disableElevation: PropTypes.bool, - /** - * If `true`, the keyboard focus ripple will be disabled. - */ - disableFocusRipple: PropTypes.bool, - /** - * If `true`, the ripple effect will be disabled. - * - * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure - * to highlight the element by applying separate styles with the `focusVisibleClassName`. - */ - disableRipple: PropTypes.bool, - /** - * Element placed after the children. - */ - endIcon: PropTypes.node, - /** - * @ignore - */ - focusVisibleClassName: PropTypes.string, - /** - * If `true`, the button will take up the full width of its container. - */ - fullWidth: PropTypes.bool, - /** - * The URL to link to when the button is clicked. - * If defined, an `a` element will be used as the root node. - */ - href: PropTypes.string, /** * The content of the button. */ @@ -179,23 +139,6 @@ BusyButton.propTypes = { } return null; }), - /** - * The size of the button. - * `small` is equivalent to the dense button styling. - */ - size: PropTypes.oneOf(['large', 'medium', 'small']), - /** - * Element placed before the children. - */ - startIcon: PropTypes.node, - /** - * @ignore - */ - type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]), - /** - * The variant to use. - */ - variant: PropTypes.oneOf(['contained', 'outlined', 'text']), }; export default withStyles(styles, { name: 'MuiBusyButton' })(BusyButton); From 0a8847dd1d8cd719182439db7eb873b542fd90a3 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 13 Jun 2020 11:37:44 +0200 Subject: [PATCH 25/35] switch label --- docs/src/pages/components/buttons/BusyButtonsTransition.js | 4 ++-- docs/src/pages/components/buttons/BusyButtonsTransition.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/components/buttons/BusyButtonsTransition.js b/docs/src/pages/components/buttons/BusyButtonsTransition.js index 97d60975f64fe6..f9c7ba9e61edcc 100644 --- a/docs/src/pages/components/buttons/BusyButtonsTransition.js +++ b/docs/src/pages/components/buttons/BusyButtonsTransition.js @@ -36,10 +36,10 @@ export default function BusyButtonsTransition() { label="Pending" /> - Fetch data + Submit - Submit + Fetch data - Fetch data + Submit - Submit + Fetch data Date: Sat, 13 Jun 2020 11:41:42 +0200 Subject: [PATCH 26/35] Update packages/material-ui/src/BusyButton/BusyButton.js Co-authored-by: Olivier Tassinari --- packages/material-ui/src/BusyButton/BusyButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js index e4bb8579cabce1..c215a93354044a 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.js +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -25,7 +25,7 @@ export const styles = () => ({ }, /* Styles applied to the pendingIndicator element if `pendingPosition="start"`. */ pendingIndicatorStart: { - left: 16, + left: 14, }, /* Styles applied to the pendingIndicator element if `pendingPosition="end"`. */ pendingIndicatorEnd: { From 2e9162dccb36e87a418e2f1baf619004d347a223 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 13 Jun 2020 11:45:19 +0200 Subject: [PATCH 27/35] Update packages/material-ui/src/BusyButton/BusyButton.js --- packages/material-ui/src/BusyButton/BusyButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js index c215a93354044a..a1c5aba8a80273 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.js +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -29,7 +29,7 @@ export const styles = () => ({ }, /* Styles applied to the pendingIndicator element if `pendingPosition="end"`. */ pendingIndicatorEnd: { - right: 16, + right: 14, }, /* Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`. */ endIconLoadingEnd: { From 22dc72c76211603108da68d842344ad86ebf5950 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sat, 13 Jun 2020 11:45:35 +0200 Subject: [PATCH 28/35] comments --- packages/material-ui/src/BusyButton/BusyButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui/src/BusyButton/BusyButton.js index c215a93354044a..a1c5aba8a80273 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.js +++ b/packages/material-ui/src/BusyButton/BusyButton.js @@ -29,7 +29,7 @@ export const styles = () => ({ }, /* Styles applied to the pendingIndicator element if `pendingPosition="end"`. */ pendingIndicatorEnd: { - right: 16, + right: 14, }, /* Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`. */ endIconLoadingEnd: { From f855cd251461c6f420316c240b2b83c20ba8dc4c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 13 Jun 2020 12:11:23 +0200 Subject: [PATCH 29/35] empty commit to run argos twice and compare diff From 916d6a01e49bdaeea6784959c48347d3a6b46104 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sun, 14 Jun 2020 14:07:21 +0200 Subject: [PATCH 30/35] moved BusyButton to lab --- docs/src/pages/components/buttons/BusyButtons.js | 2 +- docs/src/pages/components/buttons/BusyButtons.tsx | 2 +- .../src/pages/components/buttons/BusyButtonsTransition.js | 2 +- .../pages/components/buttons/BusyButtonsTransition.tsx | 2 +- .../src/BusyButton/BusyButton.d.ts | 4 ++-- .../src/BusyButton/BusyButton.js | 8 ++++---- .../src/BusyButton/BusyButton.test.js | 4 ++-- .../src/BusyButton/index.d.ts | 0 .../src/BusyButton/index.js | 0 packages/material-ui-lab/src/index.d.ts | 3 +++ packages/material-ui-lab/src/index.js | 3 +++ packages/material-ui/src/index.d.ts | 3 --- packages/material-ui/src/index.js | 3 --- packages/material-ui/src/styles/overrides.d.ts | 2 -- packages/material-ui/src/styles/props.d.ts | 2 -- 15 files changed, 18 insertions(+), 22 deletions(-) rename packages/{material-ui => material-ui-lab}/src/BusyButton/BusyButton.d.ts (87%) rename packages/{material-ui => material-ui-lab}/src/BusyButton/BusyButton.js (94%) rename packages/{material-ui => material-ui-lab}/src/BusyButton/BusyButton.test.js (81%) rename packages/{material-ui => material-ui-lab}/src/BusyButton/index.d.ts (100%) rename packages/{material-ui => material-ui-lab}/src/BusyButton/index.js (100%) diff --git a/docs/src/pages/components/buttons/BusyButtons.js b/docs/src/pages/components/buttons/BusyButtons.js index f4677abc135f88..3db46394c1a0df 100644 --- a/docs/src/pages/components/buttons/BusyButtons.js +++ b/docs/src/pages/components/buttons/BusyButtons.js @@ -1,6 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import BusyButton from '@material-ui/core/BusyButton'; +import BusyButton from '@material-ui/lab/BusyButton'; import SaveIcon from '@material-ui/icons/Save'; const useStyles = makeStyles((theme) => ({ diff --git a/docs/src/pages/components/buttons/BusyButtons.tsx b/docs/src/pages/components/buttons/BusyButtons.tsx index f4677abc135f88..3db46394c1a0df 100644 --- a/docs/src/pages/components/buttons/BusyButtons.tsx +++ b/docs/src/pages/components/buttons/BusyButtons.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import BusyButton from '@material-ui/core/BusyButton'; +import BusyButton from '@material-ui/lab/BusyButton'; import SaveIcon from '@material-ui/icons/Save'; const useStyles = makeStyles((theme) => ({ diff --git a/docs/src/pages/components/buttons/BusyButtonsTransition.js b/docs/src/pages/components/buttons/BusyButtonsTransition.js index f9c7ba9e61edcc..27d697110521f3 100644 --- a/docs/src/pages/components/buttons/BusyButtonsTransition.js +++ b/docs/src/pages/components/buttons/BusyButtonsTransition.js @@ -1,6 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import BusyButton from '@material-ui/core/BusyButton'; +import BusyButton from '@material-ui/lab/BusyButton'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Switch from '@material-ui/core/Switch'; import SaveIcon from '@material-ui/icons/Save'; diff --git a/docs/src/pages/components/buttons/BusyButtonsTransition.tsx b/docs/src/pages/components/buttons/BusyButtonsTransition.tsx index f9c7ba9e61edcc..27d697110521f3 100644 --- a/docs/src/pages/components/buttons/BusyButtonsTransition.tsx +++ b/docs/src/pages/components/buttons/BusyButtonsTransition.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import BusyButton from '@material-ui/core/BusyButton'; +import BusyButton from '@material-ui/lab/BusyButton'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Switch from '@material-ui/core/Switch'; import SaveIcon from '@material-ui/icons/Save'; diff --git a/packages/material-ui/src/BusyButton/BusyButton.d.ts b/packages/material-ui-lab/src/BusyButton/BusyButton.d.ts similarity index 87% rename from packages/material-ui/src/BusyButton/BusyButton.d.ts rename to packages/material-ui-lab/src/BusyButton/BusyButton.d.ts index 34cdb0c15965a4..f72b87612fa9cf 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.d.ts +++ b/packages/material-ui-lab/src/BusyButton/BusyButton.d.ts @@ -1,5 +1,5 @@ -import { ExtendButton, ExtendButtonTypeMap } from '../Button'; -import { OverrideProps } from '../OverridableComponent'; +import { ExtendButton, ExtendButtonTypeMap } from '@material-ui/core/Button'; +import { OverrideProps } from '@material-ui/core/OverridableComponent'; export type BusyButtonTypeMap< P = {}, diff --git a/packages/material-ui/src/BusyButton/BusyButton.js b/packages/material-ui-lab/src/BusyButton/BusyButton.js similarity index 94% rename from packages/material-ui/src/BusyButton/BusyButton.js rename to packages/material-ui-lab/src/BusyButton/BusyButton.js index a1c5aba8a80273..2e7075746d2a05 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.js +++ b/packages/material-ui-lab/src/BusyButton/BusyButton.js @@ -2,10 +2,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { chainPropTypes } from '@material-ui/utils'; -import withStyles from '../styles/withStyles'; -import capitalize from '../utils/capitalize'; -import Button from '../Button'; -import CircularProgress from '../CircularProgress'; +import { capitalize } from '@material-ui/core/utils'; +import { withStyles } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; +import CircularProgress from '@material-ui/core/CircularProgress'; export const styles = () => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui/src/BusyButton/BusyButton.test.js b/packages/material-ui-lab/src/BusyButton/BusyButton.test.js similarity index 81% rename from packages/material-ui/src/BusyButton/BusyButton.test.js rename to packages/material-ui-lab/src/BusyButton/BusyButton.test.js index 740dcc6bf031b1..23dc85f9c69951 100644 --- a/packages/material-ui/src/BusyButton/BusyButton.test.js +++ b/packages/material-ui-lab/src/BusyButton/BusyButton.test.js @@ -1,9 +1,9 @@ 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 describeConformance from '@material-ui/core/test-utils/describeConformance'; import BusyButton from './BusyButton'; -import Button from '../Button'; +import Button from '@material-ui/core/Button'; describe('', () => { const mount = createMount(); diff --git a/packages/material-ui/src/BusyButton/index.d.ts b/packages/material-ui-lab/src/BusyButton/index.d.ts similarity index 100% rename from packages/material-ui/src/BusyButton/index.d.ts rename to packages/material-ui-lab/src/BusyButton/index.d.ts diff --git a/packages/material-ui/src/BusyButton/index.js b/packages/material-ui-lab/src/BusyButton/index.js similarity index 100% rename from packages/material-ui/src/BusyButton/index.js rename to packages/material-ui-lab/src/BusyButton/index.js diff --git a/packages/material-ui-lab/src/index.d.ts b/packages/material-ui-lab/src/index.d.ts index cf53df3e94e150..cf175265488abd 100644 --- a/packages/material-ui-lab/src/index.d.ts +++ b/packages/material-ui-lab/src/index.d.ts @@ -10,6 +10,9 @@ export * from './Autocomplete'; export { default as AvatarGroup } from './AvatarGroup'; export * from './AvatarGroup'; +export { default as BusyButton } from './BusyButton'; +export * from './BusyButton'; + export { default as Pagination } from './Pagination'; export * from './Pagination'; diff --git a/packages/material-ui-lab/src/index.js b/packages/material-ui-lab/src/index.js index 1b0902bf5f8bbc..5862b25da294dd 100644 --- a/packages/material-ui-lab/src/index.js +++ b/packages/material-ui-lab/src/index.js @@ -11,6 +11,9 @@ export * from './Autocomplete'; export { default as AvatarGroup } from './AvatarGroup'; export * from './AvatarGroup'; +export { default as BusyButton } from './BusyButton'; +export * from './BusyButton'; + export { default as Pagination } from './Pagination'; export * from './Pagination'; diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts index 4cbd630a324e75..328c55018e2e6e 100644 --- a/packages/material-ui/src/index.d.ts +++ b/packages/material-ui/src/index.d.ts @@ -91,9 +91,6 @@ export * from './ButtonBase'; export { default as ButtonGroup } from './ButtonGroup'; export * from './ButtonGroup'; -export { default as BusyButton } from './BusyButton'; -export * from './BusyButton'; - export { default as Card } from './Card'; export * from './Card'; diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js index 300b8c525c0f8a..c8a0c676489854 100644 --- a/packages/material-ui/src/index.js +++ b/packages/material-ui/src/index.js @@ -39,9 +39,6 @@ export * from './ButtonBase'; export { default as ButtonGroup } from './ButtonGroup'; export * from './ButtonGroup'; -export { default as BusyButton } from './BusyButton'; -export * from './BusyButton'; - export { default as Card } from './Card'; export * from './Card'; diff --git a/packages/material-ui/src/styles/overrides.d.ts b/packages/material-ui/src/styles/overrides.d.ts index bae512faa4723c..fe4dab79ef0906 100644 --- a/packages/material-ui/src/styles/overrides.d.ts +++ b/packages/material-ui/src/styles/overrides.d.ts @@ -6,7 +6,6 @@ import { BadgeClassKey } from '../Badge'; import { BottomNavigationActionClassKey } from '../BottomNavigationAction'; import { BottomNavigationClassKey } from '../BottomNavigation'; import { BreadcrumbsClassKey } from '../Breadcrumbs'; -import { BusyButtonClassKey } from '../BusyButton'; import { ButtonBaseClassKey } from '../ButtonBase'; import { ButtonClassKey } from '../Button'; import { ButtonGroupClassKey } from '../ButtonGroup'; @@ -115,7 +114,6 @@ export interface ComponentNameToClassKey { MuiBottomNavigation: BottomNavigationClassKey; MuiBottomNavigationAction: BottomNavigationActionClassKey; MuiBreadcrumbs: BreadcrumbsClassKey; - MuiBusyButton: BusyButtonClassKey; MuiButton: ButtonClassKey; MuiButtonBase: ButtonBaseClassKey; MuiButtonGroup: ButtonGroupClassKey; diff --git a/packages/material-ui/src/styles/props.d.ts b/packages/material-ui/src/styles/props.d.ts index 87f8fdb016163c..9b58fd99286fe2 100644 --- a/packages/material-ui/src/styles/props.d.ts +++ b/packages/material-ui/src/styles/props.d.ts @@ -5,7 +5,6 @@ import { BadgeProps } from '../Badge'; import { BottomNavigationActionProps } from '../BottomNavigationAction'; import { BottomNavigationProps } from '../BottomNavigation'; import { BreadcrumbsProps } from '../Breadcrumbs'; -import { BusyButtonProps } from '../BusyButton'; import { ButtonBaseProps } from '../ButtonBase'; import { ButtonGroupProps } from '../ButtonGroup'; import { ButtonProps } from '../Button'; @@ -113,7 +112,6 @@ export interface ComponentsPropsList { MuiBottomNavigation: BottomNavigationProps; MuiBottomNavigationAction: BottomNavigationActionProps; MuiBreadcrumbs: BreadcrumbsProps; - MuiBusyButton: BusyButtonProps; MuiButton: ButtonProps; MuiButtonBase: ButtonBaseProps; MuiButtonGroup: ButtonGroupProps; From 6b259c8a25049edde15583142c02d5668baba3c1 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sun, 14 Jun 2020 14:11:41 +0200 Subject: [PATCH 31/35] docs:api --- docs/pages/api-docs/busy-button.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/pages/api-docs/busy-button.md b/docs/pages/api-docs/busy-button.md index fbe6d50cb41866..69f33697b6ea8b 100644 --- a/docs/pages/api-docs/busy-button.md +++ b/docs/pages/api-docs/busy-button.md @@ -1,5 +1,5 @@ --- -filename: /packages/material-ui/src/BusyButton/BusyButton.js +filename: /packages/material-ui-lab/src/BusyButton/BusyButton.js --- @@ -11,9 +11,9 @@ filename: /packages/material-ui/src/BusyButton/BusyButton.js ## Import ```js -import BusyButton from '@material-ui/core/BusyButton'; +import BusyButton from '@material-ui/lab/BusyButton'; // or -import { BusyButton } from '@material-ui/core'; +import { BusyButton } from '@material-ui/lab'; ``` You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). @@ -59,7 +59,7 @@ You can override the style of the component thanks to one of these customization - 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. +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-lab/src/BusyButton/BusyButton.js) for more detail. ## Inheritance From 60d7f8b9663d27b205f903334fe5b3ce2f271cd5 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sun, 14 Jun 2020 14:57:43 +0200 Subject: [PATCH 32/35] fixed description --- docs/pages/api-docs/busy-button.md | 2 +- packages/material-ui-lab/src/BusyButton/BusyButton.d.ts | 2 +- packages/material-ui-lab/src/BusyButton/BusyButton.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/pages/api-docs/busy-button.md b/docs/pages/api-docs/busy-button.md index 69f33697b6ea8b..6658819e649f47 100644 --- a/docs/pages/api-docs/busy-button.md +++ b/docs/pages/api-docs/busy-button.md @@ -31,7 +31,7 @@ The `MuiBusyButton` name can be used for providing [default props](/customizatio | children | node | | The content of the button. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | disabled | bool | false | If `true`, the button will be disabled. | -| pending | bool | false | The content of the button. | +| pending | bool | false | If `true`, the pending indicator will be shown. | | pendingIndicator | node | <CircularProgress color="inherit" size={16} /> | Element placed before the children if the button is in pending state. | | pendingPosition | 'start'
| 'end'
| 'center' | 'center' | The pending indicator can be positioned on the start, end, or the center of the button. | diff --git a/packages/material-ui-lab/src/BusyButton/BusyButton.d.ts b/packages/material-ui-lab/src/BusyButton/BusyButton.d.ts index f72b87612fa9cf..553c42abe7bb47 100644 --- a/packages/material-ui-lab/src/BusyButton/BusyButton.d.ts +++ b/packages/material-ui-lab/src/BusyButton/BusyButton.d.ts @@ -7,7 +7,7 @@ export type BusyButtonTypeMap< > = ExtendButtonTypeMap<{ props: P & { /** - * The content of the button. + * If `true`, the pending indicator will be shown. */ pending?: boolean; /** diff --git a/packages/material-ui-lab/src/BusyButton/BusyButton.js b/packages/material-ui-lab/src/BusyButton/BusyButton.js index 2e7075746d2a05..85f1d0c71670bb 100644 --- a/packages/material-ui-lab/src/BusyButton/BusyButton.js +++ b/packages/material-ui-lab/src/BusyButton/BusyButton.js @@ -116,7 +116,7 @@ BusyButton.propTypes = { */ disabled: PropTypes.bool, /** - * The content of the button. + * If `true`, the pending indicator will be shown. */ pending: PropTypes.bool, /** From fde687ea5c88ba0d36f5ea79db95ec9c4f9f47af Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 15 Jun 2020 08:05:08 +0200 Subject: [PATCH 33/35] renamed BusyButton to LoadingButton --- .../{busy-button.js => loading-button.js} | 4 +-- .../{busy-button.md => loading-button.md} | 36 +++++++++---------- .../pages/components/buttons/BusyButtons.js | 30 ---------------- .../pages/components/buttons/BusyButtons.tsx | 30 ---------------- .../components/buttons/LoadingButtons.js | 30 ++++++++++++++++ .../components/buttons/LoadingButtons.tsx | 30 ++++++++++++++++ ...nsition.js => LoadingButtonsTransition.js} | 20 +++++------ ...ition.tsx => LoadingButtonsTransition.tsx} | 20 +++++------ docs/src/pages/components/buttons/buttons.md | 10 +++--- .../material-ui-lab/src/BusyButton/index.d.ts | 2 -- .../material-ui-lab/src/BusyButton/index.js | 1 - .../LoadingButton.d.ts} | 22 +++++------- .../LoadingButton.js} | 6 ++-- .../LoadingButton.test.js} | 8 ++--- .../src/LoadingButton/index.d.ts | 2 ++ .../src/LoadingButton/index.js | 1 + packages/material-ui-lab/src/index.d.ts | 4 +-- packages/material-ui-lab/src/index.js | 4 +-- 18 files changed, 126 insertions(+), 134 deletions(-) rename docs/pages/api-docs/{busy-button.js => loading-button.js} (74%) rename docs/pages/api-docs/{busy-button.md => loading-button.md} (62%) delete mode 100644 docs/src/pages/components/buttons/BusyButtons.js delete mode 100644 docs/src/pages/components/buttons/BusyButtons.tsx create mode 100644 docs/src/pages/components/buttons/LoadingButtons.js create mode 100644 docs/src/pages/components/buttons/LoadingButtons.tsx rename docs/src/pages/components/buttons/{BusyButtonsTransition.js => LoadingButtonsTransition.js} (75%) rename docs/src/pages/components/buttons/{BusyButtonsTransition.tsx => LoadingButtonsTransition.tsx} (75%) delete mode 100644 packages/material-ui-lab/src/BusyButton/index.d.ts delete mode 100644 packages/material-ui-lab/src/BusyButton/index.js rename packages/material-ui-lab/src/{BusyButton/BusyButton.d.ts => LoadingButton/LoadingButton.d.ts} (60%) rename packages/material-ui-lab/src/{BusyButton/BusyButton.js => LoadingButton/LoadingButton.js} (95%) rename packages/material-ui-lab/src/{BusyButton/BusyButton.test.js => LoadingButton/LoadingButton.test.js} (67%) create mode 100644 packages/material-ui-lab/src/LoadingButton/index.d.ts create mode 100644 packages/material-ui-lab/src/LoadingButton/index.js diff --git a/docs/pages/api-docs/busy-button.js b/docs/pages/api-docs/loading-button.js similarity index 74% rename from docs/pages/api-docs/busy-button.js rename to docs/pages/api-docs/loading-button.js index bce0bff3b74c57..ee46e68fbf7e46 100644 --- a/docs/pages/api-docs/busy-button.js +++ b/docs/pages/api-docs/loading-button.js @@ -2,8 +2,8 @@ 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$/); +const pageFilename = 'api/loading-button'; +const requireRaw = require.context('!raw-loader!./', false, /\/loading-button\.md$/); export default function Page({ docs }) { return ; diff --git a/docs/pages/api-docs/busy-button.md b/docs/pages/api-docs/loading-button.md similarity index 62% rename from docs/pages/api-docs/busy-button.md rename to docs/pages/api-docs/loading-button.md index 6658819e649f47..d9ba37c3f1bb0d 100644 --- a/docs/pages/api-docs/busy-button.md +++ b/docs/pages/api-docs/loading-button.md @@ -1,19 +1,19 @@ --- -filename: /packages/material-ui-lab/src/BusyButton/BusyButton.js +filename: /packages/material-ui-lab/src/LoadingButton/LoadingButton.js --- -# BusyButton API +# LoadingButton API -

The API documentation of the BusyButton React component. Learn more about the props and the CSS customization points.

+

The API documentation of the LoadingButton React component. Learn more about the props and the CSS customization points.

## Import ```js -import BusyButton from '@material-ui/lab/BusyButton'; +import LoadingButton from '@material-ui/lab/LoadingButton'; // or -import { BusyButton } from '@material-ui/lab'; +import { LoadingButton } from '@material-ui/lab'; ``` You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). @@ -22,7 +22,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi ## 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. +The `MuiLoadingButton` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. ## Props @@ -43,15 +43,15 @@ Any other props supplied will be provided to the root element ([Button](/api/but | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiBusyButton-root | Styles applied to the root element. -| pending | .MuiBusyButton-pending | Styles applied to the root element if `pending={true}`. -| pendingIndicator | .MuiBusyButton-pendingIndicator | Styles applied to the pendingIndicator element. -| pendingIndicatorCenter | .MuiBusyButton-pendingIndicatorCenter | Styles applied to the pendingIndicator element if `pendingPosition="center"`. -| pendingIndicatorStart | .MuiBusyButton-pendingIndicatorStart | Styles applied to the pendingIndicator element if `pendingPosition="start"`. -| pendingIndicatorEnd | .MuiBusyButton-pendingIndicatorEnd | Styles applied to the pendingIndicator element if `pendingPosition="end"`. -| endIconLoadingEnd | .MuiBusyButton-endIconLoadingEnd | Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`. -| startIconLoadingStart | .MuiBusyButton-startIconLoadingStart | Styles applied to the startIcon element if `pending={true}` and `pendingPosition="start"`. -| labelLoadingCenter | .MuiBusyButton-labelLoadingCenter | Styles applied to the label element if `pending={true}` and `pendingPosition="center"`. +| root | .MuiLoadingButton-root | Styles applied to the root element. +| pending | .MuiLoadingButton-pending | Styles applied to the root element if `pending={true}`. +| pendingIndicator | .MuiLoadingButton-pendingIndicator | Styles applied to the pendingIndicator element. +| pendingIndicatorCenter | .MuiLoadingButton-pendingIndicatorCenter | Styles applied to the pendingIndicator element if `pendingPosition="center"`. +| pendingIndicatorStart | .MuiLoadingButton-pendingIndicatorStart | Styles applied to the pendingIndicator element if `pendingPosition="start"`. +| pendingIndicatorEnd | .MuiLoadingButton-pendingIndicatorEnd | Styles applied to the pendingIndicator element if `pendingPosition="end"`. +| endIconLoadingEnd | .MuiLoadingButton-endIconLoadingEnd | Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`. +| startIconLoadingStart | .MuiLoadingButton-startIconLoadingStart | Styles applied to the startIcon element if `pending={true}` and `pendingPosition="start"`. +| labelLoadingCenter | .MuiLoadingButton-labelLoadingCenter | 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: @@ -59,14 +59,10 @@ You can override the style of the component thanks to one of these customization - 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-lab/src/BusyButton/BusyButton.js) for more detail. +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-lab/src/LoadingButton/LoadingButton.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/) - diff --git a/docs/src/pages/components/buttons/BusyButtons.js b/docs/src/pages/components/buttons/BusyButtons.js deleted file mode 100644 index 3db46394c1a0df..00000000000000 --- a/docs/src/pages/components/buttons/BusyButtons.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import BusyButton from '@material-ui/lab/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 ( -
- - Submit - - - Fetch data - - }> - Save - -
- ); -} diff --git a/docs/src/pages/components/buttons/BusyButtons.tsx b/docs/src/pages/components/buttons/BusyButtons.tsx deleted file mode 100644 index 3db46394c1a0df..00000000000000 --- a/docs/src/pages/components/buttons/BusyButtons.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import BusyButton from '@material-ui/lab/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 ( -
- - Submit - - - Fetch data - - }> - Save - -
- ); -} diff --git a/docs/src/pages/components/buttons/LoadingButtons.js b/docs/src/pages/components/buttons/LoadingButtons.js new file mode 100644 index 00000000000000..d10dd21ee48be8 --- /dev/null +++ b/docs/src/pages/components/buttons/LoadingButtons.js @@ -0,0 +1,30 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import LoadingButton from '@material-ui/lab/LoadingButton'; +import SaveIcon from '@material-ui/icons/Save'; + +const useStyles = makeStyles((theme) => ({ + root: { + '& button': { + margin: theme.spacing(1), + }, + }, +})); + +export default function LoadingButtons() { + const classes = useStyles(); + + return ( +
+ + Submit + + + Fetch data + + }> + Save + +
+ ); +} diff --git a/docs/src/pages/components/buttons/LoadingButtons.tsx b/docs/src/pages/components/buttons/LoadingButtons.tsx new file mode 100644 index 00000000000000..d10dd21ee48be8 --- /dev/null +++ b/docs/src/pages/components/buttons/LoadingButtons.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import LoadingButton from '@material-ui/lab/LoadingButton'; +import SaveIcon from '@material-ui/icons/Save'; + +const useStyles = makeStyles((theme) => ({ + root: { + '& button': { + margin: theme.spacing(1), + }, + }, +})); + +export default function LoadingButtons() { + const classes = useStyles(); + + return ( +
+ + Submit + + + Fetch data + + }> + Save + +
+ ); +} diff --git a/docs/src/pages/components/buttons/BusyButtonsTransition.js b/docs/src/pages/components/buttons/LoadingButtonsTransition.js similarity index 75% rename from docs/src/pages/components/buttons/BusyButtonsTransition.js rename to docs/src/pages/components/buttons/LoadingButtonsTransition.js index 27d697110521f3..3df3f18a90dc31 100644 --- a/docs/src/pages/components/buttons/BusyButtonsTransition.js +++ b/docs/src/pages/components/buttons/LoadingButtonsTransition.js @@ -1,6 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import BusyButton from '@material-ui/lab/BusyButton'; +import LoadingButton from '@material-ui/lab/LoadingButton'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Switch from '@material-ui/core/Switch'; import SaveIcon from '@material-ui/icons/Save'; @@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) => ({ }, })); -export default function BusyButtonsTransition() { +export default function LoadingButtonsTransition() { const classes = useStyles(); const [pending, setPending] = React.useState(false); @@ -35,13 +35,13 @@ export default function BusyButtonsTransition() { className={classes.switch} label="Pending" /> - + Submit - - + + Fetch data - - + } > Send - - + } > Save - +
); } diff --git a/docs/src/pages/components/buttons/BusyButtonsTransition.tsx b/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx similarity index 75% rename from docs/src/pages/components/buttons/BusyButtonsTransition.tsx rename to docs/src/pages/components/buttons/LoadingButtonsTransition.tsx index 27d697110521f3..3df3f18a90dc31 100644 --- a/docs/src/pages/components/buttons/BusyButtonsTransition.tsx +++ b/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import BusyButton from '@material-ui/lab/BusyButton'; +import LoadingButton from '@material-ui/lab/LoadingButton'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Switch from '@material-ui/core/Switch'; import SaveIcon from '@material-ui/icons/Save'; @@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) => ({ }, })); -export default function BusyButtonsTransition() { +export default function LoadingButtonsTransition() { const classes = useStyles(); const [pending, setPending] = React.useState(false); @@ -35,13 +35,13 @@ export default function BusyButtonsTransition() { className={classes.switch} label="Pending" /> - + Submit - - + + Fetch data - - + } > Send - - + } > Save - + ); } diff --git a/docs/src/pages/components/buttons/buttons.md b/docs/src/pages/components/buttons/buttons.md index ac8f1d423ca98e..f041791e7f2f81 100644 --- a/docs/src/pages/components/buttons/buttons.md +++ b/docs/src/pages/components/buttons/buttons.md @@ -1,6 +1,6 @@ --- title: Button React component -components: Button, IconButton, ButtonBase, BusyButton +components: Button, IconButton, ButtonBase, LoadingButton --- # Button @@ -94,15 +94,15 @@ 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 +## Loading buttons -The busy buttons can show pending state and disable interactions. +The loading buttons can show pending state and disable interactions. -{{"demo": "pages/components/buttons/BusyButtons.js"}} +{{"demo": "pages/components/buttons/LoadingButtons.js"}} Toggle the switch to see the transition between the different states. -{{"demo": "pages/components/buttons/BusyButtonsTransition.js"}} +{{"demo": "pages/components/buttons/LoadingButtonsTransition.js"}} ## Complex Buttons diff --git a/packages/material-ui-lab/src/BusyButton/index.d.ts b/packages/material-ui-lab/src/BusyButton/index.d.ts deleted file mode 100644 index 171d2e5d501034..00000000000000 --- a/packages/material-ui-lab/src/BusyButton/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './BusyButton'; -export * from './BusyButton'; diff --git a/packages/material-ui-lab/src/BusyButton/index.js b/packages/material-ui-lab/src/BusyButton/index.js deleted file mode 100644 index a855c87f7f2daa..00000000000000 --- a/packages/material-ui-lab/src/BusyButton/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './BusyButton'; diff --git a/packages/material-ui-lab/src/BusyButton/BusyButton.d.ts b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts similarity index 60% rename from packages/material-ui-lab/src/BusyButton/BusyButton.d.ts rename to packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts index 553c42abe7bb47..ab101d76eac2a4 100644 --- a/packages/material-ui-lab/src/BusyButton/BusyButton.d.ts +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts @@ -1,7 +1,7 @@ import { ExtendButton, ExtendButtonTypeMap } from '@material-ui/core/Button'; import { OverrideProps } from '@material-ui/core/OverridableComponent'; -export type BusyButtonTypeMap< +export type LoadingButtonTypeMap< P = {}, D extends React.ElementType = 'button' > = ExtendButtonTypeMap<{ @@ -20,27 +20,23 @@ export type BusyButtonTypeMap< pendingPosition?: 'start' | 'end' | 'center'; }; defaultComponent: D; - classKey: BusyButtonClassKey; + classKey: LoadingButtonClassKey; }>; /** - * - * Demos: - * - * - [Buttons](https://material-ui.com/components/buttons/) * * API: * - * - [BusyButton API](https://material-ui.com/api/busy-button/) + * - [LoadingButton API](https://material-ui.com/api/loading-button/) * - inherits [Button API](https://material-ui.com/api/button/) */ -declare const BusyButton: ExtendButton; +declare const LoadingButton: ExtendButton; -export type BusyButtonProps< - D extends React.ElementType = BusyButtonTypeMap['defaultComponent'], +export type LoadingButtonProps< + D extends React.ElementType = LoadingButtonTypeMap['defaultComponent'], P = {} -> = OverrideProps, D>; +> = OverrideProps, D>; -export type BusyButtonClassKey = 'root' | 'pending'; +export type LoadingButtonClassKey = 'root' | 'pending'; -export default BusyButton; +export default LoadingButton; diff --git a/packages/material-ui-lab/src/BusyButton/BusyButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js similarity index 95% rename from packages/material-ui-lab/src/BusyButton/BusyButton.js rename to packages/material-ui-lab/src/LoadingButton/LoadingButton.js index 85f1d0c71670bb..3ed3eaf744dfef 100644 --- a/packages/material-ui-lab/src/BusyButton/BusyButton.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js @@ -47,7 +47,7 @@ export const styles = () => ({ const PendingIndicator = ; -const BusyButton = React.forwardRef(function BusyButton(props, ref) { +const LoadingButton = React.forwardRef(function LoadingButton(props, ref) { const { children, classes, @@ -93,7 +93,7 @@ const BusyButton = React.forwardRef(function BusyButton(props, ref) { ); }); -BusyButton.propTypes = { +LoadingButton.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the d.ts file and run "yarn proptypes" | @@ -141,4 +141,4 @@ BusyButton.propTypes = { }), }; -export default withStyles(styles, { name: 'MuiBusyButton' })(BusyButton); +export default withStyles(styles, { name: 'MuiLoadingButton' })(LoadingButton); diff --git a/packages/material-ui-lab/src/BusyButton/BusyButton.test.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js similarity index 67% rename from packages/material-ui-lab/src/BusyButton/BusyButton.test.js rename to packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js index 23dc85f9c69951..9833dc0c7e6acb 100644 --- a/packages/material-ui-lab/src/BusyButton/BusyButton.test.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js @@ -2,18 +2,18 @@ import * as React from 'react'; import { getClasses } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; -import BusyButton from './BusyButton'; +import LoadingButton from './LoadingButton'; import Button from '@material-ui/core/Button'; -describe('', () => { +describe('', () => { const mount = createMount(); let classes; before(() => { - classes = getClasses(Hello World); + classes = getClasses(Hello World); }); - describeConformance(Conformance?, () => ({ + describeConformance(Conformance?, () => ({ classes, inheritComponent: Button, mount, diff --git a/packages/material-ui-lab/src/LoadingButton/index.d.ts b/packages/material-ui-lab/src/LoadingButton/index.d.ts new file mode 100644 index 00000000000000..421603193deae6 --- /dev/null +++ b/packages/material-ui-lab/src/LoadingButton/index.d.ts @@ -0,0 +1,2 @@ +export { default } from './LoadingButton'; +export * from './LoadingButton'; diff --git a/packages/material-ui-lab/src/LoadingButton/index.js b/packages/material-ui-lab/src/LoadingButton/index.js new file mode 100644 index 00000000000000..b12be17a139ad5 --- /dev/null +++ b/packages/material-ui-lab/src/LoadingButton/index.js @@ -0,0 +1 @@ +export { default } from './LoadingButton'; diff --git a/packages/material-ui-lab/src/index.d.ts b/packages/material-ui-lab/src/index.d.ts index cf175265488abd..25f8395255926e 100644 --- a/packages/material-ui-lab/src/index.d.ts +++ b/packages/material-ui-lab/src/index.d.ts @@ -10,8 +10,8 @@ export * from './Autocomplete'; export { default as AvatarGroup } from './AvatarGroup'; export * from './AvatarGroup'; -export { default as BusyButton } from './BusyButton'; -export * from './BusyButton'; +export { default as LoadingButton } from './LoadingButton'; +export * from './LoadingButton'; export { default as Pagination } from './Pagination'; export * from './Pagination'; diff --git a/packages/material-ui-lab/src/index.js b/packages/material-ui-lab/src/index.js index 5862b25da294dd..3038c1de672a3e 100644 --- a/packages/material-ui-lab/src/index.js +++ b/packages/material-ui-lab/src/index.js @@ -11,8 +11,8 @@ export * from './Autocomplete'; export { default as AvatarGroup } from './AvatarGroup'; export * from './AvatarGroup'; -export { default as BusyButton } from './BusyButton'; -export * from './BusyButton'; +export { default as LoadingButton } from './LoadingButton'; +export * from './LoadingButton'; export { default as Pagination } from './Pagination'; export * from './Pagination'; From 364b265190a309e0489aa91e77ea267977519d25 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 15 Jun 2020 08:12:26 +0200 Subject: [PATCH 34/35] docs:api --- docs/pages/api-docs/loading-button.md | 4 ++++ packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/docs/pages/api-docs/loading-button.md b/docs/pages/api-docs/loading-button.md index d9ba37c3f1bb0d..3544935ef94e1e 100644 --- a/docs/pages/api-docs/loading-button.md +++ b/docs/pages/api-docs/loading-button.md @@ -66,3 +66,7 @@ If that's not sufficient, you can check the [implementation of the component](ht 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/) + diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts index ab101d76eac2a4..d4634eb4eeba0d 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts @@ -24,6 +24,10 @@ export type LoadingButtonTypeMap< }>; /** + * + * Demos: + * + * - [Buttons](https://material-ui.com/components/buttons/) * * API: * From 98b6c6cbb742aa22ca1e77e75ed54898d33b9a89 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 15 Jun 2020 08:21:34 +0200 Subject: [PATCH 35/35] added classes keys --- docs/pages/api-docs/loading-button.md | 6 +++--- .../src/LoadingButton/LoadingButton.d.ts | 11 ++++++++++- .../src/LoadingButton/LoadingButton.js | 12 ++++++------ 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/docs/pages/api-docs/loading-button.md b/docs/pages/api-docs/loading-button.md index 3544935ef94e1e..26bba1f609abcd 100644 --- a/docs/pages/api-docs/loading-button.md +++ b/docs/pages/api-docs/loading-button.md @@ -49,9 +49,9 @@ Any other props supplied will be provided to the root element ([Button](/api/but | pendingIndicatorCenter | .MuiLoadingButton-pendingIndicatorCenter | Styles applied to the pendingIndicator element if `pendingPosition="center"`. | pendingIndicatorStart | .MuiLoadingButton-pendingIndicatorStart | Styles applied to the pendingIndicator element if `pendingPosition="start"`. | pendingIndicatorEnd | .MuiLoadingButton-pendingIndicatorEnd | Styles applied to the pendingIndicator element if `pendingPosition="end"`. -| endIconLoadingEnd | .MuiLoadingButton-endIconLoadingEnd | Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`. -| startIconLoadingStart | .MuiLoadingButton-startIconLoadingStart | Styles applied to the startIcon element if `pending={true}` and `pendingPosition="start"`. -| labelLoadingCenter | .MuiLoadingButton-labelLoadingCenter | Styles applied to the label element if `pending={true}` and `pendingPosition="center"`. +| endIconPendingEnd | .MuiLoadingButton-endIconPendingEnd | Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`. +| startIconPendingStart | .MuiLoadingButton-startIconPendingStart | Styles applied to the startIcon element if `pending={true}` and `pendingPosition="start"`. +| labelPendingCenter | .MuiLoadingButton-labelPendingCenter | 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: diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts index d4634eb4eeba0d..2b3e7e4b407f36 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts @@ -41,6 +41,15 @@ export type LoadingButtonProps< P = {} > = OverrideProps, D>; -export type LoadingButtonClassKey = 'root' | 'pending'; +export type LoadingButtonClassKey = + | 'root' + | 'pending' + | 'pendingIndicator' + | 'pendingIndicatorCenter' + | 'pendingIndicatorStart' + | 'pendingIndicatorEnd' + | 'endIconPendingEnd' + | 'startIconPendingStart' + | 'labelPendingCenter'; export default LoadingButton; diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js index 3ed3eaf744dfef..c49ebcb1ccc576 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js @@ -32,15 +32,15 @@ export const styles = () => ({ right: 14, }, /* Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`. */ - endIconLoadingEnd: { + endIconPendingEnd: { visibility: 'hidden', }, /* Styles applied to the startIcon element if `pending={true}` and `pendingPosition="start"`. */ - startIconLoadingStart: { + startIconPendingStart: { visibility: 'hidden', }, /* Styles applied to the label element if `pending={true}` and `pendingPosition="center"`. */ - labelLoadingCenter: { + labelPendingCenter: { visibility: 'hidden', }, }); @@ -71,9 +71,9 @@ const LoadingButton = React.forwardRef(function LoadingButton(props, ref) { disabled={disabled || pending} ref={ref} classes={{ - startIcon: classes[`startIcon${pending ? 'Loading' : ''}${capitalize(pendingPosition)}`], - endIcon: classes[`endIcon${pending ? 'Loading' : ''}${capitalize(pendingPosition)}`], - label: classes[`label${pending ? 'Loading' : ''}${capitalize(pendingPosition)}`], + startIcon: classes[`startIcon${pending ? 'Pending' : ''}${capitalize(pendingPosition)}`], + endIcon: classes[`endIcon${pending ? 'Pending' : ''}${capitalize(pendingPosition)}`], + label: classes[`label${pending ? 'Pending' : ''}${capitalize(pendingPosition)}`], }} {...other} >