[material] Add global CSS class for readOnly prop

[jrparish]

Resolves #26488

This change provides a readOnly class to allow for targetted styling

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

• docs/data/material/customization/how-to-customize/how-to-customize.md

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 7b654f0

[mnajdova]

See #26488 (comment) we would need to add this component as a state class so that the name would be Mui-readOnly, not MuiInputBase-readOnly. You can start by adding it here - https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.ts and updating the tests and documentaiton around it.

[JP250552]

@mnajdova Thank you for the direction, I have updated the code accordingly along with an updated screenshot with the correct class name.

[mnajdova]

Looks great, one final comment to avoid breaking change in the Rating component.

[mnajdova]

This is a breaking change we will need to manually add the MuiRating-readOnly in the Rating component, and add a comment to remove it in v6.

[mnajdova]

This diff could help:

index f0f2234850..de1020c23c 100644
--- a/packages/mui-material/src/Rating/Rating.js
+++ b/packages/mui-material/src/Rating/Rating.js
@@ -499,7 +499,14 @@ const Rating = React.forwardRef(function Rating(inProps, ref) {
       ref={handleRef}
       onMouseMove={handleMouseMove}
       onMouseLeave={handleMouseLeave}
-      className={clsx(classes.root, className)}
+      className={clsx(
+        classes.root,
+        {
+          // TODO v6: remove this class as it duplicates with the gloabl state class Mui-readOnly
+          'MuiRating-readOnly': readOnly,
+        },
+        className,
+      )}
       ownerState={ownerState}
       role={readOnly ? 'img' : null}

[JP250552]

Even with the suggested changes, it doesn't change the outcome of the rating.json file. I'm not sure what to do here.

[mnajdova]

I pushed a fix, there was a spelling mistake in the useUtilityClasses.

[mnajdova]

@ZeeshanTamboli would you like to finish this up and merge it?

[ZeeshanTamboli]

Sure, I'll do it.

[ZeeshanTamboli]

readOnly prop was added for Input in #33654 which was released. I think we can keep this PR open and add changes only for global Mui-readOnly state class.

[michaldudak]

@jrparish are you still interested in completing this PR? As @ZeeshanTamboli noted, it should be a matter of handling the Mui-readOnly class.

[JP250552]

@michaldudak @ZeeshanTamboli Updated to only include class changes

[mnajdova]

We should have added readOnly as a global classname in #33654, otherwise now we are changing the behavior in this PR (the classname would be Mui-readOnly instead of MuiInput-readOnly. We should do the switch in v6 in my opinion to avoid surprises or duplicate classes. (it's fine if we have both classes, but it would be confusing.

[mnajdova]

We will need to apply similar patches in InputBase as there was quite some time since we added the read only class name.

[ZeeshanTamboli]

Done.

[ZeeshanTamboli]

I did the remaining changes. @jrparish Thanks for your contribution!