@1024pix/pix-ui 13.0.0 → 13.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Pix-UI Changelog
 
+## 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 +25,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 +44,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 +62,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-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/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.1.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"