feat(PixOverlay): use it in sidebar and modal components

1024pix · Jan 8, 2025 · 3a7d620 · 3a7d620
1 parent 9ee703e
commit 3a7d620
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 58 deletions.
diff --git a/addon/components/pix-modal.hbs b/addon/components/pix-modal.hbs
@@ -1,9 +1,4 @@
-<div
-  class="pix-modal__overlay {{unless @showModal ' pix-modal__overlay--hidden'}}"
-  {{on "click" this.closeAction}}
-  {{trap-focus @showModal}}
-  {{on-escape-action @onCloseButtonClick}}
->
+<PixOverlay @isVisible={{@showModal}} @onClose={{@onCloseButtonClick}}>
   <div
     class="pix-modal"
     role="dialog"
@@ -30,4 +25,4 @@
       {{yield to="footer"}}
     </div>
   </div>
-</div>
+</PixOverlay>
diff --git a/addon/components/pix-sidebar.hbs b/addon/components/pix-sidebar.hbs
@@ -1,9 +1,4 @@
-<div
-  class="pix-sidebar__overlay {{unless @showSidebar ' pix-sidebar__overlay--hidden'}}"
-  {{on "click" this.closeAction}}
-  {{trap-focus @showSidebar}}
-  {{on-escape-action @onClose}}
->
+<PixOverlay @isVisible={{@showSidebar}} @onClose={{@onClose}}>
   <div
     class="pix-sidebar {{unless @showSidebar ' pix-sidebar--hidden'}}"
     role="dialog"
@@ -30,4 +25,4 @@
       {{yield to="footer"}}
     </div>
   </div>
-</div>
+</PixOverlay>
diff --git a/addon/styles/_pix-modal.scss b/addon/styles/_pix-modal.scss
@@ -1,48 +1,15 @@
-.pix-modal__overlay {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1000;
-  padding: var(--pix-spacing-2x) 0;
-  overflow-y: auto;
-  text-align: center; // Used to center horizontally the inline-block modal content
-  // we inline the pix-neutral-800 value
-  background-color: rgba(37,56,88, .5);
-  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 {
-    display: inline-block;
-    width: 0;
-    height: 100%;
-    vertical-align: middle;
-    content: '';
-  }
-
-  &--hidden {
-    visibility: hidden;
-    opacity: 0;
-  }
-}
-
 .pix-modal {
   @extend %pix-shadow-sm;
 
-  display: inline-block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
   width: 512px;
-  max-width: calc(
-      100% - var(--pix-spacing-4x)
-    ); // Horizontal margin sets here to have extra space for the .pix-modal__overlay::after on mobile
-
+  max-width: calc(100% - var(--pix-spacing-4x));
   overflow: hidden;
-  text-align: initial;
-  vertical-align: middle; // Centered vertically with the .pix-modal__overlay::after which is 100% height
   background-color: var(--pix-neutral-20);
   border-radius: 4px;
+  transform: translate(-50%, -50%);
 
   &__header {
     display: flex;

diff --git a/tests/integration/components/pix-modal-test.js b/tests/integration/components/pix-modal-test.js
@@ -29,7 +29,7 @@ module('Integration | Component | modal', function (hooks) {
       assert.contains("It's a modal!");
       assert.contains('content');
       assert.contains('footer');
-      assert.dom('.pix-modal__overlay--hidden').doesNotExist();
+      assert.dom('.pix-overlay--hidden').doesNotExist();
     });
 
     module('when close button is clicked', function () {
@@ -69,7 +69,7 @@ module('Integration | Component | modal', function (hooks) {
 >
   content
 </PixModal>`);
-        await triggerKeyEvent('.pix-modal__overlay', 'keyup', 'Escape');
+        await triggerKeyEvent('.pix-modal', 'keyup', 'Escape');
 
         // then
         assert.ok(this.onCloseButtonClick.calledOnce);
@@ -94,7 +94,7 @@ module('Integration | Component | modal', function (hooks) {
 </PixModal>`);
 
       // then
-      assert.dom('.pix-modal__overlay--hidden').exists();
+      assert.dom('.pix-overlay--hidden').exists();
     });
   });
 

diff --git a/tests/integration/components/pix-sidebar-test.js b/tests/integration/components/pix-sidebar-test.js
@@ -30,7 +30,7 @@ module('Integration | Component | Sidebar', function (hooks) {
       assert.contains('content');
       assert.contains('footer');
       assert.dom('.pix-sidebar--hidden').doesNotExist();
-      assert.dom('.pix-sidebar__overlay--hidden').doesNotExist();
+      assert.dom('.pix-overlay--hidden').doesNotExist();
     });
 
     module('when close button is clicked', function () {
@@ -67,7 +67,7 @@ module('Integration | Component | Sidebar', function (hooks) {
     content
   </:content>
 </PixSidebar>`);
-        await triggerKeyEvent('.pix-sidebar__overlay', 'keyup', 'Escape');
+        await triggerKeyEvent('.pix-sidebar', 'keyup', 'Escape');
 
         // then
         assert.ok(this.onClose.calledOnce);
@@ -93,7 +93,7 @@ module('Integration | Component | Sidebar', function (hooks) {
 
       // then
       assert.dom('.pix-sidebar--hidden').exists();
-      assert.dom('.pix-sidebar__overlay--hidden').exists();
+      assert.dom('.pix-overlay--hidden').exists();
     });
   });