[Fab] Add disabled class to FAB button #34227

mui · Sep 9, 2022 · e08d0fc · e08d0fc
1 parent 5f13a49
commit e08d0fc
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
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,

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} />;