@1024pix/pix-ui 17.2.1 → 18.0.2

package/.github/workflows/auto-merge.yml

@@ -4,9 +4,13 @@ on:
   pull_request:
     types:
       - labeled
+      - unlabeled
   check_suite:
     types:
       - completed
+  status:
+    types:
+      - success
 
 permissions: write-all
 
@@ -14,13 +18,6 @@ jobs:
   automerge:
     runs-on: ubuntu-latest
     steps:
-      - name: automerge
-        uses: "pascalgn/automerge-action@v0.14.3"
-        env:
-          GITHUB_TOKEN: "${{ github.token }}"
-          MERGE_LABELS: ":rocket: Ready to Merge"
-          MERGE_COMMIT_MESSAGE: "pull-request-title"
-          UPDATE_LABELS: ":rocket: Ready to Merge"
-          UPDATE_METHOD: "rebase"
-          MERGE_FORKS: "false"
-          LOG: "TRACE"
+      - uses: 1024pix/pix-actions/auto-merge@v0
+        with:
+          auto_merge_token: "${{ github.token }}"

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Pix-UI Changelog
 
+## v18.0.2 (06/09/2022)
+
+
+### :bug: Correction
+- [#251](https://github.com/1024pix/pix-ui/pull/251) [BUGFIX] Évite de casser les tests d'acceptance des applis (PIX-5619)
+
+### :coffee: Autre
+- [#250](https://github.com/1024pix/pix-ui/pull/250) [CLEANUP] Utilise l'action commune d'automerge
+
+## v18.0.1 (02/09/2022)
+
+
+### :bug: Correction
+- [#249](https://github.com/1024pix/pix-ui/pull/249) [BUGFIX] Permettre le controle des checkboxs
+- [#248](https://github.com/1024pix/pix-ui/pull/248) [BUGFIX] Prévenir des erreurs à la première ouverture de la sidebar/modal
+
+## v18.0.0 (01/09/2022)
+
+
+### :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`.
+
 ## v17.2.1 (31/08/2022)
 
 

package/addon/components/pix-checkbox.hbs

@@ -9,6 +9,7 @@
     id={{this.id}}
     type="checkbox"
     class="pix-checkbox__input {{if @isIndeterminate ' pix-checkbox__input--indeterminate'}}"
+    checked={{@checked}}
     ...attributes
   />
 </div>

package/addon/components/pix-modal.hbs

@@ -1,8 +1,8 @@
 <div
-  class="pix-modal__overlay"
+  class="pix-modal__overlay {{unless @showModal ' pix-modal__overlay--hidden'}}"
   {{on "click" this.closeAction}}
-  {{trap-focus}}
-  {{on-escape-action this.closeAction}}
+  {{trap-focus @showModal}}
+  {{on-escape-action @onCloseButtonClick}}
 >
   <div
     class="pix-modal"
@@ -10,14 +10,13 @@
     aria-labelledby="modal-title"
     aria-describedby="modal-content"
     aria-modal="true"
-    {{on "click" this.stopPropagation}}
     ...attributes
   >
     <header class="pix-modal__header">
       <h1 id="modal-title" class="pix-modal__title">{{@title}}</h1>
       <PixIconButton
         @icon="xmark"
-        @triggerAction={{this.closeAction}}
+        @triggerAction={{@onCloseButtonClick}}
         @ariaLabel="Fermer"
         @size="small"
         @withBackground={{true}}

package/addon/components/pix-modal.js

@@ -11,14 +11,13 @@ export default class PixModal extends Component {
   }
 
   @action
-  stopPropagation(event) {
-    event.stopPropagation();
+  closeAction(event) {
+    if (this.args.onCloseButtonClick && this.isClickOnOverlay(event)) {
+      this.args.onCloseButtonClick(event);
+    }
   }
 
-  @action
-  closeAction(params) {
-    if (this.args.onCloseButtonClick) {
-      this.args.onCloseButtonClick(params);
-    }
+  isClickOnOverlay(event) {
+    return event.target.classList.contains('pix-modal__overlay');
   }
 }

package/addon/components/pix-sidebar.hbs

@@ -1,8 +1,8 @@
 <div
   class="pix-sidebar__overlay {{unless @showSidebar ' pix-sidebar__overlay--hidden'}}"
   {{on "click" this.closeAction}}
-  {{trap-focus}}
-  {{on-escape-action this.closeAction}}
+  {{trap-focus @showSidebar}}
+  {{on-escape-action @onClose}}
 >
   <div
     class="pix-sidebar {{unless @showSidebar ' pix-sidebar--hidden'}}"
@@ -10,14 +10,13 @@
     aria-labelledby="sidebar-title"
     aria-describedby="sidebar-content"
     aria-modal="true"
-    {{on "click" this.stopPropagation}}
     ...attributes
   >
     <header class="pix-sidebar__header">
       <h1 id="sidebar-title" class="pix-sidebar__title">{{@title}}</h1>
       <PixIconButton
         @icon="xmark"
-        @triggerAction={{this.closeAction}}
+        @triggerAction={{@onClose}}
         @ariaLabel="Fermer"
         @size="small"
         @withBackground={{true}}

package/addon/components/pix-sidebar.js

@@ -11,14 +11,13 @@ export default class PixSidebar extends Component {
   }
 
   @action
-  stopPropagation(event) {
-    event.stopPropagation();
+  closeAction(event) {
+    if (this.args.onClose && this.isClickOnOverlay(event)) {
+      this.args.onClose(event);
+    }
   }
 
-  @action
-  closeAction(params) {
-    if (this.args.onClose) {
-      this.args.onClose(params);
-    }
+  isClickOnOverlay(event) {
+    return event.target.classList.contains('pix-sidebar__overlay');
   }
 }

package/addon/styles/_pix-modal.scss

@@ -7,6 +7,12 @@
   right: 0;
   top: 0;
   z-index: 1000;
+  transition: all .3s ease-in-out;
+
+  &--hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
 }
 
 $modal-padding: 24px;

package/app/modifiers/trap-focus.js

@@ -1,45 +1,25 @@
 import { modifier } from 'ember-modifier';
 
-export default modifier(function trapFocus(element) {
-  const [firstFocusableElement] = findFocusableElements(element);
-
-  firstFocusableElement.focus();
-
-  function handleKeyDown(event) {
-    const TAB_KEY = 9;
-    const focusableElements = findFocusableElements(element);
-    const [firstFocusableElement] = focusableElements;
-    const lastFocusableElement = focusableElements[focusableElements.length - 1];
-
-    if (event.keyCode !== TAB_KEY) {
-      return;
-    }
+let sourceActiveElement = null;
 
-    function handleBackwardTab() {
-      if (document.activeElement === firstFocusableElement) {
-        event.preventDefault();
-        lastFocusableElement.focus();
-      }
-    }
-
-    function handleForwardTab() {
-      if (document.activeElement === lastFocusableElement) {
-        event.preventDefault();
-        firstFocusableElement.focus();
-      }
-    }
+export default modifier(function trapFocus(element, [isOpen]) {
+  const [firstFocusableElement] = findFocusableElements(element);
 
-    if (event.shiftKey) {
-      handleBackwardTab();
-    } else {
-      handleForwardTab();
-    }
+  if (isOpen) {
+    sourceActiveElement = document.activeElement;
+    focusElement(firstFocusableElement, element);
+  } else if (sourceActiveElement) {
+    focusElement(sourceActiveElement, element);
   }
 
-  element.addEventListener('keydown', handleKeyDown);
+  element.addEventListener('keydown', (event) => {
+    handleKeyDown(event, element);
+  });
 
   return () => {
-    element.removeEventListener('keydown', handleKeyDown);
+    element.removeEventListener('keydown', (event) => {
+      handleKeyDown(event, element);
+    });
   };
 });
 
@@ -50,3 +30,73 @@ function findFocusableElements(element) {
     ),
   ].filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
 }
+
+function focusElement(elementToFocus, element) {
+  let focusOnce = false;
+
+  const handleTransitionEnd = () => {
+    if (!focusOnce) {
+      elementToFocus.focus();
+      focusOnce = true;
+    }
+  };
+
+  if (hasTransitionDuration(element)) {
+    element.addEventListener('transitionend', handleTransitionEnd);
+  } else if (hasAnimationDuration(element)) {
+    element.addEventListener('animationend', handleTransitionEnd);
+  } else {
+    elementToFocus.focus();
+  }
+
+  return () => {
+    if (hasTransitionDuration(element)) {
+      element.removeEventListener('transitionend', handleTransitionEnd);
+    } else if (hasAnimationDuration(element)) {
+      element.removeEventListener('animationend', handleTransitionEnd);
+    }
+  };
+}
+
+function hasTransitionDuration(element) {
+  return hasDurationByKey(element, 'transition-duration');
+}
+
+function hasAnimationDuration(element) {
+  return hasDurationByKey(element, 'animation-duration');
+}
+
+function hasDurationByKey(element, key) {
+  return !['', '0s'].includes(getComputedStyle(element, null).getPropertyValue(key));
+}
+
+function handleKeyDown(event, element) {
+  const TAB_KEY = 9;
+  const focusableElements = findFocusableElements(element);
+  const [firstFocusableElement] = focusableElements;
+  const lastFocusableElement = focusableElements[focusableElements.length - 1];
+
+  if (event.keyCode !== TAB_KEY) {
+    return;
+  }
+
+  const handleBackwardTab = () => {
+    if (document.activeElement === firstFocusableElement) {
+      event.preventDefault();
+      lastFocusableElement.focus();
+    }
+  };
+
+  const handleForwardTab = () => {
+    if (document.activeElement === lastFocusableElement) {
+      event.preventDefault();
+      firstFocusableElement.focus();
+    }
+  };
+
+  if (event.shiftKey) {
+    handleBackwardTab();
+  } else {
+    handleForwardTab();
+  }
+}

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

@@ -9,6 +9,7 @@ export const Template = (args) => {
         @screenReaderOnly={{screenReaderOnly}}
         @isIndeterminate={{isIndeterminate}}
         @labelSize={{labelSize}}
+        @checked={{checked}}
       />
     `,
     context: args,
@@ -85,4 +86,13 @@ export const argTypes = {
       options: ['small', 'default', 'large'],
     },
   },
+  checked: {
+    name: 'checked',
+    description: 'Permet de cocher la checkbox',
+    type: { name: 'boolean', required: false },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
 };

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

@@ -3,22 +3,23 @@ import { hbs } from 'ember-cli-htmlbars';
 export const Template = (args) => {
   return {
     template: hbs`
-      <PixModal @title={{this.title}} @onCloseButtonClick={{onCloseButtonClick}}>
-        <:content>
-          <p>
-            Une fenêtre modale est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et
-            de l'écran. Elle est en général associée à une question à laquelle il est impératif que l'utilisateur
-            réponde avant de poursuivre, ou de modifier quoi que ce soit. La fenêtre modale a pour propos : d'obtenir
-            des informations de l'utilisateur (ces informations sont nécessaires pour réaliser une opération) ; de
-            fournir une information à l'utilisateur (ce dernier doit en prendre connaissance avant de pouvoir continuer
-            à utiliser l'application).
-          </p>
-        </:content>
-        <:footer>
-          <PixButton @backgroundColor="transparent-light" @isBorderVisible="true">Annuler</PixButton>
-          <PixButton>Valider</PixButton>
-        </:footer>
-      </PixModal>
+    <PixModal @showModal={{showModal}} @title={{this.title}} @onCloseButtonClick={{fn (mut showModal) (not showModal)}} >
+      <:content>
+        <p>
+          Une fenêtre modale est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et
+          de l'écran. Elle est en général associée à une question à laquelle il est impératif que l'utilisateur
+          réponde avant de poursuivre, ou de modifier quoi que ce soit. La fenêtre modale a pour propos : d'obtenir
+          des informations de l'utilisateur (ces informations sont nécessaires pour réaliser une opération) ; de
+          fournir une information à l'utilisateur (ce dernier doit en prendre connaissance avant de pouvoir continuer
+          à utiliser l'application).
+        </p>
+      </:content>
+      <:footer>
+        <PixButton @backgroundColor="transparent-light" @isBorderVisible="true" @triggerAction={{fn (mut showModal) (not showModal)}}>Annuler</PixButton>
+        <PixButton @triggerAction={{fn (mut showModal) (not showModal)}}>Valider</PixButton>
+      </:footer>
+    </PixModal>
+    <PixButton @triggerAction={{fn (mut showModal) (not showModal)}}>Ouvrir la modale</PixButton>
     `,
     context: args,
   };
@@ -26,10 +27,9 @@ export const Template = (args) => {
 
 export const Default = Template.bind({});
 Default.args = {
+  showModal: true,
   title: "Qu'est-ce qu'une modale ?",
-  onCloseButtonClick: () => {
-    alert('Action : fermer modale');
-  },
+  onCloseButtonClick: () => {},
 };
 
 export const argTypes = {
@@ -45,4 +45,14 @@ export const argTypes = {
     type: { name: 'function', required: true },
     defaultValue: null,
   },
+  showModal: {
+    name: 'showModal',
+    description: "Gérer l'ouverture de la modale",
+    type: { name: 'boolean', required: false },
+    control: { type: 'boolean' },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
 };

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

@@ -57,4 +57,4 @@ Ce composant possède deux `yield` :
 
 ## Arguments
 
-<ArgsTable story="PixModal" />
+<ArgsTable story="Default" />

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

@@ -3,7 +3,6 @@ import { hbs } from 'ember-cli-htmlbars';
 export const Template = (args) => {
   return {
     template: hbs`
-      <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Ouvrir la sidebar</PixButton>
       <PixSidebar @showSidebar={{showSidebar}} @title={{title}} @onClose={{fn (mut showSidebar) (not showSidebar)}}>
         <:content>
           <p>
@@ -13,11 +12,12 @@ export const Template = (args) => {
         </:content>
         <:footer>
         <div style="display: flex; gap: 8px">
-          <PixButton @backgroundColor="transparent-light" @isBorderVisible="true">Annuler</PixButton>
-          <PixButton>Valider</PixButton>
+          <PixButton @backgroundColor="transparent-light" @isBorderVisible="true" @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Annuler</PixButton>
+          <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Valider</PixButton>
           </div>
         </:footer>
       </PixSidebar>
+      <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Ouvrir la sidebar</PixButton>
     `,
     context: args,
   };

package/package.json

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