@1024pix/pix-ui 20.2.0 → 20.2.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Pix-UI Changelog
 
+## v20.2.2 (09/11/2022)
+
+
+### :building_construction: Tech
+- [#273](https://github.com/1024pix/pix-ui/pull/273) [TECH] Remplacer l'import d'`htmlSafe` depuis `ember/string` en `ember/template`
+
+## v20.2.1 (28/10/2022)
+
+
+### :bug: Correction
+- [#268](https://github.com/1024pix/pix-ui/pull/268) [BUGFIX] Empêcher la propagation des événements dans tous les enfants sur la Tooltip (PIX-6149)
+
 ## v20.2.0 (25/10/2022)
 
 

package/addon/components/pix-progress-gauge.js

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { htmlSafe } from '@ember/string';
+import { htmlSafe } from '@ember/template';
 
 export default class PixProgressGauge extends Component {
   get progressValue() {

package/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")}}

package/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;

package/addon/styles/_pix-tooltip.scss

@@ -5,6 +5,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
 }
 
 .pix-tooltip--visible {

package/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',

package/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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "20.2.0",
+  "version": "20.2.2",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"