Use button components pattern for slim header buttons

client/scss/components/_button.scss

@@ -320,7 +320,7 @@
   }
 }
 
-.header-main-action-button {
+.w-header-button {
   // Temporarily copied from .c-sf-add-button
   display: flex;
   align-items: center;

wagtail/admin/templates/wagtailadmin/generic/base.html

@@ -11,26 +11,9 @@
                 {% fragment stripped as actions %}
                     {% block header_buttons %}
                         {% for button in header_buttons %}
-                            <a href="{{ button.url }}" class="header-main-action-button w-h-slim-header w-ml-3" data-controller="w-tooltip" data-w-tooltip-content-value="{{ button.label }}">
-                                {% icon name=button.icon_name %}
-                            </a>
+                            {% component button %}
                         {% endfor %}
                     {% endblock %}
-                    {% block header_more_buttons %}
-                        {% if header_more_buttons %}
-                            {% trans "Actions" as actions_toggle_title %}
-                            {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=actions_toggle_title toggle_classname="w-p-0 w-w-10 w-h-slim-header hover:w-scale-110 w-transition w-outline-offset-inside w-relative w-z-30" toggle_tooltip_offset="[0, -2]" %}
-                                {% for button in header_more_buttons %}
-                                    <a href="{{ button.url }}" {{ button.base_attrs_string }}>
-                                        {% if button.icon_name %}
-                                            {% icon name=button.icon_name %}
-                                        {% endif %}
-                                        {{ button.label }}
-                                    </a>
-                                {% endfor %}
-                            {% enddropdown %}
-                        {% endif %}
-                    {% endblock %}
                 {% endfragment %}
 
                 {# Ensure all necessary variables are passed explicitly here #}

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

@@ -9,7 +9,7 @@
 {% block actions %}
     {% page_permissions parent_page as parent_page_perms %}
     {% if parent_page_perms.can_add_subpage %}
-        <a href="{% url "wagtailadmin_pages:add_subpage" parent_page.id %}" class="header-main-action-button w-h-slim-header w-ml-3" data-controller="w-tooltip" data-w-tooltip-content-value="{% trans 'Add child page' %}">{% icon name="plus" %}</a>
+        <a href="{% url "wagtailadmin_pages:add_subpage" parent_page.id %}" class="w-header-button w-h-slim-header w-ml-3" data-controller="w-tooltip" data-w-tooltip-content-value="{% trans 'Add child page' %}">{% icon name="plus" %}</a>
     {% endif %}
 
     {# Page actions dropdown #}

wagtail/admin/views/generic/base.py

@@ -10,6 +10,7 @@ from django.views.generic.list import BaseListView
 from wagtail.admin import messages
 from wagtail.admin.ui.tables import Column, Table
 from wagtail.admin.utils import get_valid_next_url_from_request
+from wagtail.admin.widgets.button import ButtonWithDropdown
 
 
 class WagtailAdminTemplateMixin(TemplateResponseMixin, ContextMixin):
@@ -49,10 +50,22 @@ class WagtailAdminTemplateMixin(TemplateResponseMixin, ContextMixin):
         return self.breadcrumbs_items
 
     def get_header_buttons(self):
-        return self.header_buttons
+        buttons = sorted(self.header_buttons)
+
+        more_buttons = self.get_header_more_buttons()
+        if more_buttons:
+            buttons.append(
+                ButtonWithDropdown(
+                    buttons=more_buttons,
+                    icon_name="dots-horizontal",
+                    attrs={"aria-label": _("Actions")},
+                    classname="w-h-slim-header",
+                )
+            )
+        return buttons
 
     def get_header_more_buttons(self):
-        return self.header_more_buttons
+        return sorted(self.header_more_buttons)
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)

wagtail/admin/views/generic/history.py

@@ -14,7 +14,7 @@ from wagtail.admin.filters import DateRangePickerWidget, WagtailFilterSet
 from wagtail.admin.ui.tables import Column, DateColumn, InlineActionsTable, UserColumn
 from wagtail.admin.views.generic.base import BaseObjectMixin, WagtailAdminTemplateMixin
 from wagtail.admin.views.generic.models import IndexView
-from wagtail.admin.widgets.button import Button
+from wagtail.admin.widgets.button import HeaderButton
 from wagtail.log_actions import registry as log_registry
 from wagtail.models import (
     DraftStateMixin,
@@ -103,7 +103,7 @@ class HistoryView(IndexView):
     @cached_property
     def header_buttons(self):
         return [
-            Button(
+            HeaderButton(
                 label=gettext("Edit"),
                 url=self.get_edit_url(self.object),
                 icon_name="edit",

wagtail/admin/views/generic/models.py

@@ -45,7 +45,12 @@ from wagtail.admin.ui.tables import (
 )
 from wagtail.admin.utils import get_latest_str, get_valid_next_url_from_request
 from wagtail.admin.views.mixins import SpreadsheetExportMixin
-from wagtail.admin.widgets.button import Button, ButtonWithDropdown, ListingButton
+from wagtail.admin.widgets.button import (
+    Button,
+    ButtonWithDropdown,
+    HeaderButton,
+    ListingButton,
+)
 from wagtail.log_actions import log
 from wagtail.log_actions import registry as log_registry
 from wagtail.models import DraftStateMixin, Locale, ReferenceIndex
@@ -391,7 +396,7 @@ class IndexView(
             self.request.user, "add"
         ):
             buttons.append(
-                Button(
+                HeaderButton(
                     self.add_item_label,
                     url=self.get_add_url(),
                     icon_name="plus",
@@ -408,6 +413,7 @@ class IndexView(
                     _("Download XLSX"),
                     url=self.xlsx_export_url,
                     icon_name="download",
+                    priority=90,
                 )
             )
             buttons.append(
@@ -415,6 +421,7 @@ class IndexView(
                     _("Download CSV"),
                     url=self.csv_export_url,
                     icon_name="download",
+                    priority=100,
                 )
             )
 

wagtail/admin/views/generic/usage.py

@@ -8,7 +8,7 @@ from django.utils.translation import gettext_lazy
 from wagtail.admin.admin_url_finder import AdminURLFinder
 from wagtail.admin.ui import tables
 from wagtail.admin.utils import get_latest_str
-from wagtail.admin.widgets.button import Button
+from wagtail.admin.widgets.button import HeaderButton
 from wagtail.models import DraftStateMixin, ReferenceIndex
 
 from .base import BaseListingView, BaseObjectMixin
@@ -71,7 +71,7 @@ class UsageView(PermissionCheckedMixin, BaseObjectMixin, BaseListingView):
     @cached_property
     def header_buttons(self):
         return [
-            Button(
+            HeaderButton(
                 label=_("Edit"),
                 url=self.get_edit_url(),
                 icon_name="edit",

wagtail/admin/widgets/button.py

@@ -93,6 +93,36 @@ class Button(Component):
         )
 
 
+class HeaderButton(Button):
+    """An icon-only button to be displayed after the breadcrumbs in the header."""
+
+    def __init__(
+        self,
+        label="",
+        url=None,
+        classname="",
+        icon_name=None,
+        attrs={},
+        **kwargs,
+    ):
+        classname = f"{classname} w-header-button w-h-slim-header w-ml-3".strip()
+        attrs = attrs.copy()
+        attrs.update(
+            {
+                "data-controller": "w-tooltip",
+                "data-w-tooltip-content-value": label,
+            }
+        )
+        super().__init__(
+            label="",
+            url=url,
+            classname=classname,
+            icon_name=icon_name,
+            attrs=attrs,
+            **kwargs,
+        )
+
+
 # Base class for all listing buttons
 # This is also used by SnippetListingButton defined in wagtail.snippets.widgets
 class ListingButton(Button):