[lab][LoadingButton] LoadingButton now inherits props from ButtonGroup (

#39679)

Signed-off-by: Lucas Hilgert <[email protected]>
Co-authored-by: Marija Najdova <[email protected]>
Co-authored-by: ZeeshanTamboli <[email protected]>

docs/data/material/components/button-group/LoadingButtonGroup.js

@@ -0,0 +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>
+      <LoadingButton>Fetch data</LoadingButton>
+      <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
+        Save
+      </LoadingButton>
+    </ButtonGroup>
+  );
+}

docs/data/material/components/button-group/LoadingButtonGroup.tsx

@@ -0,0 +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>
+      <LoadingButton>Fetch data</LoadingButton>
+      <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
+        Save
+      </LoadingButton>
+    </ButtonGroup>
+  );
+}

docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview

@@ -0,0 +1,7 @@
+<ButtonGroup variant="outlined" aria-label="loading button group">
+  <Button>Submit</Button>
+  <LoadingButton>Fetch data</LoadingButton>
+  <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
+    Save
+  </LoadingButton>
+</ButtonGroup>

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'
 ---
 
@@ -47,3 +47,11 @@ The button group can be displayed vertically using the `orientation` prop.
 You can remove the elevation with the `disableElevation` prop.
 
 {{"demo": "DisableElevation.js"}}
+
+## Experimental APIs
+
+### 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"}}

docs/pages/material-ui/api/loading-button.json

@@ -367,6 +367,6 @@
   "forwardsRefTo": "HTMLButtonElement",
   "filename": "/packages/mui-lab/src/LoadingButton/LoadingButton.js",
   "inheritance": { "component": "Button", "pathname": "/material-ui/api/button/" },
-  "demos": "<ul><li><a href=\"/material-ui/react-button/\">Button</a></li></ul>",
+  "demos": "<ul><li><a href=\"/material-ui/react-button-group/\">Button Group</a></li>\n<li><a href=\"/material-ui/react-button/\">Button</a></li></ul>",
   "cssComponent": false
 }

packages/mui-lab/src/LoadingButton/LoadingButton.d.ts

@@ -60,6 +60,7 @@ export type LoadingButtonTypeMap<
  *
  * Demos:
  *
+ * - [Button Group](https://mui.com/material-ui/react-button-group/)
  * - [Button](https://mui.com/material-ui/react-button/)
  *
  * API:

packages/mui-lab/src/LoadingButton/LoadingButton.js

@@ -5,7 +5,9 @@ import { capitalize, unstable_useId as useId } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps } from '@mui/material/styles';
 import Button from '@mui/material/Button';
+import { ButtonGroupContext } from '@mui/material/ButtonGroup';
 import CircularProgress from '@mui/material/CircularProgress';
+import resolveProps from '@mui/utils/resolveProps';
 import loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses';
 
 const useUtilityClasses = (ownerState) => {
@@ -135,7 +137,9 @@ const LoadingButtonLoadingIndicator = styled('span', {
 }));
 
 const LoadingButton = React.forwardRef(function LoadingButton(inProps, ref) {
-  const props = useThemeProps({ props: inProps, name: 'MuiLoadingButton' });
+  const contextProps = React.useContext(ButtonGroupContext);
+  const resolvedProps = resolveProps(contextProps, inProps);
+  const props = useThemeProps({ props: resolvedProps, name: 'MuiLoadingButton' });
   const {
     children,
     disabled = false,

packages/mui-lab/src/LoadingButton/LoadingButton.test.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { createRenderer, describeConformance, screen, within } from '@mui-internal/test-utils';
 import { expect } from 'chai';
-import Button from '@mui/material/Button';
+import Button, { buttonClasses } from '@mui/material/Button';
 import LoadingButton, { loadingButtonClasses as classes } from '@mui/lab/LoadingButton';
+import ButtonGroup, { buttonGroupClasses } from '@mui/material/ButtonGroup';
 
 describe('<LoadingButton />', () => {
   const { render } = createRenderer();
@@ -72,4 +73,44 @@ describe('<LoadingButton />', () => {
       expect(screen.getByRole('button')).to.have.text('loading…Test');
     });
   });
+
+  describe('ButtonGroup works with LoadingButton', () => {
+    it('correctly passes props to children', () => {
+      const { getByRole } = render(
+        <ButtonGroup variant="contained" size="large" color="secondary">
+          <LoadingButton />
+        </ButtonGroup>,
+      );
+      const button = getByRole('button');
+      expect(button).to.have.class(buttonClasses.contained);
+      expect(button).to.have.class(buttonClasses.sizeLarge);
+      expect(button).to.have.class(buttonClasses.containedSecondary);
+    });
+
+    it('correctly applies position classes to loading buttons', () => {
+      render(
+        <ButtonGroup>
+          <LoadingButton>Button 1</LoadingButton>
+          <LoadingButton>Button 2</LoadingButton>
+          <LoadingButton>Button 3</LoadingButton>
+        </ButtonGroup>,
+      );
+
+      const firstButton = screen.getAllByRole('button')[0];
+      const middleButton = screen.getAllByRole('button')[1];
+      const lastButton = screen.getAllByRole('button')[2];
+
+      expect(firstButton).to.have.class(buttonGroupClasses.firstButton);
+      expect(firstButton).not.to.have.class(buttonGroupClasses.middleButton);
+      expect(firstButton).not.to.have.class(buttonGroupClasses.lastButton);
+
+      expect(middleButton).to.have.class(buttonGroupClasses.middleButton);
+      expect(middleButton).not.to.have.class(buttonGroupClasses.firstButton);
+      expect(middleButton).not.to.have.class(buttonGroupClasses.lastButton);
+
+      expect(lastButton).to.have.class(buttonGroupClasses.lastButton);
+      expect(lastButton).not.to.have.class(buttonGroupClasses.middleButton);
+      expect(lastButton).not.to.have.class(buttonGroupClasses.firstButton);
+    });
+  });
 });

packages/mui-material/src/ButtonGroup/index.d.ts

@@ -2,3 +2,5 @@ export { default } from './ButtonGroup';
 export * from './ButtonGroup';
 export { default as buttonGroupClasses } from './buttonGroupClasses';
 export * from './buttonGroupClasses';
+export { default as ButtonGroupContext } from './ButtonGroupContext';
+export { default as ButtonGroupButtonContext } from './ButtonGroupButtonContext';

packages/mui-material/src/ButtonGroup/index.js

@@ -2,3 +2,5 @@
 export { default } from './ButtonGroup';
 export { default as buttonGroupClasses } from './buttonGroupClasses';
 export * from './buttonGroupClasses';
+export { default as ButtonGroupContext } from './ButtonGroupContext';
+export { default as ButtonGroupButtonContext } from './ButtonGroupButtonContext';