From 1ad198afa9d10cd212a4a759021f7a1f37473e1e Mon Sep 17 00:00:00 2001
From: Clarisse Damon <clarisse.damon@pix.fr>
Date: Tue, 25 Oct 2022 12:19:19 +0200
Subject: [PATCH] feat(Pix-tooltip): avoid bubble to children

---
 addon/components/pix-tooltip.hbs    |  6 ++++--
 addon/components/pix-tooltip.js     | 13 ++++++++-----
 addon/styles/_pix-tooltip.scss      |  1 +
 app/stories/pix-tooltip.stories.js  | 27 +++++++++++++++++++++++++++
 app/stories/pix-tooltip.stories.mdx |  1 +
 5 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/addon/components/pix-tooltip.hbs b/addon/components/pix-tooltip.hbs
index 8ff40dc33..855f8c580 100644
--- a/addon/components/pix-tooltip.hbs
+++ b/addon/components/pix-tooltip.hbs
@@ -2,13 +2,15 @@
   class="pix-tooltip"
   {{on-escape-action this.hideTooltip}}
   {{on "mouseover" this.showTooltip}}
-  {{on "mouseout" this.hideTooltipOnMouseOut}}
+  {{on "mouseleave" this.hideTooltipOnMouseOut}}
   {{on "focusin" this.showTooltip}}
   {{on "focusout" this.hideTooltip}}
   ...attributes
 >
   {{#if (has-block "triggerElement")}}
-    {{yield to="triggerElement"}}
+    <div class={{if this.isVisible "pix-tooltip--visible" ""}}>
+      {{yield to="triggerElement"}}
+    </div>
   {{/if}}
 
   {{#if (has-block "tooltip")}}
diff --git a/addon/components/pix-tooltip.js b/addon/components/pix-tooltip.js
index 73e0c3789..c11c5adf1 100644
--- a/addon/components/pix-tooltip.js
+++ b/addon/components/pix-tooltip.js
@@ -1,7 +1,10 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export default class PixTooltip extends Component {
+  @tracked isVisible = false;
+
   get position() {
     const correctsPosition = [
       'top',
@@ -21,18 +24,18 @@ export default class PixTooltip extends Component {
   }
 
   @action
-  showTooltip(event) {
-    event.target.classList.add('pix-tooltip--visible');
+  showTooltip() {
+    this.isVisible = true;
   }
 
   @action
-  hideTooltip(event) {
-    event.target.classList.remove('pix-tooltip--visible');
+  hideTooltip() {
+    this.isVisible = false;
   }
 
   @action
   hideTooltipOnMouseOut(event) {
-    const isFocused = document.activeElement === event.target;
+    const isFocused = event.target.contains(document.activeElement);
 
     if (isFocused) {
       return;
diff --git a/addon/styles/_pix-tooltip.scss b/addon/styles/_pix-tooltip.scss
index a554a962a..c440a91e6 100644
--- a/addon/styles/_pix-tooltip.scss
+++ b/addon/styles/_pix-tooltip.scss
@@ -5,6 +5,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
 }
 
 .pix-tooltip--visible {
diff --git a/app/stories/pix-tooltip.stories.js b/app/stories/pix-tooltip.stories.js
index 2fac35487..72cdbf178 100644
--- a/app/stories/pix-tooltip.stories.js
+++ b/app/stories/pix-tooltip.stories.js
@@ -46,6 +46,27 @@ const TemplateWithHTMLElement = (args) => {
   };
 };
 
+const TemplateWithIconElement = (args) => {
+  return {
+    template: hbs`
+      <PixTooltip
+        @id={{this.id}}
+        @isInline=true>
+        <:triggerElement>
+          <button style='padding:0; margin-left:4px; line-height:0;'>
+            <FaIcon class="external-link" @icon="up-right-from-square" />
+          </button>
+        </:triggerElement>
+
+        <:tooltip>
+         {{this.text}}
+        </:tooltip>
+      </PixTooltip>
+    `,
+    context: args,
+  };
+};
+
 export const Default = Template.bind({});
 Default.args = {
   text: 'Hello World',
@@ -113,6 +134,12 @@ WithHTML.args = {
   label: 'À survoler pour voir la tooltip',
 };
 
+export const WithIcon = TemplateWithIconElement.bind({});
+Default.args = {
+  text: 'Hello World',
+  label: 'À survoler pour voir la tooltip',
+};
+
 export const argTypes = {
   id: {
     name: 'id',
diff --git a/app/stories/pix-tooltip.stories.mdx b/app/stories/pix-tooltip.stories.mdx
index f1f24b436..8fa87327f 100644
--- a/app/stories/pix-tooltip.stories.mdx
+++ b/app/stories/pix-tooltip.stories.mdx
@@ -75,6 +75,7 @@ Infobulle en position `top`, fond sombre (par défaut).
 
 <Canvas>
   <Story name="Default" story={stories.Default} height={200} />
+  <Story name="WithIcon" story={stories.WithIcon} height={200} />
 </Canvas>
 
 ## Is Light