[Button] Fix regression from context API

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,7 +44,10 @@ 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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { internal_resolveProps as resolveProps } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha } from '@mui/system';
 import styled, { rootShouldForwardProp } from '../styles/styled';
@@ -279,47 +280,28 @@ 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);
+  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
+  const contextProps = React.useContext(ButtonGroupContext);
+  const resolvedProps = resolveProps(contextProps, inProps);
+  const props = useThemeProps({ props: resolvedProps, name: 'MuiButton' });
   const {
     children,
-    className,
-    color: colorProp,
+    color = 'primary',
     component = 'button',
-    disabled: disabledProp,
-    disableElevation: disableElevationProp,
-    disableFocusRipple: disableFocusRippleProp,
-    disableRipple: disableRippleProp,
+    className,
+    disabled = false,
+    disableElevation = false,
+    disableFocusRipple = false,
     endIcon: endIconProp,
     focusVisibleClassName,
-    fullWidth: fullWidthProp,
-    size: sizeProp,
+    fullWidth = false,
+    size = 'medium',
     startIcon: startIconProp,
     type,
-    variant: variantProp,
+    variant = 'text',
     ...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,
@@ -350,10 +332,9 @@ const Button = React.forwardRef(function Button(inProps, ref) {
   return (
     <ButtonRoot
       ownerState={ownerState}
-      className={clsx(className, classNameContext)}
+      className={clsx(className, contextProps.className)}
       component={component}
       disabled={disabled}
-      disableRipple={disableRipple}
       focusRipple={!disableFocusRipple}
       focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
       ref={ref}

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { describeConformance, act, createRenderer, fireEvent } from 'test/utils';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Button, { buttonClasses as classes } from '@mui/material/Button';
-import ButtonBase from '@mui/material/ButtonBase';
+import ButtonBase, { touchRippleClasses } from '@mui/material/ButtonBase';
 
 describe('<Button />', () => {
   const { render, renderToString } = createRenderer();
@@ -372,4 +373,42 @@ describe('<Button />', () => {
 
     expect(container.querySelector('button')).to.have.class(disabledClassName);
   });
+
+  it("should disable ripple when MuiButtonBase has disableRipple in theme's defaultProps", () => {
+    const theme = createTheme({
+      components: {
+        MuiButtonBase: {
+          defaultProps: {
+            disableRipple: true,
+          },
+        },
+      },
+    });
+    const { container } = render(
+      <ThemeProvider theme={theme}>
+        <Button>Disabled ripple</Button>
+      </ThemeProvider>,
+    );
+    expect(container.firstChild.querySelector(`.${touchRippleClasses.root}`)).to.equal(null);
+  });
+
+  it("should disable ripple when MuiButtonBase has disableRipple in theme's defaultProps but override on the individual Buttons if provided", () => {
+    const theme = createTheme({
+      components: {
+        MuiButtonBase: {
+          defaultProps: {
+            disableRipple: true,
+          },
+        },
+      },
+    });
+    const { container } = render(
+      <ThemeProvider theme={theme}>
+        <Button disableRipple={false}>Enabled ripple</Button>
+        <Button>Disabled ripple 1</Button>
+        <Button>Disabled ripple 2</Button>
+      </ThemeProvider>,
+    );
+    expect(container.querySelectorAll(`.${touchRippleClasses.root}`)).to.have.length(1);
+  });
 });

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, describeConformance } from 'test/utils';
+import { createRenderer, describeConformance, screen } from 'test/utils';
 import ButtonGroup, { buttonGroupClasses as classes } from '@mui/material/ButtonGroup';
-import Button from '@mui/material/Button';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import Button, { buttonClasses } from '@mui/material/Button';
 import ButtonGroupContext from './ButtonGroupContext';
 
 describe('<ButtonGroup />', () => {
@@ -150,6 +151,16 @@ describe('<ButtonGroup />', () => {
     expect(button).to.have.class('MuiButton-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(
@@ -170,4 +181,32 @@ describe('<ButtonGroup />', () => {
     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(
+        <ThemeProvider
+          theme={createTheme({
+            components: {
+              MuiButton: {
+                defaultProps: {
+                  color: 'primary',
+                  size: 'medium',
+                  variant: 'contained',
+                },
+              },
+            },
+          })}
+        >
+          <ButtonGroup variant="outlined" size="small" color="secondary">
+            <Button>Hello World</Button>
+          </ButtonGroup>
+        </ThemeProvider>,
+      );
+
+      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.outlinedSecondary);
+    });
+  });
 });

packages/mui-system/src/useThemeProps/getThemeProps.js

@@ -1,4 +1,5 @@
-/* eslint-disable no-restricted-syntax */
+import { internal_resolveProps as resolveProps } from '@mui/utils';
+
 export default function getThemeProps(params) {
   const { theme, name, props } = params;
 
@@ -11,18 +12,5 @@ export default function getThemeProps(params) {
     return props;
   }
 
-  const output = { ...props };
-
-  // Resolve default props, code borrow from React source.
-  // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-  const defaultProps = theme.components[name].defaultProps;
-  let propName;
-
-  for (propName in defaultProps) {
-    if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
-    }
-  }
-
-  return output;
+  return resolveProps(theme.components[name].defaultProps, props);
 }

packages/mui-utils/src/index.ts

@@ -33,3 +33,4 @@ export {
 export { default as usePreviousProps } from './usePreviousProps';
 export { default as visuallyHidden } from './visuallyHidden';
 export { default as integerPropType } from './integerPropType';
+export { default as internal_resolveProps } from './resolveProps';

packages/mui-utils/src/resolveProps.test.ts

@@ -0,0 +1,47 @@
+import { expect } from 'chai';
+import resolveProps from './resolveProps';
+
+describe('resolveProps', () => {
+  it('use default props if no props', () => {
+    expect(resolveProps({ foo: 'foo' }, {})).to.deep.equal({
+      foo: 'foo',
+    });
+  });
+
+  it('use props if defined', () => {
+    expect(resolveProps({ foo: 'foo' }, { foo: 'bar' })).to.deep.equal({
+      foo: 'bar',
+    });
+  });
+
+  it('merge extra props', () => {
+    expect(resolveProps({ foo: 'foo' }, { foo: 'bar', bar: 'bar' })).to.deep.equal({
+      foo: 'bar',
+      bar: 'bar',
+    });
+  });
+
+  it('use default props if prop value is undefined', () => {
+    expect(resolveProps({ foo: 'foo' }, { foo: undefined })).to.deep.equal({
+      foo: 'foo',
+    });
+  });
+
+  it('use props if default value is undefined', () => {
+    expect(resolveProps({ foo: undefined }, { foo: 'bar' })).to.deep.equal({
+      foo: 'bar',
+    });
+  });
+
+  it('null is a considered a valid value', () => {
+    expect(resolveProps({ foo: 'foo' }, { foo: null })).to.deep.equal({
+      foo: null,
+    });
+  });
+
+  it('"" is a considered a valid value', () => {
+    expect(resolveProps({ foo: 'foo' }, { foo: '' })).to.deep.equal({
+      foo: '',
+    });
+  });
+});

packages/mui-utils/src/resolveProps.ts

@@ -0,0 +1,20 @@
+/**
+ * Add keys, values of `defaultProps` that does not exist in `props`
+ * @param {object} defaultProps
+ * @param {object} props
+ * @returns {object} resolved props
+ */
+export default function resolveProps<T extends { className?: string } & Record<string, unknown>>(
+  defaultProps: T,
+  props: T,
+) {
+  const output = { ...props };
+
+  Object.keys(defaultProps).forEach((propName: keyof T) => {
+    if (output[propName] === undefined) {
+      output[propName] = defaultProps[propName];
+    }
+  });
+
+  return output;
+}