diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 1e87d95561..90ee844f13 100644
--- a/CHANGELOG.txt
+++ b/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)
diff --git a/client/src/includes/breadcrumbs.js b/client/src/includes/breadcrumbs.js
index b93c824be8..6322500e8a 100644
--- a/client/src/includes/breadcrumbs.js
+++ b/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);
});
diff --git a/client/src/includes/breadcrumbs.test.js b/client/src/includes/breadcrumbs.test.js
index 851035e804..bdf9ceb27f 100644
--- a/client/src/includes/breadcrumbs.test.js
+++ b/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 = `
-`;
+ `;
+
+ 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 = `
+ `;
+
+ 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),
+ );
+ });
});
});
diff --git a/docs/releases/4.0.md b/docs/releases/4.0.md
index 824858d309..9afe120868 100644
--- a/docs/releases/4.0.md
+++ b/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
diff --git a/wagtail/admin/templates/wagtailadmin/shared/breadcrumb-next.stories.tsx b/wagtail/admin/templates/wagtailadmin/shared/breadcrumb-next.stories.tsx
index 0c37016905..87070fe4db 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/breadcrumb-next.stories.tsx
+++ b/wagtail/admin/templates/wagtailadmin/shared/breadcrumb-next.stories.tsx
@@ -16,9 +16,9 @@ export default {
};
const Template = (args) => (
-
+
);
export const Base = Template.bind({});
diff --git a/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html b/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
index a15f1691d4..32ea18656c 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
@@ -3,7 +3,7 @@