From 86c4df562a32e00c122f0643675413055b753038 Mon Sep 17 00:00:00 2001
From: sai chand <60743144+sai6855@users.noreply.github.com>
Date: Tue, 26 Sep 2023 15:46:55 +0530
Subject: [PATCH] [joy-ui][Button] fix disabled button styling when `component`
 prop is provided (#38996)

---
 packages/mui-joy/src/Button/Button.test.tsx | 26 +++++++++++++++++++++
 packages/mui-joy/src/Button/Button.tsx      |  3 ++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/mui-joy/src/Button/Button.test.tsx b/packages/mui-joy/src/Button/Button.test.tsx
index 69d504e45780d3..12f0a16724c096 100644
--- a/packages/mui-joy/src/Button/Button.test.tsx
+++ b/packages/mui-joy/src/Button/Button.test.tsx
@@ -138,6 +138,32 @@ describe('Joy <Button />', () => {
     });
   });
 
+  describe('prop:disabled', () => {
+    it('should apply disabled styles when button is disabled', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+      const { getByRole } = render(<Button disabled />);
+
+      expect(getByRole('button')).toHaveComputedStyle({
+        color: 'rgb(159, 166, 173)',
+        backgroundColor: 'rgb(240, 244, 248)',
+      });
+    });
+
+    it('should apply disabled styles when button is disabled and when component prop is provided', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+      const { getByRole } = render(<Button disabled component="a" />);
+
+      expect(getByRole('button')).toHaveComputedStyle({
+        color: 'rgb(159, 166, 173)',
+        backgroundColor: 'rgb(240, 244, 248)',
+      });
+    });
+  });
+
   describe('prop: loadingIndicator', () => {
     it('is not rendered by default', () => {
       const { getByRole } = render(<Button loadingIndicator="loading">Test</Button>);
diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx
index 89d5067fdb3d2a..b1077f1186525b 100644
--- a/packages/mui-joy/src/Button/Button.tsx
+++ b/packages/mui-joy/src/Button/Button.tsx
@@ -157,7 +157,8 @@ export const getButtonStyles = ({
       },
       '&:active, &[aria-pressed="true"]':
         theme.variants[`${ownerState.variant!}Active`]?.[ownerState.color!],
-      '&:disabled': theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
+      [`&.${buttonClasses.disabled}`]:
+        theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
       ...(ownerState.loadingPosition === 'center' && {
         // this has to come after the variant styles to take effect.
         [`&.${buttonClasses.loading}`]: {