Tooltip: no-op when nested inside another Tooltip component #57202
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Before moving any further, I'd like to get a quick check from @diegohaz on the chosen approach. Diego, here is a quick recap:
Please let me know if this approach makes sense to you, or if there are better ways to handle this in |
|
I believe that's reasonable. If I'm interpreting the solution correctly, the only issue I foresee is if users typically display portaled content within those buttons. For example: <Tooltip>
<Button />
<Modal>
<Tooltip>
<Button />
</Tooltip>
</Modal>
</Tooltip>If this scenario is unlikely, then I think it's perfectly fine. |
ciampo
force-pushed
the
fix/tooltip-nested
branch
2 times, most recently
from
e566abd
to
bd859de
Compare
This comment was marked as outdated.
This comment was marked as outdated.
ciampo
force-pushed
the
fix/tooltip-nested
branch
from
bd859de
to
ac7c722
Compare
|
Size Change: +50 B (0%) Total Size: 1.69 MB
ℹ️ View Unchanged
|
ciampo
force-pushed
the
fix/tooltip-nested
branch
from
02f9835
to
447c945
Compare
ciampo
added
[Package] Components
ciampo
force-pushed
the
fix/tooltip-nested
branch
from
447c945
to
0e24ae4
Compare
ciampo
requested review from
ajitbohra,
peterwilsoncc and
ellatrix
as code owners
ciampo
commented
Jan 5, 2024
ciampo
commented
Jan 5, 2024
|
|
||
| function UnconnectedTooltip( | ||
| props: WordPressComponentProps< TooltipProps, 'div', false >, | ||
| ref: React.ForwardedRef< any > |
There was a problem hiding this comment.
For the nesting to work correctly, Tooltip needs to forward the ref down to its anchor.
ciampo
commented
Jan 5, 2024
|
Rebased and marked as ready for review after #57345 got merged. |
tyxla
reviewed
Jan 5, 2024
packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap
Outdated
Show resolved
Hide resolved
| const tooltipStore = Ariakit.useTooltipStore( { | ||
| placement: computedPlacement, | ||
| showTimeout: delay, | ||
| } ); | ||
|
|
||
| if ( isNestedInParentTooltip ) { |
There was a problem hiding this comment.
Any potential core use cases with nested behavior that could be affected by this change?
There was a problem hiding this comment.
I can't think of any, if anything because, prior to this PR, I don't think that nesting Tooltip components would not work correctly.
| const tooltipStore = Ariakit.useTooltipStore( { | ||
| placement: computedPlacement, | ||
| showTimeout: delay, | ||
| } ); | ||
|
|
||
| if ( isNestedInParentTooltip ) { |
There was a problem hiding this comment.
Did we also mean to trigger a console warning in that scenario (as per your earlier suggestion)?
There was a problem hiding this comment.
I thought about it, and then I decided not to add a warning as it has the potential to pollute the browser's console‚ especially if we're going to implement the solution proposed in #56490, which purposefully makes use of this nested tooltip logic.
tyxla
approved these changes
Jan 10, 2024
ciampo
force-pushed
the
fix/tooltip-nested
branch
from
7fbfcbe
to
b9ef9ad
Compare
|
Rebased to include the latest updated to |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Requires #57345
Pre-requisite for #56490
What?
Allow nesting 2 or more
Tooltipcomponents without breaking the tooltip functionality. The contents of the tooltip will be the ones defined in the outer-mostTooltipinstance.Why?
In #56490, we're trying to fix an issue where
Buttoncould trash and re-create its children when the internal tooltip logic flips from showing to hiding the tootlip (or vice-versa).The solution proposed in #56490 involves always rendering (in the react sense) the
Tooltipcomponent insideButton. But doing so would cause breakages, since theTooltipcomponent doesn't support that scenario.This PR allows that scenario to work without causing breakages.
How?
By using the internal context system to inform instances of
Tooltipwhether they are being rendered inside another instance ofTooltip. When that happens, theTooltipcomponent only renders the anchor and ignores the tooltip part.Testing Instructions