[RFC] Replace variant with kind in the components where the variant is used for altering the DOM structure

Summary 💡

This RFC is proposing solution to the problem that we faced in https://github.com/mui-org/material-ui/issues/21749 - supporting custom variants for the component. The problem is the following: we want to offer developers the possibility to add their own custom variant values so that they can style their components differently that the supported options we have by default. However in some of the components, the variant property is used not only for styling, but also for changing the internal DOM structure. The problem is that if developers define their own custom variant, like dashed the component will not render anything, or at least will behave unexpectedly because it depends on the variant prop to be some of the defined values. This is the list of the components where we faced this issue:

• CircularProgress
• Drawer
• FormControl
• FormHelperText
• InputAdornment
• InputLabel
• LinearProgress
• Menu
• MenuList
• MobileStepper
• NativeSelect
• Select
• SwipeableDrawer
• TableCell
• Tabs
• TextField

Solution

My proposal for solving this issue is the following. We would replace the variant prop in this component with a different property - kind. This property will behave exactly as the current variant prop. After this change is done, we can safely then use the variant property for purely styling purposes and expose it to the developers for defining their custom variants.

[mnajdova]

@mnajdova What’s left to be done on this issue for v5?

We still need for these component a different prop in order to allow developers to add custom variants. We cannot simply use the variant prop as it would break the component. Would suggest deferring to v6, or at least solve it with adding new prop after v5.1, by maybe adding a new property so that we don’t have breaking changes.

[eps1lon]

Do you have any idea how long it took me to merge them? sweat_smile

Ideally we’d be able to extract specific variants with a compiler for bundle size reduction. So that people who only use variant X only get the code for variant X. That’s a topic for https://github.com/mui-org/material-ui/issues/16280 though.