[TECH] Gérer l'apparition du tooltip en CSS (PIX-12955).

 #673

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'}}"

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

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;
   }

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
 

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",

tests/dummy/app/controllers/tooltip-page.js

@@ -0,0 +1,11 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ModalPage extends Controller {
+  @tracked showModal = false;
+  title = "Qu'est-ce qu'une modale ?";
+
+  @action
+  onCloseButtonClick() {}
+}

tests/dummy/app/router.js

@@ -12,4 +12,5 @@ Router.map(function () {
   this.route('modal-page', { path: '/modal' });
   this.route('select-page', { path: '/select' });
   this.route('sidebar-page', { path: '/sidebar' });
+  this.route('tooltip-page', { path: '/tooltip' });
 });

tests/dummy/app/templates/tooltip-page.hbs

@@ -0,0 +1,29 @@
+{{! template-lint-disable no-inline-styles }}
+<PixBlock style="margin: 3vmin; padding: 3vmin;">
+  <PixTooltip @id="id">
+    <:triggerElement>
+      <PixButton aria-describedby="id">
+        Label
+      </PixButton>
+    </:triggerElement>
+
+    <:tooltip>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas molestie mauris vel
+      viverra.
+    </:tooltip>
+  </PixTooltip>
+</PixBlock>
+<PixBlock style="margin: 3vmin; padding: 3vmin;">
+  <PixTooltip @id="id2">
+    <:triggerElement>
+      <PixInput @id="id3" @type="text" @placeholder="Placeholder">
+        Label
+      </PixInput>
+    </:triggerElement>
+
+    <:tooltip>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas molestie mauris vel
+      viverra.
+    </:tooltip>
+  </PixTooltip>
+</PixBlock>

tests/integration/components/pix-tooltip-test.js

@@ -60,21 +60,20 @@ module('Integration | Component | pix-tooltip', function (hooks) {
 
   test('it dismissed tooltip on escape keyup', async function (assert) {
     // given
-    const screen = await render(hbs`<PixTooltip>
+    const screen = await render(hbs`<PixTooltip @position='bottom'>
   <:triggerElement>
-    template block text
+    <PixButton>Trigger</PixButton>
   </:triggerElement>
-  <:tooltip></:tooltip>
+  <:tooltip>Some tooltip</:tooltip>
 </PixTooltip>`);
 
     // when
-    await screen.getByText('template block text').focus();
+    await screen.getByRole('button', { name: 'Trigger' }).focus();
 
     await userEvent.keyboard('[Escape]');
 
     // then
-    assert.contains('template block text');
-    assert.dom('.pix-tooltip__content').isNotVisible();
+    assert.dom('.pix-tooltip').doesNotHaveClass('pix-tooltip--visible');
   });
 
   module('tooltip position', function () {