removed nested list from public components

SAP · Oct 24, 2019 · 7fd5411 · 7fd5411
1 parent ffd1170
commit 7fd5411
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 782 deletions.
diff --git a/docs/_data/components.yml b/docs/_data/components.yml
@@ -45,9 +45,6 @@
     - title: Modal
       meta: modal
 
-    - title: Nested List
-      meta: nested-list
-
     - title: Notification
       meta: notification
 

diff --git a/docs/_data/sidebars/left-navigation-sidebar.yml b/docs/_data/sidebars/left-navigation-sidebar.yml
@@ -172,10 +172,6 @@ entries:
       url: /components/multi-input.html
       output: web
 
-    - title: Nested List
-      url: /components/nested-list.html
-      output: web
-
     - title: Notification
       url: /components/notification.html
       output: web

diff --git a/docs/pages/components/icon.md b/docs/pages/components/icon.md
@@ -21,6 +21,16 @@ Icons can be used adaptively if desired, but at this point they are used more as
 <span class="sap-icon--cart sap-icon--m"></span>
 <span class="sap-icon--cart sap-icon--l"></span>
 <span class="sap-icon--cart sap-icon--xl"></span>
+
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="18px" height="18px" viewBox="0 0 36 36" enable-background="new 0 0 38 38" xml:space="preserve">
+<polyline fill="#C1272D" points="38,38 5.933,38 6,20 13,20 13,27 20,27 20,20 27,20 27,13 20,13 20,6 38,6.016 "/>
+<path fill="#C1272D" d="M1,1 1,13 13,13 13,1 ">
+</path>
+</svg>
+
+<img src="{{site.baseurl}}/images/thumbs/rodney.artichoke.png"/>
+
 {% endcapture %}
 {% include display-component.html component=icon class="icon" %}
 

diff --git a/docs/pages/components/nested-list.md b/docs/pages/components/nested-list.md
diff --git a/docs/pages/components/side-navigation.md b/docs/pages/components/side-navigation.md
@@ -207,13 +207,13 @@ Use this when there is more than one level of hierarchy in the left navigation.
                 </a>
             </li>
             <li class="fd-nested-list__item">
-                <a class="fd-nested-list__link is-selected" href="#">
+                <a class="fd-nested-list__link" href="#">
                     <span class="fd-nested-list__icon sap-icon--calendar"></span>
                     <span class="fd-nested-list__title">Level 1 Item</span>
                 </a>
             </li>
             <li class="fd-nested-list__item">
-                <a class="fd-nested-list__link has-child" href="#" aria-controls="EX400L2" aria-haspopup="true">
+                <a class="fd-nested-list__link is-selected has-child" href="#" aria-controls="EX400L2" aria-haspopup="true">
                     <span class="fd-nested-list__icon sap-icon--employee"></span>
                     <span class="fd-nested-list__title">Level 1 Item</span>
                 </a>
@@ -224,7 +224,7 @@ Use this when there is more than one level of hierarchy in the left navigation.
                         </a>
                     </li>
                     <li class="fd-nested-list__item">
-                        <a class="fd-nested-list__link has-child" 
+                        <a class="fd-nested-list__link is-selected has-child" 
                             href="#" aria-controls="EX400L3" aria-haspopup="true">
                             <span class="fd-nested-list__title">Level 2 Item</span>
                         </a>
@@ -235,7 +235,7 @@ Use this when there is more than one level of hierarchy in the left navigation.
                                 </a>
                             </li>
                             <li class="fd-nested-list__item">
-                                <a class="fd-nested-list__link" href="#">
+                                <a class="fd-nested-list__link is-selected" href="#">
                                     <span class="fd-nested-list__title">Level 3 Item</span>
                                 </a>
                             </li>

diff --git a/src/nested-list.scss → src/_nested-list.scss b/src/nested-list.scss → src/_nested-list.scss
@@ -15,12 +15,6 @@ $block: #{$fd-namespace}-nested-list;
   speak: none;
 }
 
-@mixin fd-flex-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .#{$block} {
   @include fd-reset();
 
@@ -34,10 +28,12 @@ $block: #{$fd-namespace}-nested-list;
       .#{$block}__link,
       .#{$block}__content {
         padding-left: $paddingLeft;
-      }
-
-      .#{$block}__item {
         border-bottom: none;
+
+        @include fd-selected() {
+          border-bottom: var(--sapList_BorderWidth) solid;
+          border-bottom-color: var(--sapList_SelectionBorderColor);
+        }
       }
     }
   }
@@ -55,6 +51,11 @@ $block: #{$fd-namespace}-nested-list;
 
         .#{$block}__item {
           border-bottom: none;
+
+          @include fd-selected() {
+            border-bottom: var(--sapList_BorderWidth) solid;
+            border-bottom-color: var(--sapList_SelectionBorderColor);
+          }
         }
       }
     }
@@ -68,7 +69,6 @@ $block: #{$fd-namespace}-nested-list;
     @include fd-reset();
 
     background: var(--sapList_Background);
-    border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
   }
 
   &__link,
@@ -79,6 +79,7 @@ $block: #{$fd-namespace}-nested-list;
     height: 2.75rem;
     display: flex;
     align-items: center;
+    border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
 
     @include fd-hover() {
       background: var(--sapList_Hover_Background);
@@ -132,6 +133,11 @@ $block: #{$fd-namespace}-nested-list;
         &::after {
           content: "\e1e2";
         }
+
+        @include fd-selected() {
+          border-bottom: var(--sapList_BorderWidth) solid;
+          border-bottom-color: var(--sapList_SelectionBorderColor);
+        }
       }
 
       &:active::after {
@@ -222,6 +228,12 @@ $block: #{$fd-namespace}-nested-list;
         .#{$block}__link,
         .#{$block}__content {
           padding-left: $paddingLeft;
+          border-bottom: none;
+
+          @include fd-selected() {
+            border-bottom: var(--sapList_BorderWidth) solid;
+            border-bottom-color: var(--sapList_SelectionBorderColor);
+          }
         }
       }
 

diff --git a/src/fundamental-styles.scss b/src/fundamental-styles.scss
@@ -39,7 +39,6 @@
 @import "./modal";
 @import "./multi-input";
 @import "./nav";
-@import "./nested-list";
 @import "./notification";
 @import "./page";
 @import "./pagination";

diff --git a/src/mixins/_mixins.scss b/src/mixins/_mixins.scss
@@ -364,3 +364,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+@mixin fd-flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/side-nav.scss b/src/side-nav.scss
@@ -1,6 +1,7 @@
 @import "./settings";
 @import "./mixins";
 @import "./functions";
+@import "./nested-list";
 
 /*!
 .fd-side-nav
@@ -54,11 +55,14 @@ $block: #{$fd-namespace}-side-nav;
         display: none;
       }
 
-      &__item {
+      &__link {
         border-bottom: none;
-      }
 
-      &__link {
+        @include fd-selected() {
+          border-bottom: var(--sapList_BorderWidth) solid;
+          border-bottom-color: var(--sapList_SelectionBorderColor);
+        }
+
         &.has-child {
           position: relative;