[Tabs] Flexbox tabs

[nickclaw]

The Tabs component seems a little broken because it can't be rendered server-side and doesn't respond to the window resizing. Would you consider a pull request that makes tabs use a flexbox grid instead of client calculated widths?

This is what it looks like when you minimize the window size and try to scroll.

This is what the screen flashes before your javascript has loaded if you do server side rendering.

[ghost]

Agreed on window resizing, I just put in a new PR #320 for resizing on window resizing. Concerning flexbox - my first implementation was using a flex box, however, the two issues I ran into were the left animation of the ink bar as well as a user specifying their desired width (if they didn't want a fixed width.) Also, if we go the flexbox route, we are only supporting aspects of IE10+.

Let me know what you think and would greatly appreciate any input!

[nickclaw]

The browser support is definitely a problem, and I'm not sure what browser levels this library is trying to meet. That being said, with flexbox, developers could still overwrite the width of their tab in a lot of ways (e.g. something like <Tab tabWidth="200px"> or <Tab tabWeight="2" > could be added), and because it relies on CSS it wouldn't flash the wrong format before the script loaded. That still doesn't solve the ink-bar problem though.

Did you consider just using percentage value widths instead of pixels? That would honestly probably be a simpler solution, and it could still be overridable by the tabWidth prop.

[luisrudge]

I agree with flexbox. Keeps the code simpler and one can use a fallback if one want's to support old browsers. By the way, there's a lot of flebox bugs listed here https://github.com/philipwalton/flexbugs

[ferrannp]

I wanted to open an issue talking about the tabs responsiveness but I guess it would be the same as this one. For example, it is noticeable in the mobile, you can go from landscape to portrait and tabs won't adjust/resize till you hard refresh the page.

[alshain]

I actually implemented flexbox for tabs.

It's controllable through a flexContent prop.

Unfortunately, I forgot to contribute back a few of my changes and a lot's been changed in tabs.

Demo (Chrome must have changed something in the rendering, the scrollbar bug was only there in Firefox previously and not in Chrome. It's due to the tooltip on the download button in the top right corner that is too far to the right, an mui bug)