ui5-tabcontainer - tab is selected in a collapsed tab container, ui5-tab "title" attribute doesn't work

[TeodorTaushanov]

Expected Behavior

Expected Behavior

• If you have a collapsed tab container, no tab should be selected
• "title" attribute of ui5-tab should work

Steps to Reproduce

1. Go to https://codesandbox.io/s/ui5-webcomponents-forked-q23eqo
2. Collapse the tab container content
3. A tab is selected, but it shouldn't be
4. First tab doesn't have a tooltip

Priority

• [x] Low
• [ ] Medium
• [ ] High
• [ ] Very High

[georgimkv]

As first step we should mark the Tab and TabSeparator as @abstract to better illustrate that this element, should ideally, not receive inline styles or extra attributes, etc, like the title attribute. This comes from #6220. After that, we could discuss how to provide the tooltips - rendering our own title attributes to the elements generated in TabInStrip.hbs and TabInOverflow.hbs - while preventing the title attribute being shown in the content, because that is where the Tab element is actually placed.

[TeodorTaushanov]

• If you have a collapsed tab container, no tab should be selected

We'll keep the selection indicator, when the content is collapsed, as we want tab selection, when the control is always collapsed. In the OpenUI5 there is a different control for that.

[blaesius]

• If you have a collapsed tab container, no tab should be selected

We'll keep the selection indicator, when the content is collapsed, as we want tab selection, when the control is always collapsed. In the OpenUI5 there is a different control for that.

Hi Teo, from design perspective it is wrong to show the selection if the content is collapsed, as this is similar to having no content selected. It is not clear for the user that the content is selected but closed. To which OpenUI5 control are you referring for this scenario?

Kind regards

[TeodorTaushanov]

Hi @blaesius,

OpenUI5 IconTabHeader control: https://ui5.sap.com/#/entity/sap.m.IconTabHeader/sample/sap.m.sample.IconTabHeader

This functionality can be achieved in ui5 web components by:

<ui5-tabcontainer collapsed fixed>

https://codesandbox.io/s/ui5-webcomponents-forked-psue9q

Best, Teo

[blaesius]

Ok, if this is needed, then it should only apply for this combination (collapsed + fixed tabcontainer) and not for the other combinations (e.g. if you collapse a 'collapsable' TabContainer the selection should not be shown)

[TeodorTaushanov]

For me this is an unnecessary complication and it will leads to confusion when exactly the selection is shown or not.

Anyway if you think this will help for the control usability, reopen the issue and we'll improve this.

[blaesius]

If you can collapse and expand the Tab Container, the selection must only be visible while the Tab is expanded. The standalone Tab Container Header is a special use case and only for this use case the other behavior (having always the selection shown) can apply. This can either happen automatically or via a property.

As we are mixing multiple existing UI5 controls in this Web Component. To be consistent, we need to apply the same behavior for UI5 and WC. This means, if you can expand/collapse the Tab Container, the selection should only appear if the container is expanded (see https://ui5.sap.com/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBarMulti)

Another solution would also be to remove the expand/collapse feature.

[TeodorTaushanov]

@blaesius, I would go for removing the expand/collapse via mouse/keyboard feature, but keep it as an API. So the ui5-tabcontainer will be always "fixed".

[blaesius]

Yes, that sounds good

[TeodorTaushanov]

Added to #4460 2.0 breaking changes list.