@1024pix/pix-ui 11.2.0 → 13.2.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Pix-UI Changelog
 
+## v13.2.0 (17/02/2022)
+
+
+### :rocket: Enhancement
+- [#193](https://github.com/1024pix/pix-ui/pull/193) [FEATURE] Ajouter le composant dropdown (PIX-4295).
+
+## v13.1.0 (16/02/2022)
+
+
+### :building_construction: Tech
+- [#194](https://github.com/1024pix/pix-ui/pull/194) [TECH] Mise a jour du package-lock.
+- [#192](https://github.com/1024pix/pix-ui/pull/192) [TECH] Améliorer le blueprint pour auto-générer les nouveaux composants.
+
+### :coffee: Various
+- [#198](https://github.com/1024pix/pix-ui/pull/198) [FEAT] Permettre à la tooltip de ne pas s'afficher (PIX-4375)
+- [#196](https://github.com/1024pix/pix-ui/pull/196) [FIX] Corriger les tests qui bloquent la pipeline.
+- [#183](https://github.com/1024pix/pix-ui/pull/183) [DOC] Utiliser les champs de saisie natifs HTML plutôt que ceux d'Ember.
+
+## v13.0.0 (27/01/2022)
+
+
+### :coffee: Various
+- [#188](https://github.com/1024pix/pix-ui/pull/188) [BREAKING_CHANGES] Input / InputPassword missing event on onChange (PIX-4243)
+
+## v12.0.0 (24/01/2022)
+
+
+### :rocket: Enhancement
+- [#94](https://github.com/1024pix/pix-ui/pull/94) [FEATURE] Ajout du composant PixModal
+
+### :bug: Bug fix
+- [#186](https://github.com/1024pix/pix-ui/pull/186) [BREAKING_CHANGES] Désactiver l'autocomplete sur le composant Pix Select (PIX-4158)
+- [#187](https://github.com/1024pix/pix-ui/pull/187) [BUGFIX] Rendre tout le tag sélectionnable (PIX-4179)
+
 ## v11.2.0 (14/01/2022)
 
 
@@ -16,7 +50,7 @@
 
 
 ### :building_construction: Tech
-- [#175](https://github.com/1024pix/pix-ui/pull/175) [TECH] Faire en sorte que le message d'erreur soit situé à l'intérieur de l'élément qui le compose (PIX-3829)
+- [#175](https://github.com/1024pix/pix-ui/pull/175) [BREAKING_CHANGES] Faire en sorte que le message d'erreur soit situé à l'intérieur de l'élément qui le compose (PIX-3829)
 
 ## v11.0.1 (08/12/2021)
 
@@ -34,12 +68,12 @@
 - [#177](https://github.com/1024pix/pix-ui/pull/177) [FEATURE] Création du composant Tag sélectionnable  dans Pix UI (PIX-3757)
 
 ### :building_construction: Tech
-- [#180](https://github.com/1024pix/pix-ui/pull/180) [TECH] Ajouter la possibilité d'utiliser des composants Ember à l'intérieur de la tooltip (Pix-3925)
+- [#180](https://github.com/1024pix/pix-ui/pull/180) [BREAKING_CHANGES] Ajouter la possibilité d'utiliser des composants Ember à l'intérieur de la tooltip (Pix-3925)
 - [#179](https://github.com/1024pix/pix-ui/pull/179) [TECH] Mise à jour du template de pull request pour faire apparaître plus clairement les BREAKING_CHANGES
 - [#148](https://github.com/1024pix/pix-ui/pull/148) [TECH] Formatter les fichiers avec prettier (PIX-3469)
 
 ### :bug: Bug fix
-- [#147](https://github.com/1024pix/pix-ui/pull/147) [BUGFIX] Ajout de l'évènement onChange afin de supprimer le message d'erreur lorsque l'utilisateur modifie sa saisie (PIX-3476)
+- [#147](https://github.com/1024pix/pix-ui/pull/147) [BREAKING_CHANGES] Ajout de l'évènement onChange afin de supprimer le message d'erreur lorsque l'utilisateur modifie sa saisie (PIX-3476)
 
 ### :coffee: Various
 - [#178](https://github.com/1024pix/pix-ui/pull/178) [DOC] Améliorer l'information sur les breaking changes dans Pix UI

package/addon/components/pix-block.hbs

@@ -1,4 +1,4 @@
-<div class="pix-block {{concat "pix-block--shadow-" this.getShadowWeight}}" ...attributes>
+<div class="pix-block {{concat 'pix-block--shadow-' this.getShadowWeight}}" ...attributes>
 
   {{yield}}
 

package/addon/components/pix-collapsible.hbs

@@ -1,9 +1,9 @@
-<div class="pix-collapsible {{if this.isUnCollapsed "pix-collapsible--uncollapsed"}}">
+<div class="pix-collapsible {{if this.isUnCollapsed 'pix-collapsible--uncollapsed'}}">
 
   <button
     type="button"
     {{on "click" this.toggleCollapsible}}
-    class="pix-collapsible__title {{if this.isUnCollapsed "pix-collapsible__title--uncollapsed"}}"
+    class="pix-collapsible__title {{if this.isUnCollapsed 'pix-collapsible__title--uncollapsed'}}"
     aria-controls={{this.contentId}}
     aria-expanded={{if this.isUnCollapsed "true" "false"}}
     ...attributes
@@ -15,14 +15,14 @@
       {{this.title}}
     </span>
 
-    <FaIcon @icon="{{if this.isCollapsed "plus" "minus"}}" class="pix-collapsible-title__icon" />
+    <FaIcon @icon="{{if this.isCollapsed 'plus' 'minus'}}" class="pix-collapsible-title__icon" />
   </button>
 
   <div
     id={{this.contentId}}
     aria-hidden={{if this.isCollapsed "true" "false"}}
     class="pix-collapsible__content
-      {{if this.isUnCollapsed " pix-collapsible__content--uncollapse"}}"
+      {{if this.isUnCollapsed ' pix-collapsible__content--uncollapse'}}"
   >
     {{yield}}
   </div>

package/addon/components/pix-dropdown.hbs

@@ -0,0 +1,85 @@
+<div class="pix-dropdown">
+  {{#if this.label}}
+    <label id={{@id}} class="pix-dropdown__label">{{this.label}}</label>
+  {{/if}}
+  <div class="pix-dropdown__controller">
+    <button
+      type="button"
+      class="pix-dropdown__controller--placeholder{{if this.isExpanded ' expanded'}}"
+      aria-label={{if this.isExpanded @collapseLabel @expandLabel}}
+      {{on "click" this.toggleDropdown}}
+      {{on "keyup" this.navigateThroughOptions}}
+    >
+      <p
+        title={{this.placeholder}}
+        class="pix-dropdown__controller--placeholder-text{{unless
+            this.hasSelectedOption
+            ' default'
+          }}"
+      >{{this.placeholder}}</p>
+    </button>
+    {{#if this.hasSelectedOption}}
+      <button
+        type="button"
+        class="pix-dropdown__controller--clear"
+        {{on "click" this.clearSelection}}
+        aria-label={{@clearLabel}}
+      >
+        <FaIcon @icon="times" />
+      </button>
+    {{/if}}
+    <FaIcon
+      class="pix-dropdown__controller--chevron"
+      @icon={{if this.isExpanded "chevron-up" "chevron-down"}}
+    />
+  </div>
+  <div
+    role="listbox"
+    id={{this.menuId}}
+    tabindex="-1"
+    class="pix-dropdown__menu{{if this.isExpanded ' expanded'}}"
+    aria-labelledby={{if this.label @id}}
+    aria-label={{unless this.label @placeholder}}
+    aria-hidden={{if this.isExpanded "false" "true"}}
+    aria-activedescendant={{if this.selectedOption this.selectedOption.value}}
+    {{on "keyup" this.navigateThroughOptions}}
+    {{on "scroll" this.incrementPage}}
+  >
+    {{#if @isSearchable}}
+      <div class="pix-dropdown__menu--search">
+        <FaIcon class="pix-dropdown__menu--search-icon" @icon="search" />
+        <label
+          class="pix-dropdown__menu--search-input-label"
+          for={{this.searchInputId}}
+        >{{@searchPlaceholder}}</label>
+        <input
+          class="pix-dropdown__menu--search-input"
+          id={{this.searchInputId}}
+          autocomplete="off"
+          tabindex={{unless this.isExpanded "-1"}}
+          placeholder={{@searchPlaceholder}}
+          {{on "input" this.filterOptions}}
+        />
+      </div>
+    {{/if}}
+    {{#each this.options as |opt index|}}
+      {{#if (lt index this.showLimit)}}
+        <div
+          role="option"
+          id={{opt.value}}
+          tabindex="-1"
+          class="pix-dropdown__menu--option{{if
+              (eq this.selectedOption.value opt.value)
+              ' selected'
+            }}"
+          aria-selected={{if (eq this.selectedOption.value opt.value) "true"}}
+          {{on "click" (fn this.selectOption opt)}}
+          {{on "mouseover" this.resetPreviouslyFocused}}
+          {{on "keypress" (fn this.onOptionKeyPress opt)}}
+        >
+          {{opt.label}}
+        </div>
+      {{/if}}
+    {{/each}}
+  </div>
+</div>

package/addon/components/pix-dropdown.js

@@ -0,0 +1,181 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class PixDropdown extends Component {
+  defaultId = Math.floor(Math.random() * 100);
+  focusedOption = null;
+  focusedIndex = null;
+  @tracked page = 1;
+  @tracked selectedOption = null;
+  @tracked isExpanded = false;
+  @tracked options = this.args.options;
+  @tracked menuId = `menu-${this.defaultId}`;
+  @tracked searchInputId = `search-input-${this.defaultId}`;
+
+  constructor() {
+    super(...arguments);
+
+    if (!this.args.label && !this.args.placeholder) {
+      throw new Error(
+        'ERROR in PixDropdown component, you need to provide a label and/or a placeholder'
+      );
+    }
+
+    if (this.args.selectedOption) {
+      this.selectedOption = this.args.options.find(
+        ({ value }) => value === this.args.selectedOption
+      );
+    }
+  }
+
+  get hasSelectedOption() {
+    return !!this.selectedOption;
+  }
+
+  get placeholder() {
+    return this.selectedOption?.label || this.args.placeholder;
+  }
+
+  get label() {
+    const labelIsDefined = this.args.label?.trim();
+    const idIsNotDefined = !this.args.id?.trim();
+
+    if (labelIsDefined && idIsNotDefined) {
+      throw new Error('ERROR in PixDropdown component, @id param is necessary when giving @label');
+    }
+    return this.args.label || null;
+  }
+
+  get showLimit() {
+    if (!this.args.pageSize) return this.options.length;
+
+    const numberOfOptionsAccordingToPage = this.args.pageSize * this.page;
+    return Math.min(this.options.length, numberOfOptionsAccordingToPage);
+  }
+
+  @action
+  resetPreviouslyFocused() {
+    if (!this.focusedOption) return;
+
+    const previouslyFocusedElement = document.getElementById(this.focusedOption.value);
+    previouslyFocusedElement?.blur();
+    this.focusedOption = undefined;
+    this.focusedIndex = undefined;
+  }
+
+  _navigateToOption(option, index) {
+    if (!option) return;
+
+    this.resetPreviouslyFocused();
+    this.focusedOption = option;
+    this.focusedIndex = index;
+    const focusedElement = document.getElementById(option.value);
+    focusedElement?.scrollIntoView({ block: 'nearest' });
+    focusedElement?.focus();
+  }
+
+  _computeNextIndex(isArrowDown, index) {
+    const length = this.showLimit;
+    let nextIndex;
+    if (index === undefined || index === null) {
+      nextIndex = isArrowDown ? 0 : length - 1;
+    } else {
+      const delta = isArrowDown ? 1 : -1;
+      nextIndex = index + delta;
+    }
+    // navigate through array in a circle
+    // (i.e. go back to first after last or last after first)
+    return ((nextIndex % length) + length) % length;
+  }
+
+  @action
+  navigateThroughOptions(event) {
+    const isArrowDown = event.code === 'ArrowDown';
+    if (event.code !== 'ArrowUp' && !isArrowDown) return;
+    const nextIndex = this._computeNextIndex(isArrowDown, this.focusedIndex);
+    this._navigateToOption(this.options[nextIndex], nextIndex);
+  }
+
+  @action
+  toggleDropdown() {
+    this.isExpanded = !this.isExpanded;
+
+    if (this.isExpanded) {
+      this.resetPreviouslyFocused();
+      const searchInput = document.getElementById(this.searchInputId);
+      if (searchInput) {
+        searchInput.focus();
+      } else {
+        this._navigateToOption(this.options[0], 0);
+      }
+    }
+
+    const menu = document.getElementById(this.menuId);
+    menu.scrollTop = 0;
+    this.page = 1;
+  }
+
+  @action
+  selectOption(option) {
+    if (this.selectedOption?.value !== option.value) {
+      this.args.onSelect?.(option.value);
+      this.selectedOption = option;
+    }
+    this.isExpanded = false;
+
+    const searchInput = document.getElementById(this.searchInputId);
+    if (searchInput) {
+      searchInput.value = '';
+      this.options = this.args.options;
+    }
+  }
+
+  @action
+  onOptionKeyPress(option, event) {
+    if (event.code === 'Enter' || event.code === 'Space') this.selectOption(option);
+  }
+
+  @action
+  clearSelection(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    this.selectedOption = null;
+    this._navigateToOption(this.options[0], 0);
+    this.args.onSelect?.();
+  }
+
+  @action
+  onClearKeyPress(event) {
+    if (event.code === 'Enter' || event.code === 'Space') this.clearSelection(event);
+  }
+
+  @action
+  filterOptions(event) {
+    this.resetPreviouslyFocused();
+    const filterValue = event.target?.value.toLowerCase();
+    this.page = 1;
+    this.options = filterValue
+      ? this.args.options.filter(({ label }) => label.toLowerCase().includes(filterValue))
+      : this.args.options;
+  }
+
+  _isLastOptionVisible(option) {
+    const lastVisibleOption = document.getElementById(option.value);
+    const menu = document.getElementById(this.menuId);
+
+    const { bottom, height, top } = lastVisibleOption.getBoundingClientRect();
+    const menuRect = menu.getBoundingClientRect();
+
+    return top <= menuRect.top ? menuRect.top - top <= height : bottom - menuRect.bottom <= height;
+  }
+
+  @action
+  incrementPage() {
+    if (!this.args.pageSize) return;
+
+    if (this._isLastOptionVisible(this.options[this.showLimit - 1])) {
+      this.page += 1;
+    }
+  }
+}

package/addon/components/pix-icon-button.hbs

@@ -3,7 +3,7 @@
   aria-label={{this.ariaLabel}}
   class="pix-icon-button pix-icon-button--{{this.size}}
     pix-icon-button--{{this.color}}
-    {{if @withBackground " pix-icon-button--background"}}"
+    {{if @withBackground ' pix-icon-button--background'}}"
   {{on "click" this.triggerAction}}
   ...attributes
 >

package/addon/components/pix-input-password.hbs

@@ -7,8 +7,8 @@
   {{/if}}
   <div
     class="pix-input-password__container
-      {{if @errorMessage "pix-input-password__error-container"}}
-      {{if @prefix "pix-input-password__with-prefix"}}"
+      {{if @errorMessage 'pix-input-password__error-container'}}
+      {{if @prefix 'pix-input-password__with-prefix'}}"
   >
 
     {{#if @prefix}}
@@ -20,12 +20,11 @@
       type={{if this.isPasswordVisible "text" "password"}}
       value={{@value}}
       aria-label={{this.ariaLabel}}
-      {{on "change" this.onChange}}
       ...attributes
     />
 
     <PixIconButton
-      class="pix-input-password__button {{if @errorMessage " pix-input-password__error-button"}}"
+      class="pix-input-password__button {{if @errorMessage ' pix-input-password__error-button'}}"
       @icon={{if this.isPasswordVisible "eye" "eye-slash"}}
       @ariaLabel={{if this.isPasswordVisible "Masquer le mot de passe" "Afficher le mot de passe"}}
       @triggerAction={{this.togglePasswordVisibility}}

package/addon/components/pix-input-password.js

@@ -26,9 +26,4 @@ export default class PixInputPassword extends PixInput {
   togglePasswordVisibility() {
     this.isPasswordVisible = !this.isPasswordVisible;
   }
-
-  @action
-  onChange() {
-    if (typeof this.args.onChange === 'function') this.args.onChange();
-  }
 }

package/addon/components/pix-input.hbs

@@ -7,20 +7,14 @@
   {{/if}}
 
   <div class="pix-input__container">
-    <input
-      id={{this.id}}
-      class={{this.className}}
-      value={{@value}}
-      {{on "change" this.onChange}}
-      ...attributes
-    />
+    <input id={{this.id}} class={{this.className}} value={{@value}} ...attributes />
 
     {{#if @errorMessage}}
       <FaIcon @icon="times" class="pix-input__error-icon" />
     {{/if}}
 
     {{#if @icon}}
-      <FaIcon @icon={{@icon}} class="pix-input__icon {{if @isIconLeft "pix-input__icon--left"}}" />
+      <FaIcon @icon={{@icon}} class="pix-input__icon {{if @isIconLeft 'pix-input__icon--left'}}" />
     {{/if}}
   </div>
 

package/addon/components/pix-input.js

@@ -1,9 +1,6 @@
 import Component from '@glimmer/component';
 
-import { action } from '@ember/object';
 export default class PixInput extends Component {
-  text = 'pix-input';
-
   get id() {
     if (!this.args.id || !this.args.id.toString().trim()) {
       throw new Error('ERROR in PixInput component, @id param is not provided');
@@ -18,9 +15,4 @@ export default class PixInput extends Component {
     this.args.isIconLeft && classNames.push('pix-input__input--icon-left');
     return classNames.join(' ');
   }
-
-  @action
-  onChange() {
-    if (typeof this.args.onChange === 'function') this.args.onChange();
-  }
 }

package/addon/components/pix-message.hbs

@@ -1,4 +1,4 @@
-<p class="pix-message {{concat "pix-message--" this.type}}" ...attributes>
+<p class="pix-message {{concat 'pix-message--' this.type}}" ...attributes>
   {{#if @withIcon}}
     <FaIcon @icon={{this.iconClass}} />
   {{/if}}

package/addon/components/pix-modal.hbs

@@ -0,0 +1,28 @@
+<div class="pix-modal__overlay">
+  <div
+    class="pix-modal"
+    role="dialog"
+    aria-labelledby="modal-title"
+    aria-describedby="modal-content"
+    aria-modal="true"
+    ...attributes
+  >
+    <header class="pix-modal__header">
+      <h1 id="modal-title" class="pix-modal__title">{{@title}}</h1>
+      <PixIconButton
+        @icon="times"
+        @triggerAction={{@onCloseButtonClick}}
+        @ariaLabel="Fermer"
+        @size="small"
+        @withBackground={{true}}
+        class="pix-modal__close-button"
+      />
+    </header>
+    <main id="modal-content" class="pix-modal__content">
+      {{yield to="content"}}
+    </main>
+    <footer class="pix-modal__footer">
+      {{yield to="footer"}}
+    </footer>
+  </div>
+</div>

package/addon/components/pix-modal.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+
+export default class PixModal extends Component {
+  constructor(...args) {
+    super(...args);
+
+    if (!this.args.title) {
+      throw new Error('ERROR in PixModal component: @title argument is required.');
+    }
+  }
+}

package/addon/components/pix-multi-select.hbs

@@ -5,7 +5,7 @@
   {{/if}}
 
   {{#if @isSearchable}}
-    <label class="pix-multi-select-header {{if this.isBig "pix-multi-select-header--big"}}">
+    <label class="pix-multi-select-header {{if this.isBig 'pix-multi-select-header--big'}}">
 
       <span class="pix-multi-select-header__title">{{@title}}</span>
       <FaIcon @icon="search" class="pix-multi-select-header__search-icon" />
@@ -26,25 +26,25 @@
     <button
       id={{@id}}
       type="button"
-      class="pix-multi-select-header {{if this.isBig "pix-multi-select-header--big"}}"
+      class="pix-multi-select-header {{if this.isBig 'pix-multi-select-header--big'}}"
       {{on "click" this.toggleDropDown}}
     >
       {{@title}}
       <FaIcon
         class="pix-multi-select-header__dropdown-icon
-          {{if this.isExpanded " pix-multi-select-header__dropdown-icon--expand"}}"
+          {{if this.isExpanded ' pix-multi-select-header__dropdown-icon--expand'}}"
         @icon={{if this.isExpanded "chevron-up" "chevron-down"}}
       />
     </button>
   {{/if}}
 
-  <ul class="pix-multi-select-list {{unless this.isExpanded "pix-multi-select-list--hidden"}}">
+  <ul class="pix-multi-select-list {{unless this.isExpanded 'pix-multi-select-list--hidden'}}">
     {{#if (gt this.results.length 0)}}
       {{#each this.results as |option|}}
         <li class="pix-multi-select-list__item">
           <input
             class="pix-multi-select-list__checkbox
-              {{if @isSearchable " pix-multi-select-list__checkbox--searchable"}}"
+              {{if @isSearchable ' pix-multi-select-list__checkbox--searchable'}}"
             type="checkbox"
             checked={{option.checked}}
             id={{concat @id "-" option.value}}

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

@@ -1,7 +1,7 @@
 <div
   class="progress-gauge
     {{this.progressGaugeClass}}
-    {{if @isArrowLeft "progress-gauge--tooltip-left"}}"
+    {{if @isArrowLeft 'progress-gauge--tooltip-left'}}"
   ...attributes
 >
   <div class="progress-gauge__referrer"></div>

package/addon/components/pix-radio-button.hbs

@@ -1,5 +1,5 @@
 <div class="pix-radio-button">
-  <label class="{{if @isDisabled " pix-radio-button--disabled"}}">
+  <label class="{{if @isDisabled ' pix-radio-button--disabled'}}">
     <input
       disabled={{@isDisabled}}
       aria-disabled="{{@isDisabled}}"

package/addon/components/pix-select.hbs

@@ -10,8 +10,9 @@
       id={{@id}}
       list="{{this.datalistId}}"
       {{on "input" this.onChange}}
-      class="{{if this.isValid "pix-select--is-valid"}} {{if this.isBig "pix-select--big"}}"
+      class="{{if this.isValid 'pix-select--is-valid'}} {{if this.isBig 'pix-select--big'}}"
       ...attributes
+      autocomplete="off"
     />
 
     <datalist id={{this.datalistId}}>
@@ -24,7 +25,7 @@
 
     <select
       id={{@id}}
-      class="{{if this.isBig "pix-select--big"}}"
+      class="{{if this.isBig 'pix-select--big'}}"
       {{on "change" this.onChange}}
       ...attributes
     >

package/addon/components/pix-selectable-tag.hbs

@@ -1,4 +1,4 @@
-<div class="pix-selectable-tag {{if this.isChecked " pix-selectable-tag--checked"}}">
+<div class="pix-selectable-tag {{if this.isChecked ' pix-selectable-tag--checked'}}">
   <input
     type="checkbox"
     id={{@id}}

package/addon/components/pix-textarea.hbs

@@ -8,7 +8,7 @@
     id={{@id}}
     @value={{@value}}
     maxlength={{if @maxlength @maxlength}}
-    class="{{if @errorMessage "pix-textarea--error"}}"
+    class="{{if @errorMessage 'pix-textarea--error'}}"
     ...attributes
   />
   {{#if @maxlength}}

package/addon/components/pix-tooltip-deprecated.hbs

@@ -7,9 +7,9 @@
       id={{@id}}
       role="tooltip"
       class="pix-tooltip__content pix-tooltip__content--{{this.position}}
-        {{if @isInline "pix-tooltip__content--inline"}}
-        {{if @isLight "pix-tooltip__content--light"}}
-        {{if @isWide "pix-tooltip__content--wide"}}"
+        {{if @isInline 'pix-tooltip__content--inline'}}
+        {{if @isLight 'pix-tooltip__content--light'}}
+        {{if @isWide 'pix-tooltip__content--wide'}}"
     >
       {{this.text}}
     </span>

package/addon/components/pix-tooltip.hbs

@@ -4,15 +4,17 @@
   {{/if}}
 
   {{#if (has-block "tooltip")}}
-    <span
-      id={{@id}}
-      role="tooltip"
-      class="pix-tooltip__content pix-tooltip__content--{{this.position}}
-        {{if @isInline "pix-tooltip__content--inline"}}
-        {{if @isLight "pix-tooltip__content--light"}}
-        {{if @isWide "pix-tooltip__content--wide"}}"
-    >
-      {{yield to="tooltip"}}
-    </span>
+    {{#if this.display}}
+      <span
+        id={{@id}}
+        role="tooltip"
+        class="pix-tooltip__content pix-tooltip__content--{{this.position}}
+          {{if @isInline 'pix-tooltip__content--inline'}}
+          {{if @isLight 'pix-tooltip__content--light'}}
+          {{if @isWide 'pix-tooltip__content--wide'}}"
+      >
+        {{yield to="tooltip"}}
+      </span>
+    {{/if}}
   {{/if}}
 </span>

package/addon/components/pix-tooltip.js

@@ -14,4 +14,8 @@ export default class PixTooltip extends Component {
     ];
     return correctsPosition.includes(this.args.position) ? this.args.position : 'top';
   }
+
+  get display() {
+    return typeof this.args.hide === 'undefined' || !this.args.hide;
+  }
 }