feat(ui5-side-navigation): reduce space between items in popovers (#11165)

Author: dimovpetar

packages/fiori/src/themes/NavigationMenu.css

@@ -1,7 +1,7 @@
 @import "./InvisibleTextStyles.css";
 
 ::slotted([ui5-navigation-menu-item]:not(:last-of-type)) {
-	margin-block-end: var(--_ui5_side_navigation_item_bottom_margin_in_popup);
+	margin-block-end: var(--_ui5_side_navigation_item_bottom_margin);
 }
 
 .ui5-navigation-menu .ui5-navigation-menu-main {

packages/fiori/src/themes/NavigationMenuItem.css

@@ -77,5 +77,5 @@
 }
 
 ::slotted([ui5-navigation-menu-item]:not(:last-of-type)) {
-	margin-block-end: var(--_ui5_side_navigation_item_bottom_margin_in_popup);
+	margin-block-end: var(--_ui5_side_navigation_item_bottom_margin);
 }

packages/fiori/src/themes/SideNavigationItem.css

@@ -7,7 +7,7 @@
 }
 
 :host([in-popover]) ::slotted([ui5-side-navigation-sub-item]) {
-	margin-block-start: var(--_ui5_side_navigation_item_bottom_margin_in_popup);
+	margin-block-start: var(--_ui5_side_navigation_item_bottom_margin);
 }
 
 .ui5-sn-item-level1:not(:has(> .ui5-sn-item-icon)),

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

@@ -27,7 +27,6 @@
 	--_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_in_popup: 0;
 	--_ui5_side_navigation_item_padding_start_in_popup: var(--_ui5_side_navigation_group_icon_width);
 	--_ui5_side_navigation_item_padding_start_in_overflow_popup: 0.75rem;
 	--_ui5_side_navigation_item_transition: none;

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

@@ -20,7 +20,6 @@
 	--_ui5_side_navigation_group_border_style_color: none;
 	--_ui5_side_navigation_item_border_radius: 0.375rem;
 	--_ui5_side_navigation_item_bottom_margin: 0.25rem;
-	--_ui5_side_navigation_item_bottom_margin_in_popup: 0.5rem;
 	--_ui5_side_navigation_item_padding_start_in_popup: 1rem;
 	--_ui5_side_navigation_item_padding_start_in_overflow_popup: 1rem;
 	--_ui5_side_navigation_item_transition: background-color 0.3s ease-in-out;

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

@@ -20,7 +20,6 @@
 	--_ui5_side_navigation_group_border_style_color: none;
 	--_ui5_side_navigation_item_border_radius: 0.375rem;
 	--_ui5_side_navigation_item_bottom_margin: 0.25rem;
-	--_ui5_side_navigation_item_bottom_margin_in_popup: 0.5rem;
 	--_ui5_side_navigation_item_padding_start_in_popup: 1rem;
 	--_ui5_side_navigation_item_padding_start_in_overflow_popup: 1rem;
 	--_ui5_side_navigation_item_transition: background-color 0.3s ease-in-out;

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

@@ -14,7 +14,6 @@
 	--_ui5_side_navigation_expand_icon_color: var(--sapContent_NonInteractiveIconColor);
 	--_ui5_side_navigation_expand_icon_width: 2.25rem;
 	--_ui5_side_navigation_item_bottom_margin: 0.25rem;
-	--_ui5_side_navigation_item_bottom_margin_in_popup: 0.5rem;
 	--_ui5_side_navigation_item_padding_start_in_popup: 1rem;
 	--_ui5_side_navigation_item_padding_start_in_overflow_popup: 1rem;
 	--_ui5_side_navigation_item_padding_left: 1rem;

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

@@ -14,7 +14,6 @@
 	--_ui5_side_navigation_expand_icon_color: var(--sapContent_NonInteractiveIconColor);
 	--_ui5_side_navigation_expand_icon_width: 2.25rem;
 	--_ui5_side_navigation_item_bottom_margin: 0.25rem;
-	--_ui5_side_navigation_item_bottom_margin_in_popup: 0.5rem;
 	--_ui5_side_navigation_item_padding_start_in_popup: 1rem;
 	--_ui5_side_navigation_item_padding_start_in_overflow_popup: 1rem;
 	--_ui5_side_navigation_item_padding_left: 1rem;

packages/fiori/test/pages/SideNavigation.html

@@ -95,6 +95,10 @@
 				<ui5-label show-colon>ensure overflow</ui5-label>
 				<ui5-checkbox id="ensure-overflow"></ui5-checkbox>
 			</div>
+			<div class="form-field">
+				<ui5-label show-colon>Compact Density</ui5-label>
+				<ui5-checkbox id="compact-density"></ui5-checkbox>
+			</div>
 		</div>
 	</div>
 
@@ -125,6 +129,10 @@
 			document.getElementById("sn1").classList.toggle("ensure-overflow", event.target.checked);
 		});
 
+		document.getElementById("compact-density").addEventListener("ui5-change", function (event) {
+			document.body.classList.toggle("sapUiSizeCompact", event.target.checked);
+		});
+
 		sideNavigation.addEventListener("ui5-selection-change", function (event) {
 			if (preventSelectionChange) {
 				event.preventDefault();