@1024pix/pix-ui 22.0.1 → 23.0.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Pix-UI Changelog
 
+## v23.0.0 (08/12/2022)
+
+
+### :rocket: Amélioration
+- [#285](https://github.com/1024pix/pix-ui/pull/285) [FEATURE] Améliorer l'accessibilité de PixModal (PIX-6265)
+- [#287](https://github.com/1024pix/pix-ui/pull/287) [FEATURE] Améliorer l'accessiblité de PixSidebar (PIX-6424)
+
+### :coffee: Autre
+- [#302](https://github.com/1024pix/pix-ui/pull/302) [DOCS] Modifie l'exemple de la Modal pour utiliser `gap`
+
 ## v22.0.1 (08/12/2022)
 
 

package/addon/components/pix-modal.hbs

@@ -12,7 +12,7 @@
     aria-modal="true"
     ...attributes
   >
-    <header class="pix-modal__header">
+    <div class="pix-modal__header">
       <h1 id="modal-title--{{this.id}}" class="pix-modal__title">{{@title}}</h1>
       <PixIconButton
         @icon="xmark"
@@ -22,12 +22,12 @@
         @withBackground={{true}}
         class="pix-modal__close-button"
       />
-    </header>
-    <main id="modal-content--{{this.id}}" class="pix-modal__content">
+    </div>
+    <div id="modal-content--{{this.id}}" class="pix-modal__content">
       {{yield to="content"}}
-    </main>
-    <footer class="pix-modal__footer">
+    </div>
+    <div class="pix-modal__footer">
       {{yield to="footer"}}
-    </footer>
+    </div>
   </div>
 </div>

package/addon/components/pix-sidebar.hbs

@@ -12,7 +12,7 @@
     aria-modal="true"
     ...attributes
   >
-    <header class="pix-sidebar__header">
+    <div class="pix-sidebar__header">
       <h1 id="sidebar-title--{{this.id}}" class="pix-sidebar__title">{{@title}}</h1>
       <PixIconButton
         @icon="xmark"
@@ -22,12 +22,12 @@
         @withBackground={{true}}
         class="pix-sidebar__close-button"
       />
-    </header>
-    <main id="sidebar-content--{{this.id}}" class="pix-sidebar__content">
+    </div>
+    <div id="sidebar-content--{{this.id}}" class="pix-sidebar__content">
       {{yield to="content"}}
-    </main>
-    <footer class="pix-sidebar__footer">
+    </div>
+    <div class="pix-sidebar__footer">
       {{yield to="footer"}}
-    </footer>
+    </div>
   </div>
 </div>

package/addon/styles/_pix-modal.scss

@@ -15,7 +15,7 @@
   // if the content is less than 100vh
   // Inspired by https://mui.com/material-ui/react-dialog/#scrolling-long-content
   &::after {
-    content: "";
+    content: '';
     display: inline-block;
     vertical-align: middle;
     height: 100%;
@@ -39,8 +39,10 @@ $button-margin: 16px;
   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; 
+  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);
   border-radius: 4px;
@@ -94,21 +96,5 @@ $button-margin: 16px;
 
   &__footer {
     padding: 0 $modal-padding $modal-padding - $button-margin;
-
-    @include device-is('tablet') {
-      display: flex;
-      justify-content: flex-end;
-      flex-wrap: wrap;
-    }
-
-    .pix-button {
-      margin-bottom: $button-margin;
-      width: 100%;
-
-      @include device-is('tablet') {
-        margin: 0 0 $button-margin $button-margin;
-        width: auto;
-      }
-    }
   }
 }

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

@@ -18,12 +18,10 @@ export const Template = (args) => {
     </p>
   </:content>
   <:footer>
-    <PixButton
-      @backgroundColor='transparent-light'
-      @isBorderVisible='true'
-      @triggerAction={{fn (mut this.showModal) (not this.showModal)}}
-    >Annuler</PixButton>
-    <PixButton @triggerAction={{fn (mut this.showModal) (not this.showModal)}}>Valider</PixButton>
+    <div style="display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 16px">
+      <PixButton @backgroundColor='transparent-light' @isBorderVisible='true' @triggerAction={{fn (mut this.showModal) (not this.showModal)}}>Annuler</PixButton>
+      <PixButton @triggerAction={{fn (mut this.showModal) (not this.showModal)}}>Valider</PixButton>
+    </div>
   </:footer>
 </PixModal>
 <div style='display:flex; justify-content:center; align-items:center; height:105vh;'>

package/package.json

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