fix(ui5-tab): semantic icon is properly aligned in high contrast them…

…es (#10467) fixes: #10455
SAP · Jan 17, 2025 · e263974 · e263974
1 parent 8d0e5a4
commit e263974
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 14 deletions.
diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts
@@ -942,7 +942,7 @@ class TabContainer extends UI5Element {
 	}
 
 	_sendOverflowPresentationInfos(items: Array<ITab>) {
-		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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -193,6 +193,64 @@ <h2>Text only End Overflow</h2>
 		</ui5-tabcontainer>
 	</section>
 
+	<section>
+		<h2>Semantic States Overflow</h2>
+		<ui5-tabcontainer id="semanticOverflow">
+			<ui5-tab design="Positive" text="Home">
+				<ui5-tab slot="items" design="Negative" text="Home 1"></ui5-tab>	
+				<ui5-tab slot="items" design="Positive" text="Home 2">
+					<ui5-tab slot="items" design="Positive" text="Home 2.1">
+					   <ui5-tab slot="items" text="Home 2.1.1"></ui5-tab>
+					   <ui5-tab slot="items" design="Positive" text="Home 2.1.2"></ui5-tab>
+					</ui5-tab>
+					<ui5-tab slot="items" design="Critical" text="Home 2.2"></ui5-tab>
+				</ui5-tab>
+
+				<ui5-tab slot="items" design="Negative" text="Home 3"></ui5-tab>		  
+			</ui5-tab>
+
+			<ui5-tab design="Critical" text="Filter">
+				<ui5-tab slot="items" text="1.1.Filter"></ui5-tab>
+				<ui5-tab slot="items" design="Critical" text="1.2.Filter">
+					<ui5-tab slot="items" text="1.2.1.Filter">
+						<ui5-tab slot="items" design="Positive" text="1.2.1.1.Filter"></ui5-tab>
+						<ui5-tab slot="items" design="Negative" text="1.2.1.2.Filter"></ui5-tab>
+						<ui5-tab slot="items" text="1.2.1.3.Filter"></ui5-tab>
+					</ui5-tab>
+					<ui5-tab slot="items" text="1.2.2.Filter"></ui5-tab>
+				</ui5-tab>
+				<ui5-tab slot="items" design="Negative" text="1.3.Filter"></ui5-tab>
+			</ui5-tab>
+			<ui5-tab design="Negative" text="Settings"></ui5-tab>
+			<ui5-tab design="Positive" text="One"></ui5-tab>
+
+			<ui5-tab design="Critical" text="Two">
+				<ui5-tab design="Positive" slot="items" text="nested one"></ui5-tab>
+				<ui5-tab design="Positive" slot="items" text="nested two"></ui5-tab>
+			</ui5-tab>
+
+			<ui5-tab text="Three"></ui5-tab>
+			<ui5-tab design="Negative" text="Four">
+				<ui5-tab slot="items" text="4.1"></ui5-tab>
+				<ui5-tab design="Critical" slot="items" text="4.2">
+					<ui5-tab slot="items" text="4.2.1."></ui5-tab>
+					<ui5-tab slot="items" text="4.2.2.">
+						<ui5-tab slot="items" design="Critical" text="4.2.2.1"></ui5-tab>
+						<ui5-tab slot="items" text="4.2.2.2"></ui5-tab>
+					</ui5-tab>
+					<ui5-tab design="Critical" slot="items" text="4.2.3.">
+						<ui5-tab slot="items" text="4.2.3.1"></ui5-tab>
+						<ui5-tab slot="items" text="4.2.3.2"></ui5-tab>
+					</ui5-tab>
+				</ui5-tab>
+				<ui5-tab slot="items" text="4.3"></ui5-tab>
+				<ui5-tab design="Critical" slot="items" text="4.4."></ui5-tab>
+			</ui5-tab>
+
+			<ui5-tab design="Negative" text="Five"></ui5-tab>
+		</ui5-tabcontainer>
+	</section>
+
 	<section>
 		<h2>Text only Start And End Overflow</h2>
 		<ui5-tabcontainer id="tabContainerStartAndEndOverflow" overflow-mode="StartAndEnd" collapsed>