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
SAP · Dec 12, 2023 · 0cbbd16 · 0cbbd16
1 parent a265a65
commit 0cbbd16
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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;