[material-ui][Button] Revert Button loading (#44478)

mui · Nov 20, 2024 · 232555b · 232555b
1 parent 35f0d6f
commit 232555b
Show file tree

Hide file tree

Showing 47 changed files with 1,587 additions and 862 deletions.
diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.js b/docs/data/material/components/button-group/LoadingButtonGroup.js
@@ -1,16 +1,17 @@
 import * as React from 'react';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
+import LoadingButton from '@mui/lab/LoadingButton';
 import SaveIcon from '@mui/icons-material/Save';
 
 export default function LoadingButtonGroup() {
   return (
     <ButtonGroup variant="outlined" aria-label="Loading button group">
       <Button>Submit</Button>
-      <Button>Fetch data</Button>
-      <Button loading loadingPosition="start" startIcon={<SaveIcon />}>
+      <LoadingButton>Fetch data</LoadingButton>
+      <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
         Save
-      </Button>
+      </LoadingButton>
     </ButtonGroup>
   );
 }
diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx b/docs/data/material/components/button-group/LoadingButtonGroup.tsx
@@ -1,16 +1,17 @@
 import * as React from 'react';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
+import LoadingButton from '@mui/lab/LoadingButton';
 import SaveIcon from '@mui/icons-material/Save';
 
 export default function LoadingButtonGroup() {
   return (
     <ButtonGroup variant="outlined" aria-label="Loading button group">
       <Button>Submit</Button>
-      <Button>Fetch data</Button>
-      <Button loading loadingPosition="start" startIcon={<SaveIcon />}>
+      <LoadingButton>Fetch data</LoadingButton>
+      <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
         Save
-      </Button>
+      </LoadingButton>
     </ButtonGroup>
   );
 }
diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview b/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview
@@ -1,7 +1,7 @@
 <ButtonGroup variant="outlined" aria-label="Loading button group">
   <Button>Submit</Button>
-  <Button>Fetch data</Button>
-  <Button loading loadingPosition="start" startIcon={<SaveIcon />}>
+  <LoadingButton>Fetch data</LoadingButton>
+  <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
     Save
-  </Button>
+  </LoadingButton>
 </ButtonGroup>
diff --git a/docs/data/material/components/button-group/button-group.md b/docs/data/material/components/button-group/button-group.md
@@ -1,7 +1,7 @@
 ---
 productId: material-ui
 title: React Button Group component
-components: Button, ButtonGroup
+components: Button, ButtonGroup, LoadingButton
 githubLabel: 'component: ButtonGroup'
 githubSource: packages/mui-material/src/ButtonGroup
 ---
@@ -49,8 +49,10 @@ You can remove the elevation with the `disableElevation` prop.
 
 {{"demo": "DisableElevation.js"}}
 
-## Loading
+## Experimental APIs
 
-Use the `loading` prop from `Button` to set buttons in a loading state and disable interactions.
+### Loading button
+
+You can use the [`<LoadingButton />`](/material-ui/react-button/#loading-button) from [`@mui/lab`](/material-ui/about-the-lab/) in the button group.
 
 {{"demo": "LoadingButtonGroup.js"}}
diff --git a/docs/data/material/components/buttons/IconButtonWithBadge.js b/docs/data/material/components/buttons/IconButtonWithBadge.js
diff --git a/docs/data/material/components/buttons/IconButtonWithBadge.tsx b/docs/data/material/components/buttons/IconButtonWithBadge.tsx
diff --git a/docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview b/docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview
diff --git a/docs/data/material/components/buttons/LoadingButtons.js b/docs/data/material/components/buttons/LoadingButtons.js
@@ -1,45 +1,25 @@
 import * as React from 'react';
-import Button from '@mui/material/Button';
+import LoadingButton from '@mui/lab/LoadingButton';
 import SaveIcon from '@mui/icons-material/Save';
 import Stack from '@mui/material/Stack';
 
 export default function LoadingButtons() {
   return (
-    <Stack spacing={2}>
-      <Stack direction="row" spacing={2}>
-        <Button loading variant="outlined">
-          Submit
-        </Button>
-        <Button loading loadingIndicator="Loading…" variant="outlined">
-          Fetch data
-        </Button>
-        <Button
-          loading
-          loadingPosition="start"
-          startIcon={<SaveIcon />}
-          variant="outlined"
-        >
-          Save
-        </Button>
-      </Stack>
-      <Button
-        fullWidth
+    <Stack direction="row" spacing={2}>
+      <LoadingButton loading variant="outlined">
+        Submit
+      </LoadingButton>
+      <LoadingButton loading loadingIndicator="Loading…" variant="outlined">
+        Fetch data
+      </LoadingButton>
+      <LoadingButton
         loading
         loadingPosition="start"
         startIcon={<SaveIcon />}
         variant="outlined"
       >
-        Full width
-      </Button>
-      <Button
-        fullWidth
-        loading
-        loadingPosition="end"
-        endIcon={<SaveIcon />}
-        variant="outlined"
-      >
-        Full width
-      </Button>
+        Save
+      </LoadingButton>
     </Stack>
   );
 }
diff --git a/docs/data/material/components/buttons/LoadingButtons.tsx b/docs/data/material/components/buttons/LoadingButtons.tsx
@@ -1,45 +1,25 @@
 import * as React from 'react';
-import Button from '@mui/material/Button';
+import LoadingButton from '@mui/lab/LoadingButton';
 import SaveIcon from '@mui/icons-material/Save';
 import Stack from '@mui/material/Stack';
 
 export default function LoadingButtons() {
   return (
-    <Stack spacing={2}>
-      <Stack direction="row" spacing={2}>
-        <Button loading variant="outlined">
-          Submit
-        </Button>
-        <Button loading loadingIndicator="Loading…" variant="outlined">
-          Fetch data
-        </Button>
-        <Button
-          loading
-          loadingPosition="start"
-          startIcon={<SaveIcon />}
-          variant="outlined"
-        >
-          Save
-        </Button>
-      </Stack>
-      <Button
-        fullWidth
+    <Stack direction="row" spacing={2}>
+      <LoadingButton loading variant="outlined">
+        Submit
+      </LoadingButton>
+      <LoadingButton loading loadingIndicator="Loading…" variant="outlined">
+        Fetch data
+      </LoadingButton>
+      <LoadingButton
         loading
         loadingPosition="start"
         startIcon={<SaveIcon />}
         variant="outlined"
       >
-        Full width
-      </Button>
-      <Button
-        fullWidth
-        loading
-        loadingPosition="end"
-        endIcon={<SaveIcon />}
-        variant="outlined"
-      >
-        Full width
-      </Button>
+        Save
+      </LoadingButton>
     </Stack>
   );
 }
diff --git a/docs/data/material/components/buttons/LoadingButtons.tsx.preview b/docs/data/material/components/buttons/LoadingButtons.tsx.preview
@@ -0,0 +1,14 @@
+<LoadingButton loading variant="outlined">
+  Submit
+</LoadingButton>
+<LoadingButton loading loadingIndicator="Loading…" variant="outlined">
+  Fetch data
+</LoadingButton>
+<LoadingButton
+  loading
+  loadingPosition="start"
+  startIcon={<SaveIcon />}
+  variant="outlined"
+>
+  Save
+</LoadingButton>
diff --git a/docs/data/material/components/buttons/LoadingButtonsTransition.js b/docs/data/material/components/buttons/LoadingButtonsTransition.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button from '@mui/material/Button';
+import LoadingButton from '@mui/lab/LoadingButton';
 import Box from '@mui/material/Box';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
@@ -27,25 +27,25 @@ export default function LoadingButtonsTransition() {
         label="Loading"
       />
       <Box sx={{ '& > button': { m: 1 } }}>
-        <Button
+        <LoadingButton
           size="small"
           onClick={handleClick}
           loading={loading}
           variant="outlined"
           disabled
         >
           Disabled
-        </Button>
-        <Button
+        </LoadingButton>
+        <LoadingButton
           size="small"
           onClick={handleClick}
           loading={loading}
           loadingIndicator="Loading…"
           variant="outlined"
         >
           Fetch data
-        </Button>
-        <Button
+        </LoadingButton>
+        <LoadingButton
           size="small"
           onClick={handleClick}
           endIcon={<SendIcon />}
@@ -54,8 +54,8 @@ export default function LoadingButtonsTransition() {
           variant="contained"
         >
           Send
-        </Button>
-        <Button
+        </LoadingButton>
+        <LoadingButton
           size="small"
           color="secondary"
           onClick={handleClick}
@@ -65,30 +65,35 @@ export default function LoadingButtonsTransition() {
           variant="contained"
         >
           Save
-        </Button>
+        </LoadingButton>
       </Box>
       <Box sx={{ '& > button': { m: 1 } }}>
-        <Button onClick={handleClick} loading={loading} variant="outlined" disabled>
+        <LoadingButton
+          onClick={handleClick}
+          loading={loading}
+          variant="outlined"
+          disabled
+        >
           Disabled
-        </Button>
-        <Button
+        </LoadingButton>
+        <LoadingButton
           onClick={handleClick}
           loading={loading}
           loadingIndicator="Loading…"
           variant="outlined"
         >
           Fetch data
-        </Button>
-        <Button
+        </LoadingButton>
+        <LoadingButton
           onClick={handleClick}
           endIcon={<SendIcon />}
           loading={loading}
           loadingPosition="end"
           variant="contained"
         >
           Send
-        </Button>
-        <Button
+        </LoadingButton>
+        <LoadingButton
           color="secondary"
           onClick={handleClick}
           loading={loading}
@@ -97,7 +102,7 @@ export default function LoadingButtonsTransition() {
           variant="contained"
         >
           Save
-        </Button>
+        </LoadingButton>
       </Box>
     </div>
   );