Simplified selected states of side navigation

canonical · Mar 16, 2020 · 0adf02a · 0adf02a
1 parent e6175cd
commit 0adf02a
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 26 deletions.
diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss
@@ -28,11 +28,6 @@
     display: block;
     padding: $spv-inner--x-small $sph-inner--small $spv-inner--x-small $sph-inner;
 
-    &.is-active,
-    &.is-selected {
-      font-weight: $font-weight-bold;
-    }
-
     // nested 2 or 3 levels
     .p-side-navigation__item .p-side-navigation__item & {
       padding-left: 2 * $sph-inner;
@@ -76,25 +71,16 @@
     background: $color-sidenav-list-border;
   }
 
-  .p-side-navigation__text.is-selected {
-    color: $color-sidenav-text-active;
-  }
-
   .p-side-navigation__link {
     &,
     &:visited {
       color: $color-sidenav-text-default;
     }
 
-    &:hover,
-    &.is-active,
-    &.is-selected {
-      color: $color-sidenav-text-active;
-    }
-
     &:hover,
     &.is-active {
       background: $color-sidenav-item-background-highlight;
+      color: $color-sidenav-text-active;
     }
 
     &.is-active {

diff --git a/templates/docs/examples/patterns/side-navigation/default.html b/templates/docs/examples/patterns/side-navigation/default.html
@@ -13,7 +13,7 @@
       <a class="p-side-navigation__link" href="#">First level link</a>
     </li>
     <li class="p-side-navigation__item">
-      <a class="p-side-navigation__link is-selected" href="#">Selected link</a>
+      <a class="p-side-navigation__link" href="#">Link with children</a>
       <ul class="p-side-navigation__list">
         <li class="p-side-navigation__item">
           <a class="p-side-navigation__link" href="#">Second level link</a>
@@ -22,7 +22,7 @@
           <span class="p-side-navigation__text">Second level text</span>
         </li>
         <li class="p-side-navigation__item ">
-          <a class="p-side-navigation__link is-selected" href="#">Second level selected link</a>
+          <a class="p-side-navigation__link" href="#">Second level link with children</a>
           <ul class="p-side-navigation__list">
             <li class="p-side-navigation__item">
               <span class="p-side-navigation__text">Third level text</span>
@@ -52,7 +52,7 @@
       <span class="p-side-navigation__text">First level text</span>
     </li>
     <li class="p-side-navigation__item">
-      <span class="p-side-navigation__text is-selected">Selected text item</span>
+      <span class="p-side-navigation__text">Text item with children</span>
       <ul class="p-side-navigation__list">
         <li class="p-side-navigation__item">
           <a class="p-side-navigation__link" href="#">Second level link</a>
@@ -61,7 +61,7 @@
           <span class="p-side-navigation__text">Second level text</span>
         </li>
         <li class="p-side-navigation__item ">
-          <span class="p-side-navigation__text is-selected">Second level selected text item</span>
+          <span class="p-side-navigation__text">Second level text with children</span>
           <ul class="p-side-navigation__list">
             <li class="p-side-navigation__item">
               <span class="p-side-navigation__text">Third level text</span>

diff --git a/templates/docs/examples/patterns/side-navigation/docs.html b/templates/docs/examples/patterns/side-navigation/docs.html
@@ -27,7 +27,7 @@
       <a class="p-side-navigation__link" href="#">Commission machines</a>
     </li>
     <li class="p-side-navigation__item">
-      <span class="p-side-navigation__text is-selected">Testing</span>
+      <span class="p-side-navigation__text">Testing</span>
       <ul class="p-side-navigation__list">
         <li class="p-side-navigation__item">
           <a class="p-side-navigation__link" href="#">Hardware testings</a>

diff --git a/templates/docs/patterns/navigation.md b/templates/docs/patterns/navigation.md
@@ -65,14 +65,11 @@ View example of the sub-navigation pattern
 
 <span class="p-label--new">New</span>
 
-Side navigation pattern can be used to provide more detailed navigation alongside your content.
+The side navigation pattern can be used to provide more detailed navigation alongside your content.
 
-It provides grouping of the links and nesting them up to three levels.
+It allows grouping the links into navigation sections and nesting them up to three levels.
 
-Current page in the side navigation should be highlighted by adding `is-active` class to
-`p-side-navigation__link` element. If current active page is nested in the navigation
-all relevant parent `p-side-navigation__link` or `p-side-navigation__text` elements
-should be highlighted using `is-selected` class to give a better view on the hierarchy.
+Current page in the side navigation should be highlighted by adding `is-active` class to the corresponding `p-side-navigation__link` element.
 
 <a href="/docs/examples/patterns/side-navigation/docs" class="js-example">
 View example of the side navigation pattern