ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(overlays): fix overlay content node selector to be more accurate

Browse source
This commit is contained in:
Joren Broekema 2019-11-27 09:20:19 +01:00 committed by Thomas Allmer
parent 57a3c04873
commit 411889c919
2 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/overlays/src/OverlayMixin.js
View file

@ -148,11 +148,21 @@ export const OverlayMixin = dedupeMixin(
return Array.from(this.children).find(child => child.slot === 'invoker');
}
// FIXME: This should be refactored to
// Array.from(this.children).find(child => child.slot === 'content')
// When this issue is fixed https://github.com/ing-bank/lion/issues/382
get _overlayContentNode() {
const contentNode = this.querySelector('[slot=content]');
let contentNode;
// FIXME: This should shadow outlet in between the host and the content slot, is a problem
// Should simply be Array.from(this.children).find(child => child.slot === 'content')
// Issue: https://github.com/ing-bank/lion/issues/382
const shadowOutlet = Array.from(this.children).find(
child => child.slot === '_overlay-shadow-outlet',
);
if (shadowOutlet) {
contentNode = Array.from(shadowOutlet.children).find(child => child.slot === 'content');
} else {
contentNode = Array.from(this.children).find(child => child.slot === 'content');
}
if (contentNode) {
this._cachedOverlayContentNode = contentNode;
}

6
packages/overlays/stories/index.stories.js
View file

@ -84,12 +84,6 @@ const overlayDemoStyle = css`
padding: 10px;
border: 1px solid black;
}
@media (max-width: 480px) {
.overlay {
display: none;
}
}
`;
customElements.define(