ui5-tabcontainer has top box shadow and a border bottom , which is not expected

[crollioac]

Hi UI5 Team,
I am from SAP Successfactors team. Thanks for all the UI5 WCs and are very useful. We are using ui5-tabcontainer WC in our new application. And felt that it has some issue. Please resolve and help us to use it as expected.

Describe the bug
As per the fiori 3 navbar, It should not have any box shadow and it should be stretchable to the end of the viewport(width 100%), tabs must be adjustable as per requirement.

To reproduce
Steps to reproduce the behavior:

1. Go to https://sap.github.io/ui5-webcomponents/playground/components/TabContainer/

Expected behavior
It should behave as IconNavBar. Please refer https://sapui5.hana.ondemand.com/#/entity/sap.m.IconTabBar

Screenshots

Context

• UI5 Web Components version: 0.21.1
• OS/Platform: Windows
• Browser (if relevant): Chrome
• Other information: {...}

Affected components (if known)

Log output / Any errors in the console

{...}

[fifoosid]

Hello @crollioac

As much as I can see you have explained three different bugs:

1. It should not have any box shadow

• As you can see in the UI spec from the design team, there should be box-shadow applied.

2. It should be stretchable to the end of the viewport

• As you can see here, the TabContainer is fully stretchable.

3. Tabs must be adjustable as per requirement

• I am not quite sure what exactly you mean by this. If you need to change the look of a tab or create your own custom tabs take a look at this issue. Moreover here is a repo, which demonstrates how you can create your own custom tabs.

Feel free to close the issue if everything is clear 😊

Best regards,
Filip

[crollioac]

Hi Filip, Thanks for the response.

1. If you see the snapshots in the UI-spec you shared, they don't have any box-shadow. And the our applications are also designed as per fiori3 guidelines so they don't have box-shadow too. I don't see the box-shadow to be compulsory. Box-shadow is not expected on to, left and right.
2. Yes. it is stretchable.
3. From point 3 what I meant is, can the spacing between the start of tab-container and 1st tab be flexible or customizable.

[fifoosid]

Hello @crollioac

I have some updates about the following points:

1 I had a chat with the designer, responsible for the component and it turns out that the info in the table in the bottom is what is important when it comes to box-shadow(rather than the screenshots). There should be shadow by design. Anyway it should be a little different that the current one. I am preparing a PR to resolve this issue

3 By default this is the spacing that you can find in the attached Fiori UI spec, provided by the designers. If you really want to change it, I would suggest that you create your custom tab, which has the intended spacing.