[material-next][ButtonGroup] Add ButtonGroup component with Material You design

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

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import Button from '@mui/material-next/Button';
+import ButtonGroup from '@mui/material-next/ButtonGroup';
+import MaterialYouUsageDemo from 'docs/src/modules/components/MaterialYouUsageDemo';
+
+export default function ButtonGroupMaterialYouPlayground() {
+  return (
+    <MaterialYouUsageDemo
+      componentName="ButtonGroup"
+      data={[
+        {
+          propName: 'variant',
+          defaultValue: 'outlined',
+          options: ['text', 'outlined', 'filled', 'filledTonal', 'elevated'],
+          knob: 'select',
+        },
+        {
+          propName: 'orientation',
+          defaultValue: 'horizontal',
+          options: ['vertical', 'horizontal'],
+          knob: 'select',
+        },
+        {
+          propName: 'color',
+          defaultValue: 'primary',
+          knob: 'select',
+          options: ['primary', 'secondary', 'tertiary'],
+        },
+        {
+          propName: 'size',
+          defaultValue: 'medium',
+          knob: 'select',
+          options: ['small', 'medium', 'large'],
+        },
+        {
+          propName: 'disabled',
+          defaultValue: false,
+          knob: 'switch',
+        },
+      ]}
+      renderDemo={(props) => (
+        <ButtonGroup {...props}>
+          <Button>One</Button>
+          <Button>Two</Button>
+          <Button>Three</Button>
+        </ButtonGroup>
+      )}
+    />
+  );
+}

docs/data/material/components/button-group/button-group.md

@@ -47,3 +47,16 @@ The button group can be displayed vertically using the `orientation` prop.
 You can remove the elevation with the `disableElevation` prop.
 
 {{"demo": "DisableElevation.js"}}
+
+## Experimental API
+
+### Material You version
+
+The default ButtonGroup component follows the Material Design 2 specs.
+For the Material Design 3 ([Material You](https://m3.material.io/)) version, you can use the new experimental `@mui/material-next` package:
+
+```js
+import ButtonGroup from '@mui/material-next/ButtonGroup';
+```
+
+{{"demo": "ButtonGroupMaterialYouPlayground.js", "hideToolbar": true}}

packages/mui-material-next/src/Button/Button.tsx

@@ -1,7 +1,11 @@
 'use client';
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { unstable_capitalize as capitalize } from '@mui/utils';
+import {
+  unstable_capitalize as capitalize,
+  internal_resolveProps as resolveProps,
+} from '@mui/utils';
 import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { useThemeProps, alpha, shouldForwardProp } from '@mui/system';
@@ -10,6 +14,8 @@ import { getButtonUtilityClass } from './buttonClasses';
 import buttonBaseClasses from '../ButtonBase/buttonBaseClasses';
 import { ButtonProps, ExtendButton, ButtonTypeMap, ButtonOwnerState } from './Button.types';
 import ButtonBase from '../ButtonBase';
+import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
+import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext';
 
 const useUtilityClasses = (ownerState: ButtonOwnerState) => {
   const { classes, color, disableElevation, fullWidth, size, variant } = ownerState;
@@ -366,10 +372,14 @@ const ButtonEndIcon = styled('span', {
 const Button = React.forwardRef(function Button<
   BaseComponentType extends React.ElementType = ButtonTypeMap['defaultComponent'],
 >(inProps: ButtonProps<BaseComponentType>, ref: React.ForwardedRef<any>) {
-  const props = useThemeProps({ props: inProps, name: 'MuiButton' });
+  const contextProps = React.useContext(ButtonGroupContext);
+  const buttonGroupButtonContextPositionClassName = React.useContext(ButtonGroupButtonContext);
+  const resolvedProps = resolveProps(contextProps as ButtonProps<BaseComponentType>, inProps);
+  const props = useThemeProps({ props: resolvedProps, name: 'MuiButton' });
   const {
     children,
     classes: classesProp,
+    className,
     color = 'primary',
     disableElevation = false,
     endIcon: endIconProp,
@@ -392,6 +402,8 @@ const Button = React.forwardRef(function Button<
 
   const classes = useUtilityClasses(ownerState);
 
+  const positionClassName = buttonGroupButtonContextPositionClassName || '';
+
   const rootProps = useSlotProps({
     elementType: ButtonRoot,
     externalForwardedProps: other,
@@ -401,6 +413,7 @@ const Button = React.forwardRef(function Button<
       ref,
     },
     ownerState,
+    className: clsx(contextProps.className, classes.root, className, positionClassName),
   });
 
   const startIcon = startIconProp && (
@@ -437,6 +450,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 both default and custom theme colors, which can be added as shown in the

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

@@ -0,0 +1,257 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { createRenderer, describeConformance, screen } from '@mui-internal/test-utils';
+import ButtonGroup, { buttonGroupClasses as classes } from '@mui/material-next/ButtonGroup';
+import Button, { buttonClasses } from '@mui/material-next/Button';
+import ButtonGroupContext from './ButtonGroupContext';
+import { CssVarsProvider, extendTheme } from '../styles';
+
+describe('<ButtonGroup />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(
+    <ButtonGroup>
+      <Button>Conformance?</Button>
+    </ButtonGroup>,
+    () => ({
+      classes,
+      inheritComponent: 'div',
+      render,
+      refInstanceof: window.HTMLDivElement,
+      testComponentPropWith: 'span',
+      muiName: 'MuiButtonGroup',
+      testVariantProps: { variant: 'filled' },
+      skip: ['componentsProp'],
+      ThemeProvider: CssVarsProvider,
+      createTheme: extendTheme,
+    }),
+  );
+
+  it('should render with the root class but no others', () => {
+    const { container } = render(
+      <ButtonGroup>
+        <Button>Hello World</Button>
+      </ButtonGroup>,
+    );
+    const buttonGroup = container.firstChild;
+    expect(buttonGroup).to.have.class(classes.root);
+    expect(buttonGroup).not.to.have.class(classes.filled);
+    expect(buttonGroup).not.to.have.class(classes.fullWidth);
+  });
+
+  it('should render an outlined button', () => {
+    const { getByRole } = render(
+      <ButtonGroup>
+        <Button>Hello World</Button>
+      </ButtonGroup>,
+    );
+    const button = getByRole('button');
+    expect(button).to.have.class(buttonClasses.outlined);
+    expect(button).to.have.class(classes.grouped);
+    expect(button).to.have.class(classes.groupedOutlined);
+    expect(button).to.have.class(classes.groupedOutlinedPrimary);
+    expect(button).not.to.have.class(classes.groupedOutlinedSecondary);
+  });
+
+  it('can render an outlined primary button', () => {
+    const { getByRole } = render(
+      <ButtonGroup color="primary">
+        <Button>Hello World</Button>
+      </ButtonGroup>,
+    );
+    const button = getByRole('button');
+    expect(button).to.have.class(buttonClasses.outlined);
+    expect(button).to.have.class(buttonClasses.colorPrimary);
+    expect(button).to.have.class(classes.grouped);
+    expect(button).to.have.class(classes.groupedOutlined);
+    expect(button).to.have.class(classes.groupedOutlinedPrimary);
+    expect(button).not.to.have.class(classes.groupedOutlinedSecondary);
+  });
+
+  it('can render a filled button', () => {
+    const { getByRole } = render(
+      <ButtonGroup variant="filled">
+        <Button>Hello World</Button>
+      </ButtonGroup>,
+    );
+    const button = getByRole('button');
+    expect(button).to.have.class(buttonClasses.filled);
+    expect(button).to.have.class(classes.grouped);
+    expect(button).to.have.class(classes.groupedFilled);
+    expect(button).to.have.class(classes.groupedFilledPrimary);
+    expect(button).not.to.have.class(classes.groupedFilledSecondary);
+  });
+
+  it('can render a small button', () => {
+    const { getByRole } = render(
+      <ButtonGroup size="small">
+        <Button>Hello World</Button>
+      </ButtonGroup>,
+    );
+    const button = getByRole('button');
+    expect(button).to.have.class(buttonClasses.sizeSmall);
+  });
+
+  it('can render a large button', () => {
+    const { getByRole } = render(
+      <ButtonGroup size="large">
+        <Button>Hello World</Button>
+      </ButtonGroup>,
+    );
+    const button = getByRole('button');
+    expect(button).to.have.class(buttonClasses.sizeLarge);
+  });
+
+  it('should have a ripple by default', () => {
+    const { container } = render(
+      <ButtonGroup>
+        <Button TouchRippleProps={{ classes: { root: 'touchRipple' } }}>Hello World</Button>
+      </ButtonGroup>,
+    );
+    expect(container.querySelector('.touchRipple')).not.to.equal(null);
+  });
+
+  it('can disable the elevation', () => {
+    const { getByRole } = render(
+      <ButtonGroup disableElevation>
+        <Button>Hello World</Button>
+      </ButtonGroup>,
+    );
+    const button = getByRole('button');
+    expect(button).to.have.class(buttonClasses.disableElevation);
+  });
+
+  it('can disable the ripple', () => {
+    const { container } = render(
+      <ButtonGroup disableRipple>
+        <Button TouchRippleProps={{ classes: { root: 'touchRipple' } }}>Hello World</Button>
+      </ButtonGroup>,
+    );
+    expect(container.querySelector('.touchRipple')).to.equal(null);
+  });
+
+  it('should not be fullWidth by default', () => {
+    const { container, getByRole } = render(
+      <ButtonGroup>
+        <Button>Hello World</Button>
+      </ButtonGroup>,
+    );
+    const button = getByRole('button');
+    const buttonGroup = container.firstChild;
+    expect(buttonGroup).not.to.have.class(classes.fullWidth);
+    expect(button).not.to.have.class(buttonClasses.fullWidth);
+  });
+
+  it('can pass fullWidth to Button', () => {
+    const { container, getByRole } = render(
+      <ButtonGroup fullWidth>
+        <Button>Hello World</Button>
+      </ButtonGroup>,
+    );
+    const buttonGroup = container.firstChild;
+    const button = getByRole('button');
+    expect(buttonGroup).to.have.class(classes.fullWidth);
+    expect(button).to.have.class(buttonClasses.fullWidth);
+  });
+
+  it('classes.grouped should be merged with Button className', () => {
+    render(
+      <ButtonGroup>
+        <Button className="foo-bar">Hello World</Button>
+      </ButtonGroup>,
+    );
+    expect(screen.getByRole('button')).to.have.class(classes.grouped);
+    expect(screen.getByRole('button')).to.have.class('foo-bar');
+  });
+
+  it('should forward the context to children', () => {
+    let context;
+    render(
+      <ButtonGroup size="large" variant="filled">
+        <ButtonGroupContext.Consumer>
+          {(value) => {
+            context = value;
+          }}
+        </ButtonGroupContext.Consumer>
+      </ButtonGroup>,
+    );
+    expect(context.variant).to.equal('filled');
+    expect(context.size).to.equal('large');
+    expect(context.fullWidth).to.equal(false);
+    expect(context.disableRipple).to.equal(false);
+    expect(context.disableTouchRipple).to.equal(false);
+    expect(context.disableElevation).to.equal(false);
+    expect(context.disabled).to.equal(false);
+    expect(context.color).to.equal('primary');
+  });
+
+  describe('theme default props on Button', () => {
+    it('should override default variant prop', () => {
+      render(
+        <CssVarsProvider
+          theme={extendTheme({
+            components: {
+              MuiButton: {
+                defaultProps: {
+                  color: 'primary',
+                  size: 'medium',
+                  variant: 'filled',
+                },
+              },
+            },
+          })}
+        >
+          <ButtonGroup variant="outlined" size="small" color="secondary">
+            <Button>Hello World</Button>
+          </ButtonGroup>
+        </CssVarsProvider>,
+      );
+
+      expect(screen.getByRole('button')).to.have.class(buttonClasses.outlined);
+      expect(screen.getByRole('button')).to.have.class(buttonClasses.sizeSmall);
+      expect(screen.getByRole('button')).to.have.class(buttonClasses.colorSecondary);
+    });
+  });
+
+  describe('position classes', () => {
+    it('correctly applies position classes to buttons', () => {
+      render(
+        <ButtonGroup>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </ButtonGroup>,
+      );
+
+      const firstButton = screen.getAllByRole('button')[0];
+      const middleButton = screen.getAllByRole('button')[1];
+      const lastButton = screen.getAllByRole('button')[2];
+
+      expect(firstButton).to.have.class(classes.firstButton);
+      expect(firstButton).not.to.have.class(classes.middleButton);
+      expect(firstButton).not.to.have.class(classes.lastButton);
+
+      expect(middleButton).to.have.class(classes.middleButton);
+      expect(middleButton).not.to.have.class(classes.firstButton);
+      expect(middleButton).not.to.have.class(classes.lastButton);
+
+      expect(lastButton).to.have.class(classes.lastButton);
+      expect(lastButton).not.to.have.class(classes.middleButton);
+      expect(lastButton).not.to.have.class(classes.firstButton);
+    });
+
+    it('does not apply any position classes to a single button', () => {
+      render(
+        <ButtonGroup>
+          <Button>Single Button</Button>
+        </ButtonGroup>,
+      );
+
+      const button = screen.getByRole('button');
+
+      expect(button).not.to.have.class(classes.firstButton);
+      expect(button).not.to.have.class(classes.middleButton);
+      expect(button).not.to.have.class(classes.lastButton);
+    });
+  });
+});