[docs-infra] Improve type naming on the API pages

[danilo-leal]

We're using a shorthand notation to mention to type names that seem to be about React's prop-types, like bool.

https://mui.com/material-ui/api/fade/#fade-prop-appear

But it seems to make more sense to use the full name for it to be more accurate with how TypeScript refers to them — e.g., boolean.

This naming design optimizes for a time when most developers would write "propType". Today, these developers are a lot more likely to write TypeScript types, so it will bring a more intuitive DX to make the change:

• bool → boolean
• func → function
• etc.

Search keywords: type naming, api page

[EyaOuenniche]

Hello,
I agree, it think it makes more sense to use the full name in order to be more accurate with how TypeScript refers to them.
If this improvement is going to be implemented, I would like to help.

[danilo-leal]

@EyaOuenniche sure, yeah! Feel free to kickstart it and ask for a review :)
Let me know if you need any help, and I can give you pointers!

[EyaOuenniche]

Great! Thank you.
I changed the type names on the API pages for the fade component and I just created a pull request.

[danilo-leal]

@EyaOuenniche hey there! The Fade page linked in the issue is just one illustrative example — the correct approach would be to change in a place where the entire documentation platform is affected (not just the Fade API page).

I've looked into it myself and couldn't precisely figure out where to go to change that, so I'll summon @mui/docs-infra for further help :)

[EyaOuenniche]

hello!
I understand, I will also try to search for the place where the entire documentation platform is affected.

[alexfauquette]

I can see two places. The first one generate the type of the props.
The second recursively resolves composed types.

material-ui/packages/api-docs-builder/utils/generatePropTypeDescription.ts

Line 146 in 1250208

return type.name;

material-ui/packages/api-docs-builder/utils/generatePropDescription.ts

Lines 53 to 55 in 1250208

	if ('name' in type) {
	return type.name;
	}