From 20c58295c49835fa885a7b38c72ec609e6599a16 Mon Sep 17 00:00:00 2001
From: Xuebin Dong <dabeng413@gmail.com>
Date: Tue, 23 Jan 2018 01:05:44 +0800
Subject: [PATCH] fix(secondary-tabs): refactor the secondary tabs into nested
 structure (#906)

---
 src/less/tabs.less                       |   2 +-
 src/sass/converted/patternfly/_tabs.scss |   2 +-
 tests/pages/tabs.html                    | 259 +++++++++++++----------
 3 files changed, 146 insertions(+), 117 deletions(-)

diff --git a/src/less/tabs.less b/src/less/tabs.less
index 4d6e61525c..38b65f8beb 100644
--- a/src/less/tabs.less
+++ b/src/less/tabs.less
@@ -26,7 +26,7 @@
       }
     }
   }
-  + .nav-tabs-pf {
+  + .nav-tabs-pf, &.nav-tabs-pf-secondary {
     font-size: @font-size-base;
     > li:first-child > a {
       padding-left: 15px;
diff --git a/src/sass/converted/patternfly/_tabs.scss b/src/sass/converted/patternfly/_tabs.scss
index c4b8f9ecf6..3de0e12492 100644
--- a/src/sass/converted/patternfly/_tabs.scss
+++ b/src/sass/converted/patternfly/_tabs.scss
@@ -26,7 +26,7 @@
       }
     }
   }
-  + .nav-tabs-pf {
+  + .nav-tabs-pf, &.nav-tabs-pf-secondary {
     font-size: $font-size-base;
     > li:first-child > a {
       padding-left: 15px;
diff --git a/tests/pages/tabs.html b/tests/pages/tabs.html
index b2030a41b9..2ea0720c33 100644
--- a/tests/pages/tabs.html
+++ b/tests/pages/tabs.html
@@ -5,175 +5,175 @@
 resource: true
 ---
       <ul class="nav nav-tabs">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
+        <li class="active"><a href="javascript:void(0);">Home</a></li>
+        <li><a href="javascript:void(0);">Profile</a></li>
+        <li><a href="javascript:void(0);">Messages</a></li>
       </ul>
       <br />
       <ul class="nav nav-tabs">
-        <li><a href="#">Home</a></li>
-        <li class="active"><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
+        <li><a href="javascript:void(0);">Home</a></li>
+        <li class="active"><a href="javascript:void(0);">Profile</a></li>
+        <li><a href="javascript:void(0);">Messages</a></li>
       </ul>
       <br />
       <ul class="nav nav-tabs">
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li class="active"><a href="#">Messages</a></li>
+        <li><a href="javascript:void(0);">Home</a></li>
+        <li><a href="javascript:void(0);">Profile</a></li>
+        <li class="active"><a href="javascript:void(0);">Messages</a></li>
       </ul>
       <h3>Justified</h3>
       <ul class="nav nav-tabs nav-justified">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
+        <li class="active"><a href="javascript:void(0);">Home</a></li>
+        <li><a href="javascript:void(0);">Profile</a></li>
+        <li><a href="javascript:void(0);">Messages</a></li>
       </ul>
       <br />
       <ul class="nav nav-tabs nav-justified">
-        <li><a href="#">Home</a></li>
-        <li class="active"><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
+        <li><a href="javascript:void(0);">Home</a></li>
+        <li class="active"><a href="javascript:void(0);">Profile</a></li>
+        <li><a href="javascript:void(0);">Messages</a></li>
       </ul>
       <br />
       <ul class="nav nav-tabs nav-justified">
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li class="active"><a href="#">Messages</a></li>
+        <li><a href="javascript:void(0);">Home</a></li>
+        <li><a href="javascript:void(0);">Profile</a></li>
+        <li class="active"><a href="javascript:void(0);">Messages</a></li>
       </ul>
       <h3>Tabs with dropdowns</h3>
       <ul class="nav nav-tabs">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Help</a></li>
+        <li class="active"><a href="javascript:void(0);">Home</a></li>
+        <li><a href="javascript:void(0);">Help</a></li>
         <li class="dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">
             Dropdown <span class="caret"></span>
           </a>
           <ul class="dropdown-menu" role="menu">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
+            <li><a href="javascript:void(0);">Action</a></li>
+            <li><a href="javascript:void(0);">Another action</a></li>
+            <li><a href="javascript:void(0);">Something else here</a></li>
             <li class="divider"></li>
-            <li><a href="#">Separated link</a></li>
+            <li><a href="javascript:void(0);">Separated link</a></li>
           </ul>
         </li>
       </ul>
       <br />
       <ul class="nav nav-tabs">
-        <li><a href="#">Home</a></li>
-        <li class="active"><a href="#">Help</a></li>
+        <li><a href="javascript:void(0);">Home</a></li>
+        <li class="active"><a href="javascript:void(0);">Help</a></li>
         <li class="dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">
             Dropdown <span class="caret"></span>
           </a>
           <ul class="dropdown-menu pull-right" role="menu">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
+            <li><a href="javascript:void(0);">Action</a></li>
+            <li><a href="javascript:void(0);">Another action</a></li>
+            <li><a href="javascript:void(0);">Something else here</a></li>
             <li class="divider"></li>
-            <li><a href="#">Separated link</a></li>
+            <li><a href="javascript:void(0);">Separated link</a></li>
           </ul>
         </li>
       </ul>
       <br />
       <ul class="nav nav-tabs">
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Help</a></li>
+        <li><a href="javascript:void(0);">Home</a></li>
+        <li><a href="javascript:void(0);">Help</a></li>
         <li class="active dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">
             Dropdown <span class="caret"></span>
           </a>
           <ul class="dropdown-menu" role="menu">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
+            <li><a href="javascript:void(0);">Action</a></li>
+            <li><a href="javascript:void(0);">Another action</a></li>
+            <li><a href="javascript:void(0);">Something else here</a></li>
             <li class="divider"></li>
-            <li><a href="#">Separated link</a></li>
+            <li><a href="javascript:void(0);">Separated link</a></li>
           </ul>
         </li>
       </ul>
       <h2>PatternFly Examples</h2>
       <ul class="nav nav-tabs nav-tabs-pf">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
+        <li class="active"><a href="javascript:void(0);">Home</a></li>
+        <li><a href="javascript:void(0);">Profile</a></li>
+        <li><a href="javascript:void(0);">Messages</a></li>
       </ul>
       <br />
       <ul class="nav nav-tabs nav-tabs-pf">
-        <li><a href="#">Home</a></li>
-        <li class="active"><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
+        <li><a href="javascript:void(0);">Home</a></li>
+        <li class="active"><a href="javascript:void(0);">Profile</a></li>
+        <li><a href="javascript:void(0);">Messages</a></li>
       </ul>
       <br />
       <ul class="nav nav-tabs nav-tabs-pf">
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li class="active"><a href="#">Messages</a></li>
+        <li><a href="javascript:void(0);">Home</a></li>
+        <li><a href="javascript:void(0);">Profile</a></li>
+        <li class="active"><a href="javascript:void(0);">Messages</a></li>
       </ul>
       <h3>Justified</h3>
       <ul class="nav nav-tabs nav-tabs-pf nav-justified">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
+        <li class="active"><a href="javascript:void(0);">Home</a></li>
+        <li><a href="javascript:void(0);">Profile</a></li>
+        <li><a href="javascript:void(0);">Messages</a></li>
       </ul>
       <br />
       <ul class="nav nav-tabs nav-tabs-pf nav-justified">
-        <li><a href="#">Home</a></li>
-        <li class="active"><a href="#">Profile</a></li>
-        <li><a href="#">Messages</a></li>
+        <li><a href="javascript:void(0);">Home</a></li>
+        <li class="active"><a href="javascript:void(0);">Profile</a></li>
+        <li><a href="javascript:void(0);">Messages</a></li>
       </ul>
       <br />
       <ul class="nav nav-tabs nav-tabs-pf nav-justified">
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
-        <li class="active"><a href="#">Messages</a></li>
+        <li><a href="javascript:void(0);">Home</a></li>
+        <li><a href="javascript:void(0);">Profile</a></li>
+        <li class="active"><a href="javascript:void(0);">Messages</a></li>
       </ul>
       <h3>Tabs with dropdowns</h3>
       <ul class="nav nav-tabs nav-tabs-pf">
-        <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Help</a></li>
+        <li class="active"><a href="javascript:void(0);">Home</a></li>
+        <li><a href="javascript:void(0);">Help</a></li>
         <li class="dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">
             Dropdown <span class="caret"></span>
           </a>
           <ul class="dropdown-menu" role="menu">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
+            <li><a href="javascript:void(0);">Action</a></li>
+            <li><a href="javascript:void(0);">Another action</a></li>
+            <li><a href="javascript:void(0);">Something else here</a></li>
             <li class="divider"></li>
-            <li><a href="#">Separated link</a></li>
+            <li><a href="javascript:void(0);">Separated link</a></li>
           </ul>
         </li>
       </ul>
       <br />
       <ul class="nav nav-tabs nav-tabs-pf">
-        <li><a href="#">Home</a></li>
-        <li class="active"><a href="#">Help</a></li>
+        <li><a href="javascript:void(0);">Home</a></li>
+        <li class="active"><a href="javascript:void(0);">Help</a></li>
         <li class="dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">
             Dropdown <span class="caret"></span>
           </a>
           <ul class="dropdown-menu pull-right" role="menu">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
+            <li><a href="javascript:void(0);">Action</a></li>
+            <li><a href="javascript:void(0);">Another action</a></li>
+            <li><a href="javascript:void(0);">Something else here</a></li>
             <li class="divider"></li>
-            <li><a href="#">Separated link</a></li>
+            <li><a href="javascript:void(0);">Separated link</a></li>
           </ul>
         </li>
       </ul>
       <br />
       <ul class="nav nav-tabs nav-tabs-pf">
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Help</a></li>
+        <li><a href="javascript:void(0);">Home</a></li>
+        <li><a href="javascript:void(0);">Help</a></li>
         <li class="active dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">
             Dropdown <span class="caret"></span>
           </a>
           <ul class="dropdown-menu" role="menu">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
+            <li><a href="javascript:void(0);">Action</a></li>
+            <li><a href="javascript:void(0);">Another action</a></li>
+            <li><a href="javascript:void(0);">Something else here</a></li>
             <li class="divider"></li>
-            <li><a href="#">Separated link</a></li>
+            <li><a href="javascript:void(0);">Separated link</a></li>
           </ul>
         </li>
       </ul>
@@ -182,58 +182,87 @@ <h3>.nav-tabs + .nav-tabs-pf</h3>
         <strong>Note:</strong> the markup semantics used here are sub-optimal in order to easily achieve a responsive layout.
       </p>
       <ul class="nav nav-tabs">
-        <li class="active"><a href="#">Tab One</a></li>
-        <li><a href="#">Tab Two</a></li>
-        <li><a href="#">Tab Three</a></li>
-        <li><a href="#">Tab Four</a></li>
-        <li><a href="#">Tab Five</a></li>
-        <li><a href="#">Tab Six</a></li>
-        <li><a href="#">Tab Seven</a></li>
+        <li class="active"><a href="javascript:void(0);">Tab One</a></li>
+        <li><a href="javascript:void(0);">Tab Two</a></li>
+        <li><a href="javascript:void(0);">Tab Three</a></li>
+        <li><a href="javascript:void(0);">Tab Four</a></li>
+        <li><a href="javascript:void(0);">Tab Five</a></li>
+        <li><a href="javascript:void(0);">Tab Six</a></li>
+        <li><a href="javascript:void(0);">Tab Seven</a></li>
       </ul>
       <ul class="nav nav-tabs nav-tabs-pf">
-        <li class="active"><a href="#">Secondary Tab One</a></li>
-        <li><a href="#">Secondary Tab Two</a></li>
-        <li><a href="#">Secondary Tab Three</a></li>
-        <li><a href="#">Secondary Tab Four</a></li>
-        <li><a href="#">Secondary Tab Five</a></li>
-        <li><a href="#">Secondary Tab Six</a></li>
-        <li><a href="#">Secondary Tab Seven</a></li>
+        <li class="active"><a href="javascript:void(0);">Secondary Tab One</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Two</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Three</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Four</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Five</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Six</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Seven</a></li>
       </ul>
       <br />
       <ul class="nav nav-tabs">
-        <li class="active"><a href="#">Tab One</a></li>
-        <li><a href="#">Tab Two</a></li>
-        <li><a href="#">Tab Three</a></li>
-        <li><a href="#">Tab Four</a></li>
-        <li><a href="#">Tab Five</a></li>
-        <li><a href="#">Tab Six</a></li>
-        <li><a href="#">Tab Seven</a></li>
+        <li class="active"><a href="javascript:void(0);">Tab One</a></li>
+        <li><a href="javascript:void(0);">Tab Two</a></li>
+        <li><a href="javascript:void(0);">Tab Three</a></li>
+        <li><a href="javascript:void(0);">Tab Four</a></li>
+        <li><a href="javascript:void(0);">Tab Five</a></li>
+        <li><a href="javascript:void(0);">Tab Six</a></li>
+        <li><a href="javascript:void(0);">Tab Seven</a></li>
       </ul>
       <ul class="nav nav-tabs nav-tabs-pf">
-        <li><a href="#">Secondary Tab One</a></li>
-        <li class="active"><a href="#">Secondary Tab Two</a></li>
-        <li><a href="#">Secondary Tab Three</a></li>
-        <li><a href="#">Secondary Tab Four</a></li>
-        <li><a href="#">Secondary Tab Five</a></li>
-        <li><a href="#">Secondary Tab Six</a></li>
-        <li><a href="#">Secondary Tab Seven</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab One</a></li>
+        <li class="active"><a href="javascript:void(0);">Secondary Tab Two</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Three</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Four</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Five</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Six</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Seven</a></li>
       </ul>
       <br />
       <ul class="nav nav-tabs">
-        <li><a href="#">Tab One</a></li>
-        <li class="active"><a href="#">Tab Two</a></li>
-        <li><a href="#">Tab Three</a></li>
-        <li><a href="#">Tab Four</a></li>
-        <li><a href="#">Tab Five</a></li>
-        <li><a href="#">Tab Six</a></li>
-        <li><a href="#">Tab Seven</a></li>
+        <li><a href="javascript:void(0);">Tab One</a></li>
+        <li class="active"><a href="javascript:void(0);">Tab Two</a></li>
+        <li><a href="javascript:void(0);">Tab Three</a></li>
+        <li><a href="javascript:void(0);">Tab Four</a></li>
+        <li><a href="javascript:void(0);">Tab Five</a></li>
+        <li><a href="javascript:void(0);">Tab Six</a></li>
+        <li><a href="javascript:void(0);">Tab Seven</a></li>
       </ul>
       <ul class="nav nav-tabs nav-tabs-pf">
-        <li><a href="#">Secondary Tab One</a></li>
-        <li class="active"><a href="#">Secondary Tab Two</a></li>
-        <li><a href="#">Secondary Tab Three</a></li>
-        <li><a href="#">Secondary Tab Four</a></li>
-        <li><a href="#">Secondary Tab Five</a></li>
-        <li><a href="#">Secondary Tab Six</a></li>
-        <li><a href="#">Secondary Tab Seven</a></li>
-      </ul>
\ No newline at end of file
+        <li><a href="javascript:void(0);">Secondary Tab One</a></li>
+        <li class="active"><a href="javascript:void(0);">Secondary Tab Two</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Three</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Four</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Five</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Six</a></li>
+        <li><a href="javascript:void(0);">Secondary Tab Seven</a></li>
+      </ul>
+      <h3>.nav-tabs.nav-tabs-pf-secondary</h3>
+      <ul class="nav nav-tabs">
+        <li class="active"><a href="#tab1" data-toggle="tab">Tab One</a></li>
+        <li><a href="#tab2" data-toggle="tab">Tab Two</a></li>
+        <li><a href="#tab3" data-toggle="tab">Tab Three</a></li>
+      </ul>
+      <div class="tab-content">
+        <div class="tab-pane active" id="tab1">
+          <ul class="nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary">
+            <li class="active"><a href="javascript:void(0);">Secondary Tab A</a></li>
+            <li><a href="javascript:void(0);">Secondary Tab B</a></li>
+            <li><a href="javascript:void(0);">Secondary Tab C</a></li>
+          </ul>
+        </div>
+        <div class="tab-pane" id="tab2">
+          <ul class="nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary">
+            <li class="active"><a href="javascript:void(0);">Secondary Tab D</a></li>
+            <li><a href="javascript:void(0);">Secondary Tab E</a></li>
+            <li><a href="javascript:void(0);">Secondary Tab F</a></li>
+          </ul>
+        </div>
+        <div class="tab-pane" id="tab3">
+          <ul class="nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary">
+            <li class="active"><a href="javascript:void(0);">Secondary Tab G</a></li>
+            <li><a href="javascript:void(0);">Secondary Tab H</a></li>
+            <li><a href="javascript:void(0);">Secondary Tab I</a></li>
+          </ul>
+        </div>
+      </div>
\ No newline at end of file