feat(ui5-side-navigation): add external link icon (#8199)

* feat(ui5-side-navigation): add external link icon if the navigation item is an external link, show the external link indicator * feat(ui5-side-navigation): add external link icon Address comments from code review. Expand icon is no longer missing * feat(ui5-side-navigation): add external link icon Address review comments * feat(ui5-side-navigation): add external link icon changed samples
SAP · Feb 13, 2024 · 47e28c5 · 47e28c5
1 parent ca7b46d
commit 47e28c5
Show file tree

Hide file tree

Showing 17 changed files with 172 additions and 110 deletions.
diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs
@@ -81,6 +81,11 @@
 						  name="navigation-right-arrow"
 				></ui5-icon>
 			{{/if}}
+			{{#if _isExternalLink}}
+				<ui5-icon class="ui5-sn-item-external-link-icon"
+						  name="arrow-right"
+				></ui5-icon>
+			{{/if}}
 		</a>
 	{{else}}
 		<div id="{{_id}}"
@@ -106,6 +111,11 @@
 						  name="navigation-right-arrow"
 				></ui5-icon>
 			{{/if}}
+			{{#if _isExternalLink}}
+				<ui5-icon class="ui5-sn-item-external-link-icon"
+						  name="arrow-right"
+				></ui5-icon>
+			{{/if}}
 		</div>
 	{{/if}}
 {{/inline}}
@@ -131,16 +141,21 @@
 				{{#if icon}}
 					<ui5-icon class="ui5-sn-item-icon" name="{{icon}}"></ui5-icon>
 				{{/if}}
-				<div class="ui5-sn-item-text">{{text}}</div>
-				<ui5-icon class="ui5-sn-item-selection-icon"
-						  name="circle-task-2"
-				></ui5-icon>
+					<div class="ui5-sn-item-text">{{text}}</div>
+					<ui5-icon class="ui5-sn-item-selection-icon"
+							  name="circle-task-2"
+					></ui5-icon>
 				{{#if items.length}}
 					<ui5-icon class="ui5-sn-item-toggle-icon"
 							  name="{{_toggleIconName}}"
 							  @click="{{_onToggleClick}}"
 					></ui5-icon>
 				{{/if}}
+				{{#if _isExternalLink}}
+					<ui5-icon class="ui5-sn-item-external-link-icon"
+							  name="arrow-right"
+					></ui5-icon>
+				{{/if}}
 			</a>
 		{{else}}
 			<div class="ui5-sn-item ui5-sn-item-level1 {{_classes}}"
@@ -169,6 +184,11 @@
 							  @click="{{_onToggleClick}}"
 					></ui5-icon>
 				{{/if}}
+				{{#if _isExternalLink}}
+					<ui5-icon class="ui5-sn-item-external-link-icon"
+							  name="arrow-right"
+					></ui5-icon>
+				{{/if}}
 			</div>
 		{{/if}}
 		{{#if items.length}}
@@ -200,6 +220,11 @@
 								<ui5-icon class="ui5-sn-item-selection-icon"
 										  name="circle-task-2"
 								></ui5-icon>
+								{{#if _isExternalLink}}
+									<ui5-icon class="ui5-sn-item-external-link-icon"
+											  name="arrow-right"
+									></ui5-icon>
+								{{/if}}
 							</a>
 						{{else}}
 							<div class="ui5-sn-item ui5-sn-item-level2 {{_classes}}"
@@ -248,5 +273,5 @@
 				>
 				</ui5-icon>
 				<div class="ui5-sn-item-text">{{overflowAccessibleName}}</div>
-			</div>	
+			</div>
 {{/inline}}
diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts
@@ -565,7 +565,7 @@ class SideNavigation extends UI5Element {
 		return selectedItem;
 	}
 
-	_handleItemClick(e: KeyboardEvent | PointerEvent, item: SideNavigationItemBase) {
+	_handleItemClick(e: KeyboardEvent | PointerEvent | CustomEvent<NavigationMenuClickEventDetail>, item: SideNavigationItemBase) {
 		if (item.selected && !this.collapsed) {
 			item.fireEvent("click");
 			return;

diff --git a/packages/fiori/src/SideNavigationItemBase.ts b/packages/fiori/src/SideNavigationItemBase.ts
@@ -165,6 +165,10 @@ class SideNavigationItemBase extends UI5Element implements ITabbable {
 		return this.forcedTabIndex;
 	}
 
+	get _isExternalLink() {
+		return this.href && this.target === "_blank";
+	}
+
 	get sideNavigation() : SideNavigation | undefined {
 		let parentElement = this.parentElement;
 

diff --git a/packages/fiori/src/SideNavigationPopover.hbs b/packages/fiori/src/SideNavigationPopover.hbs
@@ -1,16 +1,16 @@
 {{#if isOverflow}}
-<ui5-navigation-menu 
+<ui5-navigation-menu
 	id="{{_id}}-side-navigation-overflow-menu"
 	@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}}
-		<ui5-navigation-menu-item 
+		<ui5-navigation-menu-item
 			text="{{text}}"
 			icon="{{icon}}"
-			?disabled="{{disabled}}"			
+			?disabled="{{disabled}}"
 			expanded="true"
 			href="{{href}}"
 			target="{{target}}"

diff --git a/packages/fiori/src/themes/SideNavigation.css b/packages/fiori/src/themes/SideNavigation.css
@@ -215,13 +215,17 @@
 	min-width: var(--_ui5_side_navigation_group_icon_width);
 }
 
-.ui5-sn-item-toggle-icon {
+.ui5-sn-item-toggle-icon, .ui5-sn-item-external-link-icon {
 	color: var(--_ui5_side_navigation_expand_icon_color);
 	min-width: 2rem;
 	height: 0.875rem;
 }
 
-.ui5-sn-item-fixed .ui5-sn-item-toggle-icon {
+.ui5-sn-item-external-link-icon {
+	color: var(--_ui5_side_navigation_external_link_icon_color);
+}
+
+.ui5-sn-item-fixed .ui5-sn-item-toggle-icon, .ui5-sn-item-fixed .ui5-sn-item-external-link-icon {
 	display: none;
 }
 
@@ -237,7 +241,8 @@
 	display: none;
 }
 
-.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item-toggle-icon {
+.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item-toggle-icon,
+.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item-external-link-icon {
 	display: none;
 }
 
@@ -264,7 +269,9 @@
 }
 
 .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 {
+.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-external-link-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,
+.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-external-link-icon {
 	display: var(--_ui5_side_navigation_item_collapsed_hover_focus_display);
 }
 

diff --git a/packages/fiori/src/themes/base/SideNavigation-parameters.css b/packages/fiori/src/themes/base/SideNavigation-parameters.css
@@ -21,6 +21,7 @@
 	--_ui5_side_navigation_icon_color: var(--sapContent_IconColor);
 	--_ui5_side_navigation_icon_font_size: 1rem;
 	--_ui5_side_navigation_expand_icon_color: var(--sapContent_IconColor);
+	--_ui5_side_navigation_external_link_icon_color: var(--sapContent_LabelColor);
 	--_ui5_side_navigation_hover_border_style_color: none;
 	--_ui5_side_navigation_hover_border_width: 0;
 	--_ui5_side_navigation_group_border_style_color: solid var(--sapList_BorderColor);

diff --git a/packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css
@@ -22,6 +22,7 @@
 	--_ui5_side_navigation_icon_color: var(--sapList_TextColor);
 	--_ui5_side_navigation_icon_font_size: 1.125rem;
 	--_ui5_side_navigation_expand_icon_color: var(--sapList_TextColor);
+	--_ui5_side_navigation_external_link_icon_color: var(--sapContent_LabelColor);
 	--_ui5_side_navigation_group_border_style_color: none;
 	--_ui5_side_navigation_item_height: 2.5rem;
 	--_ui5_side_navigation_item_border_radius: 0.375rem;

diff --git a/packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css
@@ -22,6 +22,7 @@
 	--_ui5_side_navigation_icon_color: var(--sapList_TextColor);
 	--_ui5_side_navigation_icon_font_size: 1.125rem;
 	--_ui5_side_navigation_expand_icon_color: var(--sapList_TextColor);
+	--_ui5_side_navigation_external_link_icon_color: var(--sapContent_LabelColor);
 	--_ui5_side_navigation_group_border_style_color: none;
 	--_ui5_side_navigation_item_height: 2.5rem;
 	--_ui5_side_navigation_item_border_radius: 0.375rem;

diff --git a/packages/fiori/src/themes/sap_horizon_hcb/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/SideNavigation-parameters.css
@@ -17,6 +17,7 @@
 
 	--_ui5_side_navigation_icon_font_size: 1.125rem;
 	--_ui5_side_navigation_expand_icon_color: var(--sapContent_NonInteractiveIconColor);
+	--_ui5_side_navigation_external_link_icon_color: var(--sapContent_LabelColor);
 	--_ui5_side_navigation_item_height: 2.5rem;
 	--_ui5_side_navigation_item_bottom_margin: 0.25rem;
 	--_ui5_side_navigation_item_bottom_margin_compact: 0.5rem;

diff --git a/packages/fiori/src/themes/sap_horizon_hcw/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/SideNavigation-parameters.css
@@ -17,6 +17,7 @@
 
 	--_ui5_side_navigation_icon_font_size: 1.125rem;
 	--_ui5_side_navigation_expand_icon_color: var(--sapContent_NonInteractiveIconColor);
+	--_ui5_side_navigation_external_link_icon_color: var(--sapContent_LabelColor);
 	--_ui5_side_navigation_item_height: 2.5rem;
 	--_ui5_side_navigation_item_bottom_margin: 0.25rem;
 	--_ui5_side_navigation_item_bottom_margin_compact: 0.5rem;

diff --git a/packages/fiori/test/pages/SideNavigation.html b/packages/fiori/test/pages/SideNavigation.html
@@ -44,19 +44,25 @@
 			</ui5-side-navigation-item>
 			<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
 			<ui5-side-navigation-item text="Events.............................................................." icon="calendar" whole-item-toggleable>
-				<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
+				<ui5-side-navigation-sub-item text="Local" href="https://sap.com" target="_blank"></ui5-side-navigation-sub-item>
 				<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
 			</ui5-side-navigation-item>
-			<ui5-side-navigation-item id="item1" text="Home" icon="home" title="Home tooltip"></ui5-side-navigation-item>
-			<ui5-side-navigation-item id="item1" text="Home" icon="home" title="Home tooltip"></ui5-side-navigation-item>
-
+			<ui5-side-navigation-item id="externalLinkItem" text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-item>
+
+			<ui5-side-navigation-item id="item1" text="Home" icon="home" title="Home tooltip">
+				<ui5-side-navigation-sub-item text="Local" href="https://sap.com" target="_blank"></ui5-side-navigation-sub-item>
+				<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
+			</ui5-side-navigation-item>
+			<ui5-side-navigation-item disabled id="item1" text="Home" icon="home" title="Home tooltip"></ui5-side-navigation-item>
 
 			<!-- Fixed Items -->
 			<ui5-side-navigation-item id="fixedItem1" slot="fixedItems" text="Useful Links" icon="chain-link" title="Useful links tooltip">
 				<ui5-side-navigation-sub-item id="fixedItem11" text="Vacation Tool" title="Vacation Tool tooltip"></ui5-side-navigation-sub-item>
 				<ui5-side-navigation-sub-item id="fixedItem12" text="HR tool"></ui5-side-navigation-sub-item>
+				<ui5-side-navigation-sub-item text="External Link" href="https://sap.com" target="_blank"></ui5-side-navigation-sub-item>
 			</ui5-side-navigation-item>
 			<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
+			<ui5-side-navigation-item slot="fixedItems" text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-item>
 		</ui5-side-navigation>
 		<div class="inner-content">
 			<div>

diff --git a/packages/fiori/test/pages/SideNavigationOnly.html b/packages/fiori/test/pages/SideNavigationOnly.html
@@ -15,14 +15,15 @@
 								  href="#home"
 								  title="Home tooltip"></ui5-side-navigation-item>
 		<ui5-side-navigation-item text="People" href="#people" expanded icon="group">
-			<ui5-side-navigation-sub-item href="#disabled" disabled text="Disabled" icon="employee-approvals" title="From My Team tooltip"></ui5-side-navigation-sub-item>
+			<ui5-side-navigation-sub-item href="#disabled" disabled text="Disabled" title="From My Team tooltip"></ui5-side-navigation-sub-item>
 			<ui5-side-navigation-sub-item text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
 		</ui5-side-navigation-item>
 		<ui5-side-navigation-item href="#locations" text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
 		<ui5-side-navigation-item href="#events" expanded text="Events.............................................................." icon="calendar" whole-item-toggleable>
 			<ui5-side-navigation-sub-item href="#page1" target="_self" text="Local.............................................................."></ui5-side-navigation-sub-item>
 			<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
 		</ui5-side-navigation-item>
+		<ui5-side-navigation-item text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-item>
 		<ui5-side-navigation-item href="#locations" text="Locations" icon="locate-me"></ui5-side-navigation-item>
 		<ui5-side-navigation-item href="#locations" text="Locations" icon="locate-me"></ui5-side-navigation-item>
 		<ui5-side-navigation-item href="#locations" text="Locations" icon="locate-me"></ui5-side-navigation-item>
@@ -48,18 +49,21 @@
 		<ui5-side-navigation-item  disabled href="#locations" text="Locations" icon="tnt-v3/aggregator"></ui5-side-navigation-item>
 		<ui5-side-navigation-item href="#locations" text="Locations" icon="SAP-icons-v5/navigation-right-arrow"></ui5-side-navigation-item>
 		<ui5-side-navigation-item  text="Locations" icon="SAP-icons-v4/slim-arrow-up"></ui5-side-navigation-item>
-		<ui5-side-navigation-item  text="Locations" icon="SAP-icons-v4/favorite"></ui5-side-navigation-item>
-		<ui5-side-navigation-item  text="Locations" icon="SAP-icons-v4/less"></ui5-side-navigation-item>
+		<ui5-side-navigation-item disabled text="Locations" icon="SAP-icons-v4/favorite"></ui5-side-navigation-item>
+		<ui5-side-navigation-item disabled text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-item>
+		<ui5-side-navigation-item text="Locations" icon="SAP-icons-v4/less"></ui5-side-navigation-item>
 		<ui5-side-navigation-item href="#page1" target="_self" text="Locations" icon="group">
-			<ui5-side-navigation-sub-item icon="home" href="#page1" target="_self" text="Local.............................................................."></ui5-side-navigation-sub-item>
-			<ui5-side-navigation-sub-item icon="female" text="Others"></ui5-side-navigation-sub-item>
+			<ui5-side-navigation-sub-item href="#page1" target="_self" text="Local.............................................................."></ui5-side-navigation-sub-item>
+			<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
 		</ui5-side-navigation-item>
 		<!-- Fixed Items -->
 		<ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link" title="Useful links tooltip">
 			<ui5-side-navigation-sub-item text="Vacation Tool" title="Vacation Tool tooltip"></ui5-side-navigation-sub-item>
 			<ui5-side-navigation-sub-item text="HR tool"></ui5-side-navigation-sub-item>
+			<ui5-side-navigation-sub-item text="External Link" href="https://sap.com" target="_blank"></ui5-side-navigation-sub-item>
 		</ui5-side-navigation-item>
 		<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
+		<ui5-side-navigation-item text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-item>
 	</ui5-side-navigation>
 
 	<div style="float: right">

diff --git a/packages/fiori/test/specs/SideNavigation.spec.js b/packages/fiori/test/specs/SideNavigation.spec.js
@@ -265,5 +265,12 @@ describe("Component Behavior", () => {
 			assert.notOk(await overflowItem.isDisplayed(), "Overflow button should not be available");
 
 		});
+
+		it("Tests external link items", async () => {
+			const sideNavigation = await browser.$("#sn1");
+			const items = await sideNavigation.shadow$$(".ui5-sn-flexible .ui5-sn-item");
+
+			assert.ok(await items[4].$(".ui5-sn-item-external-link-icon").isExisting(), "External link icon is rendered");
+		});
 	});
 });