@1024pix/pix-ui 19.0.0 → 20.0.0

package/CHANGELOG.md

@@ -1,10 +1,40 @@
 # Pix-UI Changelog
 
+## v20.0.0 (11/10/2022)
+
+
+### :building_construction: Tech
+- [#259](https://github.com/1024pix/pix-ui/pull/259) [TECH] Mettre à jour la doc PixMultiSelect, pour la rendre plus lisible (PIX-5806)
+
+### :coffee: Autre
+- [#261](https://github.com/1024pix/pix-ui/pull/261) [BREAKING CHANGES][FEATURE] Suppression du padding dans le composant `PixBlock` (PIX-5971).
+
+## v19.0.1 (04/10/2022)
+
+### :rocket: Amélioration
+- [#258](https://github.com/1024pix/pix-ui/pull/258) [FEATURE] Centre la PixModal en hauteur
+  * ⚠️ Le scroll est géré par l'overlay, conteneur de la modale. Si vous avez fait du code spécifique pour que ce soit la modale qui contienne son scroll, cela peut entraîner du contenu non visible dans le viewport.
+- [#257](https://github.com/1024pix/pix-ui/pull/257) [FEATURE] Suppression du `padding` de la Sidebar pour permettre de mieux customiser
+
+### :coffee: Autre
+- [#256](https://github.com/1024pix/pix-ui/pull/256) [BUFGIX] Mettre à jour la page d'utilisation de la PixModal (PIX-5735)
+
 ## v19.0.0 (16/09/2022)
 
+### :warning: Breaking Change
+
+**PixCheckBox** :
+* L'argument `label` n'est plus disponible en tant qu'argument, est doit être instancier de cette manière `<PixCheckBox>label</PixCheckBox>`
+
+**PixMultiSelect** :
+* L'argument `title` a été supprimé et ne doit plus être utilisé. Utilisez à la place l'argument `label`, ce label est présent pour définir le champ input ou le bouton.
+* L'argument `placeholder` a été remplacé. Utilisez à la place l'argument `innerText`, il fait office de placeholder pour le multiselect searchable ou de contenu pour le bouton.
+* L'argument `size` a été supprimé. Ce composant a désormais une taille unique (correspondant à l'ancien small).
+* L'argument `showOnInput` a été supprimé, pour un comportement non a11y compliant.
+* L'argument `screenReaderOnly` a été ajouté afin de caché de manière accessible le `label` à l'écran
 
 ### :rocket: Amélioration
-- [#252](https://github.com/1024pix/pix-ui/pull/252) [FEATURE] Rendre accessible (a11y) le composant PixMultiSelect (PIX-5555)
+- [#252](https://github.com/1024pix/pix-ui/pull/252) [FEATURE] Rendre accessible (a11y) le composant PixMultiSelect et PixCheckbox (PIX-5555)
 
 ## v18.2.0 (16/09/2022)
 
@@ -36,6 +66,10 @@
 
 ## v18.0.0 (01/09/2022)
 
+### :warning: Breaking Change
+
+**PixModal** :
+* Le composant PixModal gère maintenant lui-même son état de visibilité. Pour le contrôler, il suffit d'utiliser la propriété `@showModal` qui est un booléen obligatoire.
 
 ### :bug: Correction
 - [#246](https://github.com/1024pix/pix-ui/pull/246) [BUGFIX] Mettre le focus sur le premier élement où est utiliser le `trap-focus`.

package/addon/components/pix-background-header.hbs

@@ -1,7 +1,7 @@
 <div class="pix-background-header" ...attributes>
-
   <div class="pix-background-header__background"></div>
 
-  {{yield}}
-
+  <div class="pix-background-header__content">
+    {{yield}}
+  </div>
 </div>

package/addon/styles/_pix-background-header.scss

@@ -1,6 +1,4 @@
 .pix-background-header {
-  @import 'reset-css';
-
   position: relative;
   display: flex;
   flex-direction: column;
@@ -18,4 +16,9 @@
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
     color: $pix-neutral-0;
   }
-}
+
+  &__content {
+    max-width: 980px;
+    margin: 0 auto;
+  }
+}

package/addon/styles/_pix-block.scss

@@ -1,29 +1,14 @@
 .pix-block {
   position: relative;
-  width: 100%;
-  max-width: 980px;
-  padding: 14px 24px;
-  margin-bottom: 32px;
   background-color: $pix-neutral-0;
   border-radius: 5px;
 
   &--shadow-light {
-    box-shadow: 0 10px 20px 0 rgba($pix-primary, 0.06);
+    box-shadow: 0px 4px 8px 0px $pix-neutral-110;
   }
+
   &--shadow-heavy {
     box-shadow: 0 50px 54px -40px rgba($pix-neutral-110, 0.4),
       0 7px 14px 0 rgba($pix-neutral-100, 0.1);
   }
 }
-
-.pix-background-header {
-  &__background + .pix-block {
-    margin-top: 68px;
-  }
-}
-
-@include device-is('mobile') {
-  .pix-block {
-    padding: 16px;
-  }
-}

package/addon/styles/_pix-modal.scss

@@ -1,14 +1,27 @@
 .pix-modal__overlay {
-  background-color: rgba(52, 69, 99, 0.7);
+  position: fixed;
+  z-index: 1000;
+  top: 0;
   bottom: 0;
   left: 0;
-  overflow-y: scroll;
-  position: fixed;
   right: 0;
-  top: 0;
-  z-index: 1000;
+  overflow-y: auto;
+  text-align: center; // Used to center horizontally the inline-block modal content
+  padding: $spacing-xs 0;
+  background-color: rgba(52, 69, 99, 0.7);
   transition: all 0.3s ease-in-out;
 
+  // This block is used to center vertically the modal
+  // if the content is less than 100vh
+  // Inspired by https://mui.com/material-ui/react-dialog/#scrolling-long-content
+  &::after {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+    width: 0px;
+  }
+
   &--hidden {
     visibility: hidden;
     opacity: 0;
@@ -23,16 +36,19 @@ $button-margin: 16px;
 
 .pix-modal {
   @import 'reset-css';
+  display: inline-block;
+  vertical-align: middle; // Centered vertically with the .pix-modal__overlay::after which is 100% height
+  width: 512px;
+  max-width: calc(100% - #{2 * $spacing-xs}); // Horizontal margin sets here to have extra space for the .pix-modal__overlay::after on mobile
+  text-align: initial; 
+  background-color: $pix-neutral-10;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
-  margin: 20vh auto;
-  max-width: 512px;
-  width: calc(100% - 24px);
+  border-radius: 4px;
+  overflow: hidden;
 
   &__header {
     background: $pix-neutral-0;
     border-bottom: 1px solid $pix-neutral-20;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
     padding: $modal-padding;
     display: flex;
     align-items: flex-start;
@@ -64,7 +80,6 @@ $button-margin: 16px;
   }
 
   &__content {
-    background-color: $pix-neutral-10;
     padding: $modal-padding;
     font-size: 0.875rem;
     color: $pix-neutral-90;
@@ -78,10 +93,7 @@ $button-margin: 16px;
   }
 
   &__footer {
-    background-color: $pix-neutral-10;
     padding: 0 $modal-padding $modal-padding - $button-margin;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
 
     @include device-is('tablet') {
       display: flex;

package/addon/styles/_pix-sidebar.scss

@@ -69,10 +69,6 @@ $button-margin: 16px;
     }
   }
 
-  &__content {
-    padding: $sidebar-padding 0;
-  }
-
   &__footer {
     padding: $sidebar-padding;
     border-top: 1px solid $pix-neutral-20;

package/app/stories/pix-background-header.stories.js

@@ -5,9 +5,9 @@ export const backgroundHeader = (args) => {
     template: hbs`
       <PixBackgroundHeader>
 
-        <PixBlock>Un panel avec du text</PixBlock>
+        <PixBlock style="margin: 68px 0 32px; padding: 14px 24px;">Un panel avec du text</PixBlock>
 
-        <PixBlock>
+        <PixBlock style="padding: 14px 24px;">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a interdum mauris. Morbi ac diam varius, maximus massa id, venenatis lectus. Fusce interdum tincidunt mattis. Nullam porta sollicitudin lorem, sodales cursus arcu finibus in. Nam pretium congue diam sollicitudin faucibus. Aliquam nec augue massa. Pellentesque eleifend nec arcu eu tincidunt. Pellentesque at quam dignissim, lacinia sem et, pharetra magna. Etiam venenatis felis augue, id sollicitudin sapien interdum at. Cras bibendum fermentum eros, rutrum varius turpis venenatis vitae. Suspendisse aliquet iaculis sem in blandit. Mauris vitae erat lobortis est volutpat bibendum non molestie purus.
           Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed consequat porttitor metus a imperdiet. Duis quis enim fermentum, sodales massa sit amet, blandit elit. Aliquam felis purus, dictum sed pretium vel, aliquam sit amet felis. Nunc convallis pellentesque convallis. Suspendisse potenti. Aenean iaculis, nunc placerat aliquam posuere, tellus enim facilisis metus, non egestas sapien arcu et leo.
         </PixBlock>

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

@@ -13,8 +13,6 @@ import * as stories from './pix-block.stories.js';
 
 Un \`Block\` est un bloc de fond blanc dont les bords sont arrondis et ayant une ombre projetée.
 
-> Les marges intérieures du bloc sont de 14px (haut et bas) et 24px (droite et gauche), sauf pour la version mobile où c'est 16px (partout).
-
 > Un \`Block\` prendra toute la largeur de son parent, dans la limite maximale de 980px.
 
 > Donnez donc un parent de la taille que vous souhaitez, votre bloc prendra la même taille.

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

@@ -49,7 +49,7 @@ export const argTypes = {
   showModal: {
     name: 'showModal',
     description: "Gérer l'ouverture de la modale",
-    type: { name: 'boolean', required: false },
+    type: { name: 'boolean', required: true },
     control: { type: 'boolean' },
     table: {
       type: { summary: 'boolean' },

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

@@ -30,6 +30,7 @@ Ce composant possède deux `yield` :
 ```html
 <PixModal
   @title="Qu'est-ce qu'une modale ?"
+  @showModal={{this.showModal}}
   @onCloseButtonClick={{this.closeModal}}
 >
  <:content>

package/app/stories/pix-multi-select.stories.js

@@ -117,16 +117,22 @@ export const argTypes = {
   innerText: {
     name: 'innerText',
     description:
-      'Donne un titre à sa liste de choix multiple, utilisé comme placeholder lorsque ``isSearchable`` à ``true``',
+      'Rempli le contenu interne du composant, `placeholder` pour `isSearchable` `true`, sinon rawContent du `button`',
     type: { name: 'string', required: true },
     defaultValue: 'Rechercher un condiment',
   },
   label: {
     name: 'label',
-    description: 'Donne un label au champ',
+    description: "Donne un label au champ qui sera celui vocalisé par le lecteur d'écran",
     type: { name: 'string', required: true },
     defaultValue: 'Label du champ',
   },
+  screenReaderOnly: {
+    name: 'screenReaderOnly',
+    description: "Permet de cacher à l'écran le label tout en restant vocalisable",
+    type: { name: 'boolean', required: false },
+    defaultValue: false,
+  },
   emptyMessage: {
     name: 'emptyMessage',
     description:
@@ -134,18 +140,11 @@ export const argTypes = {
     type: { name: 'string', required: true },
     defaultValue: 'pas de résultat',
   },
-  loadingMessage: {
-    name: 'loadingMessage',
-    description:
-      "Message qui apparaît dans les options quand celles-ci sont en train d'être chargées via onLoadOptions",
-    type: { name: 'string', required: false },
-    defaultValue: 'Chargement...',
-  },
   options: {
     name: 'options',
     description:
       'Les options sont représentées par un tableau d‘objet contenant les propriétés ``value`` et ``label``. ``value`` doit être de type ``String`` pour être conforme au traitement des input value.',
-    type: { name: 'array', required: true },
+    type: { name: 'array', required: false },
     defaultValue: DEFAULT_OPTIONS,
   },
   onLoadOptions: {
@@ -154,6 +153,13 @@ export const argTypes = {
       'Charge de manière asynchrone les options. Doit renvoyer une promesse avec la liste des options. Les options sont représentées par un tableau d‘objet contenant les propriétés ``value`` et ``label``. ``value`` doit être de type ``String`` pour être conforme au traitement des input value.',
     type: { required: false },
   },
+  loadingMessage: {
+    name: 'loadingMessage',
+    description:
+      "Message qui apparaît dans les options quand celles-ci sont en train d'être chargées via onLoadOptions",
+    type: { name: 'string', required: false },
+    defaultValue: 'Chargement...',
+  },
   onSelect: {
     name: 'onSelect',
     description: "Une fonction permettant d'effectuer une action à chaque sélection",
@@ -179,10 +185,4 @@ export const argTypes = {
     type: { name: 'boolean', required: false },
     defaultValue: false,
   },
-  screenReaderOnly: {
-    name: 'screenReaderOnly',
-    description: "Permet de cacher à l'écran le label tout en restant vocalisable",
-    type: { name: 'boolean', required: false },
-    defaultValue: false,
-  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "19.0.0",
+  "version": "20.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"