Skip to content

refactor: move hover persiting code into "stack" from "trigger" #2612

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 23, 2022
Merged

refactor: move hover persiting code into "stack" from "trigger" #2612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cca219c
refactor: move hover persiting code into "stack" from "trigger"
Westbrook Sep 23, 2022
e1e440f
ci: update golden images cache
Westbrook Sep 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ executors:
parameters:
current_golden_images_hash:
type: string
default: 2d6944c9ffce3b991115861837ccd05e1b115cb5
default: cca219cfdce1e26fe83b497452e714378e80ac1a
commands:
downstream:
steps:
Expand Down
2 changes: 0 additions & 2 deletions packages/overlay/src/OverlayTrigger.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,8 +309,6 @@ export class OverlayTrigger extends SpectrumElement {
case 'click':
if (this.clickContent) {
this.open = event.type;
} else if (this.closeHoverOverlay) {
event.preventDefault();
}
return;
case 'longpress':
Expand Down
17 changes: 14 additions & 3 deletions packages/overlay/src/overlay-stack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,8 +248,8 @@ export class OverlayStack {

const contentWithLifecycle =
details.content as unknown as ManagedOverlayContent;
const { trigger } = details;
if (contentWithLifecycle.overlayWillOpenCallback) {
const { trigger } = details;
contentWithLifecycle.overlayWillOpenCallback({ trigger });
}

Expand All @@ -264,7 +264,6 @@ export class OverlayStack {
const cancelled = await Promise.race(promises);
if (cancelled) {
if (contentWithLifecycle.overlayOpenCancelledCallback) {
const { trigger } = details;
contentWithLifecycle.overlayOpenCancelledCallback({
trigger,
});
Expand Down Expand Up @@ -585,8 +584,20 @@ export class OverlayStack {
if (this.preventMouseRootClose || event.defaultPrevented) {
return;
}
this.closeTopOverlay();
const overlaysToClose = [];
// Find the top most overlay that is not triggered by an
// element on the path of the current click event.
let index = this.overlays.length;
while (index && overlaysToClose.length === 0) {
index -= 1;
const overlay = this.overlays[index];
if (
!event.composedPath().includes(overlay.trigger) ||
overlay.interaction !== 'hover'
Comment on lines +595 to +596
Copy link
Member

@lazd lazd Sep 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect. This should keep overlays open that are in the same path (i.e. an open modal that has a click overlay), and it should keep hover overlays open as well (they go away when you remove hover). NAILED IT!

) {
overlaysToClose.push(overlay);
}
}
let root: HTMLElement | undefined = this.topOverlay?.root;
let overlay = parentOverlayOf(root);
while (root && overlay) {
Expand Down
34 changes: 34 additions & 0 deletions packages/overlay/stories/overlay.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -573,6 +573,40 @@ export const longpress = (): TemplateResult => {
`;
};

export const clickAndHoverTargets = (): TemplateResult => {
return html`
<div>
${storyStyles}
<style>
.friendly-target {
padding: 4px;
margin: 6px;
border: 2px solid black;
border-radius: 6px;
cursor: default;
}
</style>
<overlay-trigger placement="right">
<div class="friendly-target" slot="trigger" tabindex="0">
Click me
</div>
<sp-tooltip slot="click-content" tip="right">
Ok, now hover the other trigger
</sp-tooltip>
</overlay-trigger>
<overlay-trigger placement="left">
<div class="friendly-target" slot="trigger" tabindex="0">
Then hover me
</div>
<sp-tooltip slot="hover-content" tip="right">
Now click my trigger -- I should stay open, but the other
overlay should close
</sp-tooltip>
</overlay-trigger>
</div>
`;
};

function nextFrame(): Promise<void> {
return new Promise((res) => requestAnimationFrame(() => res()));
}
Expand Down
Loading