feat(ui5-tab-container): implement overflow-button slot (#2192)

Author: fifoosid

packages/main/src/Popover.js

@@ -257,7 +257,7 @@ class Popover extends Popup {
 
 	isOpenerClicked(event) {
 		const target = event.target;
-		return target === this._opener || (target.getFocusDomRef && target.getFocusDomRef() === this._opener);
+		return target === this._opener || (target.getFocusDomRef && target.getFocusDomRef() === this._opener) || event.composedPath().indexOf(this._opener) > -1;
 	}
 
 	/**

packages/main/src/TabContainer.hbs

@@ -32,15 +32,22 @@
 		<ui5-icon @click="{{_onHeaderForwardArrowClick}}" class="{{classes.headerForwardArrow}}" name="slim-arrow-right" tabindex="-1" accessible-name="{{nextIconACCName}}" show-tooltip></ui5-icon>
 
 		<!-- overflow button -->
-		{{#if showOverflow}}
-			<ui5-button
+		{{#if shouldShowOverflow}}
+			<div
+				class="ui-tc__overflowButton"
 				@click="{{_onOverflowButtonClick}}"
-				class="{{classes.overflowButton}}"
-				icon="{{overflowMenuIcon}}"
-				design="Transparent"
-				aria-label="{{overflowMenuTitle}}"
-				aria-haspopup="true"
-			></ui5-button>
+			>
+				{{#if overflowButton.length}}
+					<slot name="overflowButton"></slot>
+				{{else}}
+					<ui5-button
+						icon="{{overflowMenuIcon}}"
+						design="Transparent"
+						aria-label="{{overflowMenuTitle}}"
+						aria-haspopup="true"
+					></ui5-button>
+				{{/if}}
+			</div>
 		{{/if}}
 	</div>
 

packages/main/src/TabContainer.js

@@ -57,6 +57,18 @@ const metadata = {
 			individualSlots: true,
 			listenFor: { include: ["*"] },
 		},
+
+		/**
+		 * Defines the button which will open the overflow menu. If nothing is provided to this slot, the default button will be used.
+		 *
+		 * @type {HTMLElement[]}
+		 * @public
+		 * @slot
+		 * @since 1.0.0-rc.9
+		 */
+		overflowButton: {
+			type: HTMLElement,
+		},
 	},
 	properties: /** @lends  sap.ui.webcomponents.main.TabContainer.prototype */ {
 		/**
@@ -427,9 +439,19 @@ class TabContainer extends UI5Element {
 	}
 
 	async _onOverflowButtonClick(event) {
+		const button = this.overflowButton[0] || this.getDomRef().querySelector(".ui-tc__overflowButton > ui5-button");
+
+		if (event.target !== button) {
+			return;
+		}
+
 		this.responsivePopover = await this._respPopover();
 		this.updateStaticAreaItemContentDensity();
-		this.responsivePopover.open(this.getDomRef().querySelector(".ui-tc__overflowButton"));
+		if (this.responsivePopover.opened) {
+			this.responsivePopover.close();
+		} else {
+			this.responsivePopover.open(button);
+		}
 	}
 
 	_onHeaderBackArrowClick() {
@@ -480,6 +502,10 @@ class TabContainer extends UI5Element {
 		return staticAreaItem.querySelector(`#${this._id}-overflowMenu`);
 	}
 
+	get shouldShowOverflow() {
+		return this.showOverflow && this._scrollable;
+	}
+
 	get classes() {
 		return {
 			root: {
@@ -509,10 +535,6 @@ class TabContainer extends UI5Element {
 				"ui5-tc__headerArrowRight": true,
 				"ui5-tc__headerArrow--visible": this._scrollableForward,
 			},
-			overflowButton: {
-				"ui-tc__overflowButton": true,
-				"ui-tc__overflowButton--visible": this._scrollable,
-			},
 			content: {
 				"ui5-tc__content": true,
 				"ui5-tc__content--collapsed": this._contentCollapsed,

packages/main/src/themes/TabContainer.css

@@ -72,15 +72,10 @@
 }
 
 .ui-tc__overflowButton {
-	display: none;
 	margin-left: auto;
 	margin-right: 0.25rem;
 }
 
-.ui-tc__overflowButton--visible {
-	display: block;
-}
-
 .ui5-tc-root.ui5-tc--textOnly .ui5-tc__content {
 	height: calc(100% - var(--_ui5_tc_header_height_text_only)); /* the header height (text only tabs) */
 }

packages/main/test/pages/TabContainer.html

@@ -407,7 +407,29 @@ <h2>tabs-placement=Bottom</h2>
                 <ui5-button>Button 3</ui5-button>
             </ui5-tab>
         </ui5-tabcontainer>
-    </section>
+	</section>
+	
+	<section>
+		<h2>Tab Container With Custom Menu Button</h2>
+		<ui5-tabcontainer id="tabContainer-custom-icon" fixed collapsed show-overflow>
+			<ui5-tab stable-dom-ref="products-ref" text="Products" additional-text="125">
+			</ui5-tab>
+			<ui5-tab-separator></ui5-tab-separator>
+			<ui5-tab icon="sap-icon://menu2" text="Laptops" semantic-color="Positive" additional-text="25">
+			</ui5-tab>
+			<ui5-tab icon="sap-icon://menu" text="Monitors" selected semantic-color="Critical" additional-text="45">
+			</ui5-tab>
+			<ui5-tab icon="sap-icon://menu2" text="Keyboards" semantic-color="Negative" additional-text="15">
+			</ui5-tab>
+			<ui5-tab icon="sap-icon://menu2" disabled text="Disabled"  semantic-color="Negative" additional-text="40">
+			</ui5-tab>
+			<ui5-tab icon="sap-icon://menu2" text="Neutral" semantic-color="Neutral" additional-text="40">
+			</ui5-tab>
+			<ui5-tab icon="sap-icon://menu2" text="Default" additional-text="40">
+			</ui5-tab>
+			<ui5-button slot="overflowButton" aria-label="Menu icon here" icon="menu" design="Transparent"></ui5-button>
+		</ui5-tabcontainer>
+	</section>
 
 	<script>
 		document.getElementById("tabContainer1").addEventListener("ui5-tabSelect", function (event) {