-
Notifications
You must be signed in to change notification settings - Fork 280
Description
Bug Description
When checking the current implementation of the TabContainer, sometimes the active tab bottom border covers the bottom border of the TabContainer, sometimes it is displayed above it (within the TabContainer content).
e.g. "Text-Only Tabs" show the active tab border covering the bottom line of the TabContainer, "Icon Tabs" don't.
When Tabs are placed at the bottom of the DynamicPageHeader there is also inconsistent placement.
It's more obvious in the Evening Horizon theme. In the Morning Horizon the bottom border color of the TabContainer blurs with the drop shadow of the DynamicPageHeader.
Affected Component
TabContainer
Expected Behaviour
-
According to the Central Design Figma file, the active tab bottom border should overlap the TabContainer gray bottom border.
https://www.figma.com/design/SILcWzK5uFghKun9jx6D7c/SAP-Web-UI-Kit?m=auto&node-id=1216-3190&t=9wY7GyQx6TXIFlcf-1 -
Please also verify the TabContainer bottom border and active Tab bottom border look as specified for all themes (Evening Horizon, Morning Horizon, High Contrast themes). In the High-Contrast themes I sometimes see an additional light gray TabContainer bottom border on top of to the high-contrast bottom border (white or black).
Isolated Example
No response
Steps to Reproduce
Examples:
-
UI5 WebComponents v2.15.3:
Active Text Tabs cover the bottom border, Active Icon Tabs show above the bottom border
https://ui5.github.io/webcomponents/components/TabContainer/#tab-layout -
Also seen in WebComponents for React:
https://ui5.github.io/webcomponents-react/v2/?path=/docs/layouts-floorplans-tabcontainer--docs#tabcontainer-with-tabseparator -
SAP IT Launchpad
Text Tabs in Page Header cover the bottom line
https://sapit-home-prod-004.launchpad.cfapps.eu10.hana.ondemand.com/site#Shell-home
Text Tabs in page content show above the bottom line (or covered by the bottom line)?
https://sapit-home-prod-004.launchpad.cfapps.eu10.hana.ondemand.com/site#feedbackservice-Display
Log Output, Stack Trace or Screenshots
No response
Priority
None
UI5 Web Components Version
v2.15.3
Browser
Chrome
Operating System
Mac, Windows
Additional Context
No response
Organization
SAP SE
Declaration
- I’m not disclosing any internal or sensitive information.
Metadata
Metadata
Assignees
Labels
Type
Projects
Status