Modified kebab to pull right per code comments.

Adjusted spacing for bulk actions.
patternfly · Nov 8, 2016 · 4f291ca · 4f291ca
1 parent f680337
commit 4f291ca
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/less/datatables.less b/src/less/datatables.less
@@ -282,6 +282,18 @@
         }
       }
     }
+    .toolbar-pf-action-right {
+      > .btn {
+        margin-left: 5px;
+      }
+      > .dropdown-kebab-pf {
+        margin-left: 10px;
+      }
+      float: right;
+      @media (max-width: @grid-float-breakpoint) {
+        float: right;
+      }
+    }
     .toolbar-pf-results {
       > div {
         padding-left: 10px;
@@ -302,7 +314,7 @@
     width: 100%;
   }
   .dropdown-kebab-pf {
-    padding-left: @table-cell-padding;
+    padding-right: @table-cell-padding;
   }
 }
 

diff --git a/tests/pages/_includes/widgets/datatables/datatable.html b/tests/pages/_includes/widgets/datatables/datatable.html
@@ -36,15 +36,15 @@
             className: "datatable-pf-actions",
             render: function (data, type, full, meta) {
               // Inline action kebab renderer
-              return '<div class="dropdown btn-group dropdown-kebab-pf">' +
+              return '<div class="dropdown pull-right dropdown-kebab-pf">' +
                 '<button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">' +
                 '<span class="fa fa-ellipsis-v"></span></button>' +
-                '<ul class="dropdown-menu " aria-labelledby="dropdownKebab">' +
+                '<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">' +
                 '<li><a href="#">Action</a></li>' +
                 '<li><a href="#">Another action</a></li>' +
                 '<li><a href="#">Something else here</a></li>' +
                 '<li role="separator" class="divider"></li>' +
-                '<li><a href="#">Separated link</a></li></ul></div>';
+                '<li><a href="#">Separated link</a></li></div>';
             }
           }
         ],

diff --git a/tests/pages/_includes/widgets/datatables/tmpl/toolbar.html b/tests/pages/_includes/widgets/datatables/tmpl/toolbar.html
@@ -22,7 +22,7 @@
           <button class="btn btn-default" type="button" id="deleteAllRows">Delete All Rows</button>
           <button class="btn btn-default" type="button" id="restoreRows">Restore Rows</button>
           <button class="btn btn-default" type="button">Action</button>
-          {% include widgets/kebab.html dropmenuType="dropdown btn-group" dropmenuId="actionsKebab" dropmenuVariation="dropdown-kebab-pf" %}
+          {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="actionsKebab" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
         </div>
       </form>
       <div class="row toolbar-pf-results">