@1024pix/pix-ui 46.10.3 → 46.10.5

package/addon/components/pix-tooltip.hbs

@@ -1,5 +1,5 @@
 <div
-  class="pix-tooltip"
+  class="pix-tooltip {{if this.isTooltipVisible 'pix-tooltip--visible' ''}}"
   {{on-escape-action this.hideTooltip}}
   {{on "mouseover" this.showTooltip}}
   {{on "mouseleave" this.hideTooltipOnMouseOut}}
@@ -19,7 +19,6 @@
         id={{@id}}
         role="tooltip"
         class="pix-tooltip__content pix-tooltip__content--{{this.position}}
-          {{if this.isVisible 'pix-tooltip__content--visible'}}
           {{if @isInline 'pix-tooltip__content--inline'}}
           {{if @isLight 'pix-tooltip__content--light'}}
           {{if @isWide 'pix-tooltip__content--wide'}}"

package/addon/components/pix-tooltip.js

@@ -3,7 +3,7 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 export default class PixTooltip extends Component {
-  @tracked isVisible = false;
+  @tracked isTooltipVisible = false;
 
   get position() {
     const correctsPosition = [
@@ -25,12 +25,12 @@ export default class PixTooltip extends Component {
 
   @action
   showTooltip() {
-    this.isVisible = true;
+    this.isTooltipVisible = true;
   }
 
   @action
   hideTooltip() {
-    this.isVisible = false;
+    this.isTooltipVisible = false;
   }
 
   @action

package/addon/styles/_pix-tooltip.scss

@@ -8,6 +8,27 @@
     display: block;
     width: 100%;
   }
+
+  &__trigger-element:hover + .pix-tooltip__content {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+@supports selector(:has(*)) {
+  .pix-tooltip--visible:has(.pix-tooltip__trigger-element :focus-visible) {
+    .pix-tooltip__content {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}
+
+@supports not selector(:has(*)) {
+  .pix-tooltip--visible .pix-tooltip__trigger-element:focus-within + .pix-tooltip__content {
+    visibility: visible;
+    opacity: 1;
+  }
 }
 
 .pix-tooltip__content {
@@ -16,22 +37,17 @@
   position: absolute;
   left: auto;
   z-index: 100;
-  display: none;
   padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
   color: var(--pix-neutral-0);
   font-size: 0.875rem;
   line-height: 1.4rem;
   background-color: var(--pix-neutral-900);
   border-radius: 6px;
+  visibility: hidden;
   opacity: 0;
   transition: opacity 0.3s;
   pointer-events: none;
 
-  &--visible {
-    display: block;
-    opacity: 1;
-  }
-
   &--inline {
     white-space: nowrap;
   }

package/app/stories/pix-tooltip.mdx

@@ -61,6 +61,7 @@ Infobulle en position `top`, fond sombre (par défaut).
 
 <Story of={ComponentStories.Default} height={200} />
 <Story of={ComponentStories.WithIcon} height={200} />
+<Story of={ComponentStories.WithInput} height={200} />
 
 ## Is Light
 

package/app/stories/pix-tooltip.stories.js

@@ -118,6 +118,23 @@ const TemplateWithIconElement = (args) => {
   };
 };
 
+const TemplateWithInputElement = (args) => {
+  return {
+    template: hbs`<PixTooltip @id={{this.id}} @isInline='true'>
+  <:triggerElement>
+    <PixInput @id='some-id'>
+      <:label>{{this.label}}</:label>
+    </PixInput>
+  </:triggerElement>
+
+  <:tooltip>
+    {{this.text}}
+  </:tooltip>
+</PixTooltip>`,
+    context: args,
+  };
+};
+
 export const Default = Template.bind({});
 Default.args = {
   text: 'Hello World',
@@ -184,6 +201,12 @@ WithIcon.args = {
   label: 'À survoler pour voir la tooltip',
 };
 
+export const WithInput = TemplateWithInputElement.bind({});
+WithInput.args = {
+  text: 'Hello World',
+  label: 'À survoler pour voir la tooltip',
+};
+
 export const hide = Template.bind({});
 hide.args = {
   label: "Survoler ici n'affiche pas tooltip",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "46.10.3",
+  "version": "46.10.5",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -98,7 +98,7 @@
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^8.0.0",
     "ember-qunit": "^8.0.0",
-    "ember-resolver": "^11.0.0",
+    "ember-resolver": "^12.0.0",
     "ember-sinon": "^5.0.0",
     "ember-source": "^4.0.1",
     "ember-source-channel-url": "^3.0.0",