Skip to content

Commit 2a17e81

Browse files
ciampociampo
committed
Tooltip migration: editor + edit-post + edit-site consumers (2/5)
Migrates 7 consumer call sites in `@wordpress/editor`, `@wordpress/edit-post`, and `@wordpress/edit-site` from the legacy `Tooltip` exported by `@wordpress/components` to the compositional `Tooltip` exported by `@wordpress/ui` (built on top of base-ui under the hood): - editor/collab-sidebar/note-byline (non-interactive `<time>` trigger; visual-only on hover) - editor/collaborators-presence/avatar (non-interactive `<div role="img">` trigger; visual-only on hover) - editor/post-revisions-preview/diff-markers - editor/resizable-editor/resize-handle - editor/template-actions-panel/block-theme-content - edit-post/layout (resize separator) - edit-site/resizable-frame The mechanical rewrite was produced by the jscodeshift codemod landed in PR 1; import placement / ordering and a `jsx-a11y` disable directive that the codemod could not preserve were finished by hand. Also mounts a shell-level `<Tooltip.Provider>` inside `edit-post/layout` and `edit-site/layout`, so tooltips inside each editor coordinate as a group (e.g. once the first tooltip in a group has been shown, subsequent siblings open instantly). PR 5 will do the same for the new dashboard / `@wordpress/boot` shell. Avatar unit tests previously relied on the legacy `Ariakit.TooltipAnchor` adding `tabindex="0"` on a non-interactive trigger; they have been rewritten to verify tooltip *presence* by hovering the avatar and asserting the popup content becomes visible (wrapped in a `Tooltip.Provider` with `delay={ 0 }` so the assertion doesn't race the real-world hover delay). The `edit-post/layout/index.native.js` consumer is intentionally left on the legacy import: it uses `<WCTooltip.Slot>`, which is the SlotFill pattern of the legacy implementation and has no equivalent in the new compositional `Tooltip`.
1 parent 21069e8 commit 2a17e81

9 files changed

Lines changed: 244 additions & 158 deletions

File tree

‎packages/edit-post/src/components/layout/index.js‎

Lines changed: 66 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ import { store as coreStore } from '@wordpress/core-data';
4040
import {
4141
Icon as WCIcon,
4242
SlotFillProvider,
43-
Tooltip as WCTooltip,
4443
__unstableUseNavigateRegions as useNavigateRegions,
4544
privateApis as componentsPrivateApis,
4645
} from '@wordpress/components';
@@ -50,7 +49,8 @@ import {
5049
useRefEffect,
5150
useViewportMatch,
5251
} from '@wordpress/compose';
53-
import { VisuallyHidden } from '@wordpress/ui';
52+
// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
53+
import { Tooltip, VisuallyHidden } from '@wordpress/ui';
5454

5555
/**
5656
* Internal dependencies
@@ -328,16 +328,21 @@ function MetaBoxesMain( { isLegacy } ) {
328328
// The separator button that provides a11y for resizing.
329329
const separator = ! isShort && (
330330
<>
331-
<WCTooltip text={ __( 'Drag to resize' ) }>
332-
<button
333-
ref={ separatorRef }
334-
role="separator" // eslint-disable-line jsx-a11y/no-interactive-element-to-noninteractive-role
335-
aria-valuenow={ usedAriaValueNow }
336-
aria-label={ __( 'Drag to resize' ) }
337-
aria-describedby={ separatorHelpId }
338-
{ ...bindDragGesture() }
331+
<Tooltip.Root>
332+
<Tooltip.Trigger
333+
render={
334+
<button
335+
ref={ separatorRef }
336+
role="separator" // eslint-disable-line jsx-a11y/no-interactive-element-to-noninteractive-role
337+
aria-valuenow={ usedAriaValueNow }
338+
aria-label={ __( 'Drag to resize' ) }
339+
aria-describedby={ separatorHelpId }
340+
{ ...bindDragGesture() }
341+
/>
342+
}
339343
/>
340-
</WCTooltip>
344+
<Tooltip.Popup>{ __( 'Drag to resize' ) }</Tooltip.Popup>
345+
</Tooltip.Root>
341346
<VisuallyHidden id={ separatorHelpId }>
342347
{ __(
343348
'Use up and down arrow keys to resize the meta box pane.'
@@ -572,52 +577,56 @@ function Layout( {
572577

573578
return (
574579
<SlotFillProvider>
575-
<ErrorBoundary canCopyContent>
576-
<WelcomeGuide postType={ currentPostType } />
577-
<div { ...navigateRegionsProps }>
578-
<Editor
579-
settings={ editorSettings }
580-
initialEdits={ initialEdits }
581-
postType={ currentPostType }
582-
postId={ currentPostId }
583-
templateId={ templateId }
584-
className={ className }
585-
forceIsDirty={ hasActiveMetaboxes }
586-
disableIframe={ ! shouldIframe }
587-
// We should auto-focus the canvas (title) on load.
588-
// eslint-disable-next-line jsx-a11y/no-autofocus
589-
autoFocus={ ! isWelcomeGuideVisible }
590-
onActionPerformed={ onActionPerformed }
591-
extraSidebarPanels={
592-
showMetaBoxes && <MetaBoxes location="side" />
593-
}
594-
extraContent={
595-
! isDistractionFree &&
596-
showMetaBoxes && (
597-
<MetaBoxesMain isLegacy={ isDevicePreview } />
598-
)
599-
}
600-
>
601-
<PostLockedModal />
602-
<EditorInitialization />
603-
<FullscreenMode isActive={ isFullscreenActive } />
604-
<BrowserURL />
605-
<UnsavedChangesWarning />
606-
<AutosaveMonitor />
607-
<LocalAutosaveMonitor />
608-
<EditPostKeyboardShortcuts />
609-
<EditorKeyboardShortcutsRegister />
610-
<BlockKeyboardShortcuts />
611-
{ currentPostType === 'wp_block' && (
612-
<InitPatternModal />
613-
) }
614-
<PluginArea onError={ onPluginAreaError } />
615-
<PostEditorMoreMenu />
616-
{ backButton }
617-
<SnackbarNotices className="edit-post-layout__snackbar" />
618-
</Editor>
619-
</div>
620-
</ErrorBoundary>
580+
<Tooltip.Provider>
581+
<ErrorBoundary canCopyContent>
582+
<WelcomeGuide postType={ currentPostType } />
583+
<div { ...navigateRegionsProps }>
584+
<Editor
585+
settings={ editorSettings }
586+
initialEdits={ initialEdits }
587+
postType={ currentPostType }
588+
postId={ currentPostId }
589+
templateId={ templateId }
590+
className={ className }
591+
forceIsDirty={ hasActiveMetaboxes }
592+
disableIframe={ ! shouldIframe }
593+
// We should auto-focus the canvas (title) on load.
594+
// eslint-disable-next-line jsx-a11y/no-autofocus
595+
autoFocus={ ! isWelcomeGuideVisible }
596+
onActionPerformed={ onActionPerformed }
597+
extraSidebarPanels={
598+
showMetaBoxes && <MetaBoxes location="side" />
599+
}
600+
extraContent={
601+
! isDistractionFree &&
602+
showMetaBoxes && (
603+
<MetaBoxesMain
604+
isLegacy={ isDevicePreview }
605+
/>
606+
)
607+
}
608+
>
609+
<PostLockedModal />
610+
<EditorInitialization />
611+
<FullscreenMode isActive={ isFullscreenActive } />
612+
<BrowserURL />
613+
<UnsavedChangesWarning />
614+
<AutosaveMonitor />
615+
<LocalAutosaveMonitor />
616+
<EditPostKeyboardShortcuts />
617+
<EditorKeyboardShortcutsRegister />
618+
<BlockKeyboardShortcuts />
619+
{ currentPostType === 'wp_block' && (
620+
<InitPatternModal />
621+
) }
622+
<PluginArea onError={ onPluginAreaError } />
623+
<PostEditorMoreMenu />
624+
{ backButton }
625+
<SnackbarNotices className="edit-post-layout__snackbar" />
626+
</Editor>
627+
</div>
628+
</ErrorBoundary>
629+
</Tooltip.Provider>
621630
</SlotFillProvider>
622631
);
623632
}

‎packages/edit-site/src/components/layout/index.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ import { PluginArea } from '@wordpress/plugins';
3131
import { SnackbarNotices, store as noticesStore } from '@wordpress/notices';
3232
import { useDispatch, useSelect } from '@wordpress/data';
3333
import { store as preferencesStore } from '@wordpress/preferences';
34+
// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
35+
import { Tooltip } from '@wordpress/ui';
3436

3537
/**
3638
* Internal dependencies
@@ -282,9 +284,11 @@ export default function LayoutWithGlobalStylesProvider( props ) {
282284

283285
return (
284286
<SlotFillProvider>
285-
{ /** This needs to be within the SlotFillProvider */ }
286-
<PluginArea onError={ onPluginAreaError } />
287-
<Layout { ...props } />
287+
<Tooltip.Provider>
288+
{ /** This needs to be within the SlotFillProvider */ }
289+
<PluginArea onError={ onPluginAreaError } />
290+
<Layout { ...props } />
291+
</Tooltip.Provider>
288292
</SlotFillProvider>
289293
);
290294
}

‎packages/edit-site/src/components/resizable-frame/index.js‎

Lines changed: 37 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import clsx from 'clsx';
99
import { useState, useRef } from '@wordpress/element';
1010
import {
1111
ResizableBox,
12-
Tooltip as WCTooltip,
1312
__unstableMotion as motion,
1413
} from '@wordpress/components';
1514
import { useInstanceId, useReducedMotion } from '@wordpress/compose';
@@ -18,6 +17,8 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
1817
import { useSelect } from '@wordpress/data';
1918
import { store as coreStore } from '@wordpress/core-data';
2019
import { addQueryArgs } from '@wordpress/url';
20+
// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
21+
import { Tooltip } from '@wordpress/ui';
2122

2223
/**
2324
* Internal dependencies
@@ -294,32 +295,43 @@ function ResizableFrame( {
294295
handleComponent={ {
295296
[ isRTL() ? 'right' : 'left' ]: canvas === 'view' && (
296297
<>
297-
<WCTooltip text={ __( 'Drag to resize' ) }>
298-
<motion.button
299-
key="handle"
300-
role="separator"
301-
aria-orientation="vertical"
302-
className={ clsx(
303-
'edit-site-resizable-frame__handle',
304-
{ 'is-resizing': isResizing }
305-
) }
306-
variants={ resizeHandleVariants }
307-
animate={ currentResizeHandleVariant }
308-
aria-label={ __( 'Drag to resize' ) }
309-
aria-describedby={ resizableHandleHelpId }
310-
aria-valuenow={
311-
frameRef.current?.resizable?.offsetWidth ||
312-
undefined
298+
<Tooltip.Root>
299+
<Tooltip.Trigger
300+
render={
301+
<motion.button
302+
key="handle"
303+
role="separator"
304+
aria-orientation="vertical"
305+
className={ clsx(
306+
'edit-site-resizable-frame__handle',
307+
{ 'is-resizing': isResizing }
308+
) }
309+
variants={ resizeHandleVariants }
310+
animate={ currentResizeHandleVariant }
311+
aria-label={ __( 'Drag to resize' ) }
312+
aria-describedby={
313+
resizableHandleHelpId
314+
}
315+
aria-valuenow={
316+
frameRef.current?.resizable
317+
?.offsetWidth || undefined
318+
}
319+
aria-valuemin={ FRAME_MIN_WIDTH }
320+
aria-valuemax={ defaultSize.width }
321+
onKeyDown={
322+
handleResizableHandleKeyDown
323+
}
324+
initial="hidden"
325+
exit="hidden"
326+
whileFocus="active"
327+
whileHover="active"
328+
/>
313329
}
314-
aria-valuemin={ FRAME_MIN_WIDTH }
315-
aria-valuemax={ defaultSize.width }
316-
onKeyDown={ handleResizableHandleKeyDown }
317-
initial="hidden"
318-
exit="hidden"
319-
whileFocus="active"
320-
whileHover="active"
321330
/>
322-
</WCTooltip>
331+
<Tooltip.Popup>
332+
{ __( 'Drag to resize' ) }
333+
</Tooltip.Popup>
334+
</Tooltip.Root>
323335
<div hidden id={ resizableHandleHelpId }>
324336
{ __(
325337
'Use left and right arrow keys to resize the canvas. Hold shift to resize in larger increments.'

‎packages/editor/src/components/collab-sidebar/note-byline.js‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/**
22
* WordPress dependencies
33
*/
4-
import { Tooltip as WCTooltip } from '@wordpress/components';
5-
import { Stack } from '@wordpress/ui';
4+
// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
5+
import { Stack, Tooltip } from '@wordpress/ui';
66
import { __, _x } from '@wordpress/i18n';
77
import {
88
dateI18n,
@@ -95,14 +95,19 @@ export function NoteByline( { avatar, name, date, userId } ) {
9595
{ name ?? currentUserName }
9696
</span>
9797
{ date && (
98-
<WCTooltip text={ tooltipText }>
99-
<time
100-
dateTime={ commentDateTime }
101-
className="editor-collab-sidebar-panel__user-time"
102-
>
103-
{ commentDateText }
104-
</time>
105-
</WCTooltip>
98+
<Tooltip.Root>
99+
<Tooltip.Trigger
100+
render={
101+
<time
102+
dateTime={ commentDateTime }
103+
className="editor-collab-sidebar-panel__user-time"
104+
>
105+
{ commentDateText }
106+
</time>
107+
}
108+
/>
109+
<Tooltip.Popup>{ tooltipText }</Tooltip.Popup>
110+
</Tooltip.Root>
106111
) }
107112
</Stack>
108113
</>

‎packages/editor/src/components/collaborators-presence/avatar/component.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@ extend( [ a11yPlugin ] );
1010
/**
1111
* WordPress dependencies
1212
*/
13-
import { Icon as WCIcon, Tooltip as WCTooltip } from '@wordpress/components';
13+
import { Icon as WCIcon } from '@wordpress/components';
1414
import { useMemo } from '@wordpress/element';
15+
// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
16+
import { Tooltip } from '@wordpress/ui';
1517

1618
/**
1719
* Internal dependencies
@@ -114,7 +116,12 @@ function Avatar( {
114116
);
115117

116118
if ( name && ( ! showBadge || label ) ) {
117-
return <WCTooltip text={ name }>{ avatar }</WCTooltip>;
119+
return (
120+
<Tooltip.Root>
121+
<Tooltip.Trigger render={ avatar } />
122+
<Tooltip.Popup>{ name }</Tooltip.Popup>
123+
</Tooltip.Root>
124+
);
118125
}
119126

120127
return avatar;

0 commit comments

Comments
 (0)