feat(ui5-side-navigation): visual design enhancements

- Added Separator line for actions on two-click items
- Increased height of Spacer from 8px to 10px to visually
distinguish navigation groups better
- Added --Button_BorderColor plus interaction borders to
Quick Create (ACC requirement, secondary button style)

Jira: BGSOFUIRODOPI-3403

packages/fiori/src/SideNavigationSelectableItemBase.ts

@@ -178,6 +178,10 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase {
 			classes.push("ui5-sn-item-selected");
 		}
 
+		if (this.unselectable) {
+			classes.push("ui5-sn-item-unselectable");
+		}
+
 		return classes;
 	}
 

packages/fiori/src/themes/NavigationMenuItem.css

@@ -48,7 +48,6 @@
 }
 
 .ui5-navigation-menu-item-root .ui5-sn-item-external-link-icon {
-	min-width: 2rem;
 	height: 0.875rem;
 }
 

packages/fiori/src/themes/SideNavigationItemBase.css

@@ -29,7 +29,34 @@
 }
 
 :host([design="Action"]) {
-	color: var(--sapButton_TextColor);
+	color:  var(--sapButton_TextColor);
+}
+
+:host([design="Action"]) .ui5-sn-item:not(.ui5-sn-item-disabled):active [ui5-icon],
+:host([design="Action"]) .ui5-sn-item:not(.ui5-sn-item-disabled):active .ui5-sn-item-text {
+	color: var(--_ui5_side_navigation_active_text_color);
+}
+
+:host([design="Action"]) .ui5-sn-item {
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
+	box-sizing: content-box;
+}
+
+:host([design="Action"]:not([side-nav-collapsed])) .ui5-sn-item {
+	max-width: -moz-available;
+	max-width: -webkit-fill-available;
+	max-width: fill-available;
+}
+
+
+:host([design="Action"]) .ui5-sn-item:hover {
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_Hover_BorderColor);
+	background: var(--sapButton_Hover_Background);
+}
+
+:host([design="Action"]) .ui5-sn-item:active {
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_Active_BorderColor);
+	background: var(--sapButton_Active_Background);
 }
 
 .ui5-sn-item:focus {
@@ -157,15 +184,29 @@ and there is an additional border that appears on hover. */
 :host([design="Action"]) .ui5-sn-item-external-link-icon {
 	color: var(--sapButton_TextColor);
 }
-
-:host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon,
 .ui5-sn-item-external-link-icon {
+	min-width: 3rem;
+}
+
+:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover .ui5-sn-item-toggle-icon,
+:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-toggle-icon,
+:host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon {
 	min-width: var(--_ui5_side_navigation_expand_icon_width);
+	padding-inline: 0.25rem 0.375rem;
+	padding-block: 0.25rem; /* height of the separator (the border left) should be --sapElement_Condensed_Heightwhich is equal to 1.375rem (22px) */
+	border-inline-start: 0.0625rem solid var(--sapTextColor);
+	margin-inline-start: 1rem;
+}
+
+:host(:not([side-nav-collapsed])) .ui5-sn-item-unselectable .ui5-sn-item-toggle-icon,
+:host(:not([side-nav-collapsed])) .ui5-sn-item-group .ui5-sn-item-toggle-icon,
+:host([side-nav-collapsed]) .ui5-sn-item.ui5-sn-item-unselectable:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover .ui5-sn-item-toggle-icon,
+:host([side-nav-collapsed]) .ui5-sn-item.ui5-sn-item-unselectable:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-toggle-icon {
+	border-inline-start: none;
 }
 
 :host([in-popover]) .ui5-sn-item-toggle-icon {
 	display: none;
-	min-width: var(--_ui5_side_navigation_expand_icon_width);
 }
 
 :host([side-nav-collapsed]) .ui5-sn-item {
@@ -203,13 +244,28 @@ and there is an additional border that appears on hover. */
 	padding-inline-end: var(--_ui5_side_navigation_item_collapsed_padding_right);
 }
 
+:host([side-nav-collapsed]) a.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander),
+:host([side-nav-collapsed]) a.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander) {
+	padding-inline-end: 0;
+}
+
+:host([side-nav-collapsed]) .ui5-sn-item.ui5-sn-item.ui5-sn-item-unselectable.ui5-sn-item-with-expander:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover,
+:host([side-nav-collapsed]) .ui5-sn-item.ui5-sn-item.ui5-sn-item-unselectable.ui5-sn-item-with-expander:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus {
+	padding-inline-end: var(--_ui5_side_navigation_item_collapsed_unselectable_padding);
+}
+
+:host([side-nav-collapsed]) div.ui5-sn-item.ui5-sn-item-unselectable:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):not(.ui5-sn-item-with-expander):hover,
+:host([side-nav-collapsed]) div.ui5-sn-item.ui5-sn-item-unselectable:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):not(.ui5-sn-item-with-expander):focus {
+	padding-inline-end: var(--_ui5_side_navigation_action_item_collapsed_padding);
+}
+
 :host([side-nav-collapsed]) .ui5-sn-item.ui5-sn-item-selected:hover,
 :host([side-nav-collapsed]) .ui5-sn-item.ui5-sn-item-selected:focus {
 	background: var(--sapList_SelectionBackgroundColor);
 }
 
-:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander),
-:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander) {
+:host([side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander),
+:host([side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander) {
 	padding-inline-end: var(--_ui5_side_navigation_item_collapsed_hover_focus_padding_right);
 }
 
@@ -253,5 +309,5 @@ and there is an additional border that appears on hover. */
 }
 
 .ui5-sn-item-separator {
-	min-height: 0.5rem;
+	min-height: 0.625rem;
 }

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

@@ -19,6 +19,7 @@
 	--_ui5_side_navigation_icon_color: var(--sapContent_IconColor);
 	--_ui5_side_navigation_expand_icon_color: var(--sapContent_IconColor);
 	--_ui5_side_navigation_expand_icon_width: 2rem;
+	--_ui5_side_navigation_external_link_width: 3rem;
 	--_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);
@@ -68,10 +69,13 @@
 	--_ui5_side_navigation_item_collapsed_hover_focus_display: none;
 	--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 0;
 	--_ui5_side_navigation_item_collapsed_padding_right: 0;
+	--_ui5_side_navigation_action_item_collapsed_padding: 0;
+	--_ui5_side_navigation_item_collapsed_unselectable_padding: 0;
 
 	--_ui5_side_navigation_item_expand_icon_right: -0.5rem;
 	--_ui5_side_navigation_item_expand_icon_hover_left: auto;
 	--_ui5_side_navigation_item_expand_icon_hover_right: 0;
+	--_ui5_side_navigation_active_text_color: var(--sapList_Active_TextColor);
 }
 
 [data-ui5-compact-size],

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

@@ -17,7 +17,8 @@
 
 	--_ui5_side_navigation_icon_color: var(--sapList_TextColor);
 	--_ui5_side_navigation_expand_icon_color: var(--sapList_TextColor);
-	--_ui5_side_navigation_expand_icon_width: 3rem;
+	--_ui5_side_navigation_expand_icon_width: 2.25rem;
+	--_ui5_side_navigation_external_link_width: 3rem;
 	--_ui5_side_navigation_group_border_style_color: none;
 	--_ui5_side_navigation_item_border_radius: 0.375rem;
 	--_ui5_side_navigation_item_bottom_margin: 0.25rem;
@@ -47,12 +48,15 @@
 	--_ui5_side_navigation_popup_title_line_height: 1.5rem;
 	--_ui5_side_navigation_selection_indicator_display: inline-block;
 	--_ui5_side_navigation_first_fixed_item_margin_top: 0.125rem;
+	--_ui5_side_navigation_active_text_color: var(--sapButton_TextColor);
 
 	--_ui5_side_navigation_item_expand_icon_visibility: block;
 	--_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: 2rem;
-	--_ui5_side_navigation_item_collapsed_padding_right: 2rem;
+	--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;
+	--_ui5_side_navigation_item_collapsed_padding_right: 3.9375rem;
+	--_ui5_side_navigation_action_item_collapsed_padding: 1rem;
+	--_ui5_side_navigation_item_collapsed_unselectable_padding: 3rem;
 }
 
 [data-ui5-compact-size],

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

@@ -17,7 +17,8 @@
 
 	--_ui5_side_navigation_icon_color: var(--sapList_TextColor);
 	--_ui5_side_navigation_expand_icon_color: var(--sapList_TextColor);
-	--_ui5_side_navigation_expand_icon_width: 3rem;
+	--_ui5_side_navigation_expand_icon_width: 2.25rem;
+	--_ui5_side_navigation_external_link_width: 3rem;
 	--_ui5_side_navigation_group_border_style_color: none;
 	--_ui5_side_navigation_item_border_radius: 0.375rem;
 	--_ui5_side_navigation_item_bottom_margin: 0.25rem;
@@ -47,12 +48,15 @@
 	--_ui5_side_navigation_popup_title_line_height: 1.5rem;
 	--_ui5_side_navigation_selection_indicator_display: inline-block;
 	--_ui5_side_navigation_first_fixed_item_margin_top: 0.125rem;
+	--_ui5_side_navigation_active_text_color: var(--sapButton_TextColor);
 
 	--_ui5_side_navigation_item_expand_icon_visibility: block;
 	--_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: 2rem;
-	--_ui5_side_navigation_item_collapsed_padding_right: 2rem;
+	--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;
+	--_ui5_side_navigation_item_collapsed_padding_right: 3.9375rem;
+	--_ui5_side_navigation_action_item_collapsed_padding: 1rem;
+	--_ui5_side_navigation_item_collapsed_unselectable_padding: 3rem;
 }
 
 [data-ui5-compact-size],

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

@@ -13,7 +13,8 @@
 	--_ui5_side_navigation_phone_width: 100% !important;
 
 	--_ui5_side_navigation_expand_icon_color: var(--sapContent_NonInteractiveIconColor);
-	--_ui5_side_navigation_expand_icon_width: 3rem;
+	--_ui5_side_navigation_expand_icon_width: 2.25rem;
+	--_ui5_side_navigation_external_link_width: 3rem;
 	--_ui5_side_navigation_item_bottom_margin: 0.25rem;
 	--_ui5_side_navigation_item_focus_border_offset: 0;
 	--_ui5_side_navigation_item_border_style_color: solid var(--sapList_BorderColor);
@@ -43,12 +44,15 @@
 	--_ui5_side_navigation_popup_title_line_height: 1.5rem;
 	--_ui5_side_navigation_selection_indicator_display: block;
 	--_ui5_side_navigation_first_fixed_item_margin_top: 0.125rem;
+	--_ui5_side_navigation_active_text_color: var(--sapButton_TextColor);
 
 	--_ui5_side_navigation_item_expand_icon_visibility: block;
 	--_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: 2rem;
-	--_ui5_side_navigation_item_collapsed_padding_right: 2rem;
+	--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;
+	--_ui5_side_navigation_item_collapsed_padding_right: 3.9375rem;
+	--_ui5_side_navigation_action_item_collapsed_padding: 1rem;
+	--_ui5_side_navigation_item_collapsed_unselectable_padding: 3rem;
 }
 
 [data-ui5-compact-size],

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

@@ -13,7 +13,8 @@
 	--_ui5_side_navigation_phone_width: 100% !important;
 
 	--_ui5_side_navigation_expand_icon_color: var(--sapContent_NonInteractiveIconColor);
-	--_ui5_side_navigation_expand_icon_width: 3rem;
+	--_ui5_side_navigation_expand_icon_width: 2.25rem;
+	--_ui5_side_navigation_external_link_width: 3rem;
 	--_ui5_side_navigation_item_bottom_margin: 0.25rem;
 	--_ui5_side_navigation_item_focus_border_offset: 0;
 	--_ui5_side_navigation_item_border_style_color: solid var(--sapList_BorderColor);
@@ -43,12 +44,15 @@
 	--_ui5_side_navigation_popup_title_line_height: 1.5rem;
 	--_ui5_side_navigation_selection_indicator_display: block;
 	--_ui5_side_navigation_first_fixed_item_margin_top: 0.125rem;
+	--_ui5_side_navigation_active_text_color: var(--sapButton_TextColor);
 
 	--_ui5_side_navigation_item_expand_icon_visibility: block;
 	--_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: 2rem;
-	--_ui5_side_navigation_item_collapsed_padding_right: 2rem;
+	--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;
+	--_ui5_side_navigation_item_collapsed_padding_right: 3.9375rem;
+	--_ui5_side_navigation_action_item_collapsed_padding: 1rem;
+	--_ui5_side_navigation_item_collapsed_unselectable_padding: 3rem;
 }
 
 [data-ui5-compact-size],

packages/fiori/test/pages/SideNavigationWithGroups.html

@@ -23,6 +23,10 @@
 				<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 text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
 			</ui5-side-navigation-item>
+			<ui5-side-navigation-item text="People unselectable" href="#people" expanded unselectable 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 text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
+			</ui5-side-navigation-item>
 		</ui5-side-navigation-group>
 		<ui5-side-navigation-item href="#locations" text="Locations" icon="locate-me" ></ui5-side-navigation-item>
 		<ui5-side-navigation-item href="#events" expanded text="Events.............................................................." icon="calendar">
@@ -79,6 +83,7 @@
 			<ui5-side-navigation-sub-item icon="female" text="Others"></ui5-side-navigation-sub-item>
 		</ui5-side-navigation-item>
 		<!-- Fixed Items -->
+		<ui5-side-navigation-item slot="fixedItems" text="Quick Create" icon="write-new" design="Action" unselectable id="quickCreate"></ui5-side-navigation-item>
 		<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>