@1024pix/pix-ui 13.0.0 → 13.3.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Pix-UI Changelog
 
+## v13.3.1 (22/02/2022)
+
+
+### :bug: Bug fix
+- [#201](https://github.com/1024pix/pix-ui/pull/201) [BUGFIX] Corriger la couleur de la sélection et l'erreur d'accessibilité.
+
+## v13.3.0 (21/02/2022)
+
+
+### :rocket: Enhancement
+- [#199](https://github.com/1024pix/pix-ui/pull/199) [FEATURE] Permettre de rendre obligatoire le PixDropdown
+
+## 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)
 
 
@@ -13,7 +43,7 @@
 - [#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) [BUGFIX] Désactiver l'autocomplete sur le composant Pix Select (PIX-4158)
+- [#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)
@@ -32,7 +62,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)
 
@@ -50,12 +80,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,102 @@
+<div class="pix-dropdown">
+
+  {{#if this.label}}
+    <label id={{@id}} class="pix-dropdown__label">
+      {{#if @requiredLabel}}
+        <abbr title={{@requiredLabel}} class="mandatory-mark" aria-hidden="true">*</abbr>
+      {{/if}}
+      {{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}}
+      ...attributes
+    >
+      <p
+        title={{this.placeholder}}
+        class="pix-dropdown__controller--placeholder-text
+          {{unless this.hasSelectedOption ' default'}}"
+        aria-required={{if this.requiredLabel true false}}
+      >{{this.placeholder}}</p>
+    </button>
+
+    {{#if this.hasSelectedOption}}
+      <button
+        type="button"
+        class="pix-dropdown__controller--clear"
+        aria-label={{@clearLabel}}
+        {{on "click" this.clearSelection}}
+      >
+        <FaIcon @icon="times" />
+      </button>
+    {{/if}}
+
+    <div
+      role="button"
+      tabindex="-1"
+      class="pix-dropdown__controller--chevron"
+      {{on "click" this.toggleDropdown}}
+    >
+      <FaIcon @icon={{if this.isExpanded "chevron-up" "chevron-down"}} />
+    </div>
+  </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}}
@@ -24,7 +24,7 @@
     />
 
     <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.hbs

@@ -14,7 +14,7 @@
     {{/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-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-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,7 +10,7 @@
       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"
     />
@@ -25,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;
+  }
 }

package/addon/styles/_form.scss

@@ -66,3 +66,10 @@
     margin-right: 10px;
   }
 }
+
+abbr.mandatory-mark {
+  cursor: help;
+  color: $pink-alert-dark;
+  text-decoration: none;
+  border: none;
+}

package/addon/styles/_pix-dropdown.scss

@@ -0,0 +1,157 @@
+.pix-dropdown {
+  @import 'reset-css';
+  width: 100%;
+  position: relative;
+
+  button {
+    margin: 0;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  &__label {
+    @include label();
+  }
+
+  &__controller {
+    width: 100%;
+    position: relative;
+
+    &--placeholder {
+      @include hoverFormElement();
+      @include focusFormElement();
+      width: 100%;
+      min-width: 250px;
+      min-height: 34px;
+      border: 1px solid $grey-40;
+      border-radius: $spacing-xxs;
+      padding: 0;
+      background: $white;
+
+      &.expanded {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    &--placeholder-text {
+      color: $grey-90;
+      margin: 0;
+      font-size: 0.875rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 8px 68px 8px 16px;
+
+      &.default {
+        color: $grey-60;
+        padding-right: 36px;
+      }
+    }
+
+    &--clear {
+      background: transparent;
+      font-size: 1rem;
+      color: $grey-50;
+      position: absolute;
+      padding: 8px 8px 6px;
+      border: none;
+      border-right: 2px solid $grey-40;
+      right: 38px;
+      top: 1px;
+      width: fit-content;
+
+      &:hover {
+        color: $grey-70;
+      }
+    }
+
+    &--chevron {
+      background: transparent;
+      border: none;
+      padding: 0;
+      position: absolute;
+      top: 9px;
+      right: 12px;
+      color: $grey-50;
+      cursor: pointer;
+
+      &:hover {
+        color: $grey-70;
+      }
+    }
+  }
+
+  &__menu {
+    background: white;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    max-height: 0;
+    transition: max-height ease-in 0.5s;
+    overflow: hidden;
+    overflow-y: auto;
+    z-index: 1;
+
+    &.expanded {
+      max-height: 300px;
+      border: 1px solid $grey-40;
+      border-top: none;
+      border-radius: 0 0 $spacing-xxs $spacing-xxs;
+    }
+
+    &--search {
+      display: flex;
+      position: relative;
+
+      &-icon {
+        color: $grey-30;
+        margin: 4px;
+        position: absolute;
+        left: 16px;
+        top: 12px;
+      }
+
+      &-input {
+        border: none;
+        border-bottom: 1px solid $grey-40;
+        font-size: 0.875rem;
+        flex-grow: 1;
+        margin: 12px 12px 8px;
+        padding: 4px 4px 4px 32px;
+        outline: none;
+
+        &:hover {
+          box-shadow: inset 0 -0.7px 0 0 $grey-40;
+        }
+
+        &:focus {
+          box-shadow: inset 0 -0.7px 0 0 $blue;
+          border-color: $blue;
+        }
+
+        &-label {
+          height: 0;
+          width: 0;
+          overflow: hidden;
+        }
+      }
+    }
+
+    &--option {
+      padding: 8px 12px;
+      font-size: 0.875rem;
+      cursor: pointer;
+
+      &.selected {
+        color: $grey-70;
+      }
+
+      &:focus,
+      &:hover {
+        outline: none;
+        background: $grey-15;
+      }
+    }
+  }
+}

package/addon/styles/_reset-css.scss

@@ -28,9 +28,3 @@ caption, th, td
 	vertical-align: top;
 	font-weight: normal;
 }
-
-abbr, acronym
-{
-	border-bottom: .1em dotted;
-	cursor: help;
-}

package/addon/styles/addon.scss

@@ -28,6 +28,7 @@
 @import 'pix-modal';
 @import 'pix-input-code';
 @import 'pix-selectable-tag';
+@import 'pix-dropdown';
 
 html {
   font-size: 16px;

package/app/components/pix-dropdown.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-dropdown';

package/app/stories/form.stories.js

@@ -33,6 +33,19 @@ export const form = (args) => {
       />
       <br>
 
+      <PixDropdown
+        @id="form__searchable-pix-dropdown"
+        @options={{selectOptions}}
+        @placeholder="Choisir votre fruit"
+        @isSearchable={{true}}
+        @searchPlaceholder="Rechercher"
+        @label="Votre fruit préféré est : "
+        @clearLabel="Supprimer la sélection"
+        @expandLabel="Ouvrir la liste"
+        @collapseLabel="Réduire la liste"
+      />
+      <br>
+
       <PixTextarea
         @id="form__pix-textarea"
         @value=""

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

@@ -0,0 +1,191 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+export const Template = (args) => {
+  return {
+    template: hbs`
+      <div style="width: 300px;">
+        <PixDropdown
+          @id={{id}}
+          @options={{options}}
+          @onSelect={{onSelect}}
+          @placeholder={{placeholder}}
+          @selectedOption={{selectedOption}}
+          @isSearchable={{isSearchable}}
+          @searchPlaceholder={{searchPlaceholder}}
+          @label={{label}}
+          @clearLabel={{clearLabel}}
+          @expandLabel={{expandLabel}}
+          @collapseLabel={{collapseLabel}}
+          @pageSize={{pageSize}}
+          @requiredLabel={{requiredLabel}}
+        />
+      </div>
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  options: [
+    { value: '1', label: 'Figues' },
+    { value: '2', label: 'Bananes' },
+    { value: '3', label: 'Noix' },
+    { value: '4', label: 'Papayes' },
+    { value: '5', label: 'Fèves de chocolat' },
+    { value: '6', label: 'Dattes' },
+    { value: '7', label: 'Mangues' },
+    { value: '8', label: 'Jujube' },
+    { value: '9', label: 'Avocat' },
+    { value: '10', label: 'Fraises' },
+    { value: '11', label: 'Kaki' },
+    { value: '12', label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)' },
+  ],
+  placeholder: 'Choisissez une option',
+  onSelect: action('onSelect'),
+  id: 'default-dropdown',
+  clearLabel: 'Supprimer la sélection',
+  expandLabel: 'Ouvrir la liste',
+  collapseLabel: 'Réduire la liste',
+};
+
+export const withLabel = Template.bind({});
+withLabel.args = {
+  ...Default.args,
+  id: 'dropdown-with-label',
+  label: 'Ton fruit préféré: ',
+  requiredLabel: 'Champ requis',
+};
+
+export const searchableDropdown = Template.bind({});
+searchableDropdown.args = {
+  ...Default.args,
+  isSearchable: true,
+  id: 'searchable-dropdown',
+  placeholder: 'Fraises, Mangues...',
+  searchPlaceholder: 'Rechercher',
+};
+
+export const paginatedDropdown = Template.bind({});
+paginatedDropdown.args = {
+  ...Default.args,
+  id: 'paginated-dropdown',
+  placeholder: 'Quel est ton fruit préféré ?',
+  pageSize: 10,
+  isSearchable: true,
+  searchPlaceholder: 'Rechercher',
+  options: Array.from({ length: 100 }, (_, index) => ({
+    value: `${index}`,
+    label: `${index}abc`,
+  })),
+};
+
+export const argTypes = {
+  options: {
+    name: 'options',
+    description:
+      'Les options sont représentées par un tableau d‘objet contenant les propriétés ``value`` et ``label``.',
+    type: { name: 'array', required: true },
+  },
+  selectedOption: {
+    name: 'selectedOption',
+    description: 'Option sélectionnée',
+    options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+    control: { type: 'select' },
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  onSelect: {
+    name: 'onSelect',
+    description: 'Fonction à appeler quand une option est sélectionnée.',
+    type: { required: true },
+    control: { disable: true },
+  },
+  isSearchable: {
+    name: 'isSearchable',
+    description:
+      "Rend le champ cherchable, le paramètre @searchPlaceholder devient requis pour l'accessibilité.",
+    control: { type: 'boolean' },
+    type: { name: 'boolean', required: false },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  searchPlaceholder: {
+    name: 'searchPlaceholder',
+    description: 'Placeholder du champ de recherche. Requis si le menu est cherchable.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  placeholder: {
+    name: 'placeholder',
+    description: "Un texte donnant une indication a l'utilisateur sur le choix des options.",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  label: {
+    name: 'label',
+    description: 'Label du menu déroulant, le paramètre @id devient obligatoire avec ce paramètre.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  requiredLabel: {
+    name: 'requiredLabel',
+    description:
+      'Label indiquant que le champ est requis, le paramètre @label devient obligatoire avec ce paramètre.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  id: {
+    name: 'id',
+    description: "L'id du label",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  pageSize: {
+    name: 'pageSize',
+    description: "Le nombre d'élément à afficher dans la liste.",
+    type: { name: 'number', required: false },
+    table: {
+      type: { summary: 'number' },
+    },
+  },
+  clearLabel: {
+    name: 'clearLabel',
+    description: "Label de l'icône pour éliminer la sélection. Requis pour l'accessibilité.",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  expandLabel: {
+    name: 'expandLabel',
+    description: "Label de l'icône pour ouvrir le menu déroulant. Requis pour l'accessibilité.",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+  collapseLabel: {
+    name: 'collapseLabel',
+    description: "Label de l'icône pour réduire le menu déroulant. Requis pour l'accessibilité.",
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+};

package/app/stories/pix-dropdown.stories.mdx

@@ -0,0 +1,70 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-dropdown.stories.js';
+
+<Meta
+  title='Form/Dropdown'
+  component='PixDropdown'
+  argTypes={stories.argTypes}
+/>
+
+# Pix Dropdown
+
+Affiche un menu déroulant avec la liste des options fournies.
+
+Les options sont représentées par un tableau d'objet contenant les propriétés value et label.
+
+> **⚠️** __Il est nécessaire d'avoir au moins un label ou un placeholder !__
+
+> **⚠️** __N'oubliez pas de rajouter un searchLabel dans le cas ou le menu déroulant est cherchable pour le rendre accessible !__
+
+> Pour aider l'utilisateur, rajoutez un placeholder cohérent !
+
+## Default
+
+<Canvas>
+  <Story name='Dropdown' story={stories.Default} height={200} />
+</Canvas>
+
+## With label
+
+<Canvas>
+  <Story story={stories.withLabel} height={200} />
+</Canvas>
+
+## Searchable
+
+<Canvas>
+  <Story name="Searchable" story={stories.searchableDropdown} height={200} />
+</Canvas>
+
+## Infinite scroll
+
+<Canvas>
+  <Story name="Paginated" story={stories.paginatedDropdown} height={200} />
+</Canvas>
+
+## Usage
+
+```html
+<PixDropdown
+  @id={{id}}
+  @options={{options}}
+  @onSelect={{onSelect}}
+  @selectedOption="1"
+  @isSearchable={{false}}
+  @placeholder="Choisissez une option"
+  @searchPlaceholder="Rechercher"
+  @label="Mon menu déroulant"
+  @requiredLabel="Requis"
+  @clearLabel="Supprimer la sélection"
+  @expandLabel="Ouvrir le menu déroulant"
+  @collapseLabel="Réduire le menu déroulant"
+  @pageSize={{10}}
+/>
+```
+
+## Arguments
+
+<ArgsTable story="Dropdown" />

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

@@ -8,7 +8,8 @@ const Template = (args) => {
         @position={{this.position}}
         @isLight={{this.isLight}}
         @isInline={{this.isInline}}
-        @isWide={{this.isWide}}>
+        @isWide={{this.isWide}}
+        @hide={{this.hide}}>
         <:triggerElement>
           <PixButton aria-describedby={{this.id}}>
             {{this.label}}
@@ -100,6 +101,13 @@ bottom.args = {
   position: 'bottom',
 };
 
+export const hide = Template.bind({});
+hide.args = {
+  label: 'À survoler pour voir la tooltip',
+  text: "Ne devrait pas s'afficher",
+  hide: true,
+};
+
 export const WithHTML = TemplateWithHTMLElement.bind({});
 WithHTML.args = {
   label: 'À survoler pour voir la tooltip',
@@ -154,4 +162,10 @@ export const argTypes = {
     type: { name: 'boolean', required: false },
     table: { defaultValue: { summary: false } },
   },
+  hide: {
+    name: 'hide',
+    description: 'Masquer la tooltip',
+    type: { name: 'boolean', required: false },
+    table: { defaultValue: { summary: false } },
+  },
 };

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

@@ -61,6 +61,13 @@ Les tooltips doivent prendre un `@id` et être référencées par leur élément
 </PixTooltip>
 ```
 
+## Hide
+
+Cache la tooltip (par exemple si le contenu est vide).
+
+<Canvas>
+  <Story name="Hide" story={stories.hide} height={200} />
+</Canvas>
 
 ## Default
 
@@ -165,6 +172,18 @@ Infobulle contenant des éléments HTML
   </:tooltip>
 </PixTooltip>
 
+<PixTooltip
+  @hide={{true}}
+  >
+  <:triggerElement>
+    <button>Tooltip n'apparaissant pas</button>
+  </:triggerElement>
+
+  <:tooltip>
+    Hey
+  </:tooltip>
+</PixTooltip>
+
 <PixTooltip
   @isWide={{true}}
   >

package/docs/adr/0001-utiliser-les-balises-html-natives.md

@@ -0,0 +1,53 @@
+# 1. Eviter les balises HTML natives
+
+Date : 2022-01-04
+
+## État
+
+Accepté
+
+## Contexte
+
+Le framework Ember propose des composants helpers tels que `<Input>` ou `<Textarea>`.
+Cependant leurs comportements diffèrent pas mal des éléments HTML natifs `<input>` et `<textarea>`. 
+
+Nous aimerions choisir une seule solution pour :
+- simplifiier l'utilisation de Pix-UI;
+- ne plus avoir à modifier les composants (exemple sur [PixInput](https://github.com/1024pix/pix-ui/pull/147#discussion_r724312399)).
+
+Actuellement, tous les composants Pix-UI utilisent des balises HTML natives sauf le PixTextarea qui utilise le `<Textarea>` d'Ember.
+
+Historique des PRs qui ont mené à cette problématique :
+- https://github.com/1024pix/pix-ui/pull/149 a changé le PixInputPassword et PixInput pour utiliser `<Input>` plutôt que `<input>` (embarqué dans la version v8.4.0 de Pix-UI).
+- https://github.com/1024pix/pix-ui/pull/147/files a changé le PixInputPassword pour utiliser `<input>` plutôt que `<Input>` (embarqué dans la version v11.0.0 de Pix-UI).
+- https://github.com/1024pix/pix-ui/pull/175/files a changé le PixInput pour utiliser `<input>` plutôt que `<Input>` (embarqué dans la version v11.1.0 de Pix-UI).
+
+#### Solution 1
+Privilégier l'utilisation des composants helpers que propose Ember (`<Input>` / `<Textarea>`).
+
+Ce qui impliquerait : 
+- une solution plus "ember way"
+- une obligation d'utiliser le two-way-binding (les modifications de valeurs dans un composant enfant seront  automatiquement propagées au composant parent) qui va à l'encontre du principe Data Down Action Up (les données descendent vers les composants enfants et les enfants remontent les actions aux composants parents).
+- plus de magie et moins de contrôle, lorsqu'on passe l'attribut `@value` Ember met tout à jour tout seul (le changement est répercuté partout)
+- une obligation de copier le modèle pour ne pas le modifier
+- une difficulté pour la validation de formulaire, avec la librairie `ember-cp-validation` les erreurs s'affichent dans le formulaire au moindre changement (ce qui n'est pas souhaitable) mais de toute manière on est pas sûrs de vouloir continuer à utiliser cette librairie.
+
+
+#### Possibilité 2
+Privilégier l'utilisation des éléments HTML natifs (`<input>` / `<textarea>`).
+
+Ce qui impliquerait : 
+- de ne pas avoir le two-way-binding imposé
+- une obligation de déclarer un `onChange` sur les champs afin d'interargir avec changements du champ
+- une obligation de copier le modèle pour ne pas le modifier
+- une plus grande maîtrise de la balise et ce qu'il s'y passe en coulisse
+
+## Décision
+
+Nous privilégierons les éléments HTML natifs et éviterons autant que possible le two-way-binding.
+
+## Conséquences
+
+Il faut mettre à jour le PixTextarea pour qu'il utilise une balise `<textarea>`.
+
+⚠️ Pour ne pas casser le comportement existant. lors de la mise à jour des versions v11.0.0 / v11.1.0 de Pix-UI il faut mettre à jour tous les PixInput et PixInputPassword afin qu'il définissent un `onChange`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "13.0.0",
+  "version": "13.3.1",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -50,8 +50,9 @@
     "ember-truth-helpers": "^3.0.0"
   },
   "devDependencies": {
+    "@1024pix/ember-testing-library": "^0.5.0",
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.4.0",
+    "@ember/test-helpers": "^2.6.0",
     "@fortawesome/ember-fontawesome": "^0.2.3",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",