Merge pull request #835 from jgiardino/kebab-callout

fix(kebab): adjust position of kebab callout
patternfly · Jan 24, 2018 · 176ea72 · 176ea72
2 parents 665d5ec + 4b1c686
commit 176ea72
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/src/less/dropdowns.less b/src/less/dropdowns.less
@@ -170,6 +170,7 @@
 
 // Kebab dropmenu
 .dropdown-kebab-pf {
+  &.btn-group > .btn:first-child,
   .btn-link {
     color: @gray-darker;
     font-size: (@font-size-base + 4);
@@ -183,6 +184,7 @@
       color: @link-color;
     }
   }
+  &.btn-group { margin-left: (@grid-gutter-width/4); }
   .dropdown-menu {
     left: -15px;
     margin-top: 11px;

diff --git a/src/less/toolbar.less b/src/less/toolbar.less
@@ -38,9 +38,9 @@
       &:hover { color: @link-color; }
     }
     .dropdown-kebab-pf .btn-link {
-        padding: 4px (@grid-gutter-width/4);
-        margin-left: (@grid-gutter-width/(-4));
-        margin-right: (@grid-gutter-width/(-4));
+      padding: 4px (@grid-gutter-width/4);
+      margin-left: (@grid-gutter-width/(-4));
+      margin-right: (@grid-gutter-width/(-4));
     }
   }
 }

diff --git a/tests/pages/dropdowns.html b/tests/pages/dropdowns.html
@@ -46,4 +46,18 @@ <h2>Dropup Kebab</h2>
           {% include widgets/kebab.html dropmenuType="dropup" dropmenuPosition="pull-right" dropmenuId="dropupKebabRight1" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
         </div>
       </div>
-
+      <h2>Dropdown Kebab with Buttons</h2>
+      <div class="row">
+        <div class="col-xs-6 col-sm-4 col-md-2">
+          <button type="button" class="btn btn-default">Button</button>
+          <button type="button" class="btn btn-default">Button</button>
+          {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="btn-group" dropmenuId="dropdownKebabGroup" dropmenuVariation="dropdown-kebab-pf" %}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-6 col-sm-4 col-md-2">
+          <button type="button" class="btn btn-default">Button</button>
+          <button type="button" class="btn btn-default">Button</button>
+          {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="btn-group" dropmenuId="dropdownKebabGroupRight" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
+        </div>
+      </div>