Skip to content

TabContainer | inconsistent active tab bottom border #12538

@d058090

Description

@d058090

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

  1. 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

  2. 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:

  1. 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

  2. Also seen in WebComponents for React:
    https://ui5.github.io/webcomponents-react/v2/?path=/docs/layouts-floorplans-tabcontainer--docs#tabcontainer-with-tabseparator

  3. 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

TOPIC RDbugThis issue is a bug in the code

Type

Projects

Status

New Issues

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions