[joy-ui][Button] Disable text highlighting

[mithun522]

Fixes #41899 Where the user can see the text of the button by highlighting it.
Added userSelect: 'none', to the buttonClasses.loading which doesn't allow the users to select the button while it is loading (edited)

Edited by ZeeshanTamboli: Add userSelect: none unconditionally to disable text highlighting (for both loading and disabled states).

Preview: https://deploy-preview-41902--material-ui.netlify.app/joy-ui/react-button/

[mui-bot]

Netlify deploy preview

https://deploy-preview-41902--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 0063dfc

[ZeeshanTamboli]

@mithun522 Thanks for the pull request to fix it. If you check Material UI's loading button it adds userSelect: none to the base button.
Additionally, text can still be highlighted when the Joy UI button is disabled, as seen in this example: https://deploy-preview-41902--material-ui.netlify.app/joy-ui/react-button/#basics.

So it's better to add the style unconditionally:

--- a/packages/mui-joy/src/Button/Button.tsx
+++ b/packages/mui-joy/src/Button/Button.tsx
@@ -139,6 +139,7 @@ export const getButtonStyles = ({
       border: 'none',
       backgroundColor: 'transparent',
       cursor: 'pointer',
+      userSelect: 'none',
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',

[mithun522]

@ZeeshanTamboli Thanks for your suggestion. I have made the change and gave a commit. Thank you again.

[ZeeshanTamboli]

Thanks.