Removed breadcrumbs next's reliance on data-slim-header

- fixes #8644

CHANGELOG.txt

@@ -33,6 +33,7 @@ Changelog
  * Update `ReportView` to extend from generic `wagtail.admin.views.generic.models.IndexView` (Sage Abdullah)
  * Introduce a `wagtail.admin.viewsets.chooser.ChooserViewSet` module to serve as a common base implementation for chooser modals (Matt Westcott)
  * Add documentation for `wagtail.admin.viewsets.model.ModelViewSet` (Matt Westcott)
+ * Enhance new Breadcrumbs so they can be added to any header or element (Paarth Agarwal)
  * Fix: Typo in `ResumeWorkflowActionFormatter` message (Stefan Hammer)
  * Fix: Throw a meaningful error when saving an image to an unrecognised image format (Christian Franke)
  * Fix: Remove extra padding for headers with breadcrumbs on mobile viewport (Steven Steinwand)

client/src/includes/breadcrumbs.js

@@ -1,13 +1,20 @@
 export default function initCollapsibleBreadcrumbs() {
   const breadcrumbsContainer = document.querySelector('[data-breadcrumb-next]');
-  const slimHeader = document.querySelector('[data-slim-header]');
 
   if (!breadcrumbsContainer) {
     return;
   }
+
+  const header = breadcrumbsContainer.closest(
+    breadcrumbsContainer.dataset.headerSelector || 'header',
+  );
+
+  if (!header) return;
+
   const breadcrumbsToggle = breadcrumbsContainer.querySelector(
     '[data-toggle-breadcrumbs]',
   );
+
   const breadcrumbItems = breadcrumbsContainer.querySelectorAll(
     '[data-breadcrumb-item]',
   );
@@ -110,7 +117,7 @@ export default function initCollapsibleBreadcrumbs() {
     mouseExitedToggle = true;
   });
 
-  slimHeader.addEventListener('mouseleave', () => {
+  header.addEventListener('mouseleave', () => {
     if (!keepOpen) {
       hideBreadcrumbsWithDelay = setTimeout(() => {
         hideBreadcrumbs();
@@ -119,7 +126,7 @@ export default function initCollapsibleBreadcrumbs() {
     }
   });
 
-  slimHeader.addEventListener('mouseenter', () => {
+  header.addEventListener('mouseenter', () => {
     clearTimeout(hideBreadcrumbsWithDelay);
   });
 

client/src/includes/breadcrumbs.test.js

@@ -2,6 +2,11 @@ import initCollapsibleBreadcrumbs from './breadcrumbs';
 
 describe('initCollapsibleBreadcrumbs', () => {
   const spy = jest.spyOn(document, 'addEventListener');
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should do nothing if there is no breadcrumbs container', () => {
     // Set up our document body
     document.body.innerHTML = `
@@ -18,22 +23,24 @@ describe('initCollapsibleBreadcrumbs', () => {
     it('should expand the breadcrumbs when clicked', () => {
       // Set up our document body
       document.body.innerHTML = `
-<div data-slim-header>
-  <div data-breadcrumb-next>
-    <button id="button" data-toggle-breadcrumbs>
-      <svg aria-hidden="true">
-        <use id="use" href="#icon-breadcrumb-expand" />
-      </svg>
-    </button>
-    <nav aria-label="Breadcrumb">
-      <span id="username" data-breadcrumb-item />
-    </nav>
-  </div>
-</div>`;
+      <header>
+        <div data-breadcrumb-next>
+          <button id="button" data-toggle-breadcrumbs>
+            <svg aria-hidden="true">
+              <use id="use" href="#icon-breadcrumb-expand" />
+            </svg>
+          </button>
+          <nav aria-label="Breadcrumb">
+            <span id="username" data-breadcrumb-item />
+          </nav>
+        </div>
+      </header>`;
+
+      expect(spy).not.toHaveBeenCalled();
       initCollapsibleBreadcrumbs();
       // event listeners registered
       expect(spy).toHaveBeenCalled();
-      // click to expand the breadcumbs
+      // click to expand the breadcrumbs
       document.getElementById('button').click();
       // click to change the button icon
       document.getElementById('button').click();
@@ -55,5 +62,38 @@ describe('initCollapsibleBreadcrumbs', () => {
         '#icon-breadcrumb-expand',
       );
     });
+
+    it('should use header based on data attribute', () => {
+      document.body.innerHTML = `
+      <div id="hover">
+        <div data-breadcrumb-next data-header-selector="#hover">
+          <button id="button" data-toggle-breadcrumbs>
+            <svg aria-hidden="true">
+              <use id="use" href="#icon-breadcrumb-expand" />
+            </svg>
+          </button>
+          <nav aria-label="Breadcrumb">
+            <span id="username" data-breadcrumb-item />
+          </nav>
+        </div>
+      </div>`;
+
+      expect(spy).not.toHaveBeenCalled();
+
+      const containerSpy = jest.spyOn(
+        document.getElementById('hover'),
+        'addEventListener',
+      );
+
+      expect(containerSpy).not.toHaveBeenCalled();
+
+      initCollapsibleBreadcrumbs();
+
+      expect(spy).toHaveBeenLastCalledWith('keydown', expect.any(Function));
+      expect(containerSpy).toHaveBeenLastCalledWith(
+        'mouseenter',
+        expect.any(Function),
+      );
+    });
   });
 });

docs/releases/4.0.md

@@ -42,6 +42,7 @@ When using a queryset to render a list of images, you can now use the ``prefetch
  * Update `ReportView` to extend from generic `wagtail.admin.views.generic.models.IndexView` (Sage Abdullah)
  * Introduce a `wagtail.admin.viewsets.chooser.ChooserViewSet` module to serve as a common base implementation for chooser modals (Matt Westcott)
  * Add documentation for `wagtail.admin.viewsets.model.ModelViewSet` (Matt Westcott)
+ * Enhance new Breadcrumbs so they can be added to any header or container element (Paarth Agarwal)
 
 ### Bug fixes
 

wagtail/admin/templates/wagtailadmin/shared/breadcrumb-next.stories.tsx

@@ -16,9 +16,9 @@ export default {
 };
 
 const Template = (args) => (
-  <div data-slim-header>
+  <header>
     <Pattern filename={__filename} context={args} />
-  </div>
+  </header>
 );
 
 export const Base = Template.bind({});

wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html

@@ -3,7 +3,7 @@
 <header class="w-flex w-flex-col sm:w-flex-row w-items-center w-justify-between w-bg-grey-50 w-border-b w-border-grey-100 w-px-0 w-py-0 w-mb-0 w-relative w-top-0 w-z-header sm:w-sticky w-min-h-[50px]">
 
     {# Padding left on mobile to give space for navigation toggle, #}
-    <div class="w-pl-[50px] w-min-h-[50px] sm:w-pl-0 sm:w-pr-2 w-w-full w-flex-1 w-overflow-x-auto w-box-border" data-slim-header>
+    <div class="w-pl-[50px] w-min-h-[50px] sm:w-pl-0 sm:w-pr-2 w-w-full w-flex-1 w-overflow-x-auto w-box-border">
         <div class="w-flex w-flex-1 w-items-center w-overflow-hidden">
             {% block header_content %}
             {% endblock %}