[joy-ui][Button] fix disabled button styling when component prop is…

… provided (#38996)
mui · Sep 26, 2023 · 86c4df5 · 86c4df5
1 parent 7913a31
commit 86c4df5
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git 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
@@ -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}`]: {