From 0cbbd160ba5b578795259e59aa187359385dc4b2 Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.orhan007@gmail.com>
Date: Tue, 12 Dec 2023 15:00:07 +0200
Subject: [PATCH] feat(ui5-tabcontainer): add `tabstrip` Shadow Part (#7989)

adds tabstrip CSS Shadow Part to allow styling of the respective element - mostly its padding.

Fixes: #6035
---
 packages/main/src/TabContainer.hbs         |  1 +
 packages/main/src/TabContainer.ts          |  1 +
 packages/main/test/pages/TabContainer.html | 31 ++++++++++++++++++++++
 3 files changed, 33 insertions(+)

diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs
index c1b57406629d..7e664e0c752d 100644
--- a/packages/main/src/TabContainer.hbs
+++ b/packages/main/src/TabContainer.hbs
@@ -6,6 +6,7 @@
 		class="{{classes.header}}"
 		id="{{_id}}-header"
 		@focusin="{{_onHeaderFocusin}}"
+		part="tabstrip"
 	>
 		<div
 			class="ui5-tc__overflow ui5-tc__overflow--start"
diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts
index 492e4867d13a..d5761430dafd 100644
--- a/packages/main/src/TabContainer.ts
+++ b/packages/main/src/TabContainer.ts
@@ -128,6 +128,7 @@ interface TabContainerTabInOverflow extends CustomListItem {
  * <br>
  * The <code>ui5-tabcontainer</code> exposes the following CSS Shadow Parts:
  * <ul>
+ * <li>tabstrip - Used to style the tabstrip of the component</li>
  * <li>content - Used to style the content of the component</li>
  * </ul>
  *
diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html
index 627d3d5a7ef7..fcf42d63cbcd 100644
--- a/packages/main/test/pages/TabContainer.html
+++ b/packages/main/test/pages/TabContainer.html
@@ -807,6 +807,37 @@ <h3>Add new selected tab programmatically</h3>
 
 	</section>
 
+
+	<section>
+		<h3>Custom padding</h3>
+		<style>
+			.customPadding::part(tabstrip) {
+				padding: 0;
+			}
+			.customPadding::part(content) {
+				padding: 0;
+			}
+		</style>
+		<ui5-tabcontainer class="customPadding">
+			<ui5-tab text="One">
+				<ui5-button>Button 1</ui5-button>
+			</ui5-tab>
+			<ui5-tab-separator>
+				<ui5-button>Button 2</ui5-button>
+			</ui5-tab-separator>
+			<ui5-tab text="Two">
+				<ui5-button>Button 3</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Three">
+				<ui5-button>Button 4</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Four">
+				<ui5-button>Button 5</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Five">Tab Content</ui5-tab>
+		</ui5-tabcontainer>
+	</section>
+
 	<script>
 		document.getElementById("tabContainer1").addEventListener("ui5-tab-select", async function (event) {
 			result.innerHTML = event.detail.tab.text;