[ButtonGroup] Support different elements under ButtonGroup

framer/Material-UI.framerfx/code/Button.tsx

@@ -4,10 +4,10 @@ import MuiButton from '@mui/material/Button';
 import { Icon } from './Icon';
 
 interface Props {
-  disabled: boolean;
-  disableElevation: boolean;
+  disabled?: boolean;
+  disableElevation?: boolean;
   endIcon: string;
-  fullWidth: boolean;
+  fullWidth?: boolean;
   href?: string;
   startIcon: string;
   startIconTheme: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp';
@@ -44,10 +44,7 @@ export function Button(props: Props): JSX.Element {
 }
 
 Button.defaultProps = {
-  disabled: false,
-  disableElevation: false,
   endIcon: undefined,
-  fullWidth: false,
   startIcon: undefined,
   startIconTheme: 'Filled' as 'Filled',
   endIconTheme: 'Filled' as 'Filled',

packages/mui-material/src/Button/Button.js

@@ -8,6 +8,7 @@ import useThemeProps from '../styles/useThemeProps';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
+import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
 
 const useUtilityClasses = (ownerState) => {
   const { color, disableElevation, fullWidth, size, variant, classes } = ownerState;
@@ -279,23 +280,46 @@ const ButtonEndIcon = styled('span', {
 
 const Button = React.forwardRef(function Button(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiButton' });
+  const {
+    className: classNameContext,
+    color: colorContext,
+    disabled: disabledContext,
+    disableElevation: disableElevationContext,
+    disableFocusRipple: disableFocusRippleContext,
+    disableRipple: disableRippleContext,
+    fullWidth: fullWidthContext,
+    size: sizeContext,
+    variant: variantContext,
+  } = React.useContext(ButtonGroupContext);
   const {
     children,
-    color = 'primary',
+    className,
+    color: colorProp,
     component = 'button',
-    disabled = false,
-    disableElevation = false,
-    disableFocusRipple = false,
+    disabled: disabledProp,
+    disableElevation: disableElevationProp,
+    disableFocusRipple: disableFocusRippleProp,
+    disableRipple: disableRippleProp,
     endIcon: endIconProp,
     focusVisibleClassName,
-    fullWidth = false,
-    size = 'medium',
+    fullWidth: fullWidthProp,
+    size: sizeProp,
     startIcon: startIconProp,
     type,
-    variant = 'text',
+    variant: variantProp,
     ...other
   } = props;
 
+  const color = colorProp || colorContext || 'primary';
+  // TODO v6: Use nullish coalescing (??) instead of OR operator for these boolean props so that these boolean props for Button with ButtonGroup context take priority. See conversation from https://github.com/mui-org/material-ui/pull/28645#discussion_r738380902.
+  const disabled = disabledProp || disabledContext || false;
+  const disableElevation = disableElevationProp || disableElevationContext || false;
+  const disableFocusRipple = disableFocusRippleProp || disableFocusRippleContext || false;
+  const fullWidth = fullWidthProp || fullWidthContext || false;
+  const size = sizeProp || sizeContext || 'medium';
+  const variant = variantProp || variantContext || 'text';
+  const disableRipple = disableRippleProp || disableRippleContext || false;
+
   const ownerState = {
     ...props,
     color,
@@ -326,8 +350,10 @@ const Button = React.forwardRef(function Button(inProps, ref) {
   return (
     <ButtonRoot
       ownerState={ownerState}
+      className={clsx(className, classNameContext)}
       component={component}
       disabled={disabled}
+      disableRipple={disableRipple}
       focusRipple={!disableFocusRipple}
       focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
       ref={ref}
@@ -355,6 +381,10 @@ Button.propTypes /* remove-proptypes */ = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'primary'

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/core';
@@ -8,6 +7,7 @@ import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
+import ButtonGroupContext from './ButtonGroupContext';
 
 const overridesResolver = (props, styles) => {
   const { ownerState } = props;
@@ -199,6 +199,31 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
+  const context = React.useMemo(
+    () => ({
+      className: classes.grouped,
+      color,
+      disabled,
+      disableElevation,
+      disableFocusRipple,
+      disableRipple,
+      fullWidth,
+      size,
+      variant,
+    }),
+    [
+      color,
+      disabled,
+      disableElevation,
+      disableFocusRipple,
+      disableRipple,
+      fullWidth,
+      size,
+      variant,
+      classes.grouped,
+    ],
+  );
+
   return (
     <ButtonGroupRoot
       as={component}
@@ -208,34 +233,7 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(inProps, ref) {
       ownerState={ownerState}
       {...other}
     >
-      {React.Children.map(children, (child) => {
-        if (!React.isValidElement(child)) {
-          return null;
-        }
-
-        if (process.env.NODE_ENV !== 'production') {
-          if (isFragment(child)) {
-            console.error(
-              [
-                "MUI: The ButtonGroup component doesn't accept a Fragment as a child.",
-                'Consider providing an array instead.',
-              ].join('\n'),
-            );
-          }
-        }
-
-        return React.cloneElement(child, {
-          className: clsx(classes.grouped, child.props.className),
-          color: child.props.color || color,
-          disabled: child.props.disabled || disabled,
-          disableElevation: child.props.disableElevation || disableElevation,
-          disableFocusRipple,
-          disableRipple,
-          fullWidth,
-          size: child.props.size || size,
-          variant: child.props.variant || variant,
-        });
-      })}
+      <ButtonGroupContext.Provider value={context}>{children}</ButtonGroupContext.Provider>
     </ButtonGroupRoot>
   );
 });

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

@@ -3,6 +3,7 @@ import { expect } from 'chai';
 import { createClientRender, describeConformance } from 'test/utils';
 import ButtonGroup, { buttonGroupClasses as classes } from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
+import ButtonGroupContext from './ButtonGroupContext';
 
 describe('<ButtonGroup />', () => {
   const render = createClientRender();
@@ -148,4 +149,25 @@ describe('<ButtonGroup />', () => {
     expect(buttonGroup).to.have.class(classes.fullWidth);
     expect(button).to.have.class('MuiButton-fullWidth');
   });
+
+  it('should forward the context to children', () => {
+    let context;
+    render(
+      <ButtonGroup size="large" variant="contained">
+        <ButtonGroupContext.Consumer>
+          {(value) => {
+            context = value;
+          }}
+        </ButtonGroupContext.Consumer>
+      </ButtonGroup>,
+    );
+    expect(context.variant).to.equal('contained');
+    expect(context.size).to.equal('large');
+    expect(context.fullWidth).to.equal(false);
+    expect(context.disableRipple).to.equal(false);
+    expect(context.disableFocusRipple).to.equal(false);
+    expect(context.disableElevation).to.equal(false);
+    expect(context.disabled).to.equal(false);
+    expect(context.color).to.equal('primary');
+  });
 });

packages/mui-material/src/ButtonGroup/ButtonGroupContext.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { ButtonGroupProps } from './ButtonGroup';
+
+interface IButtonGroupContext {
+  className?: string;
+  color?: ButtonGroupProps['color'];
+  disabled?: boolean;
+  disabledElevation?: boolean;
+  disableFocusRipple?: boolean;
+  disableRipple?: boolean;
+  fullWidth?: boolean;
+  size?: ButtonGroupProps['size'];
+  variant?: ButtonGroupProps['variant'];
+}
+
+/**
+ * @ignore - internal component.
+ */
+const ButtonGroupContext = React.createContext<IButtonGroupContext>({});
+
+if (process.env.NODE_ENV !== 'production') {
+  ButtonGroupContext.displayName = 'ButtonGroupContext';
+}
+
+export default ButtonGroupContext;