From 20f69e2985b6a18504d40b5d755ad368903c24e0 Mon Sep 17 00:00:00 2001 From: Ashley Date: Fri, 7 Jun 2024 16:45:00 +0200 Subject: [PATCH 1/3] prevent click from intervening with hover --- .../swirl-popover-trigger.tsx | 12 +++++++++++- .../dart/lib/fonts/flip-legacy-icons.ttf | Bin 14716 -> 14716 bytes .../dart/lib/fonts/swirl-icons.ttf | Bin 91724 -> 91724 bytes .../swirl-tokens/dart/lib/styles.dark.dart | 2 +- .../swirl-tokens/dart/lib/styles.light.dart | 2 +- 5 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/swirl-components/src/components/swirl-popover-trigger/swirl-popover-trigger.tsx b/packages/swirl-components/src/components/swirl-popover-trigger/swirl-popover-trigger.tsx index bac59777a..675080279 100644 --- a/packages/swirl-components/src/components/swirl-popover-trigger/swirl-popover-trigger.tsx +++ b/packages/swirl-components/src/components/swirl-popover-trigger/swirl-popover-trigger.tsx @@ -59,6 +59,12 @@ export class SwirlPopoverTrigger { this.updateTriggerElAriaAttributes(); } + @Watch("triggerOnHover") + watchHover() { + clearTimeout(this.hoverDelayReference); + clearTimeout(this.hoverLingerReference); + } + private getPopoverEl() { return typeof this.swirlPopover === "string" ? document.querySelector(`#${this.swirlPopover}`) @@ -110,7 +116,9 @@ export class SwirlPopoverTrigger { this.hoverDelayReference = setTimeout(() => { this.hoverDelayReference = undefined; - this.mouseenterHandler(); + if (this.triggerOnHover) { + this.mouseenterHandler(); + } }, this.hoverDelay); }; @@ -162,6 +170,8 @@ export class SwirlPopoverTrigger { } private onClick = () => { + if (this.triggerOnHover) return; + const popoverEl = this.getPopoverEl(); const triggerEl = this.getTriggerEl(); diff --git a/packages/swirl-icons/dart/lib/fonts/flip-legacy-icons.ttf b/packages/swirl-icons/dart/lib/fonts/flip-legacy-icons.ttf index 6975a002c9863874c97cbd9433239932910689ac..1aeeb1f191d5c2c8548b361e5530f001d5ad6e1c 100644 GIT binary patch delta 46 ucmexU^rvV-AhY<5(1{^arKd%w#Pi#HW#DFh!2kr0I!+#e(VJNqD=YxNa1q)7 delta 46 vcmexU^rvV-AhVFv!HFSLr59f7iRZWZ%D~P1f&mB~wZ8fVqc^iKR#*T4&Cn9r diff --git a/packages/swirl-icons/dart/lib/fonts/swirl-icons.ttf b/packages/swirl-icons/dart/lib/fonts/swirl-icons.ttf index b0d6b4ac752ad9e27fd824fdecaf17a920952439..29f9126e8154dfea0a238d721a93013df8bef233 100644 GIT binary patch delta 52 zcmX?ehV{%D)(L^k;x~dOhD?<%OA(9bxB1Gz&HRD^2p)BuJOrbgSs1soFfw|i0sszV B5>@~J delta 52 zcmX?ehV{%D)(L^kLQ?xChD?=iyl)rJZ}XLboB0I;5Ikyq^#evXvoLOFVPy131ppwx B6IB2J diff --git a/packages/swirl-tokens/dart/lib/styles.dark.dart b/packages/swirl-tokens/dart/lib/styles.dark.dart index 2786a5f70..b9e932c62 100644 --- a/packages/swirl-tokens/dart/lib/styles.dark.dart +++ b/packages/swirl-tokens/dart/lib/styles.dark.dart @@ -4,7 +4,7 @@ // // Do not edit directly -// Generated on Wed, 05 Jun 2024 10:14:18 GMT +// Generated on Fri, 07 Jun 2024 14:29:24 GMT diff --git a/packages/swirl-tokens/dart/lib/styles.light.dart b/packages/swirl-tokens/dart/lib/styles.light.dart index ed9efc6d6..8a9578ea2 100644 --- a/packages/swirl-tokens/dart/lib/styles.light.dart +++ b/packages/swirl-tokens/dart/lib/styles.light.dart @@ -4,7 +4,7 @@ // // Do not edit directly -// Generated on Wed, 05 Jun 2024 10:14:18 GMT +// Generated on Fri, 07 Jun 2024 14:29:24 GMT From b65d4dba0bbf79d9fc0f831dd3bcc40a5621f519 Mon Sep 17 00:00:00 2001 From: Ashley Date: Fri, 7 Jun 2024 17:09:51 +0200 Subject: [PATCH 2/3] cleanup --- .../swirl-popover-trigger/swirl-popover-trigger.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/swirl-components/src/components/swirl-popover-trigger/swirl-popover-trigger.tsx b/packages/swirl-components/src/components/swirl-popover-trigger/swirl-popover-trigger.tsx index 675080279..beb7db08a 100644 --- a/packages/swirl-components/src/components/swirl-popover-trigger/swirl-popover-trigger.tsx +++ b/packages/swirl-components/src/components/swirl-popover-trigger/swirl-popover-trigger.tsx @@ -147,9 +147,7 @@ export class SwirlPopoverTrigger { private onMouseleave = () => { clearTimeout(this.hoverDelayReference); - if (!Boolean(this.hoverDelayReference)) { - this.mouseleaveHandler(); - } + this.mouseleaveHandler(); }; private mouseleaveHandler = () => { @@ -160,7 +158,9 @@ export class SwirlPopoverTrigger { private startHoverLingerTimer() { clearTimeout(this.hoverLingerReference); this.hoverLingerReference = setTimeout(() => { - this.getPopoverEl().close(true); + if (this.triggerIsActive && this.isPopoverOpen()) { + this.getPopoverEl().close(true); + } this.triggerIsActive = false; }, this.hoverLingerDuration); } From 3322588dc3ffa2bffcb21759583a184fcd4193c7 Mon Sep 17 00:00:00 2001 From: Ashley Date: Tue, 11 Jun 2024 13:32:28 +0200 Subject: [PATCH 3/3] add triggerOnClick prop --- packages/swirl-components/src/components.d.ts | 2 ++ .../swirl-popover-trigger/swirl-popover-trigger.tsx | 3 ++- packages/swirl-components/vscode-data.json | 4 ++++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/swirl-components/src/components.d.ts b/packages/swirl-components/src/components.d.ts index 6b379ff79..32795667e 100644 --- a/packages/swirl-components/src/components.d.ts +++ b/packages/swirl-components/src/components.d.ts @@ -1571,6 +1571,7 @@ export namespace Components { "parentScrollContainer"?: HTMLElement; "setAriaAttributes"?: boolean; "swirlPopover": string | HTMLSwirlPopoverElement; + "triggerOnClick"?: boolean; "triggerOnHover"?: boolean; } interface SwirlProgressIndicator { @@ -5925,6 +5926,7 @@ declare namespace LocalJSX { "parentScrollContainer"?: HTMLElement; "setAriaAttributes"?: boolean; "swirlPopover": string | HTMLSwirlPopoverElement; + "triggerOnClick"?: boolean; "triggerOnHover"?: boolean; } interface SwirlProgressIndicator { diff --git a/packages/swirl-components/src/components/swirl-popover-trigger/swirl-popover-trigger.tsx b/packages/swirl-components/src/components/swirl-popover-trigger/swirl-popover-trigger.tsx index beb7db08a..779fd0d39 100644 --- a/packages/swirl-components/src/components/swirl-popover-trigger/swirl-popover-trigger.tsx +++ b/packages/swirl-components/src/components/swirl-popover-trigger/swirl-popover-trigger.tsx @@ -13,6 +13,7 @@ export class SwirlPopoverTrigger { @Prop() parentScrollContainer?: HTMLElement; @Prop() setAriaAttributes?: boolean = true; @Prop() swirlPopover!: string | HTMLSwirlPopoverElement; + @Prop() triggerOnClick?: boolean = true; @Prop() triggerOnHover?: boolean = false; @Prop() hoverLingerDuration?: number; @Prop() hoverDelay?: number; @@ -170,7 +171,7 @@ export class SwirlPopoverTrigger { } private onClick = () => { - if (this.triggerOnHover) return; + if (!this.triggerOnClick) return; const popoverEl = this.getPopoverEl(); const triggerEl = this.getTriggerEl(); diff --git a/packages/swirl-components/vscode-data.json b/packages/swirl-components/vscode-data.json index f9505c44d..d57a379ac 100644 --- a/packages/swirl-components/vscode-data.json +++ b/packages/swirl-components/vscode-data.json @@ -12831,6 +12831,10 @@ "name": "swirl-popover", "description": "" }, + { + "name": "trigger-on-click", + "description": "" + }, { "name": "trigger-on-hover", "description": ""