[FormControlLabel] Fix label prop type to be in-line with other label prop types

[jannes-io]

This change would prevent typing issues when using libraries such as react-i18next. It also simplifies the FormControlLabel label type to be the same as all other elements that provide a label prop.

Add tests for different label types.

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

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 92f8ce9

[oliviertassinari]

Going in the opposite direction of #29324 sounds great, but we still need to account for when the label is empty. I forgot about this in #25883 which lead to this bug: #29301. cc @michaldudak (I had a look at this PR because Jannes is in the hiring pipeline).

For the solution, I would propose 1. adding a test case for an empty label and 2. checking how disableTypography is implemented in the other components, and copying it (done better)

[jannes-io]

Updated to match implementation of other components. Additionally, since there now is a nullish check I've set the label type to label?: React.ReactNode. I'm not entirely sure if it makes sense to allow dropping the property, might be some special case. But there's definitely a valid case to allow null and undefined in relation to translation frameworks, be it not displaying untranslated values or even asynchronously fetching translations/label values.

[michaldudak]

It feels weird to have a FormControlLabel whose sole purpose is to render a label and allow the label prop to not exist. IMO it's ok for the prop to accept null. undefined doesn't feel right to me, but if it is common among i18n frameworks, I can live with it.

[jannes-io]

@michaldudak yeah I completely agree with you there, I share the same concern. I've written a quick codesandbox for usage with i18next and react-i18next and you can see that without any additional typing it doesn't accept the result because it's possibly undefined.

https://codesandbox.io/s/react-typescript-forked-t10648?file=/src/App.tsx

[michaldudak]

In this case, we can specify the type to be label: React.ReactNode; (without ?:). This will make the prop mandatory but will allow it to accept undefined.

[jannes-io]

Damn I forgot that React.ReactNode includes | undefined so yeah, PR has been updated to make the prop required.

[michaldudak]

Looks OK to me now. Thanks for your work!