[Tabs] Reduce complexity for using a basic tabs

[sdg002]

Hi All,

I was looking at the Tabs demo here - in an attempt to rapidly create a simple ReactJS web page with a tabbed navigation structure. https://codesandbox.io/s/cbn97?file=/demo.js which is hyperlinked from https://material-ui.com/components/tabs/

I found it incredibly hard to comprehend what is the bare minimum code that I need to write to get a simple Tab system up and running.

Comparing with Bootstrap

Look at the Bootstrap tabs here as an comparative example: https://react-bootstrap.github.io/components/tabs/ Just 11 lines of Bootstrap Tab as opposed to 50 lines of Material UI tab

You can have complex demos. But, the starter demo should be as simple as possible.

Thank you, Sau

[eps1lon]

Thanks for the feedback. We really appreciate this sort of feedback since as maintainers you can get too complacent with the way you write docs.

A key takeaway is that we should make demos "shorter".

I proposed it in the past and want to re-iterate on it: We should remove .propTypes. 30-50% of React users are TypeScript users and a typed-language is better suited for that "primitive" type-checking i.e. if the types can be verified statically you don't need .propTypes.

Another point is that Tabs require a lot of ceremony at the moment. Something that the experimental Tabs API is trying to solve

Though the experimental tabs API suffers from another fact: It includes styles that are only necessary in our demo. We should take a look at how we style our demos and if we can reduce the amount of styles that we include inside the demos to "arrange them nicely".

Just 11 lines of Bootstrap Tab as opposed to 50 lines of Material UI tab

If you compare the shortened versions then we have 16 lines vs bootstraps 11. That is the more apt comparison.

[oliviertassinari]

It sounds like another confirmation that we should use the lab <TabPanel> API in all the demos. It would solve #21015 too. Is this accurate?

I proposed it in the past and want to re-iterate on it: We should remove .propTypes. 30-50% of React users are TypeScript users and a typed-language is better suited for that "primitive" type-checking i.e. if the types can be verified statically you don't need .propTypes.

@eps1lon Why? If we use TabPanel, won't we get the .propTypes issue solved at the same time? TypeScript uses could use the TypeScript demos, we could make them the default, in a few months.

Though the experimental tabs API suffers from another fact: It includes styles that are only necessary in our demo.

+1 for removing the built-in styles and trying using the sx prop instead in the demos.

[eps1lon]

+1 for removing the built-in styles and trying using the sx prop instead in the demos.

That would not solve the issue. Demos should not include styles that are simply for "arrangement" i.e. styles that are unnecessary for isolated usage.

[oliviertassinari]

Demos should not include styles that are simply for "arrangement" i.e. styles that are unnecessary for isolated usage.

@eps1lon Sounds fair, I guess it would only to make the demo look a bit nicer, but a simple <p> can do the trick too to add margin :).

[mnajdova]

Looking at the example in https://next.material-ui.com/components/tabs/, the difference between the two demos are:

-<Sonnet />
+<TabPanel value={value} index={1}>
+  Item Two
+</TabPanel>

There is no illustration of how the <Sonnet /> component looks like on the bootstrap example, so we cannot really compare.

I am not saying there is no room for improving the demos, my point is that it is nothing specific to this particular demo.

That would not solve the issue. Demos should not include styles that are simply for "arrangement" i.e. styles that are unnecessary for isolated usage.

Completely agree with @eps1lon, maybe we should have an umbrella issue for solving this on the whole docs. I propose we close this one and opening another one if we think this is important improvement for the documentation.

[oliviertassinari]

I would propose we use this issue to track progress on the new tabs API: https://next.material-ui.com/components/tabs/#experimental-api (and close once we only document it/move it to the core).

[jansepke]

@oliviertassinari is there any update on a plan to release the experimental tabs API? this issue is quite old and I was not able to find anything about the status. we are really interested in having a easier to use API for the tabs.