[Button] Rename pending prop to loading in LoadingButton (#25874)

Co-authored-by: Guillermo Pincay <[email protected]>
mui · Apr 23, 2021 · ddafaa0 · ddafaa0
1 parent 916b521
commit ddafaa0
Show file tree

Hide file tree

Showing 17 changed files with 166 additions and 144 deletions.
diff --git a/docs/pages/api-docs/loading-button.json b/docs/pages/api-docs/loading-button.json
@@ -3,12 +3,12 @@
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
     "disabled": { "type": { "name": "bool" } },
-    "pending": { "type": { "name": "bool" } },
-    "pendingIndicator": {
+    "loading": { "type": { "name": "bool" } },
+    "loadingIndicator": {
       "type": { "name": "node" },
       "default": "<CircularProgress color=\"inherit\" size={16} />"
     },
-    "pendingPosition": {
+    "loadingPosition": {
       "type": {
         "name": "custom",
         "description": "'start'<br>&#124;&nbsp;'end'<br>&#124;&nbsp;'center'"
@@ -20,14 +20,14 @@
   "styles": {
     "classes": [
       "root",
-      "pending",
-      "pendingIndicator",
-      "pendingIndicatorCenter",
-      "pendingIndicatorStart",
-      "pendingIndicatorEnd",
-      "endIconPendingEnd",
-      "startIconPendingStart",
-      "labelPendingCenter"
+      "loading",
+      "loadingIndicator",
+      "loadingIndicatorCenter",
+      "loadingIndicatorStart",
+      "loadingIndicatorEnd",
+      "endIconLoadingEnd",
+      "startIconLoadingStart",
+      "labelLoadingCenter"
     ],
     "globalClasses": {},
     "name": "MuiLoadingButton"

diff --git a/docs/src/pages/components/buttons/LoadingButtons.js b/docs/src/pages/components/buttons/LoadingButtons.js
@@ -10,15 +10,15 @@ export default function LoadingButtons() {
         '& > :not(style)': { m: 1 },
       }}
     >
-      <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"
       >

diff --git a/docs/src/pages/components/buttons/LoadingButtons.tsx b/docs/src/pages/components/buttons/LoadingButtons.tsx
@@ -10,15 +10,15 @@ export default function LoadingButtons() {
         '& > :not(style)': { m: 1 },
       }}
     >
-      <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"
       >

diff --git a/docs/src/pages/components/buttons/LoadingButtonsTransition.js b/docs/src/pages/components/buttons/LoadingButtonsTransition.js
@@ -7,9 +7,9 @@ import SaveIcon from '@material-ui/icons/Save';
 import SendIcon from '@material-ui/icons/Send';
 
 export default function LoadingButtonsTransition() {
-  const [pending, setPending] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
   function handleClick() {
-    setPending(true);
+    setLoading(true);
   }
 
   return (
@@ -26,39 +26,39 @@ export default function LoadingButtonsTransition() {
         }}
         control={
           <Switch
-            checked={pending}
-            onChange={() => setPending(!pending)}
-            name="pending"
+            checked={loading}
+            onChange={() => setLoading(!loading)}
+            name="loading"
             color="primary"
           />
         }
-        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"
       >

diff --git a/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx b/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx
@@ -7,9 +7,9 @@ import SaveIcon from '@material-ui/icons/Save';
 import SendIcon from '@material-ui/icons/Send';
 
 export default function LoadingButtonsTransition() {
-  const [pending, setPending] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
   function handleClick() {
-    setPending(true);
+    setLoading(true);
   }
 
   return (
@@ -26,39 +26,39 @@ export default function LoadingButtonsTransition() {
         }}
         control={
           <Switch
-            checked={pending}
-            onChange={() => setPending(!pending)}
-            name="pending"
+            checked={loading}
+            onChange={() => setLoading(!loading)}
+            name="loading"
             color="primary"
           />
         }
-        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"
       >

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -787,6 +787,28 @@ As the core components use emotion as a styled engine, the props used by emotion
   +<Icon>icon-name</Icon>
   ```
 
+### LoadingButton
+
+- Rename `pending` prop to `loading`.
+- Rename `pendingIndicator` prop to `loadingIndicator`.
+- Rename `pendingPosition` prop to `loadingPosition`.
+
+  ```diff
+  -<LoadingButton pending pendingIndicator="Pending..." pendingPosition="end" />
+  +<LoadingButton loading loadingIndicator="Pending..." loadingPosition="end" />
+  ```
+
+- 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
@@ -4,50 +4,50 @@
     "children": "The content of the component.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "disabled": "If <code>true</code>, the component is disabled.",
-    "pending": "If <code>true</code>, 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 <code>true</code>, 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": "<code>pending={true}</code>"
+      "conditions": "<code>loading={true}</code>"
     },
-    "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": "<code>pendingPosition=\"center\"</code>"
+      "nodeName": "the loadingIndicator element",
+      "conditions": "<code>loadingPosition=\"center\"</code>"
     },
-    "pendingIndicatorStart": {
+    "loadingIndicatorStart": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the pendingIndicator element",
-      "conditions": "<code>pendingPosition=\"start\"</code>"
+      "nodeName": "the loadingIndicator element",
+      "conditions": "<code>loadingPosition=\"start\"</code>"
     },
-    "pendingIndicatorEnd": {
+    "loadingIndicatorEnd": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the pendingIndicator element",
-      "conditions": "<code>pendingPosition=\"end\"</code>"
+      "nodeName": "the loadingIndicator element",
+      "conditions": "<code>loadingPosition=\"end\"</code>"
     },
-    "endIconPendingEnd": {
+    "endIconLoadingEnd": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the endIcon element",
-      "conditions": "<code>pending={true}</code> and <code>pendingPosition=\"end\"</code>"
+      "conditions": "<code>loading={true}</code> and <code>loadingPosition=\"end\"</code>"
     },
-    "startIconPendingStart": {
+    "startIconLoadingStart": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the startIcon element",
-      "conditions": "<code>pending={true}</code> and <code>pendingPosition=\"start\"</code>"
+      "conditions": "<code>loading={true}</code> and <code>loadingPosition=\"start\"</code>"
     },
-    "labelPendingCenter": {
+    "labelLoadingCenter": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the label element",
-      "conditions": "<code>pending={true}</code> and <code>pendingPosition=\"center\"</code>"
+      "conditions": "<code>loading={true}</code> and <code>loadingPosition=\"center\"</code>"
     }
   }
 }