fix(ui5-side-navigation): update CSS styles (#11208)

- collapse/expand icon has spacings according to the visual design
- touch (click) area of the collapse/expand is correct now
(before it was with smaller height than the item)

fixes: #11171

Author: LidiyaGeorgieva

packages/fiori/src/themes/SideNavigationItemBase.css

@@ -198,17 +198,40 @@ and there is an additional border that appears on hover. */
 }
 
 :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);
+	width: var(--_ui5_side_navigation_expand_icon_width);
+	padding-inline-end: 0.375rem;
+	padding-block: var(--_ui5_side_navigation_item_expand_arrow_padding);
+	margin-inline-start: 0.5rem;
+	height: var(--sapElement_Condensed_Height);
+}
+
+/* this is for the group item*/
+:host(:not([unselectable], [side-nav-collapsed]))  .ui5-sn-item-toggle-icon {
+	width: calc(var(--_ui5_side_navigation_expand_icon_width) + 4px); /*width of the icon + 4px padding*/
+}
+
+/* this is for the two-click item */
+:host(:not([unselectable], [side-nav-collapsed], [ui5-side-navigation-group]))  .ui5-sn-item-toggle-icon {
 	margin-inline-start: 1rem;
+	width: calc(var(--_ui5_side_navigation_expand_icon_width) + 5px); /*width of the icon + 1px separator + 4px padding*/
 }
 
-:host([unselectable]:not([side-nav-collapsed])) .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: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::part(root) {
+	padding-block: 0.25rem; /* height of the separator (the border left) should be --sapElement_Condensed_Height which is equal to 1.375rem (22px) */
+	border-inline-start: 0.0625rem solid var(--sapTextColor);
+	display: block;
+	height: 0.875rem;
+	width: var(--_ui5_side_navigation_expand_icon_width);
+}
+
+:host(:not([unselectable], [side-nav-collapsed])) .ui5-sn-item-toggle-icon::part(root) {
+	padding-inline-start: 0.25rem;
+}
+
+:host([unselectable]:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon::part(root), 
+:host(:not([side-nav-collapsed])) .ui5-sn-item-group .ui5-sn-item-toggle-icon::part(root),
+:host([unselectable][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([unselectable][side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-toggle-icon {
 	border-inline-start: none;
 }
 

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

@@ -24,6 +24,7 @@
 	--_ui5_side_navigation_item_border_style_color: none;
 	--_ui5_side_navigation_item_border_width: 0;
 	--_ui5_side_navigation_item_height: 2.75rem;
+	--_ui5_side_navigation_item_expand_arrow_padding: 0.6875rem;
 	--_ui5_side_navigation_last_item_border_style_color: none;
 	--_ui5_side_navigation_item_border_radius: 0;
 	--_ui5_side_navigation_item_bottom_margin: 0;
@@ -75,6 +76,7 @@
 .sapUiSizeCompact {
 	--_ui5_side_navigation_navigation_separator_margin: var(--_ui5_side_navigation_navigation_separator_margin_collapsed);
 	--_ui5_side_navigation_item_height: 2rem;
+	--_ui5_side_navigation_item_expand_arrow_padding: 0.3125rem;
 }
 
 [dir="rtl"] {