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

changed samples
SAP · Feb 12, 2024 · 689039e · 689039e
1 parent 620f229
commit 689039e
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 19 deletions.
diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs
@@ -73,7 +73,6 @@
 		   title="{{_tooltip}}"
 		   href="{{_href}}"
 		   target="{{_target}}"
-		   externalLink="{{_isExternalLink}}"
 		>
 			<ui5-icon class="ui5-sn-item-icon" name="{{icon}}"></ui5-icon>
 			<div class="ui5-sn-item-text">{{text}}</div>
@@ -138,7 +137,6 @@
 			   aria-owns="{{_groupId}}"
 			   href="{{_href}}"
 			   target="{{_target}}"
-			   externalLink="{{_isExternalLink}}"
 			>
 				{{#if icon}}
 					<ui5-icon class="ui5-sn-item-icon" name="{{icon}}"></ui5-icon>

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
@@ -115,9 +115,6 @@ class SideNavigationItemBase extends UI5Element implements ITabbable {
 	@property({ defaultValue: "-1", noAttribute: true })
 	_tabIndex!: string;
 
-	@property({ type: Boolean })
-	_externalLink!: boolean;
-
 	get _tooltip() {
 		return this.title || this.text;
 	}

diff --git a/packages/fiori/src/themes/SideNavigation.css b/packages/fiori/src/themes/SideNavigation.css
@@ -216,11 +216,14 @@
 }
 
 .ui5-sn-item-toggle-icon, .ui5-sn-item-external-link-icon {
-	color: var(--_ui5_side_navigation_external_link_icon_color);
+	color: var(--_ui5_side_navigation_expand_icon_color);
 	min-width: 2rem;
 	height: 0.875rem;
 }
 
+.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;

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,7 +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_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,13 +44,13 @@
 			</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 icon="chain-link" text="Local" href="https://sap.com" target="_blank"></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="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 icon="chain-link" text="Local" href="https://sap.com" target="_blank"></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 disabled id="item1" text="Home" icon="home" title="Home tooltip"></ui5-side-navigation-item>
@@ -59,7 +59,7 @@
 			<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" icon="chain-link" href="https://sap.com" target="_blank"></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>

diff --git a/packages/fiori/test/pages/SideNavigationOnly.html b/packages/fiori/test/pages/SideNavigationOnly.html
@@ -15,7 +15,7 @@
 								  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>
@@ -53,14 +53,14 @@
 		<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" icon="chain-link" href="https://sap.com" target="_blank"></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>

diff --git a/packages/playground/_stories/fiori/SideNavigation/SideNavigation.stories.ts b/packages/playground/_stories/fiori/SideNavigation/SideNavigation.stories.ts
@@ -54,12 +54,12 @@ Basic.args = {
 	<ui5-side-navigation-item text="Locations" disabled icon="locate-me" selected></ui5-side-navigation-item>
 	<ui5-side-navigation-item text="Events" icon="calendar">
 		<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
-		<ui5-side-navigation-sub-item text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></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-sub-item text="Others"></ui5-side-navigation-sub-item>
 	</ui5-side-navigation-item>`,
 	fixedItems: `<ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link"></ui5-side-navigation-item>
 	<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
-	<ui5-side-navigation-sub-item text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-sub-item>`,
+	<ui5-side-navigation-sub-item text="External Link" href="https://sap.com" target="_blank"></ui5-side-navigation-sub-item>`,
 };
 Basic.decorators = [setHeight];
 Basic.parameters = {
@@ -83,7 +83,7 @@ ToolLayout.args = {
 	<ui5-side-navigation-item text="Events" icon="calendar">
 		<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
 		<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
-		<ui5-side-navigation-sub-item text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></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 text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-item>`,
 	fixedItems: `<ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link"></ui5-side-navigation-item>

diff --git a/...ound/_stories/fiori/SideNavigation/SideNavigationSubItem/SideNavigationSubItem.stories.ts b/...ound/_stories/fiori/SideNavigation/SideNavigationSubItem/SideNavigationSubItem.stories.ts
@@ -28,7 +28,6 @@ const Template: UI5StoryArgs<SideNavigationSubItem, StoryArgsSlots> = (args) =>
 	<ui5-side-navigation-item text="Events" icon="calendar" expanded>
 		<ui5-side-navigation-sub-item
 			text="${ifDefined(args.text)}"
-			icon="${ifDefined(args.icon)}"
 			href="${ifDefined(args.href)}"
 			?selected="${ifDefined(args.selected)}"
 			target="${ifDefined(args.target)}"