ui5-tab-container: iterate on design, functionality, API

[vladitasev]

• Implement the latest fiori design spec for TabContainer (if/when the spec is finished, as it is very recent).
• Discuss whether we need 2 components actually: ui5-tab-strip, ui5-tab-container. Assess current OpenUI5 controls and how they differ.
• How can we allow more customization by having the Fiori design by default?

@ilhan007 @MapTo0 @fifoosid

[vladitasev]

Official design spec:
https://experience.sap.com/fiori-design-web/icontabbar/

[vladitasev]

SAP Design statement regarding the positioning of text below the icons:

Please note that starting with SAPUI5 version 1.40, you should only use the horizontal type of label (icon and label side by side).

It seems having the label below the icon is a legacy option, and it's not even in the current design.

This is the latest design:

https://experience.sap.com/fiori-design-web/wp-content/uploads/sites/5/2020/01/Style-Tab-Density_1-74.png

In OpenUI5, it is possible though. See:
https://ui5.sap.com/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBar

In UI5 Web Components, this option was never implemented, as it was deprecated by the time we created the web components package.

[vladitasev]

Available OpenUI5 controls:

1. TabContainer
   https://ui5.sap.com/#/entity/sap.m.TabContainer

This is a control, featuring tabs with a lebel and close button. Very similar to browser tabs. More niche usage. Does not have an equivalent in UI5 Web Components (despite the name!).

2. IconTabBar
   https://ui5.sap.com/#/entity/sap.m.IconTabBar

This is a control, featuring more universal tabs that can be used to filter, show different parts of an object, or a flow. This is the equivalent to UI5 Web Components ui5-tab-container (despite the name).

[vladitasev]

Current PoCs:

• on instance level: POC: create custom tab #1492
• on class level: refactor(ui5-tabcontainer): tabs can be modified completely #1507

[vladitasev]

#1507 was merged

[vladitasev]

Sample repo, showing how you can take advantage of the feature and create your own tabs:
https://github.com/vladitasev/custom-tabs