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

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

@@ -54,6 +54,7 @@
       "text",
       "disableElevation",
       "disabled",
+      "firstButton",
       "fullWidth",
       "vertical",
       "grouped",
@@ -73,7 +74,9 @@
       "groupedContainedHorizontal",
       "groupedContainedVertical",
       "groupedContainedPrimary",
-      "groupedContainedSecondary"
+      "groupedContainedSecondary",
+      "lastButton",
+      "middleButton"
     ],
     "globalClasses": { "disabled": "Mui-disabled" },
     "name": "MuiButtonGroup"

docs/translations/api-docs/button-group/button-group.json

@@ -56,6 +56,10 @@
       "nodeName": "the child elements",
       "conditions": "<code>disabled={true}</code>"
     },
+    "firstButton": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the first button in the button group"
+    },
     "fullWidth": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -151,6 +155,14 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the children",
       "conditions": "<code>variant=\"contained\"</code> and <code>color=\"secondary\"</code>"
+    },
+    "lastButton": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the last button in the button group"
+    },
+    "middleButton": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "buttons in the middle of the button group"
     }
   }
 }

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,26 @@ const ButtonEndIcon = styled('span', {
   ...commonIconStyles(ownerState),
 }));
 
+const addClassNameBasedOnPosition = (buttonGroupButtonContext) => {
+  if (
+    buttonGroupButtonContext.firstButtonClassName &&
+    buttonGroupButtonContext.lastButtonClassName
+  ) {
+    return '';
+  }
+  if (buttonGroupButtonContext.firstButtonClassName) {
+    return buttonGroupButtonContext.firstButtonClassName;
+  }
+  if (buttonGroupButtonContext.lastButtonClassName) {
+    return buttonGroupButtonContext.lastButtonClassName;
+  }
+  return buttonGroupButtonContext.middleButtonClassName;
+};
+
 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,10 +363,15 @@ const Button = React.forwardRef(function Button(inProps, ref) {
     </ButtonEndIcon>
   );
 
+  let positionClassName = '';
+  if (buttonGroupButtonContext) {
+    positionClassName = addClassNameBasedOnPosition(buttonGroupButtonContext);
+  }
+
   return (
     <ButtonRoot
       ownerState={ownerState}
-      className={clsx(contextProps.className, classes.root, className)}
+      className={clsx(contextProps.className, classes.root, className, positionClassName)}
       component={component}
       disabled={disabled}
       focusRipple={!disableFocusRipple}

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;
@@ -27,6 +28,15 @@ const overridesResolver = (props, styles) => {
       [`& .${buttonGroupClasses.grouped}`]:
         styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.color)}`],
     },
+    {
+      [`& .${buttonGroupClasses.firstButton}`]: styles.firstButton,
+    },
+    {
+      [`& .${buttonGroupClasses.lastButton}`]: styles.lastButton,
+    },
+    {
+      [`& .${buttonGroupClasses.middleButton}`]: styles.middleButton,
+    },
     styles.root,
     styles[ownerState.variant],
     ownerState.disableElevation === true && styles.disableElevation,
@@ -55,6 +65,9 @@ const useUtilityClasses = (ownerState) => {
       `grouped${capitalize(variant)}${capitalize(color)}`,
       disabled && 'disabled',
     ],
+    firstButton: ['firstButton'],
+    lastButton: ['lastButton'],
+    middleButton: ['middleButton'],
   };
 
   return composeClasses(slots, getButtonGroupUtilityClass, classes);
@@ -81,106 +94,106 @@ const ButtonGroupRoot = styled('div', {
   }),
   [`& .${buttonGroupClasses.grouped}`]: {
     minWidth: 40,
-    '&:not(:first-of-type)': {
-      ...(ownerState.orientation === 'horizontal' && {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
-      }),
-      ...(ownerState.orientation === 'vertical' && {
-        borderTopRightRadius: 0,
-        borderTopLeftRadius: 0,
+    '&:hover': {
+      ...(ownerState.variant === 'contained' && {
+        boxShadow: 'none',
       }),
-      ...(ownerState.variant === 'outlined' &&
-        ownerState.orientation === 'horizontal' && {
-          marginLeft: -1,
-        }),
-      ...(ownerState.variant === 'outlined' &&
-        ownerState.orientation === 'vertical' && {
-          marginTop: -1,
-        }),
     },
-    '&:not(:last-of-type)': {
-      ...(ownerState.orientation === 'horizontal' && {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
+    ...(ownerState.variant === 'contained' && {
+      boxShadow: 'none',
+    }),
+  },
+  [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+    ...(ownerState.orientation === 'horizontal' && {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+    }),
+    ...(ownerState.orientation === 'vertical' && {
+      borderBottomRightRadius: 0,
+      borderBottomLeftRadius: 0,
+    }),
+    ...(ownerState.variant === 'text' &&
+      ownerState.orientation === 'horizontal' && {
+        borderRight: theme.vars
+          ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
+          : `1px solid ${
+              theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
+            }`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+        },
       }),
-      ...(ownerState.orientation === 'vertical' && {
-        borderBottomRightRadius: 0,
-        borderBottomLeftRadius: 0,
+    ...(ownerState.variant === 'text' &&
+      ownerState.orientation === 'vertical' && {
+        borderBottom: theme.vars
+          ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
+          : `1px solid ${
+              theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
+            }`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+        },
       }),
-      ...(ownerState.variant === 'text' &&
-        ownerState.orientation === 'horizontal' && {
-          borderRight: theme.vars
-            ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
-            : `1px solid ${
-                theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
-              }`,
-          [`&.${buttonGroupClasses.disabled}`]: {
-            borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
-          },
-        }),
-      ...(ownerState.variant === 'text' &&
-        ownerState.orientation === 'vertical' && {
-          borderBottom: theme.vars
-            ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
-            : `1px solid ${
-                theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
-              }`,
-          [`&.${buttonGroupClasses.disabled}`]: {
-            borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
-          },
-        }),
-      ...(ownerState.variant === 'text' &&
-        ownerState.color !== 'inherit' && {
-          borderColor: theme.vars
-            ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)`
-            : alpha(theme.palette[ownerState.color].main, 0.5),
-        }),
+    ...(ownerState.variant === 'text' &&
+      ownerState.color !== 'inherit' && {
+        borderColor: theme.vars
+          ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)`
+          : alpha(theme.palette[ownerState.color].main, 0.5),
+      }),
+    ...(ownerState.variant === 'outlined' &&
+      ownerState.orientation === 'horizontal' && {
+        borderRightColor: 'transparent',
+      }),
+    ...(ownerState.variant === 'outlined' &&
+      ownerState.orientation === 'vertical' && {
+        borderBottomColor: 'transparent',
+      }),
+    ...(ownerState.variant === 'contained' &&
+      ownerState.orientation === 'horizontal' && {
+        borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+        },
+      }),
+    ...(ownerState.variant === 'contained' &&
+      ownerState.orientation === 'vertical' && {
+        borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
+        },
+      }),
+    ...(ownerState.variant === 'contained' &&
+      ownerState.color !== 'inherit' && {
+        borderColor: (theme.vars || theme).palette[ownerState.color].dark,
+      }),
+    '&:hover': {
       ...(ownerState.variant === 'outlined' &&
         ownerState.orientation === 'horizontal' && {
-          borderRightColor: 'transparent',
+          borderRightColor: 'currentColor',
         }),
       ...(ownerState.variant === 'outlined' &&
         ownerState.orientation === 'vertical' && {
-          borderBottomColor: 'transparent',
-        }),
-      ...(ownerState.variant === 'contained' &&
-        ownerState.orientation === 'horizontal' && {
-          borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-          [`&.${buttonGroupClasses.disabled}`]: {
-            borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
-          },
-        }),
-      ...(ownerState.variant === 'contained' &&
-        ownerState.orientation === 'vertical' && {
-          borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-          [`&.${buttonGroupClasses.disabled}`]: {
-            borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`,
-          },
-        }),
-      ...(ownerState.variant === 'contained' &&
-        ownerState.color !== 'inherit' && {
-          borderColor: (theme.vars || theme).palette[ownerState.color].dark,
+          borderBottomColor: 'currentColor',
         }),
-      '&:hover': {
-        ...(ownerState.variant === 'outlined' &&
-          ownerState.orientation === 'horizontal' && {
-            borderRightColor: 'currentColor',
-          }),
-        ...(ownerState.variant === 'outlined' &&
-          ownerState.orientation === 'vertical' && {
-            borderBottomColor: 'currentColor',
-          }),
-      },
     },
-    '&:hover': {
-      ...(ownerState.variant === 'contained' && {
-        boxShadow: 'none',
-      }),
-    },
-    ...(ownerState.variant === 'contained' && {
-      boxShadow: 'none',
+  },
+  [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+    ...(ownerState.orientation === 'horizontal' && {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+    }),
+    ...(ownerState.orientation === 'vertical' && {
+      borderTopRightRadius: 0,
+      borderTopLeftRadius: 0,
     }),
+    ...(ownerState.variant === 'outlined' &&
+      ownerState.orientation === 'horizontal' && {
+        marginLeft: -1,
+      }),
+    ...(ownerState.variant === 'outlined' &&
+      ownerState.orientation === 'vertical' && {
+        marginTop: -1,
+      }),
   },
 }));
 
@@ -243,6 +256,13 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(inProps, ref) {
     ],
   );
 
+  const buttonGroupPositionContext = (index, childrenParam) => ({
+    firstButtonClassName: index === 0 ? classes.firstButton : '',
+    lastButtonClassName:
+      index === React.Children.count(childrenParam) - 1 ? classes.lastButton : '',
+    middleButtonClassName: classes.middleButton,
+  });
+
   return (
     <ButtonGroupRoot
       as={component}
@@ -252,7 +272,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>
   );
 });