fix: Fixed list item misalignment issue (#1474)

* #1316: fixed List item misalignment issue

* fixed misalign icon with text

* add updated test png files

docs/pages/components/side-navigation.md

@@ -25,7 +25,7 @@ The left navigation can always display or expand/collapse using the menu icon wi
         </li>
         <li class="fd-side-nav__item">
             <a class="fd-side-nav__link is-selected" aira-selected="true" href="#">
-                Link Item
+               Link Item
             </a>
         </li>
         <li class="fd-side-nav__item">
@@ -65,12 +65,12 @@ Use this to group navigation. Titles are not clickable.
         <ul class="fd-side-nav__list">
             <li class="fd-side-nav__item">
                 <a class="fd-side-nav__link" href="#">
-                    icon link
+                   icon link
                 </a>
             </li>
             <li class="fd-side-nav__item">
                 <a class="fd-side-nav__link" href="#">
-                    item link
+                   item link
                 </a>
             </li>
             <li class="fd-side-nav__item">
@@ -141,7 +141,7 @@ Use this when there is more than one level of hierarchy in the left navigation.
             <li class="fd-side-nav__item">
                 <a class="fd-side-nav__link has-child" href="#" aria-controls="Rk65C501"
                 aria-haspopup="true">
-                item link
+                    item link
             </a>
             <ul class="fd-side-nav__sublist" id="Rk65C501" aria-hidden="true">
                 <li class="fd-side-nav__subitem">
@@ -274,19 +274,19 @@ Use this when there is more than one level of hierarchy in the left navigation.
         <li class="fd-side-nav__item">
             <a class="fd-side-nav__link" href="#">
                 <span class="fd-side-nav__icon sap-icon--home sap-icon--l" role="presentation"></span>
-                Link icon
+                Link icon with two row text to test wrapping 
             </a>
         </li>
         <li class="fd-side-nav__item">
             <a class="fd-side-nav__link" href="#">
                 <span class="fd-side-nav__icon sap-icon--home sap-icon--l" role="presentation"></span>
-                Link icon
+                Link icon with two row text to test wrapping  
             </a>
         </li>
         <li class="fd-side-nav__item">
             <a class="fd-side-nav__link" href="#">
                 <span class="fd-side-nav__icon sap-icon--home sap-icon--l" role="presentation"></span>
-                Link icon
+                Link icon with two row text to test wrapping  
             </a>
         </li>
     </ul>

scss/components/side-nav.scss

@@ -25,7 +25,7 @@ $block: #{$fd-namespace}-side-nav;
     $fd-side-nav-hover-background-color: fd-color("neutral", 1);
     $fd-side-nav-link-color: fd-color("text", 2);
     $fd-side-nav-max-width: 249px;
-    $fd-side-nav-link-padding: fd-space(2.5) fd-space(5);
+    $fd-side-nav-link-padding: fd-space(2.5) fd-space(8.75) fd-space(2.5) fd-space(5);
     $fd-side-nav-title-padding: fd-space(2) fd-space(5);
     $fd-side-nav-icon-right-padding: fd-space(2.5);
     $fd-side-nav-link-disabled-color: fd-color("text", 3);
@@ -74,12 +74,13 @@ $block: #{$fd-namespace}-side-nav;
 
     &__link,
     &__sublink {
+        display: flex;
         padding: $fd-side-nav-link-padding;
         color: $fd-side-nav-link-color;
-        display: block;
         @include fd-type("0", "normal");
 
         //STATES *******************************************
+
         &:hover {
             background-color: $fd-side-nav-hover-background-color;
         }
@@ -100,12 +101,11 @@ $block: #{$fd-namespace}-side-nav;
     }
 
     &__link {
-
         //STATES *******************************************
         &.has-child {
             background-image: url(#{$fd-down-arrow-icon});
             background-repeat: no-repeat;
-            background-position: calc(100% - #{$fd-forms-select-width--background-image}) center;
+            background-position: right 14px top 15px;
         }
 
         &.is-expanded,
@@ -124,12 +124,38 @@ $block: #{$fd-namespace}-side-nav;
 
     &__icon {
         padding-right: $fd-side-nav-icon-right-padding;
+        margin-top: -1px;
+
+        &.sap-icon--s {
+            margin-top: 0;
+        }
+
+        &.sap-icon--m {
+            margin-top: 0;
+        }
+
+        &.sap-icon--l {
+            margin-top: -2px;
+        }
+
+        &.sap-icon--xl {
+            margin-top: -4px;
+        }
     }
 
     &--icons {
         min-width: auto;
-        .#{$block}__icon {
-            padding-right: 0;
+
+        .#{$block} {
+            &__link,
+            &__sublink {
+                padding: fd-space(2.5) fd-space(5);
+                justify-content: center;
+            }
+
+            &__icon {
+                padding-right: 0;
+            }
         }
     }
 }