[ButtonGroup] Determine first, last and middle buttons to support different elements with correct styling

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

@@ -11,6 +11,7 @@ import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
+import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext';
 
 const useUtilityClasses = (ownerState) => {
   const { color, disableElevation, fullWidth, size, variant, classes } = ownerState;
@@ -295,9 +296,23 @@ const ButtonEndIcon = styled('span', {
   ...commonIconStyles(ownerState),
 }));
 
+const addPositionDataAttr = (buttonGroupButtonContext) => {
+  if (buttonGroupButtonContext.firstButton) {
+    return { 'data-first-child': '' };
+  }
+  if (buttonGroupButtonContext.lastButton) {
+    return { 'data-last-child': '' };
+  }
+  if (buttonGroupButtonContext.onlyChild) {
+    return {};
+  }
+  return { 'data-middle-child': '' };
+};
+
 const Button = React.forwardRef(function Button(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
   const contextProps = React.useContext(ButtonGroupContext);
+  const buttonGroupButtonContext = React.useContext(ButtonGroupButtonContext);
   const resolvedProps = resolveProps(contextProps, inProps);
   const props = useThemeProps({ props: resolvedProps, name: 'MuiButton' });
   const {
@@ -345,6 +360,12 @@ const Button = React.forwardRef(function Button(inProps, ref) {
     </ButtonEndIcon>
   );
 
+  let extendedOtherProp = other;
+  if (buttonGroupButtonContext) {
+    const dataAttrs = addPositionDataAttr(buttonGroupButtonContext);
+    extendedOtherProp = { ...dataAttrs, ...other };
+  }
+
   return (
     <ButtonRoot
       ownerState={ownerState}
@@ -355,7 +376,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
       focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
       ref={ref}
       type={type}
-      {...other}
+      {...extendedOtherProp}
       classes={classes}
     >
       {startIcon}

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

@@ -9,6 +9,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
 import ButtonGroupContext from './ButtonGroupContext';
+import ButtonGroupButtonContext from './ButtonGroupButtonContext';
 
 const overridesResolver = (props, styles) => {
   const { ownerState } = props;
@@ -81,7 +82,7 @@ const ButtonGroupRoot = styled('div', {
   }),
   [`& .${buttonGroupClasses.grouped}`]: {
     minWidth: 40,
-    '&:not(:first-of-type)': {
+    '&[data-last-child],&[data-middle-child]': {
       ...(ownerState.orientation === 'horizontal' && {
         borderTopLeftRadius: 0,
         borderBottomLeftRadius: 0,
@@ -99,7 +100,7 @@ const ButtonGroupRoot = styled('div', {
           marginTop: -1,
         }),
     },
-    '&:not(:last-of-type)': {
+    '&[data-first-child],&[data-middle-child]': {
       ...(ownerState.orientation === 'horizontal' && {
         borderTopRightRadius: 0,
         borderBottomRightRadius: 0,
@@ -243,6 +244,17 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(inProps, ref) {
     ],
   );
 
+  const buttonGroupPositionContext = (index, childrenParam) => {
+    const childrenCount = React.Children.count(childrenParam);
+    const onlyChild = childrenCount === 1;
+
+    return {
+      firstButton: !onlyChild && index === 0,
+      lastButton: !onlyChild && index === childrenCount - 1,
+      onlyChild,
+    };
+  };
+
   return (
     <ButtonGroupRoot
       as={component}
@@ -252,7 +264,19 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(inProps, ref) {
       ownerState={ownerState}
       {...other}
     >
-      <ButtonGroupContext.Provider value={context}>{children}</ButtonGroupContext.Provider>
+      <ButtonGroupContext.Provider value={context}>
+        {React.Children.map(children, (child, index) => {
+          if (!React.isValidElement(child)) {
+            return child;
+          }
+
+          return (
+            <ButtonGroupButtonContext.Provider value={buttonGroupPositionContext(index, children)}>
+              {child}
+            </ButtonGroupButtonContext.Provider>
+          );
+        })}
+      </ButtonGroupContext.Provider>
     </ButtonGroupRoot>
   );
 });

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+interface IButtonGroupButtonContext {
+  firstButton?: boolean;
+  lastButton?: boolean;
+  onlyChild?: boolean;
+}
+
+/**
+ * @ignore - internal component.
+ */
+const ButtonGroupButtonContext = React.createContext<IButtonGroupButtonContext | undefined>(
+  undefined,
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  ButtonGroupButtonContext.displayName = 'ButtonGroupButtonContext';
+}
+
+export default ButtonGroupButtonContext;

test/regressions/fixtures/ButtonGroup/DifferentChildren.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+
+export default function DifferentChildren() {
+  return (
+    <Stack spacing={2}>
+      {/* It has one button with href which is rendered as anchor tag */}
+      <ButtonGroup variant="contained">
+        <Button href="##">Button 1</Button>
+        <Button>Button 2</Button>
+        <Button>Button 3</Button>
+      </ButtonGroup>
+
+      {/* With tooltip */}
+      <ButtonGroup>
+        <Tooltip title="tooltip">
+          <Button>Enabled</Button>
+        </Tooltip>
+        <Tooltip title="tooltip">
+          <span>
+            <Button disabled>Disabled</Button>
+          </span>
+        </Tooltip>
+        <Tooltip title="tooltip">
+          <span>
+            <Button disabled>Disabled</Button>
+          </span>
+        </Tooltip>
+      </ButtonGroup>
+
+      {/* One button */}
+      <ButtonGroup>
+        <Button>One Button</Button>
+      </ButtonGroup>
+    </Stack>
+  );
+}