diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts index c0b057aac999..5578ebd7f671 100644 --- a/packages/main/src/TabContainer.ts +++ b/packages/main/src/TabContainer.ts @@ -952,7 +952,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); @@ -962,8 +962,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