[IconButton] Fix hover background color behavior (#43271)

mui · Aug 12, 2024 · d9d0a37 · d9d0a37
1 parent 722dcce
commit d9d0a37
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js
@@ -164,6 +164,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
     color = 'default',
     disabled = false,
     disableFocusRipple = false,
+    disableRipple = false,
     size = 'medium',
     ...other
   } = props;
@@ -174,6 +175,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
     color,
     disabled,
     disableFocusRipple,
+    disableRipple,
     size,
   };
 
@@ -185,6 +187,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
       centerRipple
       focusRipple={!disableFocusRipple}
       disabled={disabled}
+      disableRipple={disableRipple}
       ref={ref}
       {...other}
       ownerState={ownerState}

diff --git a/packages/mui-material/src/IconButton/IconButton.test.js b/packages/mui-material/src/IconButton/IconButton.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import PropTypes from 'prop-types';
-import { createRenderer, reactMajor } from '@mui/internal-test-utils';
+import { createRenderer, reactMajor, fireEvent } from '@mui/internal-test-utils';
 import capitalize from '@mui/utils/capitalize';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import IconButton, { iconButtonClasses as classes } from '@mui/material/IconButton';
@@ -141,4 +141,34 @@ describe('<IconButton />', () => {
       </ThemeProvider>
     )).not.to.throw();
   });
+
+  it('should apply the hover background by default', function test() {
+    if (!/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    const { container, getByTestId } = render(<IconButton data-testid="icon-button" />);
+
+    fireEvent.mouseMove(container.firstChild, {
+      clientX: 19,
+    });
+    expect(getByTestId('icon-button')).toHaveComputedStyle({
+      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+    });
+  });
+
+  it('should not apply the hover background if disableRipple is true', function test() {
+    if (!/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    const { container, getByTestId } = render(
+      <IconButton disableRipple data-testid="icon-button" />,
+    );
+
+    fireEvent.mouseMove(container.firstChild, {
+      clientX: 19,
+    });
+    expect(getByTestId('icon-button')).toHaveComputedStyle({ backgroundColor: 'rgba(0, 0, 0, 0)' });
+  });
 });