From 7cc6982b46ef1993819cbf534a2ea8f26a7f8a5d Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Thu, 30 Oct 2025 10:29:36 +0200 Subject: [PATCH 1/4] fix(ui5-tab-container): fix selection indicator overlap selection indicator of text only tabs shows above the bottom border Fixes: #12538 --- packages/main/src/themes/TabInStrip.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css index 3b2b8e31d57f..4c1a7753abcd 100644 --- a/packages/main/src/themes/TabInStrip.css +++ b/packages/main/src/themes/TabInStrip.css @@ -137,7 +137,7 @@ .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after { content: ""; position: absolute; - bottom: 0; + bottom: 1px; left: 0; right: 0; border-bottom: var(--sapTab_Selected_Indicator_Dimension) solid var(--sapTab_ForegroundColor); From e661416d97d669151da50a9298584ed6afffaa24 Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Thu, 6 Nov 2025 16:54:58 +0200 Subject: [PATCH 2/4] fix(ui5-tab-container): prevent selection indicator on text-only tabs from overlapping bottom border Address review comments --- packages/main/src/themes/TabInStrip.css | 45 +++++++++++++++++++------ 1 file changed, 34 insertions(+), 11 deletions(-) diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css index 4c1a7753abcd..4f308648ca04 100644 --- a/packages/main/src/themes/TabInStrip.css +++ b/packages/main/src/themes/TabInStrip.css @@ -132,29 +132,28 @@ /* selection indicator */ -.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after, -.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after, -.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after { +.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly::after, +.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode::after, +.ui5-tab-strip-item--selected.ui5-tab-strip-item--withIcon .ui5-tab-strip-item-icon-outer::after{ content: ""; position: absolute; - bottom: 1px; + bottom: 0; left: 0; right: 0; - border-bottom: var(--sapTab_Selected_Indicator_Dimension) solid var(--sapTab_ForegroundColor); border-radius: var(--_ui5_tc_headerItemContent_border_radius); - background-color: var(--_ui5_tc_headerItemContent_border_bg); - height: var(--_ui5_tc_headerItemContent_border_height); + background-color: var(--sapTab_ForegroundColor); + height: var(--sapTab_Selected_Indicator_Dimension); } /* selection indicator offset in text only and mixed modes */ -.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after, -.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after { +.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly::after, +.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode::after { left: var(--_ui5_tc_headeritem_padding); right: var(--_ui5_tc_headeritem_padding); } -.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after { - bottom: -0.9375rem; +.ui5-tab-strip-item--selected.ui5-tab-strip-item--withIcon .ui5-tab-strip-item-icon-outer::after{ + bottom: -1rem; } .ui5-tab-strip-item--disabled { @@ -307,6 +306,12 @@ border-color: var(--sapTab_Positive_ForegroundColor); } +.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--positive::after, +.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode.ui5-tab-strip-item--positive::after, +.ui5-tab-strip-item--selected.ui5-tab-strip-item--withIcon.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer::after{ + background-color: var(--sapTab_Positive_ForegroundColor); +} + .ui5-tab-strip-item--selected.ui5-tab-strip-item--positive.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText { color: var(--sapTab_Positive_Selected_TextColor); } @@ -346,6 +351,12 @@ border-color: var(--sapTab_Negative_ForegroundColor); } +.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--negative::after, +.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode.ui5-tab-strip-item--negative::after, +.ui5-tab-strip-item--selected.ui5-tab-strip-item--withIcon.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer::after{ + background-color: var(--sapTab_Negative_ForegroundColor); +} + .ui5-tab-strip-item--selected.ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText { color: var(--sapTab_Negative_Selected_TextColor); } @@ -374,6 +385,12 @@ border-color: var(--sapTab_Critical_ForegroundColor); } +.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--critical::after, +.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode.ui5-tab-strip-item--critical::after, +.ui5-tab-strip-item--selected.ui5-tab-strip-item--withIcon.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer::after{ + background-color: var(--sapTab_Critical_ForegroundColor); +} + .ui5-tab-strip-item--selected.ui5-tab-strip-item--critical.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText { color: var(--sapTab_Critical_Selected_TextColor); } @@ -402,6 +419,12 @@ border-color: var(--sapTab_Neutral_ForegroundColor); } +.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--neutral::after, +.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode.ui5-tab-strip-item--neutral::after, +.ui5-tab-strip-item--selected.ui5-tab-strip-item--withIcon.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon-outer::after{ + background-color: var(--sapTab_Neutral_ForegroundColor); +} + .ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon { color: var(--sapTab_Neutral_IconColor); } From 6f7ad38d03f65912688f05009e3a418b4f6a0d7c Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Fri, 7 Nov 2025 08:28:35 +0200 Subject: [PATCH 3/4] fix(ui5-tab-container): prevent selection indicator on text-only tabs from overlapping bottom border Fix overlapping --- packages/main/src/themes/TabInStrip.css | 40 ++++++------------------- 1 file changed, 9 insertions(+), 31 deletions(-) diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css index 4f308648ca04..ec20d670e078 100644 --- a/packages/main/src/themes/TabInStrip.css +++ b/packages/main/src/themes/TabInStrip.css @@ -132,27 +132,28 @@ /* selection indicator */ -.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly::after, -.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode::after, -.ui5-tab-strip-item--selected.ui5-tab-strip-item--withIcon .ui5-tab-strip-item-icon-outer::after{ +.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after, +.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after, +.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; + border-bottom: var(--sapTab_Selected_Indicator_Dimension) solid var(--sapTab_ForegroundColor); border-radius: var(--_ui5_tc_headerItemContent_border_radius); - background-color: var(--sapTab_ForegroundColor); - height: var(--sapTab_Selected_Indicator_Dimension); + background-color: var(--_ui5_tc_headerItemContent_border_bg); + height: var(--_ui5_tc_headerItemContent_border_height); } /* selection indicator offset in text only and mixed modes */ -.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly::after, -.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode::after { +.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after, +.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after { left: var(--_ui5_tc_headeritem_padding); right: var(--_ui5_tc_headeritem_padding); } -.ui5-tab-strip-item--selected.ui5-tab-strip-item--withIcon .ui5-tab-strip-item-icon-outer::after{ +.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after { bottom: -1rem; } @@ -306,12 +307,6 @@ border-color: var(--sapTab_Positive_ForegroundColor); } -.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--positive::after, -.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode.ui5-tab-strip-item--positive::after, -.ui5-tab-strip-item--selected.ui5-tab-strip-item--withIcon.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer::after{ - background-color: var(--sapTab_Positive_ForegroundColor); -} - .ui5-tab-strip-item--selected.ui5-tab-strip-item--positive.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText { color: var(--sapTab_Positive_Selected_TextColor); } @@ -351,11 +346,6 @@ border-color: var(--sapTab_Negative_ForegroundColor); } -.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--negative::after, -.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode.ui5-tab-strip-item--negative::after, -.ui5-tab-strip-item--selected.ui5-tab-strip-item--withIcon.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer::after{ - background-color: var(--sapTab_Negative_ForegroundColor); -} .ui5-tab-strip-item--selected.ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText { color: var(--sapTab_Negative_Selected_TextColor); @@ -385,12 +375,6 @@ border-color: var(--sapTab_Critical_ForegroundColor); } -.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--critical::after, -.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode.ui5-tab-strip-item--critical::after, -.ui5-tab-strip-item--selected.ui5-tab-strip-item--withIcon.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer::after{ - background-color: var(--sapTab_Critical_ForegroundColor); -} - .ui5-tab-strip-item--selected.ui5-tab-strip-item--critical.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText { color: var(--sapTab_Critical_Selected_TextColor); } @@ -419,12 +403,6 @@ border-color: var(--sapTab_Neutral_ForegroundColor); } -.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--neutral::after, -.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode.ui5-tab-strip-item--neutral::after, -.ui5-tab-strip-item--selected.ui5-tab-strip-item--withIcon.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon-outer::after{ - background-color: var(--sapTab_Neutral_ForegroundColor); -} - .ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon { color: var(--sapTab_Neutral_IconColor); } From 1c72a30684a603c5a6d2444593b4e233f532c58b Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Fri, 7 Nov 2025 08:30:08 +0200 Subject: [PATCH 4/4] fix(ui5-tab-container): prevent selection indicator on text-only tabs from overlapping bottom border Fix blank lines --- packages/main/src/themes/TabInStrip.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css index ec20d670e078..fe1d7defc579 100644 --- a/packages/main/src/themes/TabInStrip.css +++ b/packages/main/src/themes/TabInStrip.css @@ -346,7 +346,6 @@ border-color: var(--sapTab_Negative_ForegroundColor); } - .ui5-tab-strip-item--selected.ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText { color: var(--sapTab_Negative_Selected_TextColor); }