From fd0b2a1f740acececdef9a19302ce82726bd9d05 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Fri, 21 May 2021 16:14:28 +0200
Subject: [PATCH 1/2] current behavior of hover on disabled buttons

---
 .../fixtures/Button/DisabledButtons.js            | 14 ++++++++++++++
 test/regressions/index.test.js                    | 15 +++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 test/regressions/fixtures/Button/DisabledButtons.js

diff --git a/test/regressions/fixtures/Button/DisabledButtons.js b/test/regressions/fixtures/Button/DisabledButtons.js
new file mode 100644
index 00000000000000..47564f94fad649
--- /dev/null
+++ b/test/regressions/fixtures/Button/DisabledButtons.js
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Button from '@material-ui/core/Button';
+
+export default function Demo() {
+  return (
+    <React.Fragment>
+      <Button disabled style={{ pointerEvents: 'all' }}>
+        disabled with pointer-events
+      </Button>
+      <Button disabled>disabled without pointer-events</Button>
+      <Button aria-disabled>aria-disabled</Button>
+    </React.Fragment>
+  );
+}
diff --git a/test/regressions/index.test.js b/test/regressions/index.test.js
index 86daafffced0e7..7a46484ab21a57 100644
--- a/test/regressions/index.test.js
+++ b/test/regressions/index.test.js
@@ -89,6 +89,21 @@ async function main() {
       });
     });
 
+    describe('<Button />', () => {
+      it('hover styles on disabled buttons', async () => {
+        const index = routes.findIndex((route) => route === '/regression-Button/DisabledButtons');
+        const testcase = await renderFixture(index);
+
+        // force: true so that pointer-events, layout etc is ignored
+        await page.hover('button:nth-of-type(1)', { force: true });
+        await takeScreenshot({ testcase, route: '/regression-Button/DisabledButtons-hover1' });
+        await page.hover('button:nth-of-type(2)', { force: true });
+        await takeScreenshot({ testcase, route: '/regression-Button/DisabledButtons-hover2' });
+        await page.hover('button:nth-of-type(3)', { force: true });
+        await takeScreenshot({ testcase, route: '/regression-Button/DisabledButtons-hover3' });
+      });
+    });
+
     describe('Rating', () => {
       it('should handle focus-visible correctly', async () => {
         const index = routes.findIndex(

From cb593a59a207a3f4ee0341caf90581f3b12d3692 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Fri, 21 May 2021 16:21:00 +0200
Subject: [PATCH 2/2] [ButtonBase] Don't apply hover styles when disabled

---
 packages/material-ui/src/Button/Button.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
index 585c971f7c98a2..43ef18c330e577 100644
--- a/packages/material-ui/src/Button/Button.js
+++ b/packages/material-ui/src/Button/Button.js
@@ -84,7 +84,7 @@ const ButtonRoot = experimentalStyled(ButtonBase, {
         duration: theme.transitions.duration.short,
       },
     ),
-    '&:hover': {
+    '&:hover': !styleProps.disabled && {
       textDecoration: 'none',
       backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity