[docs-infra] Refine the API page design

[alexfauquette]

Some fixes are from lukas feedback that color were wrong on table layout, and that we supressed the <code> in warnings

Some are just classes renaming

Another one is from slack message

Oh yeah, this is way better.

One thing I did notice is that long types are all on one line, which make them hard to read. Example here on api/popper is the modifiers prop:

Type:Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain' | 'afterRead' | 'afterWrite' | 'beforeMain' | 'beforeRead' | 'beforeWrite' | 'main' | 'read' | 'write', requires?: Array, requiresIfExists?: Array }>
sent from https://mui.com/material-ui/api/popper/ (from section <|New API content design)>

Before / After

• popper
• modal

The next should show no change even if <span> got replaced by <code>

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against a5199ff

[danilo-leal]

Looks good! 🎉 Although I don't (visually) love these big code blocks now that the enum info is stacked vertically (preferred them spanning the entire width), I guess it does help with readability 😆 😅 — thanks for working on it, nonetheless!

[alexfauquette]

preferred them spanning the entire width

Maybe we could put a threshold

[danilo-leal]

That's a good idea! But honestly, I wouldn't know an objective number to point out at the moment.
We can feel it out... it'll probably be more of a feel thing!