[material-ui][Input] Remove unused classes from InputClasses interface

[sai6855]

This PR removes unused classes from InputClasses interface, removed classes doesn't actually end up in dom and just present in interface, added tests to verify same

I found this while working on deprecating composed classes for Input component

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 3b6b2a9

[sai6855]

Instead of adding the class to the DOM, I chose to remove it here. The fact that no users have reported this issue, even though it has likely existed for a long time (possibly since v5), suggests that it is not widely used. Therefore, I decided to remove the class instead of adding it to the DOM.

[ZeeshanTamboli]

@sai6855 I see there are several unused classes in the Input component, such as sizeSmall, inputSizeSmall, multiline, inputMultiline, inputAdornedStart and others. Only these classes are actually used: root, focused, error, disabled, underline, and input.

[sai6855]

@sai6855 I see there are several unused classes in the Input component, such as sizeSmall, inputSizeSmall, multiline, inputMultiline, inputAdornedStart and others. Only these classes are actually used: root, focused, error, disabled, underline, and input.

Thanks!! Yeah you are right, removed all usused classes and added tests to verify same

[ZeeshanTamboli]

@sai6855 I looked into the history of this and found that InputBase classes can also be targeted by Input, FilledInput, and OutlinedInput classes.

The utility classes are passed to the InputBase component. For example, in the Input component, the classes are forwarded to InputBase:

material-ui/packages/mui-material/src/Input/Input.js

Line 176 in dd69cf0

classes={classes}

Additionally, the InputBase class types are spread:

material-ui/packages/mui-material/src/Input/inputClasses.ts

Line 47 in dd69cf0

...inputBaseClasses,

This applies to FilledInput and OutlinedInput as well. For example, in #31080, it was expected that styles for Input with multiline are applied using inputClasses.multiline instead of inputBaseClasses.multiline, even though the actual DOM classname is MuiInputBase-multiline. This was fixed in #31186.

I think this PR should be closed, as removing these classes would introduce a breaking change.

[sai6855]

@ZeeshanTamboli i agree it's a breaking change if classes are removed, what do you think of last 2 commits? it keeps class in interface but removes info from docs so that users cannot see wrong info on classes

[ZeeshanTamboli]

@sai6855 If those class names are still used for styling, why remove them from the docs?

[sai6855]

@sai6855 If those class names are still used for styling, why remove them from the docs?

take this class for example https://mui.com/material-ui/api/input/#input-classes-MuiInput-colorSecondary

From user pov, user sees this class and tries to style using this class but it doesn't work because this class doesn't exist. so removing this info makes sense know?

[ZeeshanTamboli]

but it doesn't work

It does work. Check this example: https://codesandbox.io/p/sandbox/purple-violet-sgk8hf. Type in the input, and you'll see the text color is red. Although the DOM shows the class as MuiInputBase-colorSecondary, we're using inputClasses.secondary (MuiInput-colorSecondary).

It's what I said in #44987 (comment) that the classes are forwarded to the InputBase.

[sai6855]

but it doesn't work

It does work. Check this example: https://codesandbox.io/p/sandbox/purple-violet-sgk8hf. Type in the input, and you'll see the text color is red. Although the DOM shows the class as MuiInputBase-colorSecondary, we're using inputClasses.secondary (MuiInput-colorSecondary).

It's what I said in #44987 (comment) that the classes are forwarded to the InputBase.

It does work.

I think there is slight misunderstanding going on here, provided example works because it is using inputClasses.colorSecondary which is equivalent to .MuiInputBase-colorSecondary not .MuiInput-colorSecondary, if component is styled using .MuiInput-colorSecondary it doesn't work because there is no such class in DOM.

this commit 89a2570 removes below info from docs which is saying to use .MuiInput-colorSecondary

I tried to demonstrated same in this demo https://stackblitz.com/edit/react-2kfct41z?file=Demo.tsx

[ZeeshanTamboli]

@sai6855 Ah, I see now. I was confused about how inputClasses.secondary targeted MuiInputBase-colorSecondary. It turns out inputClasses.secondary maps to MuiInputBase-colorSecondary, not MuiInput-colorSecondary, which isn’t applied in the DOM.

So, it makes sense to remove it from the docs. Alternatively, we could mark it as deprecated since developers are already using it. Either way, we should get a review from @DiegoAndai on this.

[sai6855]

@DiegoAndai Here's the summary of above discussion

There are several classes in Input classes API documentaion that doesn't work because these classes doesn't end up in DOM.
One such example is this https://mui.com/material-ui/api/input/#input-classes-MuiInput-colorSecondary

proof for .MuiInput-colorSecondary is not working: https://github.com/mui/material-ui/pull/44987/files#diff-a91d61a487c6fd5c001cd5cf45a1ab5393cdcd9c0efaf87c72b9b1eb5b3eefd2R54

This PR aims to remove any information regarding unused classes, we could try 2 ways to solve this

1. Remove colorSecondary from InputClasses interface

   material-ui/packages/mui-material/src/Input/inputClasses.ts

   Lines 14 to 15 in 0221d17

   	/** Styles applied to the root element if color secondary. */
   	colorSecondary: string;

   , but this would be breaking change for users who are using inputClasses.colorSecondary
2. Add @ignore in classes JSDoc which removes class related info from docs (Right now, i've implemented this)

which approach do you suggest?