[docs-infra] Add a collapsible list & table views to the API content display

[alexfauquette]

Preview

• Material UI
• Joy UI
• Base UI
• MUI System
• Data grid premium

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against e8bdb3f

[oliviertassinari]

I chatted a bit with @alexfauquette, it could be really great to run an A/B on this. We could have 3 implementations:

1. Current
2. This PR
3. Blueprint/Stripe way https://blueprintjs.com/docs/#datetime/date-input.props-interface. For very long props, we could break them in two lines, we shouldn't have very long props anyway.

and see which one the developers pick the most as their default.

Personally, as a developer, I would definitely put 2. last, too much effort to click, scrolling is easier. I would have to try 1 and 3 long enough to really know for sure, maybe a slight preference for 3.

[danilo-leal]

@oliviertassinari I recently wrote a doc about the API content display and the A/B test idea could maybe be discussed more in-depth there! I personally don't see a lot of value in testing something close to Blueprint but happy to further discuss on Notion considering what Alex & I discussed that's documented there! 😃

[joserodolfofreitas]

Blueprint/Stripe way https://blueprintjs.com/docs/#datetime/date-input.props-interface. For very long props, we could break them in two lines, we shouldn't have very long props anyway.

I like the UX on this one, it solves the main problem with the current design (which mixes secondary with primary information on the same vertical space and breaks quick skimming). Overall I think the card design is good, I'd bet we just need to keep the primary information quickly scannable.
Also, to consider: We could collapse options by default only if they cross a max size threshold.

[alexfauquette]

To simplify experimentation, I added a page with data grid premium API docs such that we can see in live the impact on big API page https://deploy-preview-38265--material-ui.netlify.app/experiments/docs/data-grid-premium/

Based on the comments "I want to easily scan the props or description", I moved to a table layout with props/description column

I allow a first column of up to 200px. If the props overflow, their name is cut in two (mainly for data grid unstable props)

Props now have a check box on top of it to enable/disable collapsed rows

Todo

• Adapt other sections to collapse
• Setup the localstorage for saving preference
• Improve the UI for selection between collapsable or not
• Setup Google Analytics to track UI preferences
• Bring back the table rendering

[oliviertassinari]

@alexfauquette The plan sounds great. Let's 🔬, see how developers behave.

I think this is a viable implementation to test 3. in #38265 (comment). I have added a screenshot to illustrate it. I would only raise that the prop description font is wrong, it uses theme.typography.fontFamilyCode rather than theme.typography.fontFamily.

[alexfauquette]

🎉🎉 Celebration time 🎉🎉

I just need to review my own code to make sure the data are correctly sent to Google Analytics, such that we can do something with them. Should be ready for the next release 🚀