[Fab] Add disabled class to FAB button #34227

mui · Sep 13, 2022 · 3782714 · 3782714
1 parent 5f13a49
commit 3782714
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js
@@ -9,11 +9,12 @@ import fabClasses, { getFabUtilityClass } from './fabClasses';
 import styled from '../styles/styled';
 
 const useUtilityClasses = (ownerState) => {
-  const { color, variant, classes, size } = ownerState;
+  const { color, variant, classes, size, disabled } = ownerState;
 
   const slots = {
     root: [
       'root',
+      disabled && 'disabled',
       variant,
       `size${capitalize(size)}`,
       color === 'inherit' ? 'colorInherit' : color,
@@ -159,7 +160,6 @@ const Fab = React.forwardRef(function Fab(inProps, ref) {
     <FabRoot
       className={clsx(classes.root, className)}
       component={component}
-      disabled={disabled}
       focusRipple={!disableFocusRipple}
       focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
       ownerState={ownerState}

diff --git a/packages/mui-material/src/Fab/Fab.test.js b/packages/mui-material/src/Fab/Fab.test.js
@@ -142,6 +142,13 @@ describe('<Fab />', () => {
     expect(button.querySelector('.pulsate-focus-visible')).to.equal(null);
   });
 
+  it('should pass disabled class to ButtonBase', () => {
+    const disabledClassName = 'testDisabledClassName';
+    const { container } = render(<Fab disabled classes={{ disabled: disabledClassName }} />);
+
+    expect(container.querySelector('button')).to.have.class(disabledClassName);
+  });
+
   it('should render Icon children with right classes', () => {
     const childClassName = 'child-woof';
     const iconChild = <Icon data-testid="icon" className={childClassName} />;