Skip to content

Commit

Permalink
fix(overlay): reset cached values and applied CSS before "updating" o…
Browse files Browse the repository at this point in the history 
…verlays
  • Loading branch information
@Westbrook
Westbrook committed Jan 23, 2023
1 parent a69269a commit b871e52
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 13 deletions.
2 changes: 1 addition & 1 deletion packages/overlay/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
"lit-html"
],
"dependencies": {
"@floating-ui/dom": "^1.0.4",
"@floating-ui/dom": "^1.1.0",
"@spectrum-web-components/action-button": "^0.10.9",
"@spectrum-web-components/base": "^0.7.3",
"@spectrum-web-components/shared": "^0.15.4",
Expand Down
16 changes: 13 additions & 3 deletions packages/overlay/src/ActiveOverlay.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,7 @@ export class ActiveOverlay extends SpectrumElement {
await this.updateOverlayPosition();
document.addEventListener(
'sp-update-overlays',
this.setOverlayPosition
this.resetOverlayPosition
);
}
if (this.placement && this.placement !== 'none') {
Expand Down Expand Up @@ -400,7 +400,7 @@ export class ActiveOverlay extends SpectrumElement {
}
}

private initialHeight!: number;
private initialHeight: number | undefined;
private isConstrained = false;

public async placeOverlay(): Promise<void> {
Expand All @@ -426,6 +426,16 @@ export class ActiveOverlay extends SpectrumElement {
this.setOverlayPosition();
};

public resetOverlayPosition = (): void => {
this.style.setProperty('max-height', '');
this.style.setProperty('height', '');
this.initialHeight = undefined;
this.isConstrained = false;
// force paint
this.offsetHeight;
this.setOverlayPosition();
};

public setOverlayPosition = async (): Promise<void> => {
if (!this.placement || this.placement === 'none') {
return;
Expand Down Expand Up @@ -651,7 +661,7 @@ export class ActiveOverlay extends SpectrumElement {
override disconnectedCallback(): void {
document.removeEventListener(
'sp-update-overlays',
this.setOverlayPosition
this.resetOverlayPosition
);
super.disconnectedCallback();
}
Expand Down
1 change: 1 addition & 0 deletions packages/overlay/src/active-overlay.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ governing permissions and limitations under the License.
pointer-events: none;
top: -9999em;
left: -9999em;
max-height: 100%;
}

:host(:focus) {
Expand Down
85 changes: 85 additions & 0 deletions packages/overlay/stories/overlay.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ import '@spectrum-web-components/radio/sp-radio-group.js';
import '@spectrum-web-components/tooltip/sp-tooltip.js';
import '@spectrum-web-components/theme/sp-theme.js';
import '@spectrum-web-components/theme/src/themes.js';
import '@spectrum-web-components/accordion/sp-accordion.js';
import '@spectrum-web-components/accordion/sp-accordion-item.js';
import '../../../projects/story-decorator/src/types.js';

import './overlay-story-components.js';
Expand Down Expand Up @@ -1138,3 +1140,86 @@ export const updating = (): TemplateResult => {
updating.swc_vrt = {
skip: true,
};

export const accordion = (): TemplateResult => {
const handleToggle = (): void => {
Overlay.update();
console.log('hi');
};
return html`
<overlay-trigger type="modal" placement="right">
<sp-button variant="primary" slot="trigger">
Open overlay w/ accordion
</sp-button>
<div slot="click-content" style="max-height: 100%;display: flex;">
<sp-popover
open
dialog
style="overflow-y: scroll;position: static;"
>
<sp-accordion
allow-multiple
@sp-accordion-item-toggle=${handleToggle}
>
<sp-accordion-item label="Some things">
<p>
Thing
<br />
<br />
<br />
<br />
<br />
<br />
<br />
more things
</p>
</sp-accordion-item>
<sp-accordion-item label="Other things">
<p>
Thing
<br />
<br />
<br />
<br />
<br />
<br />
<br />
more things
</p>
</sp-accordion-item>
<sp-accordion-item label="More things">
<p>
Thing
<br />
<br />
<br />
<br />
<br />
<br />
<br />
more things
</p>
</sp-accordion-item>
<sp-accordion-item label="Additional things">
<p>
Thing
<br />
<br />
<br />
<br />
<br />
<br />
<br />
more things
</p>
</sp-accordion-item>
</sp-accordion>
</sp-popover>
</div>
</overlay-trigger>
`;
};

accordion.swc_vrt = {
skip: true,
};
18 changes: 9 additions & 9 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1996,17 +1996,17 @@
dependencies:
"@types/chai" "^4.2.12"

"@floating-ui/core@^1.0.3":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.0.3.tgz#eab273554bdd883fa2cb48d5218fedda3afbbc1f"
integrity sha512-27FDAEVHrAEQI1UV+7FIjZrFK862gBoAG0USoPMU7RoBCmaTDt6bnKVW/J2uPnOPI6TWqiWGtS7RFN+tN/k+vQ==
"@floating-ui/core@^1.0.5":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.1.0.tgz#0a1dee4bbce87ff71602625d33f711cafd8afc08"
integrity sha512-zbsLwtnHo84w1Kc8rScAo5GMk1GdecSlrflIbfnEBJwvTSj1SL6kkOYV+nHraMCPEy+RNZZUaZyL8JosDGCtGQ==

"@floating-ui/dom@^1.0.4":
version "1.0.8"
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.0.8.tgz#207c6fdaf21a73166c877e99cc49c69f2e816c2d"
integrity sha512-uUm1xYQ0xdmFLhtetKgjK9AtF4INwDVwuJZvpK19ENHg1wYn7T0w9phYyCL5+HEpgJtX4ZYG6HJkDbtd2yP6cg==
"@floating-ui/dom@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.1.0.tgz#29fea1344fdef15b6ba270a733d20b7134fee5c2"
integrity sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==
dependencies:
"@floating-ui/core" "^1.0.3"
"@floating-ui/core" "^1.0.5"

"@formatjs/[email protected]":
version "1.9.3"
Expand Down

0 comments on commit b871e52

Please sign in to comment.