FLOW-944 trying out global popover overlay

packages/flow-core/src/components/f-popover/f-popover.ts

@@ -16,6 +16,10 @@ import { flowElement } from "./../../utils";
 import { injectCss } from "@cldcvr/flow-core-config";
 injectCss("f-popover", globalStyle);
 
+const overlay = document.createElement("div");
+overlay.classList.add("f-overlay");
+overlay.dataset.qaOverlay = "true";
+
 // export type FPopoverVariant = "relative" | "absolute";
 export type FPopoverPlacement =
 	| "top"
@@ -366,16 +370,23 @@ export class FPopover extends FRoot {
 			}
 		});
 		if (this.open) {
-			const overlay = this.isTooltip
-				? nothing
-				: html`<div
-						class="f-overlay"
-						data-transparent=${!this.overlay}
-						data-qa-overlay
-						@click=${this.overlayClick}
-				  ></div>`;
+			if (!this.isTooltip) {
+				if (!this.overlay) {
+					overlay.dataset.transparent = "true";
+				} else {
+					delete overlay.dataset.transparent;
+				}
+			}
+			// const overlay = this.isTooltip
+			// 	? nothing
+			// 	: html`<div
+			// 			class="f-overlay"
+			// 			data-transparent=${!this.overlay}
+			// 			data-qa-overlay
+			// 			@click=${this.overlayClick}
+			// 	  ></div>`;
 			this.computePosition(this.isTooltip);
-			return html`<slot></slot>${overlay} `;
+			return html`<slot></slot>`;
 		} else {
 			if (this.targetElement) {
 				this.targetElement.style.removeProperty("z-index");

stories/flow-core/f-popover.stories.js

@@ -27,7 +27,8 @@ export const Playground = {
 			});
 		};
 
-		return html` <f-div height="100px" align="middle-center">
+		return html` <f-div height="hug-content" direction="column" align="middle-center">
+			<f-div height="500px"></f-div>
 			<f-popover
 				.open=${args.open}
 				.overlay=${args.overlay}
@@ -39,12 +40,13 @@ export const Playground = {
 				?auto-height=${args["auto-height"]}
 				?close-on-escape=${args["close-on-escape"]}
 			>
-				<f-div state="tertiary" padding="medium">
+				<f-div state="tertiary" direction="column" gap="small" padding="medium">
 					<f-text>
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet enim ut mi
 						egestas, non efficitur odio varius. Phasellus accumsan pellentesque ex vehicula
 						tristique.
 					</f-text>
+					<f-select .options=${["option1", "option2", "option3"]}></f-select>
 				</f-div>
 			</f-popover>
 			<f-button id="popoverTarget" label="Open" @click=${handlePopover}></f-button>