Merge pull request patternfly#440 from cardosogabriel/review-pr-393

Review of PTNFLY-938 Adding Find to the toolbar patternfly#383

Author: andresgalante

less/toolbar.less

@@ -24,13 +24,9 @@
     .btn,
     .btn-group {
       + .btn,
-      + .btn-group {
-        margin-left: 5px;
-      }
+      + .btn-group { margin-left: 5px; }
       + .btn-link,
-      + .dropdown {
-        margin-left: 10px;
-      }
+      + .dropdown { margin-left: 10px; }
     }
     .btn-link {
       color: @gray-darker;
@@ -39,15 +35,12 @@
       padding: 4px 0;
       &:active,
       &:focus,
-      &:hover {
-        color: @link-color;
-      }
+      &:hover { color: @link-color; }
     }
   }
 }
 .toolbar-pf-actions {
   display: table;
-  margin-bottom: 10px;
   width: 100%;
   @media (min-width: @grid-float-breakpoint) {
     .toolbar-pf-filter {
@@ -58,42 +51,20 @@
 }
 .toolbar-pf-view-selector {
   font-size: (@font-size-base + 4);
-  @media (min-width: @grid-float-breakpoint) {
-    border-right: 0;
-    float: right;
-    padding-right: 0;
-  }
-  .active a {
+  .btn-link.active {
     color: @link-color;
     cursor: default;
   }
-  a {
-    color: @gray-darker;
-    &:hover {
-      color: @link-color;
-    }
-  }
-  .list-inline {
-    margin-bottom: 0;
-  }
 }
 .toolbar-pf-action-right {
   float: right;
   @media (max-width: @grid-float-breakpoint) {
     float: none;
   }
-  .toolbar-pf-view-selector {
-    @media (min-width: @grid-float-breakpoint) {
-      float: left;
-    }
-  }
 }
 .toolbar-pf-find {
   font-size: (@font-size-base + 2);
   position: relative;
-  .btn {
-    outline: none;
-  }
 }
 .find-pf-dropdown-container {
   background: @color-pf-white;
@@ -113,10 +84,7 @@
   &:before,
   &:after {
     content: "";
-    display:block;
-    height:0;
     position: absolute;
-    width:0;
   }
   &:before {
     border-bottom:11px solid @color-pf-black-400;
@@ -147,37 +115,35 @@
     }
   }
   input {
-    padding: 5px 95px 5px 5px;
-    width: 100%;
     height: 30px;
-    line-height: 30px;
+    padding: 5px 117px 5px 5px; // 112px (components) + 5px (offset)
+    width: 100%;
   }
   .find-pf-buttons {
     position: absolute;
     right: 10px;
-    top: 0;
+    top: 5px;
     .btn {
+      border: none;
+      cursor: pointer;
       margin-left: 0 !important;
+      padding: 0;
+      width: 18px;
+      .fa-angle-up,
+      .fa-angle-down {
+        font-weight: bold;
+        font-size: (@font-size-base + 6);
+      }
+      .pficon-close { font-size: (@font-size-base + 2); }
     }
     span {
-      cursor: pointer;
-      display: inline-block;
       height: 30px;
       line-height: 30px;
-      margin-right: 5px;
       vertical-align: middle;
     }
     .find-pf-nums {
       color: @color-pf-black-500;
-      font-size: (@font-size-base + 2);
-    }
-    .btn-link .fa-angle-up,
-    .btn-link .fa-angle-down {
-      font-weight: bold;
-      font-size: (@font-size-base + 6);
-    }
-    .btn-find-close {
-      font-size: (@font-size-base + 2);
+      margin-right: 3px;
     }
   }
 }
@@ -208,11 +174,4 @@
       margin-left: 5px;
     }
   }
-  .list-inline {
-    margin: 0 10px 0 5px;
-    li {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
 }

tests/pages/_includes/widgets/layouts/toolbar.html

@@ -60,11 +60,9 @@
                   </div>
                 </div>
                 <div class="form-group toolbar-pf-view-selector">
-                  <ul class="list-inline">
-                    <li><a href="#"><i class="fa fa-th"></i></a></li>
-                    <li class="active"><a href="#"><i class="fa fa-th-large"></i></a></li>
-                    <li><a href="#"><i class="fa fa-th-list"></i></a></li>
-                  </ul>
+                  <button class="btn btn-link"><i class="fa fa-th"></i></button>
+                  <button class="btn btn-link active"><i class="fa fa-th-large"></i></button>
+                  <button class="btn btn-link"><i class="fa fa-th-list"></i></button>
                 </div>
               </div>
             </form>