Update action menu dropdown with white background on add/edit

client/scss/components/_dropdown.legacy.scss

@@ -190,6 +190,31 @@
         }
     }
 
+    &.dropdown-button--white {
+        ul {
+            background-color: $color-grey-3;
+        }
+
+        li a,
+        li .button {
+            background-color: $color-white;
+            color: $color-button;
+            border: 0;
+
+            &:hover {
+                background-color: $color-grey-4;
+            }
+
+            &.no {
+                color: $color-button-no;
+            }
+
+            &.warning {
+                color: $color-button-warning;
+            }
+        }
+    }
+
     &.dropup.dropdown-button {
         &.open {
             > input[type=button],

wagtail/admin/action_menu.py

@@ -18,6 +18,7 @@ class ActionMenuItem(metaclass=MediaDefiningClass):
 
     label = ''
     name = None
+    classname = ''
 
     def __init__(self, order=None):
         if order is not None:
@@ -45,6 +46,7 @@ class ActionMenuItem(metaclass=MediaDefiningClass):
             'label': self.label,
             'url': self.get_url(request, context),
             'name': self.name,
+            'classname': self.classname,
         })
         return context
 
@@ -140,6 +142,7 @@ class RestartWorkflowMenuItem(ActionMenuItem):
 class CancelWorkflowMenuItem(ActionMenuItem):
     label = _("Cancel workflow ")
     name = 'action-cancel-workflow'
+    classname = 'no'
 
     def is_shown(self, request, context):
         if context['view'] == 'edit':
@@ -151,6 +154,7 @@ class CancelWorkflowMenuItem(ActionMenuItem):
 class UnpublishMenuItem(ActionMenuItem):
     label = _("Unpublish")
     name = 'action-unpublish'
+    classname = 'no'
 
     def is_shown(self, request, context):
         return (
@@ -166,6 +170,7 @@ class UnpublishMenuItem(ActionMenuItem):
 class DeleteMenuItem(ActionMenuItem):
     name = 'action-delete'
     label = _("Delete")
+    classname = 'no'
 
     def is_shown(self, request, context):
         return (

wagtail/admin/templates/wagtailadmin/pages/action_menu/menu_item.html

@@ -1,5 +1,5 @@
 {% if url %}
-    <a class="button" href="{{ url }}">{{ label }}</a>
+    <a class="button{% if classname %} {{ classname }}{% endif %}" href="{{ url }}">{{ label }}</a>
 {% else %}
-    <input type="submit" name="{{ name }}" value="{{ label }}" class="button" />
+    <input type="submit" name="{{ name }}" value="{{ label }}" class="button{% if classname %} {{ classname }}{% endif %}" />
 {% endif %}

wagtail/admin/templates/wagtailadmin/pages/action_menu/workflow_menu_item.html

@@ -1 +1 @@
-<button class="button" data-workflow-action-url="{% url 'wagtailadmin_pages:workflow_action' page.id name current_task_state.id %}" {% if launch_modal %}data-launch-modal{% endif %}>{{ label }}</button>
+<button class="button" data-workflow-action-url="{% url 'wagtailadmin_pages:workflow_action' page.id name current_task_state.id %}" {% if launch_modal %}data-launch-modal{% endif %}>{{ label }}</button>

wagtail/admin/templates/wagtailadmin/pages/create.html

@@ -29,7 +29,7 @@
             <nav aria-label="{% trans 'Actions' %}">
                 <ul>
                   <li class="actions">
-                      <div class="dropdown dropup dropdown-button match-width {% if is_revision %}warning{% endif %}">
+                      <div class="dropdown dropup dropdown-button dropdown-button--white match-width {% if is_revision %}warning{% endif %}">
                           {{ action_menu.render_html }}
                       </div>
                   </li>

wagtail/admin/templates/wagtailadmin/pages/edit.html

@@ -53,7 +53,7 @@
             <nav aria-label="{% trans 'Actions' %}">
                 <ul>
                     <li class="actions">
-                        <div class="dropdown dropup dropdown-button match-width {% if is_revision %}warning{% endif %}">
+                        <div class="dropdown dropup dropdown-button dropdown-button--white match-width {% if is_revision %}warning{% endif %}">
                             {{ action_menu.render_html }}
                         </div>
                     </li>

wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html

@@ -561,6 +561,18 @@
                     </div>
                 </div>
 
+                <div class="col3">
+                    <div class="dropdown dropdown-button dropdown-button--white">
+                        <a href="#" class="button" value="drop down">White drop down</a>
+                        <div class="dropdown-toggle icon icon-arrow-down"></div>
+                        <ul>
+                            <li><a href="#">items should not exceed button match-width</a></li>
+                            <li><a href="#">item 2</a></li>
+                            <li><a href="#" class="button no">item with destructive action</a></li>
+                        </ul>
+                    </div>
+                </div>
+
                 <div class="col3">
                     <button class="button">button for comparison of height</button>
                 </div>