fix: Align side-nav navigation arrow on IE11 (#490)

* Set height value lower than min-height to prevent align-items reset on IE11 * Add reference images * Restore previous test examples * Add reference images Co-authored-by: jmarkowski <jdrekmarkowski@gmail.com>
SAP · Jan 15, 2020 · 4011bab · 4011bab
1 parent a43b78b
commit 4011bab
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 43 deletions.
diff --git a/src/_nested-list.scss b/src/_nested-list.scss
@@ -112,7 +112,9 @@ $block: #{$fd-namespace}-nested-list;
       &::after {
         @include fd-flex-center();
         @include fd-nested-list-arrow();
-
+        // `height: 0` is set to prevent breaking `align-items: center` on IE11
+        // Read more https://github.com/philipwalton/flexbugs/issues/231
+        height: 0;
         min-height: 100%;
         min-width: 2.75rem;
         color: var(--sapList_TextColor);

diff --git a/test/templates/side-nav/index.njk b/test/templates/side-nav/index.njk
@@ -2,47 +2,47 @@
 {% from "./../format.njk" import format %}
 
 {% block content %}
-<!-- output the component example and the code snippet -->
-<h2>Side Navigation with one level - text-only, cozy mode</h2>
-{% set example %}
-<nav class="fd-side-nav">
-    <div class="fd-side-nav__main-navigation">
-      <ul class="test-sidenav-list">
-        <li>Item 1</li>
-        <li>Item 1</li>
-        <li>Item 1</li>
-        <li>Item 1</li>
-      </ul>
-    </div>
-    <div class="fd-side-nav__utility">
-       <ul class="test-sidenav-list">
-        <li>Item 1</li>
-        <li>Item 1</li>
-       </ul>
-    </div>
-</nav>
-{% endset %}
-{{ format(example) }}
+    <!-- output the component example and the code snippet -->
+    <h2>Side Navigation with one level - text-only, cozy mode</h2>
+    {% set example %}
+        <nav class="fd-side-nav">
+            <div class="fd-side-nav__main-navigation">
+                <ul class="test-sidenav-list">
+                    <li>Item 1</li>
+                    <li>Item 1</li>
+                    <li>Item 1</li>
+                    <li>Item 1</li>
+                </ul>
+            </div>
+            <div class="fd-side-nav__utility">
+                <ul class="test-sidenav-list">
+                    <li>Item 1</li>
+                    <li>Item 1</li>
+                </ul>
+            </div>
+        </nav>
+    {% endset %}
+    {{ format(example) }}
 
-<br><br><br>
-<h2>Side navigation with icons - condensed state</h2>
-{% set example %}
-<nav class="fd-side-nav fd-side-nav--condensed">
-   <div class="fd-side-nav__main-navigation">
-      <ul class="test-sidenav-list">
-        <li class="test-sidenav-list-icon sap-icon--home"></li>
-        <li class="test-sidenav-list-icon sap-icon--calendar"></li>
-        <li class="test-sidenav-list-icon sap-icon--employee"></li>
-        <li class="test-sidenav-list-icon sap-icon--activities"></li>
-      </ul>
-    </div>
-    <div class="fd-side-nav__utility">
-       <ul class="test-sidenav-list">
-        <li class="test-sidenav-list-icon sap-icon--bar-chart"></li>
-        <li class="test-sidenav-list-icon sap-icon--video"></li>
-       </ul>
-    </div>
-</nav>
-{% endset %}
-{{ format(example) }}
+    <br><br><br>
+    <h2>Side navigation with icons - condensed state</h2>
+    {% set example %}
+        <nav class="fd-side-nav fd-side-nav--condensed">
+            <div class="fd-side-nav__main-navigation">
+                <ul class="test-sidenav-list">
+                    <li class="test-sidenav-list-icon sap-icon--home"></li>
+                    <li class="test-sidenav-list-icon sap-icon--calendar"></li>
+                    <li class="test-sidenav-list-icon sap-icon--employee"></li>
+                    <li class="test-sidenav-list-icon sap-icon--activities"></li>
+                </ul>
+            </div>
+            <div class="fd-side-nav__utility">
+                <ul class="test-sidenav-list">
+                    <li class="test-sidenav-list-icon sap-icon--bar-chart"></li>
+                    <li class="test-sidenav-list-icon sap-icon--video"></li>
+                </ul>
+            </div>
+        </nav>
+    {% endset %}
+    {{ format(example) }}
 {% endblock %}
diff --git a/test/visual-regression-tests/reference_images/FS_side-nav_2_backstop__n2_0_.png b/test/visual-regression-tests/reference_images/FS_side-nav_2_backstop__n2_0_.png