[ButtonBase] Add disabled default prop

docs/pages/api/button-base.md

@@ -32,7 +32,7 @@ It contains a load of style reset and some focus/ripple logic.
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">element type</span> | <span class="prop-default">'button'</span> | The component used for the root node. Either a string to use a DOM element or a component.<br>⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). |
-| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the base button will be disabled. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the base button will be disabled. |
 | <span class="prop-name">disableRipple</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the ripple effect will be disabled.<br>⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the `focusVisibleClassName`. |
 | <span class="prop-name">disableTouchRipple</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the touch ripple effect will be disabled. |
 | <span class="prop-name">focusRipple</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. |

packages/material-ui/src/ButtonBase/ButtonBase.js

@@ -60,9 +60,9 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) {
     centerRipple = false,
     children,
     classes,
-    className: classNameProp,
+    className,
     component = 'button',
-    disabled,
+    disabled = false,
     disableRipple = false,
     disableTouchRipple = false,
     focusRipple = false,
@@ -234,16 +234,6 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) {
     }
   });
 
-  const className = clsx(
-    classes.root,
-    {
-      [classes.disabled]: disabled,
-      [classes.focusVisible]: focusVisible,
-      [focusVisibleClassName]: focusVisible,
-    },
-    classNameProp,
-  );
-
   let ComponentProp = component;
 
   if (ComponentProp === 'button' && other.href) {
@@ -267,7 +257,15 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) {
 
   return (
     <ComponentProp
-      className={className}
+      className={clsx(
+        classes.root,
+        {
+          [classes.disabled]: disabled,
+          [classes.focusVisible]: focusVisible,
+          [focusVisibleClassName]: focusVisible,
+        },
+        className,
+      )}
       onBlur={handleBlur}
       onClick={onClick}
       onFocus={handleFocus}