From e2639745f6aa1ae669dce7f3205a531a672ed711 Mon Sep 17 00:00:00 2001 From: Siyana Todorova <72251110+s-todorova@users.noreply.github.com> Date: Fri, 17 Jan 2025 13:35:36 +0200 Subject: [PATCH] fix(ui5-tab): semantic icon is properly aligned in high contrast themes (#10467) fixes: #10455 --- packages/main/src/TabContainer.ts | 6 +- packages/main/src/themes/TabInOverflow.css | 12 ++-- .../themes/base/TabContainer-parameters.css | 3 +- .../TabContainer-parameters.css | 3 +- .../TabContainer-parameters.css | 3 +- .../TabContainer-parameters.css | 3 +- .../TabContainer-parameters.css | 3 +- packages/main/test/pages/TabContainer.html | 58 +++++++++++++++++++ 8 files changed, 77 insertions(+), 14 deletions(-) diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts index 2bf0653238cf..1da9c43edfce 100644 --- a/packages/main/src/TabContainer.ts +++ b/packages/main/src/TabContainer.ts @@ -942,7 +942,7 @@ class TabContainer extends UI5Element { } _sendOverflowPresentationInfos(items: Array) { - const extraIndent = items + const semanticIcons = items .filter((item): item is Tab => !item.isSeparator) .some(tab => tab.design !== SemanticColor.Default && tab.design !== SemanticColor.Neutral); @@ -952,8 +952,8 @@ class TabContainer extends UI5Element { return this._findTabInOverflow(item); }, style: { - [getScopedVarName("--_ui5-tab-indentation-level")]: item.isSeparator ? level + 1 : level, - [getScopedVarName("--_ui5-tab-extra-indent")]: extraIndent ? 1 : null, + [getScopedVarName("--_ui5-tab-indentation-level")]: level, + [getScopedVarName("--_ui5-tab-level-has-icon")]: semanticIcons ? "1" : "0", }, }); }); diff --git a/packages/main/src/themes/TabInOverflow.css b/packages/main/src/themes/TabInOverflow.css index f7b06802f651..3cd6d58862ca 100644 --- a/packages/main/src/themes/TabInOverflow.css +++ b/packages/main/src/themes/TabInOverflow.css @@ -14,11 +14,6 @@ display: none; } -.ui5-tab-semantic-icon { - position: absolute; - inset-inline-start: -0.25rem; -} - .ui5-tab-overflow-item--positive:not(.ui5-tab-overflow-item--disabled) .ui5-tab-overflow-itemContent { color: var(--_ui5_tc_overflowItem_positive_color); } @@ -45,9 +40,14 @@ } .ui5-tab-overflow-itemContent-wrapper { - padding-inline-start: calc(var(--_ui5-tab-indentation-level) * 0.5rem + var(--_ui5-tab-extra-indent, 0) * var(--_ui5_tc_overflowItem_extraIndent)); + padding-inline-start: calc((calc(var(--_ui5-tab-indentation-level) + var(--_ui5-tab-level-has-icon) * var(--_ui5_tc_overflowItem_additional, 0))) * (var(--_ui5_tc_overflowItem_indent) + var(--_ui5_tc_overflowItem_extra_indent))); } +.ui5-tab-overflow-item .ui5-tab-semantic-icon { + position: absolute; + inset-inline-start: -1.25rem; +} + .ui5-tab-overflow-item--selectedSubTab { background-color: var(--sapList_SelectionBackgroundColor); } diff --git a/packages/main/src/themes/base/TabContainer-parameters.css b/packages/main/src/themes/base/TabContainer-parameters.css index 56c03e56e595..f8a62cb23dab 100644 --- a/packages/main/src/themes/base/TabContainer-parameters.css +++ b/packages/main/src/themes/base/TabContainer-parameters.css @@ -74,7 +74,8 @@ --_ui5_tc_overflowItem_negative_color: var(--sapNegativeColor); --_ui5_tc_overflowItem_critical_color: var(--sapCriticalColor); --_ui5_tc_overflowItem_focus_offset: 0.125rem; - --_ui5_tc_overflowItem_extraIndent: 0rem; + --_ui5_tc_overflowItem_indent: 0.5rem; + --_ui5_tc_overflowItem_extra_indent: 0rem; /* Header Item icons */ --_ui5_tc_headerItemIcon_border: 1px solid var(--sapHighlightColor); diff --git a/packages/main/src/themes/sap_fiori_3_hcb/TabContainer-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/TabContainer-parameters.css index 3331f6cee46f..e7eff4dc34ec 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/TabContainer-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/TabContainer-parameters.css @@ -40,5 +40,6 @@ --_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor); --_ui5_tc_overflowItem_default_color: var(--sapGroup_TitleTextColor); --_ui5_tc_overflowItem_current_color: var(--_ui5_tc_overflowItem_default_color); - --_ui5_tc_overflowItem_extraIndent: 1rem; + --_ui5_tc_overflowItem_extra_indent: 1rem; + --_ui5_tc_overflowItem_additional: 1; } diff --git a/packages/main/src/themes/sap_fiori_3_hcw/TabContainer-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/TabContainer-parameters.css index 3331f6cee46f..e7eff4dc34ec 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/TabContainer-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/TabContainer-parameters.css @@ -40,5 +40,6 @@ --_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor); --_ui5_tc_overflowItem_default_color: var(--sapGroup_TitleTextColor); --_ui5_tc_overflowItem_current_color: var(--_ui5_tc_overflowItem_default_color); - --_ui5_tc_overflowItem_extraIndent: 1rem; + --_ui5_tc_overflowItem_extra_indent: 1rem; + --_ui5_tc_overflowItem_additional: 1; } diff --git a/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css b/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css index d21ab594a4d6..37661eaa8bc4 100644 --- a/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/TabContainer-parameters.css @@ -42,7 +42,8 @@ --_ui5_tc_overflowItem_critical_color: var(--sapTextColor); --_ui5_tc_overflowItem_default_color: var(--sapTextColor); --_ui5_tc_overflowItem_current_color: var(--_ui5_tc_overflowItem_default_color); - --_ui5_tc_overflowItem_extraIndent: 1rem; + --_ui5_tc_overflowItem_extra_indent: 1rem; + --_ui5_tc_overflowItem_additional: 1; /* Overflow Buttons*/ --_ui5_tc_overflow_text_color: var(--sapTextColor); diff --git a/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css b/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css index d21ab594a4d6..37661eaa8bc4 100644 --- a/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/TabContainer-parameters.css @@ -42,7 +42,8 @@ --_ui5_tc_overflowItem_critical_color: var(--sapTextColor); --_ui5_tc_overflowItem_default_color: var(--sapTextColor); --_ui5_tc_overflowItem_current_color: var(--_ui5_tc_overflowItem_default_color); - --_ui5_tc_overflowItem_extraIndent: 1rem; + --_ui5_tc_overflowItem_extra_indent: 1rem; + --_ui5_tc_overflowItem_additional: 1; /* Overflow Buttons*/ --_ui5_tc_overflow_text_color: var(--sapTextColor); diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html index 5b74d22defee..0828f67173af 100644 --- a/packages/main/test/pages/TabContainer.html +++ b/packages/main/test/pages/TabContainer.html @@ -193,6 +193,64 @@

Text only End Overflow

+
+

Semantic States Overflow

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Text only Start And End Overflow