Fetch data
@@ -48,8 +48,8 @@ export default function LoadingButtonsTransition() {
}
- pending={pending}
- pendingPosition="end"
+ loading={loading}
+ loadingPosition="end"
variant="contained"
>
Send
@@ -57,8 +57,8 @@ export default function LoadingButtonsTransition() {
}
variant="contained"
>
diff --git a/docs/src/pages/components/buttons/buttons-de.md b/docs/src/pages/components/buttons/buttons-de.md
index 82dc7f9fd4d691..eef0ee9907d818 100644
--- a/docs/src/pages/components/buttons/buttons-de.md
+++ b/docs/src/pages/components/buttons/buttons-de.md
@@ -93,7 +93,7 @@ Hier einige Beispiele zum Anpassen der Komponente. Mehr dazu erfahren Sie auf de
## Komplexe Buttons
-The loading buttons can show pending state and disable interactions.
+The loading buttons can show loading state and disable interactions.
{{"demo": "pages/components/buttons/LoadingButtons.js"}}
diff --git a/docs/src/pages/components/buttons/buttons-es.md b/docs/src/pages/components/buttons/buttons-es.md
index cab91cf78938ef..328f4ef64a37ae 100644
--- a/docs/src/pages/components/buttons/buttons-es.md
+++ b/docs/src/pages/components/buttons/buttons-es.md
@@ -93,7 +93,7 @@ Here are some examples of customizing the component. Puedes aprender más sobre
## Botones Complejos
-The loading buttons can show pending state and disable interactions.
+The loading buttons can show loading state and disable interactions.
{{"demo": "pages/components/buttons/LoadingButtons.js"}}
diff --git a/docs/src/pages/components/buttons/buttons-fr.md b/docs/src/pages/components/buttons/buttons-fr.md
index ce2d7c6a66685b..a1dce0684ebbfc 100644
--- a/docs/src/pages/components/buttons/buttons-fr.md
+++ b/docs/src/pages/components/buttons/buttons-fr.md
@@ -93,7 +93,7 @@ Here are some examples of customizing the component. Vous pouvez en savoir plus
## Boutons complexes
-The loading buttons can show pending state and disable interactions.
+The loading buttons can show loading state and disable interactions.
{{"demo": "pages/components/buttons/LoadingButtons.js"}}
diff --git a/docs/src/pages/components/buttons/buttons-ja.md b/docs/src/pages/components/buttons/buttons-ja.md
index 2f0026db227db9..62d3b189669b21 100644
--- a/docs/src/pages/components/buttons/buttons-ja.md
+++ b/docs/src/pages/components/buttons/buttons-ja.md
@@ -93,7 +93,7 @@ Sometimes you might want to have icons for certain buttons to enhance the UX of
## 複雑なButton
-The loading buttons can show pending state and disable interactions.
+The loading buttons can show loading state and disable interactions.
{{"demo": "pages/components/buttons/LoadingButtons.js"}}
diff --git a/docs/src/pages/components/buttons/buttons-pt.md b/docs/src/pages/components/buttons/buttons-pt.md
index 075b2cf6854280..9b890f7b786334 100644
--- a/docs/src/pages/components/buttons/buttons-pt.md
+++ b/docs/src/pages/components/buttons/buttons-pt.md
@@ -93,7 +93,7 @@ Aqui estão alguns exemplos de customização do componente. Você pode aprender
## Botões de progresso
-Os botões de progresso podem mostrar o estado pendente e desativar as interações.
+Os botões de progresso podem mostrar o estado de carregamento e desativar as interações.
{{"demo": "pages/components/buttons/LoadingButtons.js"}}
diff --git a/docs/src/pages/components/buttons/buttons-ru.md b/docs/src/pages/components/buttons/buttons-ru.md
index 9d85bae4757222..6a1d8b2434bc43 100644
--- a/docs/src/pages/components/buttons/buttons-ru.md
+++ b/docs/src/pages/components/buttons/buttons-ru.md
@@ -93,7 +93,7 @@ Sometimes you might want to have icons for certain buttons to enhance the UX of
## Сложные кнопки
-The loading buttons can show pending state and disable interactions.
+The loading buttons can show loading state and disable interactions.
{{"demo": "pages/components/buttons/LoadingButtons.js"}}
diff --git a/docs/src/pages/components/buttons/buttons.md b/docs/src/pages/components/buttons/buttons.md
index a351a27aecf0bf..8d65044a31a2f9 100644
--- a/docs/src/pages/components/buttons/buttons.md
+++ b/docs/src/pages/components/buttons/buttons.md
@@ -106,7 +106,7 @@ Here are some examples of customizing the component. You can learn more about th
## Loading buttons
-The loading buttons can show pending state and disable interactions.
+The loading buttons can show loading state and disable interactions.
{{"demo": "pages/components/buttons/LoadingButtons.js"}}
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index 56eb611500e947..21c40dc9d571dc 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -787,6 +787,28 @@ As the core components use emotion as a styled engine, the props used by emotion
+icon-name
```
+### LoadingButton
+
+- Rename `pending` prop to `loading`.
+- Rename `pendingIndicator` prop to `loadingIndicator`.
+- Rename `pendingPosition` prop to `loadingPosition`.
+
+ ```diff
+ -
+ +
+ ```
+
+- The following keys of the `classes` prop were also renamed:
+
+ 1. `pending` to `loading`
+ 1. `pendingIndicator` to `loadingIndicator`
+ 1. `pendingIndicatorCenter` to `loadingIndicatorCenter`
+ 1. `pendingIndicatorStart` to `loadingIndicatorStart`
+ 1. `pendingIndicatorEnd` to `loadingIndicatorEnd`
+ 1. `endIconPendingEnd` to `endIconLoadingEnd`
+ 1. `startIconPendingStart` to `startIconLoadingStart`
+ 1. `labelPendingCenter` to `labelLoadingCenter`
+
### Menu
- The onE\* transition props were removed. Use TransitionProps instead.
diff --git a/docs/translations/api-docs/loading-button/loading-button.json b/docs/translations/api-docs/loading-button/loading-button.json
index 1b6d51e03da10b..8eef9bc0fc73fa 100644
--- a/docs/translations/api-docs/loading-button/loading-button.json
+++ b/docs/translations/api-docs/loading-button/loading-button.json
@@ -4,50 +4,50 @@
"children": "The content of the component.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
"disabled": "If true, the component is disabled.",
- "pending": "If true, the pending indicator is shown.",
- "pendingIndicator": "Element placed before the children if the button is in pending state.",
- "pendingPosition": "The pending indicator can be positioned on the start, end, or the center of the button."
+ "loading": "If true, the loading indicator is shown.",
+ "loadingIndicator": "Element placed before the children if the button is in loading state.",
+ "loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button."
},
"classDescriptions": {
"root": { "description": "Styles applied to the root element." },
- "pending": {
+ "loading": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "pending={true}"
+ "conditions": "loading={true}"
},
- "pendingIndicator": {
+ "loadingIndicator": {
"description": "Styles applied to {{nodeName}}.",
- "nodeName": "the pendingIndicator element"
+ "nodeName": "the loadingIndicator element"
},
- "pendingIndicatorCenter": {
+ "loadingIndicatorCenter": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the pendingIndicator element",
- "conditions": "pendingPosition=\"center\""
+ "nodeName": "the loadingIndicator element",
+ "conditions": "loadingPosition=\"center\""
},
- "pendingIndicatorStart": {
+ "loadingIndicatorStart": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the pendingIndicator element",
- "conditions": "pendingPosition=\"start\""
+ "nodeName": "the loadingIndicator element",
+ "conditions": "loadingPosition=\"start\""
},
- "pendingIndicatorEnd": {
+ "loadingIndicatorEnd": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the pendingIndicator element",
- "conditions": "pendingPosition=\"end\""
+ "nodeName": "the loadingIndicator element",
+ "conditions": "loadingPosition=\"end\""
},
- "endIconPendingEnd": {
+ "endIconLoadingEnd": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the endIcon element",
- "conditions": "pending={true} and pendingPosition=\"end\""
+ "conditions": "loading={true} and loadingPosition=\"end\""
},
- "startIconPendingStart": {
+ "startIconLoadingStart": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the startIcon element",
- "conditions": "pending={true} and pendingPosition=\"start\""
+ "conditions": "loading={true} and loadingPosition=\"start\""
},
- "labelPendingCenter": {
+ "labelLoadingCenter": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the label element",
- "conditions": "pending={true} and pendingPosition=\"center\""
+ "conditions": "loading={true} and loadingPosition=\"center\""
}
}
}
diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts
index 5edb30d84b9b2d..2ff980292a2aea 100644
--- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts
+++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts
@@ -12,38 +12,38 @@ export type LoadingButtonTypeMap<
classes?: {
/** Styles applied to the root element. */
root?: string;
- /** Styles applied to the root element if `pending={true}`. */
- pending?: string;
- /** Styles applied to the pendingIndicator element. */
- pendingIndicator?: string;
- /** Styles applied to the pendingIndicator element if `pendingPosition="center"`. */
- pendingIndicatorCenter?: string;
- /** Styles applied to the pendingIndicator element if `pendingPosition="start"`. */
- pendingIndicatorStart?: string;
- /** Styles applied to the pendingIndicator element if `pendingPosition="end"`. */
- pendingIndicatorEnd?: string;
- /** Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`. */
- endIconPendingEnd?: string;
- /** Styles applied to the startIcon element if `pending={true}` and `pendingPosition="start"`. */
- startIconPendingStart?: string;
- /** Styles applied to the label element if `pending={true}` and `pendingPosition="center"`. */
- labelPendingCenter?: string;
+ /** Styles applied to the root element if `loading={true}`. */
+ loading?: string;
+ /** Styles applied to the loadingIndicator element. */
+ loadingIndicator?: string;
+ /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */
+ loadingIndicatorCenter?: string;
+ /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */
+ loadingIndicatorStart?: string;
+ /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */
+ loadingIndicatorEnd?: string;
+ /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */
+ endIconLoadingEnd?: string;
+ /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */
+ startIconLoadingStart?: string;
+ /** Styles applied to the label element if `loading={true}` and `loadingPosition="center"`. */
+ labelLoadingCenter?: string;
};
/**
- * If `true`, the pending indicator is shown.
+ * If `true`, the loading indicator is shown.
* @default false
*/
- pending?: boolean;
+ loading?: boolean;
/**
- * Element placed before the children if the button is in pending state.
+ * Element placed before the children if the button is in loading state.
* @default
*/
- pendingIndicator?: React.ReactNode;
+ loadingIndicator?: React.ReactNode;
/**
- * The pending indicator can be positioned on the start, end, or the center of the button.
+ * The loading indicator can be positioned on the start, end, or the center of the button.
* @default 'center'
*/
- pendingPosition?: 'start' | 'end' | 'center';
+ loadingPosition?: 'start' | 'end' | 'center';
};
defaultComponent: D;
}>;
diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js
index dc35fd06deaac3..be5f7b9c5877b8 100644
--- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js
+++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js
@@ -10,42 +10,42 @@ import CircularProgress from '@material-ui/core/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: {
+ /* Styles applied to the root element if `loading={true}`. */
+ loading: {},
+ /* Styles applied to the loadingIndicator element. */
+ loadingIndicator: {
position: 'absolute',
visibility: 'visible',
display: 'flex',
},
- /* Styles applied to the pendingIndicator element if `pendingPosition="center"`. */
- pendingIndicatorCenter: {
+ /* Styles applied to the loadingIndicator element if `loadingPosition="center"`. */
+ loadingIndicatorCenter: {
left: '50%',
transform: 'translate(-50%)',
},
- /* Styles applied to the pendingIndicator element if `pendingPosition="start"`. */
- pendingIndicatorStart: {
+ /* Styles applied to the loadingIndicator element if `loadingPosition="start"`. */
+ loadingIndicatorStart: {
left: 14,
},
- /* Styles applied to the pendingIndicator element if `pendingPosition="end"`. */
- pendingIndicatorEnd: {
+ /* Styles applied to the loadingIndicator element if `loadingPosition="end"`. */
+ loadingIndicatorEnd: {
right: 14,
},
- /* Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`. */
- endIconPendingEnd: {
+ /* Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */
+ endIconLoadingEnd: {
visibility: 'hidden',
},
- /* Styles applied to the startIcon element if `pending={true}` and `pendingPosition="start"`. */
- startIconPendingStart: {
+ /* Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */
+ startIconLoadingStart: {
visibility: 'hidden',
},
- /* Styles applied to the label element if `pending={true}` and `pendingPosition="center"`. */
- labelPendingCenter: {
+ /* Styles applied to the label element if `loading={true}` and `loadingPosition="center"`. */
+ labelLoadingCenter: {
visibility: 'hidden',
},
});
-const PendingIndicator = ;
+const LoadingIndicator = ;
const LoadingButton = React.forwardRef(function LoadingButton(props, ref) {
const {
@@ -53,9 +53,9 @@ const LoadingButton = React.forwardRef(function LoadingButton(props, ref) {
classes,
className,
disabled = false,
- pending = false,
- pendingIndicator = PendingIndicator,
- pendingPosition = 'center',
+ loading = false,
+ loadingIndicator = LoadingIndicator,
+ loadingPosition = 'center',
...other
} = props;
@@ -64,27 +64,27 @@ const LoadingButton = React.forwardRef(function LoadingButton(props, ref) {
className={clsx(
classes.root,
{
- [classes.pending]: pending,
+ [classes.loading]: loading,
},
className,
)}
- disabled={disabled || pending}
+ disabled={disabled || loading}
ref={ref}
classes={{
- startIcon: classes[`startIcon${pending ? 'Pending' : ''}${capitalize(pendingPosition)}`],
- endIcon: classes[`endIcon${pending ? 'Pending' : ''}${capitalize(pendingPosition)}`],
- label: classes[`label${pending ? 'Pending' : ''}${capitalize(pendingPosition)}`],
+ startIcon: classes[`startIcon${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`],
+ endIcon: classes[`endIcon${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`],
+ label: classes[`label${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`],
}}
{...other}
>
- {pending && (
+ {loading && (
- {pendingIndicator}
+ {loadingIndicator}
)}
@@ -116,28 +116,28 @@ LoadingButton.propTypes /* remove-proptypes */ = {
*/
disabled: PropTypes.bool,
/**
- * If `true`, the pending indicator is shown.
+ * If `true`, the loading indicator is shown.
* @default false
*/
- pending: PropTypes.bool,
+ loading: PropTypes.bool,
/**
- * Element placed before the children if the button is in pending state.
+ * Element placed before the children if the button is in loading state.
* @default
*/
- pendingIndicator: PropTypes.node,
+ loadingIndicator: PropTypes.node,
/**
- * The pending indicator can be positioned on the start, end, or the center of the button.
+ * The loading indicator can be positioned on the start, end, or the center of the button.
* @default 'center'
*/
- pendingPosition: chainPropTypes(PropTypes.oneOf(['start', 'end', 'center']), (props) => {
- if (props.pendingPosition === 'start' && !props.startIcon) {
+ loadingPosition: chainPropTypes(PropTypes.oneOf(['start', 'end', 'center']), (props) => {
+ if (props.loadingPosition === 'start' && !props.startIcon) {
return new Error(
- `Material-UI: The pendingPosition="start" should be used in combination with startIcon.`,
+ `Material-UI: The loadingPosition="start" should be used in combination with startIcon.`,
);
}
- if (props.pendingPosition === 'end' && !props.endIcon) {
+ if (props.loadingPosition === 'end' && !props.endIcon) {
return new Error(
- `Material-UI: The pendingPosition="end" should be used in combination with endIcon.`,
+ `Material-UI: The loadingPosition="end" should be used in combination with endIcon.`,
);
}
return null;
diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js
index 0c9f28600f60bd..67c1fff367bcdd 100644
--- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js
+++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js
@@ -33,37 +33,37 @@ describe('', () => {
expect(screen.getByRole('button')).to.have.property('tabIndex', 0);
});
- describe('prop: pending', () => {
+ describe('prop: loading', () => {
it('disables the button', () => {
- render();
+ render();
const button = screen.getByRole('button');
expect(button).to.have.property('tabIndex', -1);
expect(button).to.have.property('disabled', true);
});
- it('cannot be enabled while `pending`', () => {
- render();
+ it('cannot be enabled while `loading`', () => {
+ render();
expect(screen.getByRole('button')).to.have.property('disabled', true);
});
});
- describe('prop: pendingIndicator', () => {
+ describe('prop: loadingIndicator', () => {
it('is not rendered by default', () => {
- render(Test);
+ render(Test);
expect(screen.getByRole('button')).to.have.text('Test');
});
- it('is rendered before the children when `pending`', () => {
+ it('is rendered before the children when `loading`', () => {
render(
-
+
Test
,
);
- expect(screen.getByRole('button')).to.have.text('pending...Test');
+ expect(screen.getByRole('button')).to.have.text('loading...Test');
});
});
});