Document status styles for side navigation

canonical · Mar 16, 2020 · 17e27aa · 17e27aa
1 parent 3763fb5
commit 17e27aa
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/templates/docs/examples/patterns/side-navigation/docs.html b/templates/docs/examples/patterns/side-navigation/docs.html
@@ -16,7 +16,7 @@
       <a class="p-side-navigation__link" href="#">Explore MAAS</a>
     </li>
     <li class="p-side-navigation__item ">
-      <a class="p-side-navigation__link" href="#">Quick start</a>
+      <a class="p-side-navigation__link" href="#">Quick start<span class="p-side-navigation__status"><span class="p-label--new">New</span></span></a>
     </li>
   </ul>
   <ul class="p-side-navigation__list">
@@ -66,7 +66,7 @@
           <a class="p-side-navigation__link" href="#">Upgrade from 2.3 to 2.4</a>
         </li>
         <li class="p-side-navigation__item ">
-          <a class="p-side-navigation__link" href="#">Upgrade from 1.9 to 2.x</a>
+          <a class="p-side-navigation__link" href="#">Upgrade from 1.9 to 2.x<span class="p-side-navigation__status"><i class="p-icon--warning"></i></span></a>
         </li>
       </ul>
     </li>

diff --git a/templates/docs/patterns/navigation.md b/templates/docs/patterns/navigation.md
@@ -71,6 +71,8 @@ It allows grouping the links into navigation sections and nesting them up to thr
 
 Current page in the side navigation should be highlighted by adding `is-active` class to the corresponding `p-side-navigation__link` element.
 
+Use `p-side-navigation__status` inside `p-side-navigation__link` elements to add status labels or icons on right side of navigation items.
+
 <a href="/docs/examples/patterns/side-navigation/docs" class="js-example">
 View example of the side navigation pattern
 </a>