refactor(ui5-tabcontainer): tabs can be modified completely

[vladitasev]

Before this change, extending the ui5-tab component didn't allow to modify anything but its presentation in the content area of the ui5-tabcontainer. The whole rendering of tabs was in practice done inside the Tab Container.

ui5-tab now has 3 templates

• Regular template (Tab.hbs)
• Template in tab strip (TabInStrip.hbs) - used in the TabContainer template
• Template in overflow menu (TabInOverflow.hbs) - used in the TabContainerPopover template

ui5-tab now has 3 CSS files

• Regular CSS (Tab.css)
• CSS in tab strip (TabInStrip.css) - treated as part of the TabContainer CSS
• CSS in overflow menu (TabInOverflow.css) - treated as part of the TabContainer StaticArea CSS

ui5-tabcontainer is not responsible for rendering the tabs any more, tabs render themselves.

It is now possible to extend ui5-tab and provide your own templates/styles for the tab in the:

• content area
• strip
• overflow menu

Note:

• styles for tabs are registered with the TabContainer
• tab templates are for visualization only, event handlers need to still be in the TabContainer (now moved to the ul rather than li-s)

[Hubery-Shen]

Hi, UI5 WebComponent Teams & @vladitasev

I am from Web Experience Team in SAP SuccessFactors.
Thank you for your strong support, this feature ( tabs can be modified completely ) is exactly what we want.