Fluentui: Support Pivot that overflows container

[badsyntax]

Describe the feature that you would like added

Make the pivot component horizontally scrollable, similar to the DetailsList component. Also, automatically scroll the selected pivot item in view. Here's an example of how it should work:

What component or utility would this be added to

Pivot

Have you discussed this feature with our team, and if so, who

No

Additional context/screenshots

Looking at the examples on this page, when you make the browser window small, the pivot items are cut off:

[paulgildea]

Thanks for the feedback @badsyntax !

We'll take this feedback into consideration when we start to converge the Pivot control across our two react packages.

Thanks!

[behowell]

Hi @badsyntax, the next major release (v8) will have support for a Pivot overflow menu (see #4066). The updated Pivot is also available now in a standalone package @fluentui/react-tabs, if you want to try it before v8 is released.

We're also considering adding other types of overflow support including scrolling like you suggested, but they're not planned for the v8 release.

Here's a demo of the overflow functionality: https://codesandbox.io/s/pivot-overflow-menu-demo-grrgg

[badsyntax]

Great news, thanks! It looks great. Should this be closed?

[behowell]

Yup! I wanted to make sure that the new behavior worked for your needs, since it's different from what you proposed. It sounds like that's the case, so I'll close this.