Issue #1799498 by seutje, tim.plunkett, delmarr, jessebeach: improve dropbutton.

core/includes/theme.inc

@@ -1721,7 +1721,9 @@ function theme_links($variables) {
  *     the dropbutton menu. Properties used: #children.
  */
 function theme_dropbutton_wrapper($variables) {
-  return '<div class="dropbutton-wrapper"><div class="dropbutton-widget">' . $variables['element']['#children'] . '</div></div>';
+  if (!empty($variables['element']['#children'])) {
+    return '<div class="dropbutton-wrapper"><div class="dropbutton-widget">' . $variables['element']['#children'] . '</div></div>';
+  }
 }
 
 /**

core/misc/dropbutton/dropbutton.base-rtl.css

@@ -7,10 +7,6 @@
 /**
  * The dropbutton arrow.
  */
-.dropbutton-widget {
-  left: 0;
-  right: auto;
-}
 .dropbutton-toggle {
   left: 0;
   right: auto;
@@ -19,7 +15,7 @@
   left: 0.6667em;
   right: auto;
 }
-.dropbutton-multiple .dropbutton-widget {
+.js .dropbutton-multiple .dropbutton-widget {
   padding-left: 2em;
   padding-right: 0;
 }

core/misc/dropbutton/dropbutton.base.css

@@ -13,28 +13,28 @@
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
-.dropbutton-wrapper {
+.js .dropbutton-wrapper {
   display: block;
   min-height: 2em;
   position: relative;
 }
-.dropbutton-widget {
-  position: absolute;
-  right: 0; /* LTR */
-}
-.dropbutton-wrapper,
-.dropbutton-widget {
+.js .dropbutton-wrapper,
+.js .dropbutton-widget {
   max-width: 100%;
 }
+.js .dropbutton-widget {
+  position: absolute;
+}
 /* UL styles are over-scoped in core, so this selector needs weight parity. */
-.dropbutton-widget .dropbutton {
+.js .dropbutton-widget .dropbutton {
   list-style-image: none;
   list-style-type: none;
   margin: 0;
+  overflow: hidden;
   padding: 0;
 }
-.dropbutton li,
-.dropbutton a {
+.js .dropbutton li,
+.js .dropbutton a {
   display: block;
 }
 
@@ -48,7 +48,7 @@
  * The arrow is created using border on a zero-width, zero-height span.
  * The arrow inherits the link color, but can be overridden with border colors.
  */
-.dropbutton-multiple .dropbutton-widget {
+.js .dropbutton-multiple .dropbutton-widget {
   padding-right: 2em; /* LTR */
 }
 .dropbutton-multiple.open,
@@ -97,6 +97,7 @@
   right: 40%; /* 0.6667em; */ /* LTR */
   top: 0.9em;
   width: 0;
+  overflow: hidden;
 }
 .dropbutton-multiple.open .dropbutton-arrow {
   border-bottom: 0.3333em solid;

core/misc/dropbutton/dropbutton.js

@@ -59,7 +59,7 @@ function DropButton (dropbutton, settings) {
     var $primary = this.$actions.slice(0,1);
     // Identify the secondary actions.
     var $secondary = this.$actions.slice(1);
-    $($secondary).addClass('secondary-action');
+    $secondary.addClass('secondary-action');
     // Add toggle link.
     $primary.after(Drupal.theme('dropbuttonToggle', options));
     // Bind mouse events.
@@ -73,7 +73,12 @@ function DropButton (dropbutton, settings) {
         /**
          * Clears timeout when mouseout of the dropdown.
          */
-        'mouseenter.dropbutton': $.proxy(this.hoverIn, this)
+        'mouseenter.dropbutton': $.proxy(this.hoverIn, this),
+        /**
+         * Similar to mouseleave/mouseenter, but for keyboard navigation.
+         */
+        'focusout.dropbutton': $.proxy(this.focusOut, this),
+        'focusin.dropbutton': $.proxy(this.focusIn, this)
       });
   }
 }
@@ -125,6 +130,14 @@ $.extend(DropButton.prototype, {
 
   close: function () {
     this.toggle(false);
+  },
+
+  focusOut: function(e) {
+    this.hoverOut.call(this, e);
+  },
+
+  focusIn: function(e) {
+    this.hoverIn.call(this, e);
   }
 });
 

core/misc/dropbutton/dropbutton.theme.css

@@ -4,14 +4,11 @@
  * General styles for dropbuttons.
  */
 
-.dropbutton-wrapper {
-  cursor: pointer;
-}
-.dropbutton-widget {
+.js .dropbutton-widget {
   background-color: white;
   border: 1px solid #cccccc;
 }
-.dropbutton-widget:hover {
+.js .dropbutton-widget:hover {
   border-color: #b8b8b8;
 }
 .dropbutton .dropbutton-action > * {

core/themes/bartik/css/style.css

@@ -1609,15 +1609,15 @@ div.admin-panel .description {
 }
 
 /* ---------- Dropbutton ----------- */
-.dropbutton-widget {
+.js .dropbutton-widget {
   background-color: white;
   border-radius: 5px;
 }
-.dropbutton-widget:hover {
+.js .dropbutton-widget:hover {
   background-color: #f8f8f8;
   border-color: #b8b8b8;
 }
-.dropbutton-multiple.open .dropbutton-widget:hover {
+.js .dropbutton-multiple.open .dropbutton-widget:hover {
   background-color: white;
 }
 

core/themes/seven/style.css

@@ -1036,7 +1036,7 @@ div.add-or-remove-shortcuts {
 }
 
 /* Dropbutton */
-.dropbutton-widget {
+.js .dropbutton-widget {
   background-color: #fff;
   background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
   background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
@@ -1044,11 +1044,11 @@ div.add-or-remove-shortcuts {
   background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
   border-radius: 5px;
 }
-.dropbutton-widget:hover {
+.js .dropbutton-widget:hover {
   background-color: #f0f0f0;
   border-color: #b8b8b8;
 }
-.dropbutton-multiple.open .dropbutton-widget:hover {
+.js .dropbutton-multiple.open .dropbutton-widget:hover {
   background-color: #fff;
 }
 .dropbutton-content li:first-child > * {