From 1e82beb76332c28e9cff01ab93b9b52bd51bbea7 Mon Sep 17 00:00:00 2001 From: abaicu Date: Tue, 5 Nov 2024 17:00:04 +0200 Subject: [PATCH 1/5] fix(overlay): use overlaynopopover for webkit --- packages/overlay/src/Overlay.ts | 3 ++- packages/popover/src/popover.css | 2 -- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/overlay/src/Overlay.ts b/packages/overlay/src/Overlay.ts index 6f5d348917..756bec0540 100644 --- a/packages/overlay/src/Overlay.ts +++ b/packages/overlay/src/Overlay.ts @@ -56,12 +56,13 @@ import { } from './slottable-request-event.js'; import styles from './overlay.css.js'; +import { isWebKit } from '@spectrum-web-components/shared'; const supportsPopover = 'showPopover' in document.createElement('div'); let OverlayFeatures = OverlayDialog(AbstractOverlay); /* c8 ignore next 2 */ -if (supportsPopover) { +if (supportsPopover && !isWebKit()) { OverlayFeatures = OverlayPopover(OverlayFeatures); } else { OverlayFeatures = OverlayNoPopover(OverlayFeatures); diff --git a/packages/popover/src/popover.css b/packages/popover/src/popover.css index 37e97f89df..8c68e461a9 100644 --- a/packages/popover/src/popover.css +++ b/packages/popover/src/popover.css @@ -14,9 +14,7 @@ governing permissions and limitations under the License. @import url('./popover-overrides.css'); :host { - min-width: min-content; max-height: 100%; - max-width: 100%; clip-path: none; } From c0833d89cc8ceb1eff34c9bf0781776858b79e11 Mon Sep 17 00:00:00 2001 From: abaicu Date: Tue, 5 Nov 2024 17:14:58 +0200 Subject: [PATCH 2/5] fix: css --- packages/popover/src/popover.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/popover/src/popover.css b/packages/popover/src/popover.css index 8c68e461a9..9ffc413a02 100644 --- a/packages/popover/src/popover.css +++ b/packages/popover/src/popover.css @@ -14,7 +14,9 @@ governing permissions and limitations under the License. @import url('./popover-overrides.css'); :host { + min-width: max-content; max-height: 100%; + max-width: 100%; clip-path: none; } From ce071a78b01e4c86dc6deb1221e22aaa28bbb89e Mon Sep 17 00:00:00 2001 From: abaicu Date: Tue, 5 Nov 2024 17:36:46 +0200 Subject: [PATCH 3/5] fix: css --- packages/popover/src/popover.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/popover/src/popover.css b/packages/popover/src/popover.css index 9ffc413a02..37e97f89df 100644 --- a/packages/popover/src/popover.css +++ b/packages/popover/src/popover.css @@ -14,7 +14,7 @@ governing permissions and limitations under the License. @import url('./popover-overrides.css'); :host { - min-width: max-content; + min-width: min-content; max-height: 100%; max-width: 100%; clip-path: none; From b2aaf98e7b7961cceba322a18ce63b8a502c9da0 Mon Sep 17 00:00:00 2001 From: abaicu Date: Wed, 6 Nov 2024 11:44:49 +0200 Subject: [PATCH 4/5] fix: remove flex --- packages/overlay/src/Overlay.ts | 3 +-- packages/overlay/src/overlay.css | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/overlay/src/Overlay.ts b/packages/overlay/src/Overlay.ts index 756bec0540..6f5d348917 100644 --- a/packages/overlay/src/Overlay.ts +++ b/packages/overlay/src/Overlay.ts @@ -56,13 +56,12 @@ import { } from './slottable-request-event.js'; import styles from './overlay.css.js'; -import { isWebKit } from '@spectrum-web-components/shared'; const supportsPopover = 'showPopover' in document.createElement('div'); let OverlayFeatures = OverlayDialog(AbstractOverlay); /* c8 ignore next 2 */ -if (supportsPopover && !isWebKit()) { +if (supportsPopover) { OverlayFeatures = OverlayPopover(OverlayFeatures); } else { OverlayFeatures = OverlayNoPopover(OverlayFeatures); diff --git a/packages/overlay/src/overlay.css b/packages/overlay/src/overlay.css index ac1f3ab8c9..0fd608f2e3 100644 --- a/packages/overlay/src/overlay.css +++ b/packages/overlay/src/overlay.css @@ -39,7 +39,6 @@ governing permissions and limitations under the License. border: 0; background: none; padding: 0; - display: flex; position: fixed; overflow: visible; opacity: 1 !important; @@ -180,7 +179,8 @@ slot[name='longpress-describedby-descriptor'] { @supports (overlay: auto) { .dialog { display: none; - transition: all + transition: + all var( --mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s) From c529caffcbeef139234167685af454fb7c5ad1f4 Mon Sep 17 00:00:00 2001 From: abaicu Date: Wed, 6 Nov 2024 12:18:51 +0200 Subject: [PATCH 5/5] fix: remove unnecessary awaits --- packages/overlay/src/OverlayPopover.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/overlay/src/OverlayPopover.ts b/packages/overlay/src/OverlayPopover.ts index 8554076c39..5be607f092 100644 --- a/packages/overlay/src/OverlayPopover.ts +++ b/packages/overlay/src/OverlayPopover.ts @@ -97,9 +97,7 @@ export function OverlayPopover>( }); } - private async shouldShowPopover( - targetOpenState: boolean - ): Promise { + private shouldShowPopover(targetOpenState: boolean): void { let popoverOpen = false; try { popoverOpen = this.dialogEl.matches(':popover-open'); @@ -118,7 +116,7 @@ export function OverlayPopover>( this.isConnected ) { this.dialogEl.showPopover(); - await this.managePosition(); + this.managePosition(); } } @@ -129,7 +127,7 @@ export function OverlayPopover>( if (!supportsOverlayAuto) { await this.shouldHidePopover(targetOpenState); } - await this.shouldShowPopover(targetOpenState); + this.shouldShowPopover(targetOpenState); await nextFrame(); }