feat(ui5-side-navigation): make items customizable (#8479)

* feat(ui5-side-navigation): make items customizable

* feat(ui5-side-navigation): make items customizable

* feat(ui5-side-navigation): fix wording

packages/fiori/src/SideNavigationGroup.ts

@@ -21,7 +21,7 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
-import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js";
+import SideNavigationGroupCss from "./generated/themes/SideNavigationGroup.css.js";
 
 /**
  * @class
@@ -45,7 +45,7 @@ import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js"
 	tag: "ui5-side-navigation-group",
 	renderer: litRender,
 	template: SideNavigationGroupTemplate,
-	styles: SideNavigationItemCss,
+	styles: SideNavigationGroupCss,
 	dependencies: [
 		Icon,
 	],

packages/fiori/src/SideNavigationSubItem.ts

@@ -6,7 +6,7 @@ import SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase
 import SideNavigationSubItemTemplate from "./generated/templates/SideNavigationSubItemTemplate.lit.js";
 
 // Styles
-import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js";
+import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.css.js";
 
 /**
  * @class
@@ -29,7 +29,7 @@ import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js"
 	tag: "ui5-side-navigation-sub-item",
 	renderer: litRender,
 	template: SideNavigationSubItemTemplate,
-	styles: SideNavigationItemCss,
+	styles: SideNavigationSubItemCss,
 	dependencies: [
 		Icon,
 	],

packages/fiori/src/themes/SideNavigationGroup.css

@@ -0,0 +1,30 @@
+@import "./SideNavigationItemBase.css";
+
+:host {
+	font-size: var(--sapFontSmallSize);
+	font-family: var(--sapFontSemiboldFamily);
+	color: var(--sapContent_LabelColor);
+}
+
+.ui5-sn-item.ui5-sn-item-group {
+	height: 2rem;
+	min-height: 2rem;
+	padding-inline-start: 0.5rem;
+	gap: 0.4375rem;
+}
+
+.ui5-sn-item.ui5-sn-item-group .ui5-sn-item-toggle-icon {
+	display: none;
+}
+
+.ui5-sn-item.ui5-sn-item-group:hover .ui5-sn-item-toggle-icon,
+.ui5-sn-item.ui5-sn-item-group:focus .ui5-sn-item-toggle-icon {
+	display: block;
+}
+
+:host(:first-child) .ui5-sn-item-separator:first-child,
+:host(:last-child) .ui5-sn-item-separator:last-child,
+.ui5-sn-item-group-below-group.ui5-sn-item-separator,
+.ui5-sn-item-group-below-group .ui5-sn-item-separator:first-child {
+	display: none;
+}

packages/fiori/src/themes/SideNavigationItem.css

@@ -1,258 +1,9 @@
-.ui5-sn-item-ul {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
-.ui5-sn-item {
-	display: flex;
-	align-items: center;
-	width: 100%;
-	box-sizing: border-box;
-	text-decoration: none;
-	position: relative;
-
-	height: var(--_ui5_side_navigation_item_height);
-	min-height: var(--_ui5_side_navigation_item_height);
-	cursor: pointer;
-	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.ui5-sn-item-group {
-	height: 2rem;
-	min-height: 2rem;
-	padding-inline-start: 0.5rem;
-	gap: 0.4375rem;
-}
-
-.ui5-sn-item.ui5-sn-item-group .ui5-sn-item-toggle-icon {
-	display: none;
-}
-
-.ui5-sn-item.ui5-sn-item-group:hover .ui5-sn-item-toggle-icon,
-.ui5-sn-item.ui5-sn-item-group:focus .ui5-sn-item-toggle-icon {
-	display: block;
-}
-
-:host(.ui5-sn-item-hidden[side-nav-collapsed]),
-:host([side-nav-collapsed]) .ui5-sn-item-hidden {
-	display: none;
-}
-
-.ui5-sn-item:focus {
-	outline: none;
-}
-
-.ui5-sn-item:focus::after {
-	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	position: absolute;
-	content: "";
-	inset: var(--_ui5_side_navigation_item_focus_border_offset);
-	z-index: 2;
-	pointer-events: none;
-	border-radius: var(--_ui5_side_navigation_item_focus_border_radius);
-}
-
-.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:focus::before {
-	border: var(--_ui5_side_navigation_selected_and_focused_border_style_color);
-}
-
-.ui5-sn-item.ui5-sn-item-group::before,
-.ui5-sn-item.ui5-sn-item-level1::before {
-	border: var(--_ui5_side_navigation_group_border_style_color);
-	border-width: var(--_ui5_side_navigation_group_border_width);
-}
-
-.ui5-sn-item-group[aria-expanded="true"]::before,
-.ui5-sn-item-level1[aria-expanded="true"]::before {
-	border-width: var(--_ui5_side_navigation_group_expanded_border_width);
-}
-
-:host(:last-child) .ui5-sn-item.ui5-sn-item-level2:not(.ui5-sn-item-selected)::before {
-	border: var(--_ui5_side_navigation_group_border_style_color);
-	border-width: var(--_ui5_side_navigation_group_border_width);
-}
-
-	/* borders are drawn using a pseudo element.
-	in some themes, the border is drawn only on the bottom.
-	in high contrast themes the border is on all sides and there is extra border on hover */
-.ui5-sn-item::before {
-	content: "";
-	position: absolute;
-	inset: 0;
-	pointer-events: none;
-}
-
-.ui5-sn-item.ui5-sn-item-disabled {
-	opacity: var(--sapContent_DisabledOpacity);
-	cursor: default;
-}
-
-.ui5-sn-item:not(.ui5-sn-item-disabled):hover {
-	background: var(--sapList_Hover_Background);
-}
-
-.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected {
-	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).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).ui5-sn-item-active [ui5-icon] {
-	color: var(--sapList_Active_TextColor);
-}
-
-.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:hover {
-	background: var(--sapList_Hover_SelectionBackground);
-}
-
-.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-item:not(.ui5-sn-item-disabled).ui5-sn-item-active,
-:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:active,
-:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected.ui5-sn-item-active {
-	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);
-}
-
-:host([side-nav-collapsed]) .ui5-sn-item::before {
-	border-width: var(--_ui5_side_navigation_item_border_width);
-}
-
-.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected::before {
-	border: var(--_ui5_side_navigation_selected_border_style_color);
-	border-width: var(--_ui5_side_navigation_selected_border_width);
-}
-
-.ui5-sn-item:not(.ui5-sn-item-disabled):not(.ui5-sn-item-selected):hover::before {
-	border: var(--_ui5_side_navigation_hover_border_style_color);
-	border-width: var(--_ui5_side_navigation_hover_border_width);
-}
-
-.ui5-sn-item.ui5-sn-item-level2::before {
-	border: var(--_ui5_side_navigation_item_border_style_color);
-	border-width: var(--_ui5_side_navigation_item_border_width);
-}
+@import "./SideNavigationItemBase.css";
 
-:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected::before {
-	border-radius: var(--_ui5_side_navigation_item_border_radius);
-}
-
-:host([in-popover]:last-of-type) .ui5-sn-item:not(:hover):not(:active)::before {
-	border: var(--_ui5_side_navigation_last_item_border_style);
-}
-
-.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);
-}
-
-.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-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;
-}
-
-:host([side-nav-collapsed]) .ui5-sn-item {
-	justify-content: center;
-}
-
-:host([side-nav-collapsed]) .ui5-sn-item-icon {
-	padding: var(--_ui5_side_navigation_item_collapsed_icon_padding);
-}
-
-: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-external-link-icon {
-	display: none;
-}
-
-:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover,
-:host([side-nav-collapsed]) .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;
-}
-
-: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) {
-	padding-inline-end: var(--_ui5_side_navigation_item_collapsed_hover_focus_padding_right);
-}
-
-:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover .ui5-sn-item-text,
-:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-text,
-: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):hover .ui5-sn-item-external-link-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([side-nav-collapsed]) .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);
-}
-
-: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);
-}
-
-.ui5-sn-item[aria-expanded=false] + .ui5-sn-item-ul {
-	display: none;
-}
-
-.ui5-sn-item-level2 {
-	padding-inline-start: var(--_ui5_side_navigation_group_icon_width);
-}
-
-.ui5-sn-item-text {
-	flex: 1;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+:host {
 	color: var(--sapList_TextColor);
-}
-
-.ui5-sn-item-group .ui5-sn-item-text {
-	font-size: var(--sapFontSmallSize);
-	font-family: var(--sapFontSemiboldFamily);
-	color: var(--sapContent_LabelColor);
-}
-
-.ui5-sn-item-level1 .ui5-sn-item-text {
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
 	font-weight: var(--_ui5_side_navigation_group_text_weight);
 }
 
@@ -261,39 +12,6 @@
 	padding-inline-start: var(--_ui5_side_navigation_item_padding_left);
 }
 
-.ui5-sn-item-with-expander .ui5-sn-item-icon::after {
-	display: var(--_ui5_side_navigation_triangle_display);
-	content: "";
-	width: 0;
-	height: 0;
-	border-left: 0.375rem solid transparent;
-	border-bottom: 0.375rem solid var(--_ui5_side_navigation_triangle_color);
-	position: absolute;
-	right: 0.1875rem;
-	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;
-}
-
 :host([in-popover]) .ui5-sn-item-level1 {
 	margin-bottom: var(--_ui5_side_navigation_group_bottom_margin_in_popup);
 }
@@ -306,15 +24,4 @@
 
 .ui5-sn-item.ui5-sn-item-level1.ui5-sn-item-overflow {
 	margin-top: auto;
-}
-
-.ui5-sn-item-separator {
-	min-height: 0.75rem;
-}
-
-:host(:first-child) .ui5-sn-item-separator:first-child,
-:host(:last-child) .ui5-sn-item-separator:last-child,
-.ui5-sn-item-group-below-group.ui5-sn-item-separator,
-.ui5-sn-item-group-below-group .ui5-sn-item-separator:first-child {
-	display: none;
-}
+}