From 763a4b53c0b6fd0792919194368ece1995bb014e Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Wed, 23 Aug 2023 11:51:38 -0400
Subject: [PATCH] Experiment 2 (disabled non-button not working)

---
 .../experiments/material/button-select.tsx    | 120 ++++++++++--------
 .../mui-material/src/ButtonBase/ButtonBase.js |  73 ++++++-----
 2 files changed, 105 insertions(+), 88 deletions(-)

diff --git a/docs/pages/experiments/material/button-select.tsx b/docs/pages/experiments/material/button-select.tsx
index 76585aacb9cb8b..dd270028b7f32b 100644
--- a/docs/pages/experiments/material/button-select.tsx
+++ b/docs/pages/experiments/material/button-select.tsx
@@ -6,8 +6,10 @@ import {
   extendTheme as joyExtendTheme,
 } from '@mui/joy';
 import {
+  FormControlLabel,
   Button as MaterialUIButton,
   Experimental_CssVarsProvider as MaterialUICssVarsProvider,
+  Switch,
   experimental_extendTheme as materialUIExtendTheme,
 } from '@mui/material';
 import { Stack } from '@mui/system';
@@ -21,34 +23,38 @@ function createHandlers(name: string) {
 }
 
 export default function App() {
+  const [disabled, setDisabled] = React.useState(false);
+
   return (
-    <Stack direction="row" justifyContent="space-around">
-      <Stack gap={3}>
-        <Stack alignItems="flex-start">
-          <span>Enabled native button</span>
-          <button type="button" {...createHandlers('Enabled native button')}>
-            Button
-          </button>
-        </Stack>
-        <Stack alignItems="flex-start">
-          <span>Disabled native button</span>
-          <button type="button" disabled {...createHandlers('Disabled native button')}>
-            Button
-          </button>
+    <MaterialUICssVarsProvider theme={materialUIExtendTheme({})}>
+      <Stack gap={12} alignItems="center" sx={{ my: 6 }}>
+        <Stack>
+          <FormControlLabel
+            control={<Switch checked={disabled} onChange={() => setDisabled((prev) => !prev)} />}
+            label="Toggle disabled"
+          />
         </Stack>
-        <Stack alignItems="flex-start">
-          <span>Native anchor</span>
-          <a href="#" {...createHandlers('Enabled native anchor')}>
-            Anchor
-          </a>
-        </Stack>
-        <Stack alignItems="flex-start">
-          <span>Native div</span>
-          <div>Button</div>
-        </Stack>
-      </Stack>
+        <Stack direction="row" justifyContent="space-around" sx={{ width: '80vw' }}>
+          <Stack gap={3}>
+            <Stack alignItems="flex-start">
+              <span>Native button</span>
+              <button type="button" disabled={disabled} {...createHandlers('Native button')}>
+                Button
+              </button>
+            </Stack>
+            <Stack alignItems="flex-start">
+              <span>Native anchor</span>
+              <a href="#" {...createHandlers('Native anchor')}>
+                Anchor
+              </a>
+            </Stack>
+            <Stack alignItems="flex-start">
+              <span>Native div</span>
+              <div {...createHandlers('Div')}>Button</div>
+            </Stack>
+          </Stack>
 
-      {/* <Stack gap={3}>
+          {/* <Stack gap={3}>
         <Stack alignItems="flex-start">
           <span>Enabled Base UI button</span>
           <BaseUIButton {...createHandlers('Enabled Base UI')}>Button</BaseUIButton>
@@ -104,36 +110,42 @@ export default function App() {
         </JoyCssVarsProvider>
       </Stack> */}
 
-      <Stack gap={3}>
-        <MaterialUICssVarsProvider theme={materialUIExtendTheme({})}>
-          <Stack alignItems="flex-start">
-            <span>Enabled Material UI button</span>
-            <MaterialUIButton {...createHandlers('Enabled Material UI')}>Button</MaterialUIButton>
-          </Stack>
-          <Stack alignItems="flex-start">
-            <span>Disabled Material UI button</span>
-            <MaterialUIButton disabled {...createHandlers('Disabled Material UI')}>
-              Button
-            </MaterialUIButton>
-          </Stack>
-          <Stack alignItems="flex-start">
-            <span>Enabled Material UI button as div</span>
-            <MaterialUIButton component="div" {...createHandlers('Enabled Material UI as div')}>
-              Button
-            </MaterialUIButton>
-          </Stack>
-          <Stack alignItems="flex-start">
-            <span>Disabled Material UI button as div</span>
-            <MaterialUIButton
-              component="div"
-              disabled
-              {...createHandlers('Disabled Material UI as div')}
-            >
-              Button
-            </MaterialUIButton>
+          <Stack gap={3}>
+            <Stack alignItems="flex-start">
+              <span>Material UI button</span>
+              <MaterialUIButton
+                variant="contained"
+                disabled={disabled}
+                {...createHandlers('Material UI button')}
+              >
+                Button
+              </MaterialUIButton>
+            </Stack>
+            <Stack alignItems="flex-start">
+              <span>Material UI button link</span>
+              <MaterialUIButton
+                variant="contained"
+                disabled={disabled}
+                href="#"
+                {...createHandlers('Material UI button link')}
+              >
+                Button
+              </MaterialUIButton>
+            </Stack>
+            <Stack alignItems="flex-start">
+              <span>Material UI button as div</span>
+              <MaterialUIButton
+                variant="contained"
+                component="div"
+                disabled={disabled}
+                {...createHandlers('Material UI button as div')}
+              >
+                Button
+              </MaterialUIButton>
+            </Stack>
           </Stack>
-        </MaterialUICssVarsProvider>
+        </Stack>
       </Stack>
-    </Stack>
+    </MaterialUICssVarsProvider>
   );
 }
diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js
index 27309d18d2de8b..787ca8251e7a39 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.js
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.js
@@ -32,42 +32,46 @@ export const ButtonBaseRoot = styled('button', {
   name: 'MuiButtonBase',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  position: 'relative',
-  boxSizing: 'border-box',
-  WebkitTapHighlightColor: 'transparent',
-  backgroundColor: 'transparent', // Reset default value
-  // We disable the focus ring for mouse, touch and keyboard users.
-  outline: 0,
-  border: 0,
-  margin: 0, // Remove the margin in Safari
-  borderRadius: 0,
-  padding: 0, // Remove the padding in Firefox
-  cursor: 'pointer',
-  verticalAlign: 'middle',
-  MozAppearance: 'none', // Reset
-  WebkitAppearance: 'none', // Reset
-  textDecoration: 'none',
-  // So we take precedent over the style of a native <a /> element.
-  color: 'inherit',
-  '&:active': {
-    userSelect: 'none',
-  },
-  '&::-moz-focus-inner': {
-    borderStyle: 'none', // Remove Firefox dotted outline.
-  },
-  [`&.${buttonBaseClasses.disabled}`]: {
-    cursor: 'default',
+})(({ ownerState }) => {
+  const { isButton } = ownerState;
+
+  return {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    boxSizing: 'border-box',
+    WebkitTapHighlightColor: 'transparent',
+    backgroundColor: 'transparent', // Reset default value
+    // We disable the focus ring for mouse, touch and keyboard users.
+    outline: 0,
+    border: 0,
+    margin: 0, // Remove the margin in Safari
+    borderRadius: 0,
+    padding: 0, // Remove the padding in Firefox
+    cursor: 'pointer',
+    verticalAlign: 'middle',
+    MozAppearance: 'none', // Reset
+    WebkitAppearance: 'none', // Reset
+    textDecoration: 'none',
+    // So we take precedent over the style of a native <a /> element.
+    color: 'inherit',
     '&:active': {
-      pointerEvents: 'none', // Disable link interactions
+      userSelect: 'none',
     },
-  },
-  '@media print': {
-    colorAdjust: 'exact',
-  },
+    '&::-moz-focus-inner': {
+      borderStyle: 'none', // Remove Firefox dotted outline.
+    },
+    [`&.${buttonBaseClasses.disabled}`]: {
+      cursor: 'default',
+      ...(!isButton && {
+        pointerEvents: 'none', // Disable link interactions
+      }),
+    },
+    '@media print': {
+      colorAdjust: 'exact',
+    },
+  };
 });
 
 /**
@@ -332,6 +336,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) {
     ...props,
     centerRipple,
     component,
+    isButton: ComponentProp === 'button',
     disabled,
     disableRipple,
     disableTouchRipple,