diff --git a/packages/flow-code-editor/package.json b/packages/flow-code-editor/package.json index 9b1ed6a19..b22ad8f46 100644 --- a/packages/flow-code-editor/package.json +++ b/packages/flow-code-editor/package.json @@ -38,7 +38,8 @@ "web-component-analyzer": "^2.0.0-next.4" }, "peerDependencies": { - "@cldcvr/flow-core": "2.0.3" + "@cldcvr/flow-core": "^2.0.3", + "@cldcvr/flow-core-config": "^1.1.3" }, "repository": { "type": "git", diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md index 29a0d5274..0ce464555 100644 --- a/packages/flow-core/CHANGELOG.md +++ b/packages/flow-core/CHANGELOG.md @@ -2,6 +2,12 @@ # Change Log +## [2.1.1] - 2023-10-17 + +### Bug Fixes + +- `f-popover`: z-index issue with target , overlay and popover fixed. + ## [2.1.0] - 2023-10-16 ### Features diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json index 0ae434daf..810e1c488 100644 --- a/packages/flow-core/package.json +++ b/packages/flow-core/package.json @@ -1,6 +1,6 @@ { "name": "@cldcvr/flow-core", - "version": "2.1.0", + "version": "2.1.1", "description": "Core package of flow design system", "module": "dist/flow-core.es.js", "main": "dist/flow-core.cjs.js", @@ -51,6 +51,9 @@ "vue": "2.6.14", "web-component-analyzer": "^2.0.0-next.4" }, + "peerDependencies": { + "@cldcvr/flow-core-config": "*" + }, "repository": { "type": "git", "url": "https://github.com/cldcvr/flow-core.git", diff --git a/packages/flow-core/src/components/f-popover/f-popover-global.scss b/packages/flow-core/src/components/f-popover/f-popover-global.scss index c7e4d729b..039521a41 100644 --- a/packages/flow-core/src/components/f-popover/f-popover-global.scss +++ b/packages/flow-core/src/components/f-popover/f-popover-global.scss @@ -29,7 +29,7 @@ f-popover { background-color: var(--color-surface-tertiary); border-radius: 4px; overflow: auto; - z-index: 200; + z-index: 202; &[shadow]:not([overlay]) { box-shadow: var(--flow-box-shadow); } @@ -74,3 +74,17 @@ f-popover { z-index: 2; } } + +.f-overlay { + background-color: #000; + opacity: 0.5; + position: fixed; + top: 0px; + bottom: 0px; + right: 0px; + left: 0px; + z-index: 200; + &[data-transparent="true"] { + background-color: transparent; + } +} diff --git a/packages/flow-core/src/components/f-popover/f-popover.scss b/packages/flow-core/src/components/f-popover/f-popover.scss deleted file mode 100644 index 1ee99aaf2..000000000 --- a/packages/flow-core/src/components/f-popover/f-popover.scss +++ /dev/null @@ -1,15 +0,0 @@ -:host { - .f-overlay { - background-color: #000; - opacity: 0.5; - position: fixed; - top: 0px; - bottom: 0px; - right: 0px; - left: 0px; - z-index: 1; - &[data-transparent="true"] { - background-color: transparent; - } - } -} diff --git a/packages/flow-core/src/components/f-popover/f-popover.test.ts b/packages/flow-core/src/components/f-popover/f-popover.test.ts index eeea5e825..33c123340 100644 --- a/packages/flow-core/src/components/f-popover/f-popover.test.ts +++ b/packages/flow-core/src/components/f-popover/f-popover.test.ts @@ -11,19 +11,19 @@ describe("f-popover", () => { it("should render open popover ", async () => { const el = await fixture(html` Test `); expect(el.textContent?.trim()).to.equal("Test"); - const descendant = el.shadowRoot!.querySelector(".f-overlay")!; + const descendant = document.querySelector(".f-overlay")!; expect(descendant).not.null; }); it("should render closed popover ", async () => { const el = await fixture(html` Test `); expect(el.textContent?.trim()).to.equal("Test"); - const descendant = el.shadowRoot!.querySelector(".f-overlay")!; + const descendant = document.querySelector(".f-overlay")!; expect(descendant).is.null; }); it("should render without overlay ", async () => { const el = await fixture(html` Test `); expect(el.textContent?.trim()).to.equal("Test"); - const descendant = el.shadowRoot!.querySelector(".f-overlay")!; + const descendant = document.querySelector(".f-overlay")!; expect(descendant.dataset["transparent"]).to.equal("true"); }); it("should render with default size ", async () => { diff --git a/packages/flow-core/src/components/f-popover/f-popover.ts b/packages/flow-core/src/components/f-popover/f-popover.ts index e87a988df..82dbbd2c5 100644 --- a/packages/flow-core/src/components/f-popover/f-popover.ts +++ b/packages/flow-core/src/components/f-popover/f-popover.ts @@ -1,7 +1,6 @@ -import { html, LitElement, nothing, PropertyValueMap, unsafeCSS } from "lit"; +import { html, LitElement, PropertyValueMap, unsafeCSS } from "lit"; import { property, state } from "lit/decorators.js"; import { FRoot } from "../../mixins/components/f-root/f-root"; -import eleStyle from "./f-popover.scss?inline"; import globalStyle from "./f-popover-global.scss?inline"; import { computePosition, @@ -65,7 +64,7 @@ export class FPopover extends FRoot { /** * css loaded from scss file */ - static styles = [unsafeCSS(eleStyle), unsafeCSS(globalStyle)]; + static styles = [unsafeCSS(globalStyle)]; // /** // * @attribute variant defines the position of a popover. A popover can be either relative to the source or absolute to the viewport. @@ -132,6 +131,8 @@ export class FPopover extends FRoot { isTooltip = false; + overlayElement?: HTMLDivElement; + reqAniFrame?: number; offset: FPopOverOffset | null = null; @@ -318,6 +319,10 @@ export class FPopover extends FRoot { if (this.targetElement) { this.targetElement.style.removeProperty("z-index"); } + if (this.overlayElement) { + this.overlayElement.remove(); + this.overlayElement = undefined; + } } connectedCallback() { @@ -366,20 +371,31 @@ export class FPopover extends FRoot { } }); if (this.open) { - const overlay = this.isTooltip - ? nothing - : html`
`; + if (!this.isTooltip) { + if (!this.overlayElement) { + this.overlayElement = document.createElement("div"); + this.overlayElement.classList.add("f-overlay"); + this.overlayElement.dataset.qaOverlay = "true"; + document.body.append(this.overlayElement); + this.overlayElement.onclick = this.overlayClick; + } + + if (!this.overlay) { + this.overlayElement.dataset.transparent = "true"; + } else { + delete this.overlayElement.dataset.transparent; + } + } this.computePosition(this.isTooltip); - return html`${overlay} `; + return html``; } else { if (this.targetElement) { this.targetElement.style.removeProperty("z-index"); } + if (this.overlayElement) { + this.overlayElement.remove(); + this.overlayElement = undefined; + } if (this.size && this.size?.includes("custom")) { this.classList.remove("f-popover-custom-size"); this.style.setProperty("--custom-width", null); diff --git a/packages/flow-form-builder/package.json b/packages/flow-form-builder/package.json index 48f319ce1..9893c2bfd 100644 --- a/packages/flow-form-builder/package.json +++ b/packages/flow-form-builder/package.json @@ -42,7 +42,8 @@ "web-component-analyzer": "^2.0.0-next.4" }, "peerDependencies": { - "@cldcvr/flow-core": "2.0.3" + "@cldcvr/flow-core": "^2.0.3", + "@cldcvr/flow-core-config": "^1.1.3" }, "repository": { "type": "git", diff --git a/packages/flow-lineage/package.json b/packages/flow-lineage/package.json index 43e43b8bc..87f3d0464 100644 --- a/packages/flow-lineage/package.json +++ b/packages/flow-lineage/package.json @@ -42,7 +42,8 @@ "web-component-analyzer": "^2.0.0-next.4" }, "peerDependencies": { - "@cldcvr/flow-core": "2.0.3" + "@cldcvr/flow-core": "^2.0.3", + "@cldcvr/flow-core-config": "^1.1.3" }, "repository": { "type": "git", diff --git a/packages/flow-log/package.json b/packages/flow-log/package.json index fa20c0408..f9f2b3043 100644 --- a/packages/flow-log/package.json +++ b/packages/flow-log/package.json @@ -45,7 +45,8 @@ "web-component-analyzer": "^2.0.0-next.4" }, "peerDependencies": { - "@cldcvr/flow-core": "2.0.3" + "@cldcvr/flow-core": "^2.0.3", + "@cldcvr/flow-core-config": "^1.1.3" }, "repository": { "type": "git", diff --git a/packages/flow-md-editor/package.json b/packages/flow-md-editor/package.json index 6bfed39ce..6d4209e6c 100644 --- a/packages/flow-md-editor/package.json +++ b/packages/flow-md-editor/package.json @@ -40,7 +40,8 @@ "web-component-analyzer": "^2.0.0-next.4" }, "peerDependencies": { - "@cldcvr/flow-core": "2.0.3" + "@cldcvr/flow-core": "^2.0.3", + "@cldcvr/flow-core-config": "^1.1.3" }, "repository": { "type": "git", diff --git a/packages/flow-table/package.json b/packages/flow-table/package.json index 89e290e01..deba24886 100644 --- a/packages/flow-table/package.json +++ b/packages/flow-table/package.json @@ -26,7 +26,8 @@ "lit": "^2.2.4" }, "peerDependencies": { - "@cldcvr/flow-core": "2.0.3" + "@cldcvr/flow-core": "^2.0.3", + "@cldcvr/flow-core-config": "^1.1.3" }, "devDependencies": { "@custom-elements-manifest/analyzer": "^0.5.7", diff --git a/stories/flow-core/f-popover.mdx b/stories/flow-core/f-popover.mdx index 579445d95..56ed2a487 100644 --- a/stories/flow-core/f-popover.mdx +++ b/stories/flow-core/f-popover.mdx @@ -26,7 +26,7 @@ be used to show short-lived information such as menus, options, additional actio
-### [Playground](/story/components-f-popover--playground) +### [Playground](/story/cldcvr-flow-core-f-popover--playground) diff --git a/stories/flow-core/f-popover.stories.js b/stories/flow-core/f-popover.stories.ts similarity index 90% rename from stories/flow-core/f-popover.stories.js rename to stories/flow-core/f-popover.stories.ts index 0a0d2b87e..fad5393e2 100644 --- a/stories/flow-core/f-popover.stories.js +++ b/stories/flow-core/f-popover.stories.ts @@ -1,9 +1,9 @@ import { html } from "lit-html"; import fPopoverAnatomy from "../svg/i-fpopover-anatomy.js"; import { unsafeSVG } from "lit-html/directives/unsafe-svg.js"; -import { useArgs, useState } from "@storybook/client-api"; -import { ConfigUtil } from "@cldcvr/flow-core-config"; +import { useState } from "@storybook/preview-api"; import { createRef, ref } from "lit/directives/ref.js"; +import { FPopover, FPopoverPlacement, FPopoverSize } from "@cldcvr/flow-core"; export default { title: "@cldcvr/flow-core/f-popover", @@ -15,20 +15,29 @@ export default { } }; -export const Playground = { - render: args => { - const [_, updateArgs] = useArgs(); - - const handlePopover = (e, f) => { - console.log(e, f); +export type PopOverStoryArgs = { + open: boolean; + overlay: boolean; + size: FPopoverSize; + placement: FPopoverPlacement; + shadow: boolean; + ["auto-height"]: boolean; + ["close-on-escape"]: boolean; +}; - updateArgs({ - open: !args.open - }); +export const Playground = { + render: (args: PopOverStoryArgs) => { + const popoverRef = createRef(); + const handlePopover = (_e: CustomEvent) => { + if (popoverRef.value) { + popoverRef.value.open = !popoverRef.value.open; + } }; - return html` + return html` + - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet enim ut mi egestas, non efficitur odio varius. Phasellus accumsan pellentesque ex vehicula tristique. + @@ -124,24 +134,24 @@ export const Anatomy = { }; export const Target = { - render: args => { - const [_, updateArgs] = useArgs(); - - const handlePopover = (e, f) => { - updateArgs({ - open: !args.open - }); + render: (args: PopOverStoryArgs) => { + const popoverRef = createRef(); + const handlePopover = (_e: CustomEvent) => { + if (popoverRef.value) { + popoverRef.value.open = !popoverRef.value.open; + } }; - const escapePopover = (e, f) => { - updateArgs({ - open: !args.open - }); + const escapePopover = () => { + if (popoverRef.value) { + popoverRef.value.open = !popoverRef.value.open; + } }; return html` { + render: () => { const [dummyPlacementArray, setDummyPlacementArray] = useState([ [ { @@ -256,7 +266,7 @@ export const Placement = { ] ]); - const handlePopover = (main_index, index) => { + const handlePopover = (main_index: number, index: number) => { const array = [...dummyPlacementArray]; array[index][main_index].open = !dummyPlacementArray[index][main_index].open; setDummyPlacementArray(array); @@ -308,7 +318,7 @@ export const Placement = { }; export const Size = { - render: args => { + render: () => { const [dummySizeArray, setDummySizeArray] = useState([ { target: "#stretchSize", @@ -355,7 +365,7 @@ export const Size = { } ]); - const handlePopover = (item, index) => { + const handlePopover = (_item: unknown, index: number) => { const array = [...dummySizeArray]; array[index].open = !dummySizeArray[index].open; setDummySizeArray(array); @@ -419,7 +429,7 @@ export const Size = { }; export const Flags = { - render: args => { + render: () => { const [openFlag, setOpenFlag] = useState(false); const [openFlagForOverlay, setOpenFlagForOverlay] = useState(false); const [openFlagForNoOverlay, setOpenFlagForNoOverlay] = useState(false); @@ -586,8 +596,8 @@ export const Flags = { }; export const ChildPopover = { - render: args => { - const innerPopover = createRef(); + render: () => { + const innerPopover = createRef(); const handleInnerClose = () => { if (innerPopover.value) { diff --git a/stories/tsconfig.json b/stories/tsconfig.json index f90d217c2..37ece05c5 100644 --- a/stories/tsconfig.json +++ b/stories/tsconfig.json @@ -2,7 +2,8 @@ "extends": "../tsconfig.base.json", "compilerOptions": { "emitDeclarationOnly": false, - "noEmit": true + "noEmit": true, + "allowJs": true }, "include": ["**/*"] }