feat(ui5-side-navigation): update existing design for Horizon theme (#…

…10337)

This redesign is related to Visual Alignment UXC 026

Jira: BGSOFUIRODOPI-3342

packages/fiori/src/SideNavigation.ts

@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
 import type NavigationMenu from "@ui5/webcomponents/dist/NavigationMenu.js";
@@ -114,7 +115,7 @@ type NavigationMenuClickEventDetail = MenuItemClickEventDetail & {
 	fastNavigation: true,
 	renderer: jsxRender,
 	template: SideNavigationTemplate,
-	styles: [SideNavigationCss, SideNavigationPopoverCss],
+	styles: [SideNavigationCss, SideNavigationPopoverCss, getEffectiveScrollbarStyle()],
 })
 /**
  * Fired when the selection has changed via user interaction

packages/fiori/src/SideNavigationItemTemplate.tsx

@@ -1,7 +1,6 @@
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import navRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
 import navDownArrow from "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
-import circleTask from "@ui5/webcomponents-icons/dist/circle-task-2.js";
 import arrowRight from "@ui5/webcomponents-icons/dist/arrow-right.js";
 import type SideNavigationItem from "./SideNavigationItem.js";
 
@@ -104,9 +103,6 @@ function TreeItemTemplate(this: SideNavigationItem) {
 					<Icon class="ui5-sn-item-icon" name={this.icon}/>
 					}
 					<div class="ui5-sn-item-text">{this.text}</div>
-					<Icon class="ui5-sn-item-selection-icon"
-						name={circleTask}
-					/>
 					{this.isExternalLink &&
 					<Icon class="ui5-sn-item-external-link-icon"
 						name={arrowRight}
@@ -139,9 +135,6 @@ function TreeItemTemplate(this: SideNavigationItem) {
 					<Icon class="ui5-sn-item-icon" name={this.icon}/>
 					}
 					<div class="ui5-sn-item-text">{this.text}</div>
-					<Icon class="ui5-sn-item-selection-icon"
-						name={circleTask}
-					/>
 					{this.isExternalLink &&
 					<Icon class="ui5-sn-item-external-link-icon"
 						name={arrowRight}

packages/fiori/src/SideNavigationSubItem.ts

@@ -45,6 +45,16 @@ class SideNavigationSubItem extends SideNavigationSelectableItemBase {
 	_onclick(e: MouseEvent) {
 		super._onclick(e);
 	}
+
+	get classesArray() {
+		const classes = super.classesArray;
+
+		if (this.icon) {
+			classes.push("ui5-sn-item-has-icon");
+		}
+
+		return classes;
+	}
 }
 
 SideNavigationSubItem.define();

packages/fiori/src/SideNavigationSubItemTemplate.tsx

@@ -1,5 +1,4 @@
 import Icon from "@ui5/webcomponents/dist/Icon.js";
-import circleTask from "@ui5/webcomponents-icons/dist/circle-task-2.js";
 import arrowRight from "@ui5/webcomponents-icons/dist/arrow-right.js";
 import type SideNavigationSubItem from "./SideNavigationSubItem.js";
 
@@ -29,9 +28,6 @@ export default function SideNavigationSubItemTemplate(this: SideNavigationSubIte
 						<Icon class="ui5-sn-item-icon" name={this.icon}/>
 					}
 					<div class="ui5-sn-item-text">{this.text}</div>
-					<Icon class="ui5-sn-item-selection-icon"
-						name={circleTask}
-					/>
 					{this.isExternalLink &&
 						<Icon class="ui5-sn-item-external-link-icon"
 							name={arrowRight}
@@ -55,9 +51,6 @@ export default function SideNavigationSubItemTemplate(this: SideNavigationSubIte
 						<Icon class="ui5-sn-item-icon" name={this.icon}/>
 					}
 					<div class="ui5-sn-item-text">{this.text}</div>
-					<Icon class="ui5-sn-item-selection-icon"
-						name={circleTask}
-					/>
 					{this.isExternalLink &&
 						<Icon class="ui5-sn-item-external-link-icon"
 							name={arrowRight}

packages/fiori/src/themes/SideNavigation.css

@@ -1,3 +1,5 @@
+@import "./SideNavigationGroup.css";
+
 :host(:not([hidden])) {
 	display: inline-block;
 	height: 100%;
@@ -25,18 +27,6 @@
 	border-inline-end: var(--_ui5_side_navigation_border_right);
 }
 
-.ui5-sn-spacer {
-	margin: var(--_ui5_side_navigation_navigation_separator_margin);
-	height: var(--_ui5_side_navigation_navigation_separator_height);
-	min-height: var(--_ui5_side_navigation_navigation_separator_height);
-	background-color: var(--_ui5_side_navigation_navigation_separator_background_color);
-	border-radius: var(--_ui5_side_navigation_navigation_separator_radius);
-}
-
-.ui5-sn-collapsed .ui5-sn-spacer {
-	margin: var(--_ui5_side_navigation_navigation_separator_margin_collapsed);
-}
-
 .ui5-sn-flexible {
 	display: flex;
 	flex-direction: column;
@@ -52,12 +42,19 @@
 
 .ui5-sn-list {
 	margin: 0;
-	padding: var(--_ui5_side_navigation_padding);
 	list-style: none;
 	box-sizing: border-box;
 	overflow: hidden auto;
 }
 
+.ui5-sn-list.ui5-sn-flexible {
+	padding: var(--_ui5_side_navigation_padding-flexible);
+}
+
+.ui5-sn-list.ui5-sn-fixed {
+	padding: var(--_ui5_side_navigation_padding-fixed);
+}
+
 .ui5-sn-collapsed .ui5-sn-list {
 	overflow: visible;
 	display: flex;

packages/fiori/src/themes/SideNavigationGroup.css

@@ -7,14 +7,11 @@
 }
 
 .ui5-sn-item.ui5-sn-item-group {
-	height: 2rem;
 	min-height: 2rem;
-	padding-inline-start: 0.5rem;
+	padding-inline-start: var(--_ui5_side_navigation_group_padding);;
 	gap: 0.4375rem;
-}
-
-.ui5-sn-item.ui5-sn-item-group .ui5-sn-item-toggle-icon {
-	display: none;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
 }
 
 .ui5-sn-item.ui5-sn-item-group:hover .ui5-sn-item-toggle-icon,
@@ -27,4 +24,16 @@
 .ui5-sn-item-group-below-group.ui5-sn-item-separator,
 .ui5-sn-item-group-below-group .ui5-sn-item-separator:first-child {
 	display: none;
-}
+}
+
+.ui5-sn-spacer {
+	margin: var(--_ui5_side_navigation_navigation_separator_margin);
+	height: var(--_ui5_side_navigation_navigation_separator_height);
+	min-height: var(--_ui5_side_navigation_navigation_separator_height);
+	background-color: var(--_ui5_side_navigation_navigation_separator_background_color);
+	border-radius: var(--_ui5_side_navigation_navigation_separator_radius);
+}
+
+.ui5-sn-collapsed .ui5-sn-spacer {
+	margin: var(--_ui5_side_navigation_navigation_separator_margin_collapsed);
+}

packages/fiori/src/themes/SideNavigationItemBase.css

@@ -79,7 +79,7 @@ and there is an additional border that appears on hover. */
 }
 
 .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected {
-	background: var(--sapList_SelectionBackgroundColor);
+	background: var(--_ui5_side_navigation_collapsed_selected_item_background);
 }
 
 .ui5-sn-item:not(.ui5-sn-item-disabled):active .ui5-sn-item-text,
@@ -93,7 +93,7 @@ and there is an additional border that appears on hover. */
 }
 
 .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:hover {
-	background: var(--sapList_Hover_SelectionBackground);
+	background: var(--_ui5_side_navigation_collapsed_selected_item_background_hover);
 }
 
 .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:active,
@@ -105,10 +105,6 @@ and there is an additional border that appears on hover. */
 	background: var(--sapList_Active_Background);
 }
 
-:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected {
-	background: var(--_ui5_side_navigation_collapsed_selected_item_background);
-}
-
 .ui5-sn-item::before {
 	border: var(--_ui5_side_navigation_item_border_style_color);
 	border-width: var(--_ui5_side_navigation_item_border_width);
@@ -138,8 +134,8 @@ and there is an additional border that appears on hover. */
 
 .ui5-sn-item-icon {
 	color: var(--_ui5_side_navigation_icon_color);
-	height: var(--_ui5_side_navigation_icon_font_size);
-	min-width: var(--_ui5_side_navigation_group_icon_width);
+	padding-inline-start: 1rem;
+	padding-inline-end: var(--_ui5_side_navigation_icon_padding_inline_end);
 }
 
 .ui5-sn-item-toggle-icon,
@@ -149,28 +145,39 @@ and there is an additional border that appears on hover. */
 	height: 0.875rem;
 }
 
+:host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon,
 .ui5-sn-item-external-link-icon {
-	color: var(--_ui5_side_navigation_external_link_icon_color);
+	min-width: var(--_ui5_side_navigation_expand_icon_width);
 }
 
-.ui5-sn-item-fixed .ui5-sn-item-toggle-icon,
-.ui5-sn-item-fixed .ui5-sn-item-external-link-icon {
+: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 {
 	justify-content: center;
 }
 
+:host([slot="fixedItems"]:not(side-nav-collapsed)) .ui5-sn-item.ui5-sn-item-level1 {
+	margin-top: var(--_ui5_side_navigation_first_fixed_item_margin_top); /* space for the focus*/
+ }
+
 :host([side-nav-collapsed]) .ui5-sn-item-icon {
-	padding: var(--_ui5_side_navigation_item_collapsed_icon_padding);
+	padding-inline-end: 1rem;
 }
 
 :host([side-nav-collapsed]) .ui5-sn-item-text {
 	display: none;
 }
 
-:host([side-nav-collapsed]) .ui5-sn-item-toggle-icon,
+ :host([side-nav-collapsed]) .ui5-sn-item-toggle-icon {
+	display: var(--_ui5_side_navigation_item_expand_icon_visibility);
+	font-size: 0.75rem;
+	position: absolute;
+	inset-inline-end: var(--_ui5_side_navigation_item_expand_icon_right);
+}
+
 :host([side-nav-collapsed]) .ui5-sn-item-external-link-icon {
 	display: none;
 }
@@ -180,6 +187,7 @@ and there is an additional border that appears on hover. */
 	width: var(--_ui5_side_navigation_item_collapsed_hover_focus_width);
 	box-shadow: var(--_ui5_side_navigation_box_shadow);
 	z-index: 1;
+	padding-inline-end: var(--_ui5_side_navigation_item_collapsed_padding_right);
 }
 
 :host([side-nav-collapsed]) .ui5-sn-item.ui5-sn-item-selected:hover,
@@ -203,10 +211,11 @@ and there is an additional border that appears on hover. */
 
 :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 {
-	display: var(--_ui5_side_navigation_item_collapsed_hover_focus_display);
+	left: var(--_ui5_side_navigation_item_expand_icon_hover_left);
+	right: var(--_ui5_side_navigation_item_expand_icon_hover_right);
 }
 
-.ui5-sn-item[aria-expanded=false] + .ui5-sn-item-ul {
+.ui5-sn-item[aria-expanded=false] ~  .ui5-sn-item-ul {
 	display: none;
 }
 
@@ -230,27 +239,6 @@ and there is an additional border that appears on hover. */
 	bottom: 0.125rem;
 }
 
-.ui5-sn-item-selection-icon {
-	display: none;
-	height: 0.5rem;
-	width: 0.5rem;
-	margin-inline: 0.5rem;
-	color: var(--sapList_SelectionBorderColor);
-}
-
-.ui5-sn-item[aria-expanded] .ui5-sn-item-selection-icon {
-	margin-inline: 0.5rem 0;
-}
-
-.ui5-sn-item-selected .ui5-sn-item-selection-icon {
-	display: var(--_ui5_side_navigation_selection_indicator_display);
-}
-
-:host([in-popover]) .ui5-sn-item {
-	padding: var(--_ui5_side_navigation_popup_item_padding);
-	width: auto;
-}
-
 .ui5-sn-item-separator {
-	min-height: 0.75rem;
+	min-height: 0.5rem;
 }

packages/fiori/src/themes/SideNavigationSubItem.css

@@ -7,7 +7,7 @@
 	font-weight: normal;
 }
 
-.ui5-sn-item-level2 {
+.ui5-sn-item-level2:not(.ui5-sn-item-has-icon) {
 	padding-inline-start: var(--_ui5_side_navigation_group_icon_width);
 }
 

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

@@ -17,9 +17,8 @@
 
 
 	--_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_expand_icon_width: 2rem;
 	--_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);
@@ -30,14 +29,14 @@
 	--_ui5_side_navigation_last_item_border_style_color: none;
 	--_ui5_side_navigation_item_border_radius: 0;
 	--_ui5_side_navigation_item_bottom_margin: 0;
-	--_ui5_side_navigation_item_bottom_margin_compact: 0;
 	--_ui5_side_navigation_item_transition: none;
 	--_ui5_side_navigation_item_padding_left: 0.5rem;
 	--_ui5_side_navigation_no_icons_group_padding: 1rem;
 	--_ui5_side_navigation_no_icons_nested_item_padding: 1rem;
 	--_ui5_side_navigation_item_focus_border_offset: 1px;
 	--_ui5_side_navigation_item_focus_border_radius: var(--_ui5_side_navigation_item_border_radius);
 	--_ui5_side_navigation_collapsed_selected_item_background: 0 100% / 100% 0.0625rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_SelectionBackgroundColor);
+	--_ui5_side_navigation_collapsed_selected_item_background_hover: 0 100% / 100% 0.0625rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_Hover_SelectionBackground);
 	--_ui5_side_navigation_selected_item_border_color: var(--sapList_SelectionBorderColor);
 	--_ui5_side_navigation_selected_border_style_color: solid var(--_ui5_side_navigation_selected_item_border_color);
 	--_ui5_side_navigation_selected_and_focused_border_style_color: var(--_ui5_side_navigation_selected_border_style_color);
@@ -46,11 +45,13 @@
 	--_ui5_side_navigation_collapsed_selected_group_border_color: var(--_ui5_side_navigation_selected_item_border_color);
 	--_ui5_side_navigation_group_expanded_border_width: 0;
 	--_ui5_side_navigation_group_icon_width: var(--_ui5_side_navigation_collapsed_width);
+	--_ui5_side_navigation_icon_padding_inline_end: 1rem;
 	--_ui5_side_navigation_group_bottom_border_color: var(--sapList_BorderColor);
 	--_ui5_side_navigation_group_text_weight: unset;
 	--_ui5_side_navigation_group_bottom_margin_in_popup: 0;
-	--_ui5_side_navigation_padding: 0;
-	--_ui5_side_navigation_padding_compact: 0;
+	--_ui5_side_navigation_group_padding: 0.5rem;
+	--_ui5_side_navigation_padding-flexible: 0;
+	--_ui5_side_navigation_padding-fixed: 0;
 	--_ui5_side_navigation_parent_popup_padding: 0;
 	--_ui5_side_navigation_parent_popup_border_radius: var(--sapPopover_BorderCornerRadius);
 	--_ui5_side_navigation_popup_item_padding: 0 1rem;
@@ -60,18 +61,27 @@
 	--_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_first_fixed_item_margin_top: 0;
 
-	--_ui5_side_navigation_item_collapsed_icon_padding: 0;
+	--_ui5_side_navigation_item_expand_icon_visibility: none;
 	--_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;
+	--_ui5_side_navigation_item_collapsed_padding_right: 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;
 }
 
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
 	--_ui5_side_navigation_navigation_separator_margin: var(--_ui5_side_navigation_navigation_separator_margin_collapsed);
-	--_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;
+}
+
+[dir="rtl"] {
+	--_ui5_side_navigation_item_expand_icon_hover_left: 0;
+	--_ui5_side_navigation_item_expand_icon_hover_right: auto;
 }