feat(ui5-side-navigation): display full item in collapsed mode on hov…

…er and focus (#8112)

* feat(ui5-side-navigation): display full item in collapsed mode on hover/selection

packages/fiori/src/SideNavigation.hbs

@@ -64,6 +64,9 @@
 		   @keyup="{{_onkeyup}}"
 		   @click="{{_onclick}}"
 		   @focusin="{{_onfocusin}}"
+		   @focusout="{{_onfocusout}}"
+		   @mouseenter="{{_onmouseenter}}"
+		   @mouseleave="{{_onmouseleave}}"
 		   tabindex="{{_effectiveTabIndex}}"
 		   aria-haspopup="{{_ariaHasPopup}}"
 		   aria-checked="{{selected}}"
@@ -73,6 +76,11 @@
 		>
 			<ui5-icon class="ui5-sn-item-icon" name="{{icon}}"></ui5-icon>
 			<div class="ui5-sn-item-text">{{text}}</div>
+			{{#if items.length}}
+				<ui5-icon class="ui5-sn-item-toggle-icon"
+						  name="navigation-right-arrow"
+				></ui5-icon>
+			{{/if}}
 		</a>
 	{{else}}
 		<div id="{{_id}}"
@@ -83,13 +91,21 @@
 			 @keyup="{{_onkeyup}}"
 			 @click="{{_onclick}}"
 			 @focusin="{{_onfocusin}}"
+			 @focusout="{{_onfocusout}}"
+			 @mouseenter="{{_onmouseenter}}"
+			 @mouseleave="{{_onmouseleave}}"
 			 tabindex="{{_effectiveTabIndex}}"
 			 aria-haspopup="{{_ariaHasPopup}}"
 			 aria-checked="{{selected}}"
 			 title="{{_tooltip}}"
 		>
 			<ui5-icon class="ui5-sn-item-icon" name="{{icon}}"></ui5-icon>
 			<div class="ui5-sn-item-text">{{text}}</div>
+			{{#if items.length}}
+				<ui5-icon class="ui5-sn-item-toggle-icon"
+						  name="navigation-right-arrow"
+				></ui5-icon>
+			{{/if}}
 		</div>
 	{{/if}}
 {{/inline}}
@@ -226,9 +242,11 @@
 				title="{{overflowAccessibleName}}"
 			>
 				<ui5-icon
-					class="ui5-sn-item-overflow-icon"
+					class="ui5-sn-item-icon"
+					accessible-role="presentation"
 					name="overflow"
 				>
 				</ui5-icon>
+				<div class="ui5-sn-item-text">{{overflowAccessibleName}}</div>
 			</div>	
 {{/inline}}

packages/fiori/src/SideNavigation.ts

@@ -226,7 +226,7 @@ class SideNavigation extends UI5Element {
 
 	_handleResizeBound: () => void;
 
-	async _onAfterOpen() {
+	async _onAfterPopoverOpen() {
 		// as the tree/list inside the popover is never destroyed,
 		// item navigation index should be managed, because items are
 		// dynamically recreated and tabIndexes are not updated
@@ -239,6 +239,33 @@ class SideNavigation extends UI5Element {
 		}
 	}
 
+	async _onAfterMenuClose() {
+		const selectedItem = this._findSelectedItem(this.items)!;
+
+		await renderFinished();
+		selectedItem.getDomRef().focus();
+	}
+
+	async _onBeforePopoverOpen() {
+		const popover = await this.getPicker();
+		(popover?.opener as HTMLElement)?.classList.add("ui5-sn-item-active");
+	}
+
+	async _onBeforePopoverClose() {
+		const popover = await this.getPicker();
+		(popover?.opener as HTMLElement)?.classList.remove("ui5-sn-item-active");
+	}
+
+	async _onBeforeMenuOpen() {
+		const popover = await this.getOverflowPopover();
+		(popover?.opener as HTMLElement)?.classList.add("ui5-sn-item-active");
+	}
+
+	async _onBeforeMenuClose() {
+		const popover = await this.getOverflowPopover();
+		(popover?.opener as HTMLElement)?.classList.remove("ui5-sn-item-active");
+	}
+
 	get accSideNavigationPopoverHiddenText() {
 		return SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_POPOVER_HIDDEN_TEXT);
 	}
@@ -256,7 +283,7 @@ class SideNavigation extends UI5Element {
 		return SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_OVERFLOW_ACCESSIBLE_NAME);
 	}
 
-	handlePopupItemClick(e: PopupClickEventDetail) {
+	async handlePopupItemClick(e: PopupClickEventDetail) {
 		const associatedItem = e.target.associatedItem;
 
 		associatedItem.fireEvent("click");
@@ -267,6 +294,9 @@ class SideNavigation extends UI5Element {
 
 		this._selectItem(associatedItem);
 		this.closePicker();
+
+		await renderFinished();
+		this._popoverContents.item.getDomRef().classList.add("ui5-sn-item-no-hover-effect");
 	}
 
 	handleOverflowItemClick(e: CustomEvent<NavigationMenuClickEventDetail>) {
@@ -300,14 +330,19 @@ class SideNavigation extends UI5Element {
 	}
 
 	async openPicker(opener: HTMLElement) {
+		opener.classList.add("ui5-sn-item-active");
+
 		const responsivePopover = await this.getPicker();
+		responsivePopover.opener = opener;
 		responsivePopover.showAt(opener);
 	}
 
 	async openOverflowMenu(opener: HTMLElement) {
+		opener.classList.add("ui5-sn-item-active");
+
 		const menu = await this.getOverflowPopover();
-		menu.showAt(opener);
 		menu.opener = opener;
+		menu.showAt(opener);
 	}
 
 	async closePicker() {
@@ -358,7 +393,7 @@ class SideNavigation extends UI5Element {
 		if (!this._overflowDom) {
 			return this.getEnabledItems(this.items);
 		}
-		this._overflowDom._tabIndex = "0";
+
 		return [...this.getEnabledItems(this.items), this._overflowDom];
 	}
 
@@ -574,13 +609,6 @@ class SideNavigation extends UI5Element {
 		return result;
 	}
 
-	async _afterMenuClose() {
-		const selectedItem = this._findSelectedItem(this.items)!;
-
-		await renderFinished();
-		selectedItem.getDomRef().focus();
-	}
-
 	_selectItem(item: SideNavigationItemBase) {
 		if (item.disabled) {
 			return;

packages/fiori/src/SideNavigationItem.ts

@@ -159,6 +159,30 @@ class SideNavigationItem extends SideNavigationItemBase {
 
 		super._onclick(e);
 	}
+
+	_onfocusout = () => {
+		if (!this.sideNavigation?.collapsed) {
+			return;
+		}
+
+		this.getDomRef().classList.remove("ui5-sn-item-no-hover-effect");
+	}
+
+	_onmouseenter = () => {
+		if (!this.sideNavigation?.collapsed) {
+			return;
+		}
+
+		this.getDomRef().classList.remove("ui5-sn-item-no-hover-effect");
+	}
+
+	_onmouseleave = () => {
+		if (!this.sideNavigation?.collapsed || !this._selected) {
+			return;
+		}
+
+		this.getDomRef().classList.add("ui5-sn-item-no-hover-effect");
+	}
 }
 
 SideNavigationItem.define();

packages/fiori/src/SideNavigationPopover.hbs

@@ -1,7 +1,9 @@
 {{#if isOverflow}}
 <ui5-navigation-menu 
 	id="{{_id}}-side-navigation-overflow-menu"
-	@ui5-after-close={{_afterMenuClose}}
+	@ui5-after-close={{_onAfterMenuClose}}
+	@ui5-before-open="{{_onBeforeMenuOpen}}"
+	@ui5-before-close="{{_onBeforeMenuClose}}"
 	@ui5-item-click="{{handleOverflowItemClick}}"
 	class="ui5-side-navigation-popover ui5-side-navigation-overflow-menu">
 	{{#each _menuPopoverItems}}
@@ -34,7 +36,9 @@
 	vertical-align="Top"
 	class="ui5-side-navigation-popover"
 	accessible-name-ref="{{_id}}-sideNavigationPopoverText"
-	@ui5-after-open="{{_onAfterOpen}}"
+	@ui5-after-open="{{_onAfterPopoverOpen}}"
+	@ui5-before-open="{{_onBeforePopoverOpen}}"
+	@ui5-before-close="{{_onBeforePopoverClose}}"
 >
 	<span id="{{_id}}-sideNavigationPopoverText" class="ui5-hidden-text">{{accSideNavigationPopoverHiddenText}}</span>
 		<ui5-side-navigation

packages/fiori/src/themes/SideNavigation.css

@@ -70,7 +70,7 @@
 }
 
 .ui5-sn-collapsed .ui5-sn-list {
-	overflow: hidden auto;
+	overflow: visible;
 	display: flex;
 	flex-direction: column;
 }
@@ -89,6 +89,8 @@
 	background-color: var(--sapList_Background);
 	border-radius: var(--_ui5_side_navigation_item_border_radius);
 	transition: var(--_ui5_side_navigation_item_transition);
+
+	margin-block-end: var(--_ui5_side_navigation_item_bottom_margin);
 }
 .ui5-sn-item-hidden {
 	display: none;
@@ -148,11 +150,13 @@
 	background: var(--sapList_SelectionBackgroundColor);
 }
 
-.ui5-sn-item:not(.ui5-sn-item-disabled):active .ui5-sn-item-text {
+.ui5-sn-item:not(.ui5-sn-item-disabled):active .ui5-sn-item-text,
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-active .ui5-sn-item-text {
 	color: var(--sapList_Active_TextColor);
 }
 
-.ui5-sn-item:not(.ui5-sn-item-disabled):active [ui5-icon] {
+.ui5-sn-item:not(.ui5-sn-item-disabled):active [ui5-icon],
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-active [ui5-icon] {
 	color: var(--sapList_Active_TextColor);
 }
 
@@ -161,8 +165,11 @@
 }
 
 .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:active,
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected.ui5-sn-item-active,
 .ui5-sn-item:not(.ui5-sn-item-disabled):active,
-.ui5-sn-collapsed .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:active {
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-active,
+.ui5-sn-collapsed .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:active,
+.ui5-sn-collapsed .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected.ui5-sn-item-active {
 	background: var(--sapList_Active_Background);
 }
 
@@ -198,10 +205,6 @@
 	border-radius: var(--_ui5_side_navigation_item_border_radius);
 }
 
-.ui5-sn-root:not(.ui5-sn-collapsed) .ui5-sn-item {
-	margin-block-end: var(--_ui5_side_navigation_item_bottom_margin);
-}
-
 .ui5-sn-in-popover .ui5-sn-item-group .ui5-sn-list-li:last-child .ui5-sn-item:not(:hover):not(:active)::before {
 	border: var(--_ui5_side_navigation_last_item_border_style);
 }
@@ -226,10 +229,45 @@
 	justify-content: center;
 }
 
+.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item-icon {
+	padding: var(--_ui5_side_navigation_item_collapsed_icon_padding);
+}
+
 .ui5-sn-collapsed .ui5-sn-list .ui5-sn-item-text {
 	display: none;
 }
 
+.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item-toggle-icon {
+	display: none;
+}
+
+.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover,
+.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus {
+	width: var(--_ui5_side_navigation_item_collapsed_hover_focus_width);
+	box-shadow: var(--_ui5_side_navigation_box_shadow);
+	z-index: 1;
+}
+
+.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item.ui5-sn-item-selected:hover,
+.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item.ui5-sn-item-selected:focus {
+	background: var(--sapList_SelectionBackgroundColor);
+}
+
+.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander),
+.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander) {
+	padding-right: var(--_ui5_side_navigation_item_collapsed_hover_focus_padding_right);
+}
+
+.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover .ui5-sn-item-text,
+.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-text {
+	display: var(--_ui5_side_navigation_item_collapsed_hover_focus_display);
+}
+
+.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover .ui5-sn-item-toggle-icon,
+.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-toggle-icon {
+	display: var(--_ui5_side_navigation_item_collapsed_hover_focus_display);
+}
+
 .ui5-sn-item[aria-expanded=false] + .ui5-sn-item-group {
 	display: none;
 }
@@ -243,6 +281,7 @@
 	min-width: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	white-space: nowrap;
 	color: var(--sapList_TextColor);
 }
 
@@ -308,8 +347,4 @@
 
 .ui5-sn-item.ui5-sn-item-level1.ui5-sn-item-overflow {
 	margin-top: auto;
-}
-
-.ui5-sn-item.ui5-sn-item-level1.ui5-sn-item-overflow .ui5-sn-item-overflow-icon {
-	color: var(--_ui5_side_navigation_icon_color);
 }

packages/fiori/src/themes/base/SideNavigation-parameters.css

@@ -62,6 +62,11 @@
 	--_ui5_side_navigation_popup_title_text_size: var(--sapFontSize);
 	--_ui5_side_navigation_popup_title_line_height: normal;
 	--_ui5_side_navigation_selection_indicator_display: none;
+
+	--_ui5_side_navigation_item_collapsed_icon_padding: 0;
+	--_ui5_side_navigation_item_collapsed_hover_focus_width: 100%;
+	--_ui5_side_navigation_item_collapsed_hover_focus_display: none;
+	--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 0;
 }
 
 [data-ui5-compact-size],

packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css

@@ -50,6 +50,11 @@
 	--_ui5_side_navigation_popup_title_text_size: 1.25rem;
 	--_ui5_side_navigation_popup_title_line_height: 1.5rem;
 	--_ui5_side_navigation_selection_indicator_display: inline-block;
+
+	--_ui5_side_navigation_item_collapsed_icon_padding: 0 0.25rem;
+	--_ui5_side_navigation_item_collapsed_hover_focus_width: fit-content;
+	--_ui5_side_navigation_item_collapsed_hover_focus_display: block;
+	--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;
 }
 
 [data-ui5-compact-size],
@@ -59,4 +64,6 @@
 	--_ui5_side_navigation_padding: var(--_ui5_side_navigation_padding_compact);
 	--_ui5_side_navigation_item_bottom_margin: var(--_ui5_side_navigation_item_bottom_margin_compact);
 	--_ui5_side_navigation_item_height: 2rem;
+	--_ui5_side_navigation_item_collapsed_icon_padding: 0;
+	--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 0.5rem;
 }

packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css

@@ -50,6 +50,11 @@
 	--_ui5_side_navigation_popup_title_text_size: 1.25rem;
 	--_ui5_side_navigation_popup_title_line_height: 1.5rem;
 	--_ui5_side_navigation_selection_indicator_display: inline-block;
+
+	--_ui5_side_navigation_item_collapsed_icon_padding: 0 0.25rem;
+	--_ui5_side_navigation_item_collapsed_hover_focus_width: fit-content;
+	--_ui5_side_navigation_item_collapsed_hover_focus_display: block;
+	--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;
 }
 
 [data-ui5-compact-size],
@@ -59,4 +64,6 @@
 	--_ui5_side_navigation_padding: var(--_ui5_side_navigation_padding_compact);
 	--_ui5_side_navigation_item_bottom_margin: var(--_ui5_side_navigation_item_bottom_margin_compact);
 	--_ui5_side_navigation_item_height: 2rem;
+	--_ui5_side_navigation_item_collapsed_icon_padding: 0;
+	--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 0.5rem;
 }