From 356a0d52a44ebdb6ac867e9044ec6ed4b296a0b9 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 6 Sep 2024 12:01:25 -0700 Subject: [PATCH 01/42] fix: position floating-ui elements offscreen by default in order to prevent scrollbars --- .../src/assets/styles/_floating-ui.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/assets/styles/_floating-ui.scss b/packages/calcite-components/src/assets/styles/_floating-ui.scss index 8ea851da9e8..e4679670cad 100644 --- a/packages/calcite-components/src/assets/styles/_floating-ui.scss +++ b/packages/calcite-components/src/assets/styles/_floating-ui.scss @@ -34,7 +34,7 @@ $floating-ui-transition-offset: 5px; @mixin floating-ui-anim-active { opacity: 1; - inset-block: 0; + inset-block-start: 0; left: 0; } @@ -94,6 +94,11 @@ $floating-ui-transition-offset: 5px; z-index: var(--calcite-floating-ui-z-index); } +@mixin floating-ui-container-hidden() { + inset-inline-start: -999999px; + inset-block-start: -999999px; +} + @mixin floating-ui-wrapper { visibility: hidden; } @@ -107,6 +112,10 @@ $floating-ui-transition-offset: 5px; @include floating-ui-container(); } + :host([calcite-hydrated-hidden]) { + @include floating-ui-container-hidden(); + } + @include floating-ui-host-anim(); @include calcite-hydrated-hidden(); From bce13df3b5bbc23e4cbaf57f2ede3695f490a646 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 6 Sep 2024 12:42:25 -0700 Subject: [PATCH 02/42] add story --- .../src/components/popover/popover.stories.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/calcite-components/src/components/popover/popover.stories.ts b/packages/calcite-components/src/components/popover/popover.stories.ts index bb69f56f2a8..cecf74cb1b8 100644 --- a/packages/calcite-components/src/components/popover/popover.stories.ts +++ b/packages/calcite-components/src/components/popover/popover.stories.ts @@ -208,3 +208,9 @@ export const transparentBG_TestOnly = (): string => html` `; + +export const closedShouldNotCauseScrollbars = (): string => + html` +
Popover
+ + Button`; From 0d41bc273f4f493ee58ddeeeab0f03dbccaf3b44 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 6 Sep 2024 15:48:17 -0700 Subject: [PATCH 03/42] handle positioning with the util --- .../src/assets/styles/_floating-ui.scss | 9 ----- .../src/utils/floating-ui.ts | 36 ++++++++++++++----- 2 files changed, 27 insertions(+), 18 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/_floating-ui.scss b/packages/calcite-components/src/assets/styles/_floating-ui.scss index e4679670cad..1c9f4052ea2 100644 --- a/packages/calcite-components/src/assets/styles/_floating-ui.scss +++ b/packages/calcite-components/src/assets/styles/_floating-ui.scss @@ -94,11 +94,6 @@ $floating-ui-transition-offset: 5px; z-index: var(--calcite-floating-ui-z-index); } -@mixin floating-ui-container-hidden() { - inset-inline-start: -999999px; - inset-block-start: -999999px; -} - @mixin floating-ui-wrapper { visibility: hidden; } @@ -112,10 +107,6 @@ $floating-ui-transition-offset: 5px; @include floating-ui-container(); } - :host([calcite-hydrated-hidden]) { - @include floating-ui-container-hidden(); - } - @include floating-ui-host-anim(); @include calcite-hydrated-hidden(); diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index b24277546c6..c3ed417e2d8 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -153,13 +153,20 @@ export const positionFloatingUI = const { open } = component; + if (!open) { + Object.assign(floatingEl.style, hiddenFloatingElStyle); + return; + } + Object.assign(floatingEl.style, { visibility, pointerEvents, position, - transform: open ? `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)` : "", + transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`, top: 0, left: 0, + insetInlineStart: "", + insetBlockStart: "", }); }; @@ -406,6 +413,18 @@ export function getEffectivePlacement(floatingEl: HTMLElement, placement: Logica return placement.replace(/leading/gi, placements[0]).replace(/trailing/gi, placements[1]) as EffectivePlacement; } +const hiddenFloatingElStyle = { + visibility: "hidden", + pointerEvents: "none", + // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout + position: "absolute", + transform: "", + top: "", + left: "", + insetInlineStart: "-999999px", + insetBlockStart: "-999999px", +}; + /** * Convenience function to manage `reposition` calls for FloatingUIComponents that use `positionFloatingUI. * @@ -431,7 +450,12 @@ export async function reposition( options: Parameters[1], delayed = false, ): Promise { - if (!component.open || !options.floatingEl || !options.referenceEl) { + if (!options.floatingEl || !options.referenceEl) { + return; + } + + if (!component.open) { + Object.assign(options.floatingEl.style, hiddenFloatingElStyle); return; } @@ -549,13 +573,7 @@ export async function connectFloatingUI( disconnectFloatingUI(component, referenceEl, floatingEl); - Object.assign(floatingEl.style, { - visibility: "hidden", - pointerEvents: "none", - - // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout - position: component.overlayPositioning, - }); + Object.assign(floatingEl.style, hiddenFloatingElStyle); if (!component.open) { return; From 02ffbd4b21fb30711eecd21df61c01015775fbc6 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 9 Sep 2024 13:26:17 -0700 Subject: [PATCH 04/42] set height and width to zero when not open. --- packages/calcite-components/src/utils/floating-ui.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index c8f8f2db57c..13381b540f8 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -167,8 +167,8 @@ export const positionFloatingUI = transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`, top: 0, left: 0, - insetInlineStart: "", - insetBlockStart: "", + width: "", + height: "", }); }; @@ -421,10 +421,10 @@ const hiddenFloatingElStyle = { // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout position: "absolute", transform: "", - top: "", - left: "", - insetInlineStart: "-999999px", - insetBlockStart: "-999999px", + top: 0, + left: 0, + width: 0, + height: 0, }; /** From 08b30f30bcfef54af162fddccdaf0d2a8eba706a Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 9 Sep 2024 13:56:54 -0700 Subject: [PATCH 05/42] cleanup --- .../src/utils/floating-ui.ts | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index 13381b540f8..cf12f63589c 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -165,10 +165,6 @@ export const positionFloatingUI = pointerEvents, position, transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`, - top: 0, - left: 0, - width: "", - height: "", }); }; @@ -415,14 +411,22 @@ export function getEffectivePlacement(placement: LogicalPlacement, isRTL = false return placement.replace(/leading/gi, placements[0]).replace(/trailing/gi, placements[1]) as EffectivePlacement; } +const initialFloatingElStyle = { + // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout + position: "absolute", + top: 0, + left: 0, + width: "", + height: "", +}; + const hiddenFloatingElStyle = { visibility: "hidden", pointerEvents: "none", // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout - position: "absolute", transform: "", - top: 0, - left: 0, + top: "", + left: "", width: 0, height: 0, }; @@ -461,6 +465,8 @@ export async function reposition( return; } + Object.assign(options.floatingEl.style, initialFloatingElStyle); + const trackedState = autoUpdatingComponentMap.get(component); if (!trackedState) { From 54518740775c5381dfd158d6e3e1801892e584c6 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 9 Sep 2024 14:01:09 -0700 Subject: [PATCH 06/42] cleanup --- .../calcite-components/src/components/dropdown/dropdown.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts index 1d7029959a0..54db4a18ffd 100644 --- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts +++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts @@ -1151,7 +1151,7 @@ describe("calcite-dropdown", () => { const page = await newE2EPage({ html: html` - + Display name From 03090d3fd74cc648ca6b90033959ec0bc1160616 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 9 Sep 2024 14:16:58 -0700 Subject: [PATCH 07/42] cleanup --- packages/calcite-components/src/utils/floating-ui.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index cf12f63589c..162aec63586 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -412,18 +412,17 @@ export function getEffectivePlacement(placement: LogicalPlacement, isRTL = false } const initialFloatingElStyle = { + width: "", + height: "", // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout position: "absolute", top: 0, left: 0, - width: "", - height: "", }; const hiddenFloatingElStyle = { visibility: "hidden", pointerEvents: "none", - // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout transform: "", top: "", left: "", From 2f2ef34a4f48c96245ba9d189d3028cb4ab3ca36 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 9 Sep 2024 14:49:06 -0700 Subject: [PATCH 08/42] WIP --- .../calcite-components/src/utils/floating-ui.spec.ts | 4 ++-- packages/calcite-components/src/utils/floating-ui.ts | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/utils/floating-ui.spec.ts b/packages/calcite-components/src/utils/floating-ui.spec.ts index e6a8a953e06..5efcae01876 100644 --- a/packages/calcite-components/src/utils/floating-ui.spec.ts +++ b/packages/calcite-components/src/utils/floating-ui.spec.ts @@ -80,8 +80,8 @@ describe("repositioning", () => { function assertPreOpenPositioning(floatingEl: HTMLElement): void { expect(floatingEl.style.transform).toBe(""); - expect(floatingEl.style.top).toBe(""); - expect(floatingEl.style.left).toBe(""); + expect(floatingEl.style.top).toBe("0"); + expect(floatingEl.style.left).toBe("0"); } function assertOpenPositioning(floatingEl: HTMLElement): void { diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index 162aec63586..6a746b6e60b 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -411,23 +411,23 @@ export function getEffectivePlacement(placement: LogicalPlacement, isRTL = false return placement.replace(/leading/gi, placements[0]).replace(/trailing/gi, placements[1]) as EffectivePlacement; } +const floatingElPosition = { top: "0", left: "0" }; + const initialFloatingElStyle = { width: "", height: "", // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout position: "absolute", - top: 0, - left: 0, + ...floatingElPosition, }; const hiddenFloatingElStyle = { visibility: "hidden", pointerEvents: "none", transform: "", - top: "", - left: "", - width: 0, - height: 0, + width: "0", + height: "0", + ...floatingElPosition, }; /** From 90131c9ed66a6b78baeb40fd5e7bb82a5a8ff275 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 9 Sep 2024 15:02:42 -0700 Subject: [PATCH 09/42] test --- packages/calcite-components/src/utils/floating-ui.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index 6a746b6e60b..4afcded3a8a 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -414,8 +414,7 @@ export function getEffectivePlacement(placement: LogicalPlacement, isRTL = false const floatingElPosition = { top: "0", left: "0" }; const initialFloatingElStyle = { - width: "", - height: "", + display: "", // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout position: "absolute", ...floatingElPosition, @@ -425,8 +424,7 @@ const hiddenFloatingElStyle = { visibility: "hidden", pointerEvents: "none", transform: "", - width: "0", - height: "0", + display: "none", ...floatingElPosition, }; From 1556b4a9163f56f698e77ace34ad1c14c1b21114 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 9 Sep 2024 15:35:10 -0700 Subject: [PATCH 10/42] testing --- .../calcite-components/src/utils/floating-ui.spec.ts | 12 +++++++++++- packages/calcite-components/src/utils/floating-ui.ts | 9 ++------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/utils/floating-ui.spec.ts b/packages/calcite-components/src/utils/floating-ui.spec.ts index 5efcae01876..d4b5ed34646 100644 --- a/packages/calcite-components/src/utils/floating-ui.spec.ts +++ b/packages/calcite-components/src/utils/floating-ui.spec.ts @@ -78,21 +78,27 @@ describe("repositioning", () => { connectFloatingUI(fakeFloatingUiComponent, referenceEl, floatingEl); }); + function assertClosedPositioning(floatingEl: HTMLElement): void { + expect(floatingEl.style.display).toBe("none"); + } + function assertPreOpenPositioning(floatingEl: HTMLElement): void { expect(floatingEl.style.transform).toBe(""); expect(floatingEl.style.top).toBe("0"); expect(floatingEl.style.left).toBe("0"); + expect(floatingEl.style.display).toBe(""); } function assertOpenPositioning(floatingEl: HTMLElement): void { expect(floatingEl.style.transform).not.toBe(""); expect(floatingEl.style.top).toBe("0"); expect(floatingEl.style.left).toBe("0"); + expect(floatingEl.style.display).toBe(""); } it("repositions only for open components", async () => { await reposition(fakeFloatingUiComponent, positionOptions); - assertPreOpenPositioning(floatingEl); + assertClosedPositioning(floatingEl); fakeFloatingUiComponent.open = true; @@ -101,6 +107,8 @@ describe("repositioning", () => { }); it("repositions immediately by default", async () => { + assertClosedPositioning(floatingEl); + fakeFloatingUiComponent.open = true; reposition(fakeFloatingUiComponent, positionOptions); @@ -112,6 +120,8 @@ describe("repositioning", () => { }); it("can reposition after a delay", async () => { + assertClosedPositioning(floatingEl); + fakeFloatingUiComponent.open = true; reposition(fakeFloatingUiComponent, positionOptions, true); diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index 4afcded3a8a..fa8d5db365f 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -411,21 +411,16 @@ export function getEffectivePlacement(placement: LogicalPlacement, isRTL = false return placement.replace(/leading/gi, placements[0]).replace(/trailing/gi, placements[1]) as EffectivePlacement; } -const floatingElPosition = { top: "0", left: "0" }; - const initialFloatingElStyle = { display: "", // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout position: "absolute", - ...floatingElPosition, + top: "0", + left: "0", }; const hiddenFloatingElStyle = { - visibility: "hidden", - pointerEvents: "none", - transform: "", display: "none", - ...floatingElPosition, }; /** From 1afd7eb3c6e9f547b7e829234d807124783dbd8e Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 10 Sep 2024 11:50:56 -0700 Subject: [PATCH 11/42] cleanup --- packages/calcite-components/src/utils/floating-ui.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index fa8d5db365f..02361ca7cc1 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -448,11 +448,11 @@ export async function reposition( options: Parameters[1], delayed = false, ): Promise { - if (!options.floatingEl || !options.referenceEl) { + if (!options.floatingEl) { return; } - if (!component.open) { + if (!component.open || !options.referenceEl) { Object.assign(options.floatingEl.style, hiddenFloatingElStyle); return; } From 13d690492de98528f31a47256aa3caac32d283fa Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 11 Sep 2024 08:59:26 -0700 Subject: [PATCH 12/42] revert --- .../calcite-components/src/components/dropdown/dropdown.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts index 54db4a18ffd..1d7029959a0 100644 --- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts +++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts @@ -1151,7 +1151,7 @@ describe("calcite-dropdown", () => { const page = await newE2EPage({ html: html` - + Display name From ca9581a6ed98f5eb7abc14d70c803acd47237373 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 11 Sep 2024 09:05:54 -0700 Subject: [PATCH 13/42] review fixes --- packages/calcite-components/src/utils/floating-ui.spec.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/calcite-components/src/utils/floating-ui.spec.ts b/packages/calcite-components/src/utils/floating-ui.spec.ts index d4b5ed34646..3dc0c0be0e1 100644 --- a/packages/calcite-components/src/utils/floating-ui.spec.ts +++ b/packages/calcite-components/src/utils/floating-ui.spec.ts @@ -79,6 +79,9 @@ describe("repositioning", () => { }); function assertClosedPositioning(floatingEl: HTMLElement): void { + expect(floatingEl.style.transform).toBe(""); + expect(floatingEl.style.top).toBe(""); + expect(floatingEl.style.left).toBe(""); expect(floatingEl.style.display).toBe("none"); } From f916680112a932c0fe61bdf41d3690250106502f Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 11 Sep 2024 16:22:32 -0700 Subject: [PATCH 14/42] move popover/tooltip styles from host to internal element. fix tests. --- .../src/assets/styles/_floating-ui.scss | 34 -------------- .../src/components/dropdown/dropdown.e2e.ts | 5 ++- .../input-date-picker.e2e.ts | 5 ++- .../src/components/popover/popover.scss | 7 ++- .../src/components/popover/popover.tsx | 45 +++++++++++-------- .../src/components/popover/resources.ts | 1 + .../src/components/tooltip/resources.ts | 1 + .../src/components/tooltip/tooltip.scss | 7 ++- .../src/components/tooltip/tooltip.tsx | 45 +++++++++++-------- .../src/utils/floating-ui.ts | 12 ++--- 10 files changed, 80 insertions(+), 82 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/_floating-ui.scss b/packages/calcite-components/src/assets/styles/_floating-ui.scss index 1c9f4052ea2..b59766c7383 100644 --- a/packages/calcite-components/src/assets/styles/_floating-ui.scss +++ b/packages/calcite-components/src/assets/styles/_floating-ui.scss @@ -64,30 +64,6 @@ $floating-ui-transition-offset: 5px; } } -@mixin floating-ui-host-anim { - @include floating-ui-anim(); - - :host([data-placement^="bottom"]) .calcite-floating-ui-anim { - @include floating-ui-offset-bottom(); - } - - :host([data-placement^="top"]) .calcite-floating-ui-anim { - @include floating-ui-offset-top(); - } - - :host([data-placement^="left"]) .calcite-floating-ui-anim { - @include floating-ui-offset-left(); - } - - :host([data-placement^="right"]) .calcite-floating-ui-anim { - @include floating-ui-offset-right(); - } - - :host([data-placement]) .calcite-floating-ui-anim--active { - @include floating-ui-anim-active(); - } -} - @mixin floating-ui-container() { display: block; position: absolute; @@ -102,16 +78,6 @@ $floating-ui-transition-offset: 5px; visibility: visible; } -@mixin floating-ui-host() { - :host { - @include floating-ui-container(); - } - - @include floating-ui-host-anim(); - - @include calcite-hydrated-hidden(); -} - @mixin floating-ui-arrow { .calcite-floating-ui-arrow { @apply -z-default diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts index 1d7029959a0..49a10767d02 100644 --- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts +++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts @@ -1151,7 +1151,7 @@ describe("calcite-dropdown", () => { const page = await newE2EPage({ html: html` - + Display name @@ -1163,6 +1163,7 @@ describe("calcite-dropdown", () => { `, }); + await skipAnimations(page); await page.waitForChanges(); const dropdownContentHeight = await ( @@ -1175,7 +1176,7 @@ describe("calcite-dropdown", () => { filterInput.value = "numbers"; }); - expect(dropdownContentHeight.height).toBe("88px"); + expect(dropdownContentHeight.height).toBe("72px"); }); describe("owns a floating-ui", () => { diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts index 4688005f785..b7d39fb870d 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts @@ -227,10 +227,13 @@ describe("calcite-input-date-picker", () => { const input = await page.find("calcite-input-date-picker"); const changeEvent = await page.spyOnEvent("calciteInputDatePickerChange"); - await input.click(); + const inputWrapper = await page.find(`calcite-input-date-picker >>> .${CSS.inputWrapper}`); + await inputWrapper.click(); await page.waitForChanges(); await page.waitForTimeout(animationDurationInMs); + expect(await input.getProperty("open")).toBe(true); + const wrapper = await page.waitForFunction( (calendarWrapperClass: string) => document.querySelector("calcite-input-date-picker").shadowRoot.querySelector(`.${calendarWrapperClass}`), diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss index 0f440644919..0c4e6d011f6 100644 --- a/packages/calcite-components/src/components/popover/popover.scss +++ b/packages/calcite-components/src/components/popover/popover.scss @@ -10,7 +10,12 @@ --calcite-floating-ui-z-index: var(--calcite-popover-z-index, theme("zIndex.popover")); } -@include floating-ui-host(); +.position-container { + @include floating-ui-container(); +} + +@include floating-ui-elem-anim(".position-container"); + @include floating-ui-arrow(); :host([scale="s"]) { diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx index b8005ad1de6..570a44db71f 100644 --- a/packages/calcite-components/src/components/popover/popover.tsx +++ b/packages/calcite-components/src/components/popover/popover.tsx @@ -278,6 +278,8 @@ export class Popover transitionEl: HTMLDivElement; + floatingEl: HTMLDivElement; + hasLoaded = false; focusTrap: FocusTrap; @@ -320,7 +322,7 @@ export class Popover this.removeReferences(); disconnectLocalized(this); disconnectMessages(this); - disconnectFloatingUI(this, this.effectiveReferenceElement, this.el); + disconnectFloatingUI(this, this.effectiveReferenceElement, this.floatingEl); deactivateFocusTrap(this); } @@ -356,7 +358,6 @@ export class Popover @Method() async reposition(delayed = false): Promise { const { - el, effectiveReferenceElement, placement, overlayPositioning, @@ -365,11 +366,12 @@ export class Popover offsetDistance, offsetSkidding, arrowEl, + floatingEl, } = this; return reposition( this, { - floatingEl: el, + floatingEl, referenceEl: effectiveReferenceElement, overlayPositioning, placement, @@ -408,6 +410,10 @@ export class Popover // // -------------------------------------------------------------------------- + private setFloatingEl = (el: HTMLDivElement): void => { + this.floatingEl = el; + }; + private setTransitionEl = (el: HTMLDivElement): void => { this.transitionEl = el; }; @@ -423,7 +429,7 @@ export class Popover setUpReferenceElement = (warn = true): void => { this.removeReferences(); this.effectiveReferenceElement = this.getReferenceElement(); - connectFloatingUI(this, this.effectiveReferenceElement, this.el); + connectFloatingUI(this, this.effectiveReferenceElement, this.floatingEl); const { el, referenceElement, effectiveReferenceElement } = this; if (warn && referenceElement && !effectiveReferenceElement) { @@ -574,29 +580,30 @@ export class Popover aria-hidden={toAriaBoolean(hidden)} aria-label={label} aria-live="polite" - calcite-hydrated-hidden={hidden} id={this.getId()} role="dialog" > -
- {arrowNode} +
- {this.renderHeader()} -
- + {arrowNode} +
+ {this.renderHeader()} +
+ +
+ {!heading ? this.renderCloseButton() : null}
- {!heading ? this.renderCloseButton() : null}
diff --git a/packages/calcite-components/src/components/popover/resources.ts b/packages/calcite-components/src/components/popover/resources.ts index c8ac0b31dba..9b6f54aad0d 100644 --- a/packages/calcite-components/src/components/popover/resources.ts +++ b/packages/calcite-components/src/components/popover/resources.ts @@ -1,4 +1,5 @@ export const CSS = { + positionContainer: "position-container", container: "container", imageContainer: "image-container", closeButtonContainer: "close-button-container", diff --git a/packages/calcite-components/src/components/tooltip/resources.ts b/packages/calcite-components/src/components/tooltip/resources.ts index c8029f59b18..b7d0071e0e8 100644 --- a/packages/calcite-components/src/components/tooltip/resources.ts +++ b/packages/calcite-components/src/components/tooltip/resources.ts @@ -1,4 +1,5 @@ export const CSS = { + positionContainer: "position-container", container: "container", }; diff --git a/packages/calcite-components/src/components/tooltip/tooltip.scss b/packages/calcite-components/src/components/tooltip/tooltip.scss index b1ce06ce490..f1a48eb84ee 100644 --- a/packages/calcite-components/src/components/tooltip/tooltip.scss +++ b/packages/calcite-components/src/components/tooltip/tooltip.scss @@ -10,7 +10,12 @@ --calcite-floating-ui-z-index: var(--calcite-tooltip-z-index, theme("zIndex.tooltip")); } -@include floating-ui-host(); +.position-container { + @include floating-ui-container(); +} + +@include floating-ui-elem-anim(".position-container"); + @include floating-ui-arrow(); .container { diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx index eca3b802071..54ce54acf4f 100644 --- a/packages/calcite-components/src/components/tooltip/tooltip.tsx +++ b/packages/calcite-components/src/components/tooltip/tooltip.tsx @@ -152,6 +152,8 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent { transitionEl: HTMLDivElement; + floatingEl: HTMLDivElement; + // -------------------------------------------------------------------------- // // Lifecycle @@ -180,7 +182,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent { disconnectedCallback(): void { this.removeReferences(); - disconnectFloatingUI(this, this.effectiveReferenceElement, this.el); + disconnectFloatingUI(this, this.effectiveReferenceElement, this.floatingEl); } //-------------------------------------------------------------------------- @@ -215,19 +217,19 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent { @Method() async reposition(delayed = false): Promise { const { - el, effectiveReferenceElement, placement, overlayPositioning, offsetDistance, offsetSkidding, arrowEl, + floatingEl, } = this; return reposition( this, { - floatingEl: el, + floatingEl, referenceEl: effectiveReferenceElement, overlayPositioning, placement, @@ -262,14 +264,18 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent { this.calciteTooltipClose.emit(); } - private setTransitionEl = (el): void => { + private setFloatingEl = (el: HTMLDivElement): void => { + this.floatingEl = el; + }; + + private setTransitionEl = (el: HTMLDivElement): void => { this.transitionEl = el; }; setUpReferenceElement = (warn = true): void => { this.removeReferences(); this.effectiveReferenceElement = getEffectiveReferenceElement(this.el); - connectFloatingUI(this, this.effectiveReferenceElement, this.el); + connectFloatingUI(this, this.effectiveReferenceElement, this.floatingEl); const { el, referenceElement, effectiveReferenceElement } = this; if (warn && referenceElement && !effectiveReferenceElement) { @@ -331,23 +337,24 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent { aria-hidden={toAriaBoolean(hidden)} aria-label={label} aria-live="polite" - calcite-hydrated-hidden={hidden} id={this.getId()} role="tooltip" > -
- (this.arrowEl = arrowEl)} - /> -
- +
+
+ (this.arrowEl = arrowEl)} + /> +
+ +
diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index 02361ca7cc1..45276c38c79 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -413,10 +413,6 @@ export function getEffectivePlacement(placement: LogicalPlacement, isRTL = false const initialFloatingElStyle = { display: "", - // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout - position: "absolute", - top: "0", - left: "0", }; const hiddenFloatingElStyle = { @@ -457,7 +453,13 @@ export async function reposition( return; } - Object.assign(options.floatingEl.style, initialFloatingElStyle); + Object.assign(options.floatingEl.style, { + ...initialFloatingElStyle, + // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout + position: options.overlayPositioning ?? "absolute", + top: "0", + left: "0", + }); const trackedState = autoUpdatingComponentMap.get(component); From 6883e5d03f594d7fc505730d152bf522f886419e Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 11 Sep 2024 17:21:59 -0700 Subject: [PATCH 15/42] fix some tests --- .../src/assets/styles/_floating-ui.scss | 2 +- .../components/action-menu/action-menu.e2e.ts | 9 +-- .../src/components/popover/popover.e2e.ts | 69 ++++++++++--------- .../src/components/popover/popover.scss | 1 + .../src/components/tooltip/tooltip.e2e.ts | 65 ++++++++--------- .../src/components/tooltip/tooltip.scss | 1 + .../src/utils/floating-ui.ts | 2 +- 7 files changed, 77 insertions(+), 72 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/_floating-ui.scss b/packages/calcite-components/src/assets/styles/_floating-ui.scss index b59766c7383..0a28d50c291 100644 --- a/packages/calcite-components/src/assets/styles/_floating-ui.scss +++ b/packages/calcite-components/src/assets/styles/_floating-ui.scss @@ -65,7 +65,7 @@ $floating-ui-transition-offset: 5px; } @mixin floating-ui-container() { - display: block; + display: none; position: absolute; z-index: var(--calcite-floating-ui-z-index); } diff --git a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts index 5cee6e79b7d..d221c7a9a9b 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts +++ b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts @@ -12,6 +12,7 @@ import { themed, } from "../../tests/commonTests"; import { TOOLTIP_OPEN_DELAY_MS } from "../tooltip/resources"; +import { CSS as TooltipCSS } from "../tooltip/resources"; import { CSS, SLOTS, activeAttr } from "./resources"; describe("calcite-action-menu", () => { @@ -223,20 +224,20 @@ describe("calcite-action-menu", () => { }); const actionMenu = await page.find("calcite-action-menu"); - const tooltip = await page.find("calcite-tooltip"); + const tooltipPositionContainer = await page.find(`calcite-tooltip >>> .${TooltipCSS.positionContainer}`); const trigger = await page.find("#trigger"); - expect(await tooltip.isVisible()).toBe(false); + expect(await tooltipPositionContainer.isVisible()).toBe(false); await trigger.hover(); await page.waitForTimeout(TOOLTIP_OPEN_DELAY_MS); - expect(await tooltip.isVisible()).toBe(true); + expect(await tooltipPositionContainer.isVisible()).toBe(true); actionMenu.setProperty("open", true); await page.waitForChanges(); - expect(await tooltip.isVisible()).toBe(false); + expect(await tooltipPositionContainer.isVisible()).toBe(false); }); describe("Keyboard navigation", () => { diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts index 33047e32b11..cd3d51a70a1 100644 --- a/packages/calcite-components/src/components/popover/popover.e2e.ts +++ b/packages/calcite-components/src/components/popover/popover.e2e.ts @@ -14,7 +14,7 @@ import { CSS } from "./resources"; describe("calcite-popover", () => { describe("renders", () => { - renders("calcite-popover", { visible: false, display: "block" }); + renders("calcite-popover", { display: "block" }); renders(`
😄
`, { display: "block", }); @@ -33,11 +33,11 @@ describe("calcite-popover", () => { await page.waitForChanges(); - const popover = await page.find(`calcite-popover`); + const positionContainer = await page.find(`calcite-popover >>> .${CSS.positionContainer}`); await page.waitForChanges(); - const style = await popover.getComputedStyle(); + const style = await positionContainer.getComputedStyle(); expect(style.zIndex).toBe("900"); }); @@ -114,9 +114,9 @@ describe("calcite-popover", () => { html`
referenceElement
`, ); - const element = await page.find("calcite-popover"); + const positionContainer = await page.find(`calcite-popover >>> .${CSS.positionContainer}`); - let computedStyle: CSSStyleDeclaration = await element.getComputedStyle(); + let computedStyle: CSSStyleDeclaration = await positionContainer.getComputedStyle(); expect(computedStyle.transform).toBe("none"); @@ -126,7 +126,7 @@ describe("calcite-popover", () => { }); await page.waitForChanges(); - computedStyle = await element.getComputedStyle(); + computedStyle = await positionContainer.getComputedStyle(); expect(computedStyle.transform).not.toBe("none"); }); @@ -146,15 +146,15 @@ describe("calcite-popover", () => { await page.waitForChanges(); - const popover = await page.find(`calcite-popover`); + const positionContainer = await page.find(`calcite-popover >>> .${CSS.positionContainer}`); - expect(await popover.isVisible()).toBe(false); + expect(await positionContainer.isVisible()).toBe(false); element.setProperty("open", true); await page.waitForChanges(); - expect(await popover.isVisible()).toBe(true); + expect(await positionContainer.isVisible()).toBe(true); }); it("should accept referenceElement as string id", async () => { @@ -242,15 +242,15 @@ describe("calcite-popover", () => { await page.waitForChanges(); - const popover = await page.find(`calcite-popover`); + const positionContainer = await page.find(`calcite-popover >>> .${CSS.positionContainer}`); - expect(await popover.isVisible()).toBe(false); + expect(await positionContainer.isVisible()).toBe(false); const ref = await page.find("#ref"); await ref.click(); - expect(await popover.isVisible()).toBe(true); + expect(await positionContainer.isVisible()).toBe(true); }); it("should honor Enter key interaction", async () => { @@ -263,22 +263,22 @@ describe("calcite-popover", () => { await page.waitForChanges(); - const popover = await page.find(`calcite-popover`); + const positionContainer = await page.find(`calcite-popover >>> .${CSS.positionContainer}`); const ref = await page.find("#ref"); - expect(await popover.isVisible()).toBe(false); + expect(await positionContainer.isVisible()).toBe(false); await ref.focus(); await page.keyboard.press("Enter"); await page.waitForChanges(); - expect(await popover.isVisible()).toBe(true); + expect(await positionContainer.isVisible()).toBe(true); await ref.focus(); await page.keyboard.press("Enter"); await page.waitForChanges(); - expect(await popover.isVisible()).toBe(false); + expect(await positionContainer.isVisible()).toBe(false); }); it("should honor Space key interaction", async () => { @@ -291,22 +291,22 @@ describe("calcite-popover", () => { await page.waitForChanges(); - const popover = await page.find(`calcite-popover`); + const positionContainer = await page.find(`calcite-popover >>> .${CSS.positionContainer}`); const ref = await page.find("#ref"); - expect(await popover.isVisible()).toBe(false); + expect(await positionContainer.isVisible()).toBe(false); await ref.focus(); await page.keyboard.press(" "); await page.waitForChanges(); - expect(await popover.isVisible()).toBe(true); + expect(await positionContainer.isVisible()).toBe(true); await ref.focus(); await page.keyboard.press(" "); await page.waitForChanges(); - expect(await popover.isVisible()).toBe(false); + expect(await positionContainer.isVisible()).toBe(false); }); it("should open popovers", async () => { @@ -372,10 +372,10 @@ describe("calcite-popover", () => { expect(await scrollEl.getProperty("scrollTop")).toBe(0); - const popover = await page.find("calcite-popover"); + const positionContainer = await page.find(`calcite-popover >>> .${CSS.positionContainer}`); - expect(await popover.isVisible()).toBe(true); - expect((await popover.getComputedStyle()).pointerEvents).toBe("auto"); + expect(await positionContainer.isVisible()).toBe(true); + expect((await positionContainer.getComputedStyle()).pointerEvents).toBe("auto"); await page.$eval("#scrollEl", async (scrollEl: HTMLDivElement) => { scrollEl.scrollTo({ top: 300 }); @@ -383,8 +383,8 @@ describe("calcite-popover", () => { await page.waitForChanges(); - expect(await popover.isVisible()).toBe(false); - expect((await popover.getComputedStyle()).pointerEvents).toBe("none"); + expect(await positionContainer.isVisible()).toBe(false); + expect((await positionContainer.getComputedStyle()).pointerEvents).toBe("none"); }); it("do not autoClose popovers when clicked outside", async () => { @@ -499,10 +499,10 @@ describe("calcite-popover", () => { expect(await scrollEl.getProperty("scrollTop")).toBe(0); - const popover = await page.find("calcite-popover"); + const positionContainer = await page.find(`calcite-popover >>> .${CSS.positionContainer}`); - expect(await popover.isVisible()).toBe(true); - expect((await popover.getComputedStyle()).pointerEvents).toBe("auto"); + expect(await positionContainer.isVisible()).toBe(true); + expect((await positionContainer.getComputedStyle()).pointerEvents).toBe("auto"); await page.$eval("#scrollEl", async (scrollEl: HTMLDivElement) => { scrollEl.scrollTo({ top: 300 }); @@ -510,8 +510,8 @@ describe("calcite-popover", () => { await page.waitForChanges(); - expect(await popover.isVisible()).toBe(false); - expect((await popover.getComputedStyle()).pointerEvents).toBe("none"); + expect(await positionContainer.isVisible()).toBe(false); + expect((await positionContainer.getComputedStyle()).pointerEvents).toBe("none"); }); it("should not toggle popovers with triggerDisabled", async () => { @@ -574,6 +574,7 @@ describe("calcite-popover", () => { floatingUIOwner( `content
referenceElement
`, "open", + { shadowSelector: `.${CSS.positionContainer}` }, ); }); @@ -632,12 +633,12 @@ describe("calcite-popover", () => { await page.waitForChanges(); - const popover = await page.find(`calcite-popover`); + const positionContainer = await page.find(`calcite-popover >>> .${CSS.positionContainer}`); const ref = await page.find("#ref"); - expect(await popover.isVisible()).toBe(true); + expect(await positionContainer.isVisible()).toBe(true); await ref.click(); - expect(await popover.isVisible()).toBe(false); + expect(await positionContainer.isVisible()).toBe(false); await page.$eval("calcite-popover", (popoverEl: HTMLCalcitePopoverElement) => { const transferEl = document.getElementById("transfer"); @@ -647,7 +648,7 @@ describe("calcite-popover", () => { await page.waitForChanges(); await ref.click(); - expect(await popover.isVisible()).toBe(true); + expect(await positionContainer.isVisible()).toBe(true); }); it("should close popovers with ESC key", async () => { diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss index 0c4e6d011f6..1e8380874a4 100644 --- a/packages/calcite-components/src/components/popover/popover.scss +++ b/packages/calcite-components/src/components/popover/popover.scss @@ -7,6 +7,7 @@ */ :host { + @apply block; --calcite-floating-ui-z-index: var(--calcite-popover-z-index, theme("zIndex.popover")); } diff --git a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts index ab7770609c8..d8a730447b4 100644 --- a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts +++ b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts @@ -1,5 +1,5 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; -import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS } from "../tooltip/resources"; +import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS, CSS } from "../tooltip/resources"; import { accessible, defaults, floatingUIOwner, hidden, openClose, renders } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { getElementXY, GlobalTestProps } from "../../tests/utils"; @@ -87,7 +87,7 @@ describe("calcite-tooltip", () => { } describe("renders", () => { - renders(`calcite-tooltip`, { visible: false, display: "block" }); + renders(`calcite-tooltip`, { display: "block" }); renders(`
😄
`, { display: "block", }); @@ -95,13 +95,13 @@ describe("calcite-tooltip", () => { describe("accessible when closed", () => { accessible( - `Hello World!
Tooltip Reference
`, + `Hello World!
Tooltip Reference
`, ); }); describe("accessible when open", () => { accessible( - `Hello World!
Tooltip Reference
`, + `Hello World!
Tooltip Reference
`, ); }); @@ -182,11 +182,11 @@ describe("calcite-tooltip", () => { await page.waitForChanges(); - const tooltip = await page.find(`calcite-tooltip`); + const positionContainer = await page.find(`calcite-tooltip >>> .${CSS.positionContainer}`); await page.waitForChanges(); - const style = await tooltip.getComputedStyle(); + const style = await positionContainer.getComputedStyle(); expect(style.zIndex).toBe("901"); }); @@ -197,9 +197,9 @@ describe("calcite-tooltip", () => { html`
referenceElement
`, ); - const element = await page.find("calcite-tooltip"); + const positionContainer = await page.find(`calcite-tooltip >>> .${CSS.positionContainer}`); - let computedStyle: CSSStyleDeclaration = await element.getComputedStyle(); + let computedStyle: CSSStyleDeclaration = await positionContainer.getComputedStyle(); expect(computedStyle.transform).toBe("none"); @@ -209,7 +209,7 @@ describe("calcite-tooltip", () => { }); await page.waitForChanges(); - computedStyle = await element.getComputedStyle(); + computedStyle = await positionContainer.getComputedStyle(); expect(computedStyle.transform).not.toBe("none"); }); @@ -229,15 +229,15 @@ describe("calcite-tooltip", () => { await page.waitForChanges(); - const tooltip = await page.find(`calcite-tooltip`); + const positionContainer = await page.find(`calcite-tooltip >>> .${CSS.positionContainer}`); - expect(await tooltip.isVisible()).toBe(false); + expect(await positionContainer.isVisible()).toBe(false); element.setProperty("open", true); await page.waitForChanges(); - expect(await tooltip.isVisible()).toBe(true); + expect(await positionContainer.isVisible()).toBe(true); }); it("should accept referenceElement as string id", async () => { @@ -249,11 +249,11 @@ describe("calcite-tooltip", () => { await page.waitForChanges(); - const tooltip = await page.find(`calcite-tooltip`); + const positionContainer = await page.find(`calcite-tooltip >>> .${CSS.positionContainer}`); await page.waitForChanges(); - expect(await tooltip.isVisible()).toBe(true); + expect(await positionContainer.isVisible()).toBe(true); const element = await page.find("calcite-tooltip"); @@ -285,11 +285,11 @@ describe("calcite-tooltip", () => { await page.waitForChanges(); - const tooltip = await page.find(`calcite-tooltip`); + const positionContainer = await page.find(`calcite-tooltip >>> .${CSS.positionContainer}`); - expect(await tooltip.isVisible()).toBe(true); + expect(await positionContainer.isVisible()).toBe(true); - const computedStyle = await tooltip.getComputedStyle(); + const computedStyle = await positionContainer.getComputedStyle(); expect(computedStyle.transform).not.toBe("matrix(0, 0, 0, 0, 0, 0)"); }); @@ -303,9 +303,9 @@ describe("calcite-tooltip", () => { await page.waitForChanges(); - const tooltip = await page.find(`calcite-tooltip`); + const positionContainer = await page.find(`calcite-tooltip >>> .${CSS.positionContainer}`); - expect(await tooltip.isVisible()).toBe(false); + expect(await positionContainer.isVisible()).toBe(false); const ref = await page.find("#ref"); @@ -313,7 +313,7 @@ describe("calcite-tooltip", () => { await page.waitForTimeout(TOOLTIP_OPEN_DELAY_MS); - expect(await tooltip.isVisible()).toBe(true); + expect(await positionContainer.isVisible()).toBe(true); }); it("should honor hover interaction with span inside", async () => { @@ -325,9 +325,9 @@ describe("calcite-tooltip", () => { await page.waitForChanges(); - const tooltip = await page.find(`calcite-tooltip`); + const positionContainer = await page.find(`calcite-tooltip >>> .${CSS.positionContainer}`); - expect(await tooltip.isVisible()).toBe(false); + expect(await positionContainer.isVisible()).toBe(false); const ref = await page.find("#ref span"); @@ -335,7 +335,7 @@ describe("calcite-tooltip", () => { await page.waitForTimeout(TOOLTIP_OPEN_DELAY_MS); - expect(await tooltip.isVisible()).toBe(true); + expect(await positionContainer.isVisible()).toBe(true); }); it("should honor text", async () => { @@ -583,6 +583,7 @@ describe("calcite-tooltip", () => { floatingUIOwner( `content
referenceElement
`, "open", + { shadowSelector: `.${CSS.positionContainer}` }, ); }); @@ -702,18 +703,18 @@ describe("calcite-tooltip", () => { await page.waitForChanges(); - const tooltip = await page.find(`calcite-tooltip`); + const positionContainer = await page.find(`calcite-tooltip >>> .${CSS.positionContainer}`); const ref = await page.find("#ref"); - expect(await tooltip.isVisible()).toBe(false); + expect(await positionContainer.isVisible()).toBe(false); await ref.focus(); await page.waitForChanges(); - expect(await tooltip.isVisible()).toBe(true); + expect(await positionContainer.isVisible()).toBe(true); const testElement = await page.find("#test"); await testElement.focus(); await page.waitForChanges(); - expect(await tooltip.isVisible()).toBe(false); + expect(await positionContainer.isVisible()).toBe(false); await page.$eval("calcite-tooltip", (tooltipEl: HTMLCalciteTooltipElement) => { const transferEl = document.getElementById("transfer"); @@ -724,7 +725,7 @@ describe("calcite-tooltip", () => { await ref.focus(); await page.waitForChanges(); - expect(await tooltip.isVisible()).toBe(true); + expect(await positionContainer.isVisible()).toBe(true); }); describe("beforeOpen, open, beforeClose, close event emitting", () => { @@ -867,9 +868,9 @@ describe("calcite-tooltip", () => { const openEvent = await page.spyOnEvent("calciteTooltipOpen"); const container = await page.find(".container"); - const tooltip = await page.find(`calcite-tooltip`); + const positionContainer = await page.find(`calcite-tooltip >>> .${CSS.positionContainer}`); - expect(await tooltip.isVisible()).toBe(false); + expect(await positionContainer.isVisible()).toBe(false); await container.hover(); await page.waitForChanges(); @@ -880,7 +881,7 @@ describe("calcite-tooltip", () => { await page.waitForTimeout(TOOLTIP_OPEN_DELAY_MS); await page.waitForChanges(); - expect(await tooltip.isVisible()).toBe(true); + expect(await positionContainer.isVisible()).toBe(true); expect(beforeOpenEvent).toHaveReceivedEventTimes(1); expect(openEvent).toHaveReceivedEventTimes(1); @@ -893,7 +894,7 @@ describe("calcite-tooltip", () => { await page.waitForTimeout(TOOLTIP_CLOSE_DELAY_MS); await page.waitForChanges(); - expect(await tooltip.isVisible()).not.toBe(true); + expect(await positionContainer.isVisible()).not.toBe(true); expect(beforeOpenEvent).toHaveReceivedEventTimes(1); expect(openEvent).toHaveReceivedEventTimes(1); diff --git a/packages/calcite-components/src/components/tooltip/tooltip.scss b/packages/calcite-components/src/components/tooltip/tooltip.scss index f1a48eb84ee..192a7f37e39 100644 --- a/packages/calcite-components/src/components/tooltip/tooltip.scss +++ b/packages/calcite-components/src/components/tooltip/tooltip.scss @@ -7,6 +7,7 @@ */ :host { + @apply block; --calcite-floating-ui-z-index: var(--calcite-tooltip-z-index, theme("zIndex.tooltip")); } diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index 45276c38c79..cefb40a12b7 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -412,7 +412,7 @@ export function getEffectivePlacement(placement: LogicalPlacement, isRTL = false } const initialFloatingElStyle = { - display: "", + display: "block", }; const hiddenFloatingElStyle = { From 43817e442855d9b936096d222a1ac9fcdc6d49f8 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 12 Sep 2024 09:28:39 -0700 Subject: [PATCH 16/42] cleanup --- .../src/assets/styles/_floating-ui.scss | 8 -------- .../src/components/combobox/combobox.scss | 7 +------ .../src/components/combobox/combobox.tsx | 9 +-------- .../src/components/combobox/resources.ts | 1 + .../src/components/dropdown/dropdown.scss | 4 ---- .../input-date-picker/input-date-picker.e2e.ts | 4 ++-- .../input-date-picker/input-date-picker.scss | 10 ---------- .../components/input-date-picker/input-date-picker.tsx | 5 +---- .../src/components/input-date-picker/resources.ts | 1 - .../src/components/popover/popover.scss | 2 +- .../src/components/tooltip/tooltip.scss | 2 +- 11 files changed, 8 insertions(+), 45 deletions(-) diff --git a/packages/calcite-components/src/assets/styles/_floating-ui.scss b/packages/calcite-components/src/assets/styles/_floating-ui.scss index 0a28d50c291..9c72ef9d33f 100644 --- a/packages/calcite-components/src/assets/styles/_floating-ui.scss +++ b/packages/calcite-components/src/assets/styles/_floating-ui.scss @@ -70,14 +70,6 @@ $floating-ui-transition-offset: 5px; z-index: var(--calcite-floating-ui-z-index); } -@mixin floating-ui-wrapper { - visibility: hidden; -} - -@mixin floating-ui-wrapper-active { - visibility: visible; -} - @mixin floating-ui-arrow { .calcite-floating-ui-arrow { @apply -z-default diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss index d6ebd9b2007..c2d6d7697e7 100644 --- a/packages/calcite-components/src/components/combobox/combobox.scss +++ b/packages/calcite-components/src/components/combobox/combobox.scss @@ -203,18 +203,13 @@ .floating-ui-container { --calcite-floating-ui-z-index: theme("zIndex.dropdown"); @include floating-ui-container(); - @include floating-ui-wrapper(); } @include floating-ui-elem-anim(".floating-ui-container"); -.floating-ui-container--active { - @include floating-ui-wrapper-active(); -} - @media (forced-colors: active) { .wrapper, - .floating-ui-container--active { + .floating-ui-container { border: 1px solid canvasText; } } diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index fb7d58225d0..ae83425eb29 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -1682,14 +1682,7 @@ export class Combobox }; return ( -