[LoadingButton] Change LoadingButton prop pending to loading

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

@@ -31,9 +31,9 @@ The `MuiLoadingButton` name can be used for providing [default props](/customiza
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the button. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the button will be disabled. |
-| <span class="prop-name">pending</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the pending indicator will be shown. |
-| <span class="prop-name">pendingIndicator</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;CircularProgress color="inherit" size={16} /></span> | Element placed before the children if the button is in pending state. |
-| <span class="prop-name">pendingPosition</span> | <span class="prop-type">'start'<br>&#124;&nbsp;'end'<br>&#124;&nbsp;'center'</span> | <span class="prop-default">'center'</span> | The pending indicator can be positioned on the start, end, or the center of the button. |
+| <span class="prop-name">loading</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the loading indicator will be shown. |
+| <span class="prop-name">loadingIndicator</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;CircularProgress color="inherit" size={16} /></span> | Element placed before the children if the button is in loading state. |
+| <span class="prop-name">loadingPosition</span> | <span class="prop-type">'start'<br>&#124;&nbsp;'end'<br>&#124;&nbsp;'center'</span> | <span class="prop-default">'center'</span> | The loading indicator can be positioned on the start, end, or the center of the button. |
 
 The `ref` is forwarded to the root element.
 
@@ -44,14 +44,14 @@ Any other props supplied will be provided to the root element ([Button](/api/but
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiLoadingButton-root</span> | Styles applied to the root element.
-| <span class="prop-name">pending</span> | <span class="prop-name">.MuiLoadingButton-pending</span> | Styles applied to the root element if `pending={true}`.
-| <span class="prop-name">pendingIndicator</span> | <span class="prop-name">.MuiLoadingButton-pendingIndicator</span> | Styles applied to the pendingIndicator element.
-| <span class="prop-name">pendingIndicatorCenter</span> | <span class="prop-name">.MuiLoadingButton-pendingIndicatorCenter</span> | Styles applied to the pendingIndicator element if `pendingPosition="center"`.
-| <span class="prop-name">pendingIndicatorStart</span> | <span class="prop-name">.MuiLoadingButton-pendingIndicatorStart</span> | Styles applied to the pendingIndicator element if `pendingPosition="start"`.
-| <span class="prop-name">pendingIndicatorEnd</span> | <span class="prop-name">.MuiLoadingButton-pendingIndicatorEnd</span> | Styles applied to the pendingIndicator element if `pendingPosition="end"`.
-| <span class="prop-name">endIconPendingEnd</span> | <span class="prop-name">.MuiLoadingButton-endIconPendingEnd</span> | Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`.
-| <span class="prop-name">startIconPendingStart</span> | <span class="prop-name">.MuiLoadingButton-startIconPendingStart</span> | Styles applied to the startIcon element if `pending={true}` and `pendingPosition="start"`.
-| <span class="prop-name">labelPendingCenter</span> | <span class="prop-name">.MuiLoadingButton-labelPendingCenter</span> | Styles applied to the label element if `pending={true}` and `pendingPosition="center"`.
+| <span class="prop-name">loading</span> | <span class="prop-name">.MuiLoadingButton-loading</span> | Styles applied to the root element if `loading={true}`.
+| <span class="prop-name">loadingIndicator</span> | <span class="prop-name">.MuiLoadingButton-loadingIndicator</span> | Styles applied to the loadingIndicator element.
+| <span class="prop-name">loadingIndicatorCenter</span> | <span class="prop-name">.MuiLoadingButton-loadingIndicatorCenter</span> | Styles applied to the loadingIndicator element if `loadingPosition="center"`.
+| <span class="prop-name">loadingIndicatorStart</span> | <span class="prop-name">.MuiLoadingButton-loadingIndicatorStart</span> | Styles applied to the loadingIndicator element if `loadingPosition="start"`.
+| <span class="prop-name">loadingIndicatorEnd</span> | <span class="prop-name">.MuiLoadingButton-loadingIndicatorEnd</span> | Styles applied to the loadingIndicator element if `loadingPosition="end"`.
+| <span class="prop-name">endIconLoadingEnd</span> | <span class="prop-name">.MuiLoadingButton-endIconLoadingEnd</span> | Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`.
+| <span class="prop-name">startIconLoadingStart</span> | <span class="prop-name">.MuiLoadingButton-startIconLoadingStart</span> | Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`.
+| <span class="prop-name">labelLoadingCenter</span> | <span class="prop-name">.MuiLoadingButton-labelLoadingCenter</span> | Styles applied to the label element if `loading={true}` and `loadingPosition="center"`.
 
 You can override the style of the component thanks to one of these customization points:
 

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

@@ -16,15 +16,15 @@ export default function LoadingButtons() {
 
   return (
     <div className={classes.root}>
-      <LoadingButton pending variant="outlined">
+      <LoadingButton loading variant="outlined">
         Submit
       </LoadingButton>
-      <LoadingButton pending pendingIndicator="Loading..." variant="outlined">
+      <LoadingButton loading loadingIndicator="Loading..." variant="outlined">
         Fetch data
       </LoadingButton>
       <LoadingButton
-        pending
-        pendingPosition="start"
+        loading
+        loadingPosition="start"
         startIcon={<SaveIcon />}
         variant="outlined"
       >

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

@@ -16,15 +16,15 @@ export default function LoadingButtons() {
 
   return (
     <div className={classes.root}>
-      <LoadingButton pending variant="outlined">
+      <LoadingButton loading variant="outlined">
         Submit
       </LoadingButton>
-      <LoadingButton pending pendingIndicator="Loading..." variant="outlined">
+      <LoadingButton loading loadingIndicator="Loading..." variant="outlined">
         Fetch data
       </LoadingButton>
       <LoadingButton
-        pending
-        pendingPosition="start"
+        loading
+        loadingPosition="start"
         startIcon={<SaveIcon />}
         variant="outlined"
       >

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

@@ -20,50 +20,50 @@ const useStyles = makeStyles((theme) => ({
 export default function LoadingButtonsTransition() {
   const classes = useStyles();
 
-  const [pending, setPending] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
   function handleClick() {
-    setPending(true);
+    setLoading(true);
   }
 
   return (
     <div className={classes.root}>
       <FormControlLabel
         control={
           <Switch
-            checked={pending}
-            onChange={() => setPending(!pending)}
-            name="pending"
+            checked={loading}
+            onChange={() => setLoading(!loading)}
+            name="loading"
             color="primary"
           />
         }
         className={classes.switch}
-        label="Pending"
+        label="Loading"
       />
-      <LoadingButton onClick={handleClick} pending={pending} variant="outlined">
+      <LoadingButton onClick={handleClick} loading={loading} variant="outlined">
         Submit
       </LoadingButton>
       <LoadingButton
         onClick={handleClick}
-        pending={pending}
-        pendingIndicator="Loading..."
+        loading={loading}
+        loadingIndicator="Loading..."
         variant="outlined"
       >
         Fetch data
       </LoadingButton>
       <LoadingButton
         onClick={handleClick}
         endIcon={<SendIcon />}
-        pending={pending}
-        pendingPosition="end"
+        loading={loading}
+        loadingPosition="end"
         variant="contained"
       >
         Send
       </LoadingButton>
       <LoadingButton
         color="secondary"
         onClick={handleClick}
-        pending={pending}
-        pendingPosition="start"
+        loading={loading}
+        loadingPosition="start"
         startIcon={<SaveIcon />}
         variant="contained"
       >

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

@@ -20,50 +20,50 @@ const useStyles = makeStyles((theme) => ({
 export default function LoadingButtonsTransition() {
   const classes = useStyles();
 
-  const [pending, setPending] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
   function handleClick() {
-    setPending(true);
+    setLoading(true);
   }
 
   return (
     <div className={classes.root}>
       <FormControlLabel
         control={
           <Switch
-            checked={pending}
-            onChange={() => setPending(!pending)}
-            name="pending"
+            checked={loading}
+            onChange={() => setLoading(!loading)}
+            name="loading"
             color="primary"
           />
         }
         className={classes.switch}
-        label="Pending"
+        label="Loading"
       />
-      <LoadingButton onClick={handleClick} pending={pending} variant="outlined">
+      <LoadingButton onClick={handleClick} loading={loading} variant="outlined">
         Submit
       </LoadingButton>
       <LoadingButton
         onClick={handleClick}
-        pending={pending}
-        pendingIndicator="Loading..."
+        loading={loading}
+        loadingIndicator="Loading..."
         variant="outlined"
       >
         Fetch data
       </LoadingButton>
       <LoadingButton
         onClick={handleClick}
         endIcon={<SendIcon />}
-        pending={pending}
-        pendingPosition="end"
+        loading={loading}
+        loadingPosition="end"
         variant="contained"
       >
         Send
       </LoadingButton>
       <LoadingButton
         color="secondary"
         onClick={handleClick}
-        pending={pending}
-        pendingPosition="start"
+        loading={loading}
+        loadingPosition="start"
         startIcon={<SaveIcon />}
         variant="contained"
       >

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"}}
 

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

@@ -93,7 +93,7 @@ Here are some examples of customizing the component. You can learn more about th
 
 ## 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"}}
 

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"}}
 

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

@@ -93,7 +93,7 @@ Outlined buttonは、Contained buttonより弱く、 Text buttonよりは強い
 
 ## 複雑な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"}}
 

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 complexos
 
-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"}}
 

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

@@ -93,7 +93,7 @@ Fancy larger or smaller buttons? Use the `size` property.
 
 ## Сложные кнопки
 
-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"}}
 

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

@@ -107,7 +107,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"}}
 

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 will be shown.
+     * If `true`, the loading indicator will be 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 <CircularProgress color="inherit" size={16} />
      */
-    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;
 }>;