Tabs: Enhancement to tab panel header to include a menu button

[PaulEvansInfor]

I have another enhancement request for the Supply Chain Management product. We have a requirement to include a menu button within the tab panel container as follows:

Basically, this is a design that was proposed some time ago by the hook and loop team as a replacement for our existing design that includes a floating expandable toolbar (see bottom). The toolbar is not exactly SohoXI compliant, so we’d like to replace things with the design proposed by H&L. I think it would be more than enough to simply include a drop down menu (with the …) rather than attempting to include other visible buttons as well. I think then the size calculation is also simplified as you’d only calculate the width of the drop down menu with the 3 dots.

I think we can already do something similar in module tabs, but we’d also like this in the standard tab panel. Ideally, we’d like a quick turnaround on this as we aim to start to rewrite our existing layouts in the next few weeks. (appreciate you’re probably busy with other things though) A summary of what we’re trying to do can be found in the following Jira: https://jira.infor.com/browse/IBP-23529. In a nutshell we’re rewriting some old legacy layouts to use SohoXI home page type layouts.

Old menus look like this (they float across content in order to maximise real estate on the screen). Tab panels in this view aren’t SohoXI, so they also need to be replaced.

Menu expanded.

[tmcconechy]

Ok, it would be a lot easier with the whole overflow thing if we just did this with one actions button. So lets go with that.

I will schedule this in for next sprint review but not certain if that sprint is full already yet

[jbrcna]

QA Failed
the More tabs dropdown works fine. However, the issue persists when using arrow keys.
v4.36.0-dev
https://master-enterprise.demo.design.infor.com/components/tabs/test-more-actions-button?theme=uplift&variant=light
https://master-enterprise.demo.design.infor.com/components/tabs/test-more-actions-button-add-button.html?theme=uplift&variant=light
Steps

1. Resize the window until you see "More Tabs" dropdown
2. Click and focus on Contracts tab
3. Use left arrow key to navigate to Contacts tab
   

Steps

1. Add multiple tabs
2. Using More tabs dropdown Go to the last tab created (ensure the focus is on the last tab as well)
3. Now using the arrow key (right arrow key is used in the below example) go to other tabs and hit Enter