feat(ui5-tabcontainer): implement latest SAP Horizon design (#7257)

packages/main/src/Tab.ts

@@ -246,6 +246,10 @@ class Tab extends UI5Element implements ITab, ITabbable {
 		return this.subTabs.length > 0 && this._isTopLevelTab && !this._hasOwnContent;
 	}
 
+	get isTwoClickArea() {
+		return this.subTabs.length > 0 && this._isTopLevelTab && this._hasOwnContent;
+	}
+
 	get isOnSelectedTabPath(): boolean {
 		return this._realTab === this || this.tabs.some(subTab => subTab.isOnSelectedTabPath);
 	}
@@ -380,6 +384,10 @@ class Tab extends UI5Element implements ITab, ITabbable {
 			classes.push(`ui5-tab-strip-item--singleClickArea`);
 		}
 
+		if (this.isTwoClickArea) {
+			classes.push(`ui5-tab-strip-item--twoClickArea`);
+		}
+
 		return {
 			itemClasses: classes.join(" "),
 			additionalTextClasses: this.additionalTextClasses,

packages/main/src/TabInStrip.hbs

@@ -47,6 +47,7 @@
 	</div>
 
 	{{#if this.requiresExpandButton}}
+		<div class="ui5-tab-expand-button-separator"></div>
 		<div class="ui5-tab-expand-button" @click="{{_onTabExpandButtonClick}}">
 			<ui5-button
 				.tab={{this}}

packages/main/src/TabSeparator.ts

@@ -58,7 +58,7 @@ class TabSeparator extends UI5Element implements ITab {
 	 *
 	 * @function
 	 * @public
-     * @name sap.ui.webc.main.TabSeparator.prototype.getTabInStripDomRef
+	 * @name sap.ui.webc.main.TabSeparator.prototype.getTabInStripDomRef
 	 */
 	getTabInStripDomRef() {
 		if (this._getElementInStrip) {

packages/main/src/themes/TabContainer.css

@@ -74,11 +74,18 @@
 }
 
 .ui5-tc__overflow > [ui5-button] {
-	margin-top: 0.25rem;
 	border-radius: 0.75rem;
 	height: 1.5rem;
 }
 
+.ui5-tc__overflow > [ui5-button]:not([active]) {
+	color: var(--_ui5_tc_overflow_text_color);
+}
+
+.ui5-tc__overflow > [ui5-button]:not([active]):hover {
+	color: var(--_ui5_tc_overflow_text_color);
+}
+
 .ui5-tc__overflow > [ui5-button][focused] {
 	outline-offset: 0.125rem;
 	--_ui5_button_focused_border: none;

packages/main/src/themes/TabInStrip.css

@@ -4,7 +4,7 @@
 	height: var(--_ui5_tc_header_height);
 	color: var(--_ui5_tc_headerItem_color);
 	cursor: pointer;
-	padding: var(--_ui5_tc_headeritem_padding);
+	padding: 0 var(--_ui5_tc_headeritem_padding);
 	font-size: var(--sapFontSmallSize);
 	font-weight: var(--_ui5_tc_headeritem_text_font_weight);
 	text-shadow: var(--sapContent_TextShadow);
@@ -35,20 +35,31 @@
 
 .ui5-tab-strip-itemContent {
 	display: flex;
+	height: 100%;
 	min-width: 0;
 	justify-content: center;
 	flex-direction: column;
-	padding: var(--_ui5_tc_headerItemContent_padding);
 	border: var(--_ui5_tc_headerItemContent_default_focus_border);
 	border-radius: var(--_ui5_tc_headerItemContent_focus_border_radius);
-	pointer-events: none;
 	transition: var(--_ui5_tc_headerItem_transition);
 }
+
+.ui5-tab-expand-button {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	position: relative;
+	z-index: 1;
+	background-color: var(--_ui5_tc_header_background);
+	padding-inline-end: 0.188rem;
+}
+
 .ui5-tab-expand-button > [ui5-button] {
 	height: 1.5rem;
 	min-width: 1.5rem;
-	margin-top: 0.25rem;
-	margin-inline-start: 0.625rem;
+	margin-inline-start: var(--_ui5_tc_headerItem_expand_button_margin_inline_start);
+	--_ui5_button_border_radius: var(--_ui5_tc_headerItem_expand_button_border_radius);
+	--_ui5_button_focused_border_radius: var(--_ui5_tc_headerItem_expand_button_border_radius);
 }
 
 .ui5-tab-expand-button > [ui5-button]:not([active]) {
@@ -63,8 +74,27 @@
 	color: var(--_ui5_tc_headerItem_text_selected_hover_color);
 }
 
+.ui5-tab-expand-button-separator {
+	display: var(--_ui5_tc_headerItem_expand_button_separator_display);
+	position: relative;
+	width: 0.0625rem;
+	right: -0.0625rem;
+	height: 1rem;
+	background: var(--sapTextColor);
+	margin-inline-start: 0.0625rem;
+	z-index: 2;
+}
+
+.ui5-tab-expand-button:hover {
+	z-index: 2;
+}
+
+.ui5-tab-strip-item--selected .ui5-tab-expand-button-separator {
+	background: var(--_ui5_tc_headerItem_text_selected_color);
+}
+
 .ui5-tab-single-click-icon {
-	margin-inline-start: 0.875rem;
+	margin-inline-start:  var(--_ui5_tc_headerItem_single_click_expand_button_margin_inline_start);
 }
 
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly {
@@ -87,12 +117,16 @@
 .ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon > [ui5-icon] {
 	color: var(--_ui5_tc_headerItem_color);
 }
-.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--negative).ui5-tab-strip-item--textOnly,
-.ui5-tab-strip-item--singleClickArea.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--disabled) .ui5-tab-single-click-icon > [ui5-icon] {
+
+/* hover effects */
+.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--twoClickArea):not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--negative):hover,
+.ui5-tab-strip-item--twoClickArea:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--negative) .ui5-tab-strip-itemContent:hover,
+.ui5-tab-strip-item--singleClickArea:not(.ui5-tab-strip-item--selected):not(.ui5-tab-strip-item--disabled):hover .ui5-tab-single-click-icon > [ui5-icon] {
 	color: var(--_ui5_tc_headerItem_text_hover_color);
 }
 
-/* the outline when hover or selected */
+
+/* selection indicator */
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
@@ -107,39 +141,11 @@
 	height: var(--_ui5_tc_headerItemContent_border_height);
 }
 
-/* the outline when hover and not selected */
-.ui5-tab-strip-item--textOnly:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--mixedMode:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item-icon-outer:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after {
-	border-color: var(--_ui5_tc_headerItem_hover_border_bg);
-	background-color: var(--_ui5_tc_headerItem_hover_border_bg);
-}
-
-/* the outline when hover and selected */
-.ui5-tab-strip-item--textOnly:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--mixedMode:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item-icon-outer:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after {
-	background-color: var(--_ui5_tc_headerItem_hover_selected_hover_border_bg);
-}
-
-/* the outline offset when hover and selected */
-.ui5-tab-strip-item--textOnly:hover .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--mixedMode:hover .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item-icon-outer:hover .ui5-tab-strip-itemContent::after,
+/* selection indicator offset in text only and mixed modes */
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after {
-	left: var(--_ui5_tc_headerItemContent_offset);
-	right: var(--_ui5_tc_headerItemContent_offset);
-}
-
-/* the outline offset when focused */
-.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--mixedMode:focus-visible .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item-icon-outer:focus-visible .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode:focus-visible .ui5-tab-strip-itemContent::after {
-	left: var(--_ui5_tc_headerItemContent_focus_offset);
-	right: var(--_ui5_tc_headerItemContent_focus_offset);
+	left: var(--_ui5_tc_headeritem_padding);
+	right: var(--_ui5_tc_headeritem_padding);
 }
 
 .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
@@ -292,7 +298,7 @@
 /*** Semantic states ***/
 .ui5-tab-strip-item--positive.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
 .ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer {
-	color: var(--sapPositiveColor);
+	color: var(--_ui5_tc_headerItem_positive_color);
 	border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
 }
 
@@ -323,7 +329,7 @@
 
 .ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
 .ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer {
-	color: var(--sapNegativeColor);
+	color: var(--_ui5_tc_headerItem_negative_color);
 	border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
 }
 
@@ -347,7 +353,7 @@
 
 .ui5-tab-strip-item--critical.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
 .ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer {
-	color: var(--sapCriticalColor);
+	color: var(--_ui5_tc_headerItem_critical_color);
 	border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
 }
 
@@ -371,7 +377,7 @@
 
 .ui5-tab-strip-item--neutral.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
 .ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon-outer {
-	color: var(--sapNeutralColor);
+	color: var(--_ui5_tc_headerItem_neutral_color);
 	border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
 }
 

packages/main/src/themes/base/TabContainer-parameters.css

@@ -11,7 +11,7 @@
 	--_ui5_tc_content_background_translucent: var(--sapGroup_ContentBackground);
 
 	/* Header Item */
-	--_ui5_tc_headeritem_padding: 0 1rem;
+	--_ui5_tc_headeritem_padding: 1rem;
 	--_ui5_tc_headerItem_color: var(--sapContent_LabelColor);
 	--_ui5_tc_headerItem_additional_text_color: var(--sapContent_LabelColor);
 	--_ui5_tc_headerItem_text_hover_color: var(--_ui5_tc_headerItem_color);
@@ -42,10 +42,7 @@
 	--_ui5_tc_headerItem_positive_border_bg: transparent;
 	--_ui5_tc_headerItem_negative_border_bg: transparent;
 	--_ui5_tc_headerItem_critical_border_bg: transparent;
-	--_ui5_tc_headerItem_hover_border_bg: transparent;
-	--_ui5_tc_headerItem_hover_selected_hover_border_bg: transparent;
 	--_ui5_tc_headerItemContent_border_height: 0;
-	--_ui5_tc_headerItemContent_offset: 1rem;
 	--_ui5_tc_headerItemContent_focus_offset: 1rem;
 	--_ui5_tc_headerItem_focus_border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	--_ui5_tc_headerItem_text_focus_border_offset_left: 0px;
@@ -56,7 +53,6 @@
 	--_ui5_tc_headerItem_mixed_mode_focus_border_offset_right: 	0.625rem;
 	--_ui5_tc_headerItem_mixed_mode_focus_border_offset_top: 0.75rem;
 	--_ui5_tc_headerItem_mixed_mode_focus_border_offset_bottom: 0.75rem;
-	--_ui5_tc_headerItemContent_padding: 0;
 	--_ui5_tc_headerItemContent_focus_border: none;
 	--_ui5_tc_headerItemContent_default_focus_border: none;
 	--_ui5_tc_headerItemContent_focus_border_radius: 0;
@@ -67,10 +63,13 @@
 	--_ui5_tc_mixedMode_itemText_font_family: var(--sapFontFamily);
 	--_ui5_tc_mixedMode_itemText_font_size:  var(--sapFontSmallSize);
 	--_ui5_tc_mixedMode_itemText_font_weight: normal;
+	--_ui5_tc_headerItem_expand_button_margin_inline_start: 0.625rem;
+	--_ui5_tc_headerItem_single_click_expand_button_margin_inline_start: 0.875rem;
+	--_ui5_tc_headerItem_expand_button_border_radius: var(--sapButton_BorderCornerRadius);
+	--_ui5_tc_headerItem_expand_button_separator_display: none;
 
 	/* Overflow Item */
 
-	--_ui5_tc_overflowItem_neutral_color: var(--sapNeutralColor);
 	--_ui5_tc_overflowItem_positive_color: var(--sapPositiveColor);
 	--_ui5_tc_overflowItem_negative_color: var(--sapNegativeColor);
 	--_ui5_tc_overflowItem_critical_color: var(--sapCriticalColor);
@@ -95,6 +94,9 @@
 
 	--_ui5_tc_headerItem_focus_border_offset: -2px;
 	--_ui5_tc_headerItemIcon_focus_border_radius: 0;
+
+	/* Overflow Buttons*/
+	--_ui5_tc_overflow_text_color: var(--sapButton_TextColor);
 }
 
 [data-ui5-compact-size],

packages/main/src/themes/sap_belize_hcb/TabContainer-parameters.css

@@ -35,7 +35,6 @@
 
 	/* Overflow Item */
 
-	--_ui5_tc_overflowItem_neutral_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_positive_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_negative_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);

packages/main/src/themes/sap_belize_hcw/TabContainer-parameters.css

@@ -35,7 +35,6 @@
 
 	/* Overflow Item */
 
-	--_ui5_tc_overflowItem_neutral_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_positive_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_negative_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);

packages/main/src/themes/sap_fiori_3_hcb/TabContainer-parameters.css

@@ -35,7 +35,6 @@
 
 	/* Overflow Item */
 
-	--_ui5_tc_overflowItem_neutral_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_positive_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_negative_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);

packages/main/src/themes/sap_fiori_3_hcw/TabContainer-parameters.css

@@ -35,7 +35,6 @@
 
 	/* Overflow Item */
 
-	--_ui5_tc_overflowItem_neutral_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_positive_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_negative_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);

packages/main/src/themes/sap_horizon/TabContainer-parameters.css

@@ -9,6 +9,10 @@
 	--_ui5_tc_overflowItem_default_color: var(--sapTextColor);
 	--_ui5_tc_overflowItem_current_color: CurrentColor;
 	--_ui5_tc_content_border_bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
+	--_ui5_tc_headerItem_expand_button_margin_inline_start: 0rem;
+	--_ui5_tc_headerItem_single_click_expand_button_margin_inline_start: 0.25rem;
+	--_ui5_tc_headerItem_expand_button_border_radius: 0.25rem;
+	--_ui5_tc_headerItem_expand_button_separator_display: inline-block;
 
 	/* Focus & Hover */
 	--_ui5_tc_headerItem_focus_border: 0.125rem solid var(--sapContent_FocusColor);
@@ -28,4 +32,7 @@
 
 	/* Mixed Mode */
 	--_ui5_tc_mixedMode_itemText_color: var(--sapTextColor);
+
+	/* Overflow Buttons*/
+	--_ui5_tc_overflow_text_color: var(--sapTextColor);
 }

packages/main/src/themes/sap_horizon_dark/TabContainer-parameters.css

@@ -6,17 +6,33 @@
 	/* Header Item */
 	--_ui5_tc_headerItemContent_border_bottom: 0.1875rem solid var(--sapSelectedColor);
 	--_ui5_tc_headerItem_color: var(--sapTextColor);
-	--_ui5_tc_overflowItem_default_color: var(--sapHighlightColor);
+	--_ui5_tc_overflowItem_default_color: var(--sapTextColor);
 	--_ui5_tc_overflowItem_current_color: CurrentColor;
 	--_ui5_tc_content_border_bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
+	--_ui5_tc_headerItem_expand_button_margin_inline_start: 0rem;
+	--_ui5_tc_headerItem_single_click_expand_button_margin_inline_start: 0.25rem;
+	--_ui5_tc_headerItem_expand_button_border_radius: 0.25rem;
+	--_ui5_tc_headerItem_expand_button_separator_display: inline-block;
 
+	/* Focus & Hover */
+	--_ui5_tc_headerItem_focus_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_tc_headerItem_focus_border_offset: -5px;
 	--_ui5_tc_headerItemIcon_focus_border_radius: 50%;
-	--_ui5_tc_headerItem_focus_border_radius: 0.25rem;
+	--_ui5_tc_headerItem_focus_border_radius: 0.375rem;
 	--_ui5_tc_headeritem_text_font_weight: bold;
-	--_ui5_tc_headerItem_text_hover_color: var(--sapContent_Selected_ForegroundColor);
 	--_ui5_tc_headerItem_focus_offset: 1px;
+	--_ui5_tc_headerItem_text_hover_color: var(--sapContent_Selected_ForegroundColor);
 
 	/* Header Item icons */
-	--_ui5_tc_headerItemIcon_border: 0.125rem solid var(--sapHighlightColor);
+	--_ui5_tc_headerItemIcon_border: 0.125rem solid var(--sapContent_Selected_ForegroundColor);
+	--_ui5_tc_headerItemIcon_color: var(--sapContent_Selected_ForegroundColor);
+	--_ui5_tc_headerItemIcon_selected_background: var(--sapContent_Selected_ForegroundColor);
+	--_ui5_tc_headerItemIcon_background_color: var(--sapContent_Selected_Background);
+	--_ui5_tc_headerItemIcon_selected_color: var(--sapContent_ContrastIconColor);
+
+	/* Mixed Mode */
+	--_ui5_tc_mixedMode_itemText_color: var(--sapTextColor);
+
+	/* Overflow Buttons*/
+	--_ui5_tc_overflow_text_color: var(--sapTextColor);
 }

packages/main/src/themes/sap_horizon_exp/TabContainer-parameters.css

@@ -22,14 +22,10 @@
 	--_ui5_tc_headerItem_positive_border_bg: var(--_ui5_tc_headerItem_positive_color);
 	--_ui5_tc_headerItem_negative_border_bg: var(--_ui5_tc_headerItem_negative_color);
 	--_ui5_tc_headerItem_critical_border_bg: var(--_ui5_tc_headerItem_critical_color);
-	--_ui5_tc_headerItem_hover_border_bg: var(--sapTile_TitleTextColor); /* #475E75; */
-	--_ui5_tc_headerItem_hover_selected_hover_border_bg: var(--sapContent_Selected_TextColor); /* #0057D2; */
 	--_ui5_tc_headerItem_hover_border_visibility: visible;
 
 	--_ui5_tc_headerItemContent_border_height: 0.125rem;
-	--_ui5_tc_headerItemContent_offset: 0.25rem;
 	--_ui5_tc_headerItemContent_focus_offset: 0.25rem;
-	--_ui5_tc_headerItemContent_padding: 0.25rem 0.5rem;
 	--_ui5_tc_headerItemContent_focus_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_tc_headerItemContent_default_focus_border: 0.125rem solid transparent;
 	--_ui5_tc_headerItemContent_focus_border_radius: 0.5rem;