feat(menu): add tab overflow scrolling and shadows

[SeanSun6814]

Description

Currently, when there are too many tabs on a menu such that they exceed the width of its container width, they overflow off the page. As mentioned in issue #1501, there are two ways this could be fixed:

• The Tab itself gets scrollable
• An icon gets added to the ends of the Tab

In this PR (@SeanSun6814, @jessxec), we address both of them. It allows the tabs to be scrollable if it overflows. When some tabs are hidden to the left or right, there are shadows on either side indicating that more tabs can be scrolled to.

In order to activate these features, the user needs to add some more HTML divs in their code.

Specifically, to have the scroll feature, the user should wrap the menu tabs div with another div:

<div class="ui top attached tabular scroll">

To have the shadows feature, the user should add the following divs right before and after the menu tabs:

<div class="ui top attached tabular menu">
  <div class="ui attached tabular shadowHider top shadowHiderStart"></div>
  <div class="ui attached tabular shadow shadowStart"></div>

  <div class="item" data-tab="one">one</div>
  <div class="item active" data-tab="two">two</div>

  <div class="ui attached tabular shadow shadowEnd"></div>
  <div class="ui attached tabular shadowHider shadowHiderEnd"></div>
</div>

After these divs are added, the CSS added into the fomantic library will automatically apply to them.

In the future, it might be worth looking into having these features without additional user code.

Testcase

Demo before the fix (from the issue #1501): https://codesandbox.io/s/fomantic-tab-issue-v6er3?file=/src/App.js

Demo after the fix: https://jsfiddle.net/jessxec/64L293uk/31

Screenshot

Before the fix:

After the fix:

Closes

#1501

[lubber-de]

Thanks for investigating and proposing a possible solution. 👍
The way your approach is made is somehow not completely fitting the way FUI works or is considered to work.

Here is my experience while trying your jsfiddle:

• The extra wrapper only seems to be needed to make the extra shadow divs work and to hide the segments top/bottom border. Tricky solution. I wonder if this is somehow working without the extra divs 🤔
• The wrapper should not have the nearly same classname as the menu itself. confusing and does currently not fit the FUI naming logic. But this is something easily fixable/discussable
• If extra divs are still needed/accepted, we should give them a more neutral name, because covering the left/right side could possible be something else than a shadow
• Your approach does not work on desktop, on Edge you need to use the direction keys to scroll the menu items, on Chrome or firefox it does not work at all (the direction keys controls the cursor inside the heading instead). Only on mobile the menubar is draggable
  • on desktop, it would either need the scrollbar to be displayed (yes, ugly, i know 😉 ) or the scroll handling would need some javascript (my visual approach seen below using extra items)
• the shadow trick, only being shown when not scrolled to the edges, is clever, but, IMHO, does not visually fit the overall tab/FUI appearance, it looks misplaced to me. We could play around using something being more "visual pleasing" (for example radial gradient, rounded corners...
• Hiding the scrollbar does not work at all in firefox

Here is a quick draft i played around removing the extra divs and placing left/right items instead. Yes, those would need javascript, but .tab() actually is a module, so we can add such logic here. Such logic could change the scrollposition upon click (or implement a dragging functionality), which works everywhere.
It also allows to use any desired (cover-/click-) item instead of a hardcoded "shadow"
https://jsfiddle.net/lubber/y98m7u2n/3/

Again, thanks for getting into this, and lets discuss how to proceed.

[lubber-de]

Just 2 places, as examples, inside your PR which need changes. Beside my other comment, you should take care of such for future changes. Those are needed at several places , which i havent marked because of my other overall comment

[lubber-de]

dont use !important, use repeating classnames to increase specificity instead

[lubber-de]

Use a LESS variable instead of hardcoding the value

[jamessampford]

• on desktop, it would either need the scrollbar to be displayed (yes, ugly, i know 😉 ) or the scroll handling would need some javascript (my visual approach seen below using extra items)

I did come up with something in #1868 that did scrolling and overflow (using dropdown) menu, depending on what was needed (auto detected if mobile) and would be useful in .tab() (though in a way could be useful to have this logic for other menus, like a header menu, which was more what my proposal was around)