feat(ui5-tabcontainer): show separators in overflow (#4507)

Show separators in overflow

Co-authored-by: Konstantin Kondov <konstantin.kondov@sap.com>
Co-authored-by: Teodor Taushanov <teodor.taushanov@sap.com>

packages/main/src/Tab.js

@@ -56,7 +56,7 @@ const metadata = {
 		},
 
 		/**
-		 * Represents the "additionalText" text, which is displayed in the tab filter.
+		 * Represents the "additionalText" text, which is displayed in the tab.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public

packages/main/src/TabContainer.hbs

@@ -5,7 +5,6 @@
 	{{#if tabsAtTheBottom}}
 		{{> contentArea}}
 	{{/if}}
-
 	<div class="{{classes.header}}" id="{{_id}}-header">
 		<div
 			class="ui5-tc__overflow ui5-tc__overflow--start"
@@ -35,17 +34,7 @@
 			@keyup="{{_onTabStripKeyUp}}"
 		>
 			{{#each items}}
-				{{#unless this.isSeparator}}
-					{{this.stripPresentation}}
-				{{/unless}}
-				{{#if this.isSeparator}}
-					<div
-						id="{{this._id}}"
-						data-ui5-stable="{{this.stableDomRef}}"
-						role="separator"
-						class="{{../classes.separator}}"
-					></div>
-				{{/if}}
+				{{this.stripPresentation}}
 			{{/each}}
 		</div>
 

packages/main/src/TabContainer.js

@@ -146,8 +146,8 @@ const metadata = {
 		/**
 		 * Defines whether the overflow select list is displayed.
 		 * <br><br>
-		 * The overflow select list represents a list, where all tab filters are displayed
-		 * so that it's easier for the user to select a specific tab filter.
+		 * The overflow select list represents a list, where all tabs are displayed
+		 * so that it's easier for the user to select a specific tab.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -461,14 +461,15 @@ class TabContainer extends UI5Element {
 		const selectedTab = this.items[selectedIndex];
 
 		// update selected items
-		this._getTabs().forEach((item, index) => {
-			const selected = selectedIndex === index;
-			item.selected = selected;
+		this.items
+			.forEach((item, index) => {
+				const selected = selectedIndex === index;
+				item.selected = selected;
 
-			if (item._selected) {
-				item._selected = false;
-			}
-		});
+				if (item._selected) {
+					item._selected = false;
+				}
+			});
 
 		if (this.fixed) {
 			this.selectTab(selectedTab, selectedTabIndex);
@@ -568,7 +569,7 @@ class TabContainer extends UI5Element {
 		if (this.responsivePopover.opened) {
 			this.responsivePopover.close();
 		} else {
-			this.responsivePopover.initialFocus = this.responsivePopover.content[0].items[0].id;
+			this.responsivePopover.initialFocus = this.responsivePopover.content[0].items.filter(item => item.classList.contains("ui5-tab-overflow-item"))[0].id;
 			this.responsivePopover.showAt(button);
 		}
 	}
@@ -586,6 +587,9 @@ class TabContainer extends UI5Element {
 	}
 
 	_handleResize() {
+		if (this.responsivePopover && this.responsivePopover.opened) {
+			this.responsivePopover.close();
+		}
 		this._updateMediaRange();
 		this._setItemsForStrip();
 	}

packages/main/src/TabContainerPopover.hbs

@@ -10,15 +10,11 @@
 	<ui5-list mode="SingleSelect" separators="None" @ui5-item-click="{{_onOverflowListItemClick}}">
 		{{#if _endOverflowItems.length}}
 			{{#each _endOverflowItems}}
-				{{#unless this.isSeparator}}
-					{{this.overflowPresentation}}
-				{{/unless}}
+				{{this.overflowPresentation}}
 			{{/each}}
-		{{else }}
+		{{else}}
 			{{#each _startOverflowItems}}
-				{{#unless this.isSeparator}}
-					{{this.overflowPresentation}}
-				{{/unless}}
+				{{this.overflowPresentation}}
 			{{/each}}
 		{{/if}}
 	</ui5-list>

packages/main/src/TabSeparator.js

@@ -1,6 +1,16 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import TabSeparatorTemplate from "./generated/templates/TabSeparatorTemplate.lit.js";
+import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+
+import TabContainer from "./TabContainer.js";
+
+// Templates
+import TabSeparatorInStripTemplate from "./generated/templates/TabSeparatorInStripTemplate.lit.js";
+import TabSeparatorInOverflowTemplate from "./generated/templates/TabSeparatorInOverflowTemplate.lit.js";
+
+// Styles
+import stripCss from "./generated/themes/TabSeparatorInStrip.css.js";
+import overflowCss from "./generated/themes/TabSeparatorInOverflow.css.js";
 
 /**
  * @public
@@ -30,8 +40,18 @@ class TabSeparator extends UI5Element {
 		return litRender;
 	}
 
-	static get template() {
-		return TabSeparatorTemplate;
+	static get stripTemplate() {
+		return TabSeparatorInStripTemplate;
+	}
+
+	static get overflowTemplate() {
+		return TabSeparatorInOverflowTemplate;
+	}
+
+	get classes() {
+		return {
+			"ui5-tc__separator": true,
+		};
 	}
 
 	get isSeparator() {
@@ -45,8 +65,19 @@ class TabSeparator extends UI5Element {
 	get stableDomRef() {
 		return `${this._id}-stable-dom-ref`;
 	}
+
+	get stripPresentation() {
+		return executeTemplate(this.constructor.stripTemplate, this);
+	}
+
+	get overflowPresentation() {
+		return executeTemplate(this.constructor.overflowTemplate, this);
+	}
 }
 
 TabSeparator.define();
 
+TabContainer.registerTabStyles(stripCss);
+TabContainer.registerStaticAreaTabStyles(overflowCss);
+
 export default TabSeparator;

packages/main/src/TabSeparatorInOverflow.hbs

@@ -0,0 +1,8 @@
+<ui5-li-custom
+	id="{{this._id}}"
+	data-ui5-stable="{{this.stableDomRef}}"
+	role="separator"
+	class="{{classes}}"
+	disabled
+>
+</ui5-li-custom>

packages/main/src/TabSeparatorInStrip.hbs

@@ -0,0 +1,6 @@
+<div
+	id="{{this._id}}"
+	data-ui5-stable="{{this.stableDomRef}}"
+	role="separator"
+	class="{{classes}}"
+></div>

packages/main/src/themes/TabContainer.css

@@ -47,46 +47,10 @@
 	white-space: nowrap;
 }
 
-.ui5-tc__separator {
-	width: 0;
-	border-left: 2px solid var(--sapList_BorderColor);
-	margin: 0.5rem 0.25rem;
-}
-
 .ui5-tc__separator:focus {
     outline: none;
 }
 
-.ui5-tc__headerArrow {
-	position: absolute;
-	top: 0;
-	bottom: 1px;
-	z-index: 1;
-	display: flex;
-	align-items: center;
-	color: var(--sapContent_IconColor);
-	background-color: var(--sapObjectHeader_Background);
-	padding: 0 0.25rem;
-	visibility: hidden;
-}
-
-.ui5-tc__headerArrowLeft {
-	left: 0;
-}
-
-.ui5-tc__headerArrowRight {
-	right: 0;
-}
-
-.ui5-tc__headerArrow:hover,
-.ui5-tc__headerArrow:active {
-	color: var(--sapHighlightColor);
-}
-
-.ui5-tc__headerArrow--visible {
-	visibility: visible;
-}
-
 .ui5-tc__overflow {
 	flex: 0 0 0;
 	margin: 0 0.25rem;
@@ -117,7 +81,7 @@
 }
 
 :host([tabs-placement="Bottom"]) .ui5-tc__content {
-    border-top: var(--_ui5_tc_content_border_bottom);
+	border-top: var(--_ui5_tc_content_border_bottom);
 }
 
 .ui5-tc__content--collapsed {

packages/main/src/themes/TabSeparatorInOverflow.css

@@ -0,0 +1,8 @@
+.ui5-tc__separator {
+	min-height: 0.25rem;
+	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	margin: 0 0.5rem;
+}
+ui5-list>.ui5-tc__separator:first-child {
+	min-height: 0.5rem;
+}

packages/main/src/themes/TabSeparatorInStrip.css

@@ -0,0 +1,5 @@
+.ui5-tc__separator {
+	width: 0;
+	border-left: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	margin: 0.5rem 0.25rem;
+}