diff --git a/client/src/entrypoints/admin/wagtailadmin.js b/client/src/entrypoints/admin/wagtailadmin.js index a5dc72c6d0..4390e087a6 100644 --- a/client/src/entrypoints/admin/wagtailadmin.js +++ b/client/src/entrypoints/admin/wagtailadmin.js @@ -1,5 +1,5 @@ import { Icon, Portal } from '../..'; -import { initModernDropdown, initTooltips } from '../../includes/initTooltips'; +import { initTooltips } from '../../includes/initTooltips'; import { initTabs } from '../../includes/tabs'; import { dialog } from '../../includes/dialog'; import initCollapsibleBreadcrumbs from '../../includes/breadcrumbs'; @@ -21,7 +21,6 @@ window.wagtail.components = { */ document.addEventListener('DOMContentLoaded', () => { initTooltips(); - initModernDropdown(); initTabs(); dialog(); initCollapsibleBreadcrumbs(); diff --git a/client/src/includes/initTooltips.test.js b/client/src/includes/initTooltips.test.js index c71e506fdd..2791902e52 100644 --- a/client/src/includes/initTooltips.test.js +++ b/client/src/includes/initTooltips.test.js @@ -1,5 +1,5 @@ import * as tippy from 'tippy.js'; -import { initTooltips, initModernDropdown } from './initTooltips'; +import { initTooltips } from './initTooltips'; jest.spyOn(tippy, 'default'); @@ -14,41 +14,3 @@ describe('initTooltips', () => { }); }); }); - -describe('initModernDropdown', () => { - it('should not call Tippy if there is no element with [data-button-with-dropdown]', () => { - expect(tippy.default).not.toHaveBeenCalled(); - - initModernDropdown(); - - expect(tippy.default).not.toHaveBeenCalled(); - }); - - it('should call the Tippy util with the [data-button-with-dropdown-toggle] attribute', () => { - const html = ` -
- -
- Content -
-
`; - document.body.innerHTML = html; - - const content = document.getElementById('content'); - - expect(tippy.default).not.toHaveBeenCalled(); - - initModernDropdown(); - - expect(tippy.default).toHaveBeenLastCalledWith( - document.getElementById('button'), - expect.objectContaining({ - content, - trigger: 'click', - interactive: true, - theme: 'dropdown', - placement: 'bottom', - }), - ); - }); -}); diff --git a/client/src/includes/initTooltips.ts b/client/src/includes/initTooltips.ts index 1c2db7f398..6b36bb785c 100644 --- a/client/src/includes/initTooltips.ts +++ b/client/src/includes/initTooltips.ts @@ -1,4 +1,4 @@ -import tippy, { Content, Props, Instance } from 'tippy.js'; +import tippy, { Instance } from 'tippy.js'; /** * Hides tooltip when escape key is pressed @@ -86,70 +86,3 @@ export function initTooltips() { plugins: [hideTooltipOnEsc], }); } - -/** - * Actions Dropdown initialisation using the Tippy library. - * @example - *
- * - *
- *
- */ -export function initModernDropdown() { - const containers = document.querySelectorAll('[data-button-with-dropdown]'); - - containers.forEach((container) => { - const content = container.querySelector( - '[data-button-with-dropdown-content]', - ); - const toggle: HTMLElement | null = container.querySelector( - '[data-button-with-dropdown-toggle]', - ); - - // Adding data-hover-tooltip-content="Tooltip Text" to the toggle element will give you a tooltip on hover as well - const hoverTooltip = toggle?.dataset.hoverTooltipContent; - let hoverTooltipInstance: Instance; - - if (toggle) { - if (content) { - content.classList.remove('w-hidden'); - } - - if (hoverTooltip) { - hoverTooltipInstance = tippy(toggle, { - content: hoverTooltip, - placement: 'bottom', - plugins: [hideTooltipOnEsc], - }); - } - - /** - * Default Tippy Options - */ - const tippyOptions: Partial = { - content: content as Content, - trigger: 'click', - interactive: true, - theme: 'dropdown', - placement: 'bottom', - plugins: [ - hideTooltipOnEsc, - hideTooltipOnBreadcrumbExpandAndCollapse, - rotateToggleIcon, - ], - onShow() { - if (hoverTooltipInstance) { - hoverTooltipInstance.disable(); - } - }, - onHide() { - if (hoverTooltipInstance) { - hoverTooltipInstance.enable(); - } - }, - }; - - tippy(toggle, tippyOptions); - } - }); -}