@1024pix/pix-ui 55.11.2 → 55.12.0

package/addon/components/pix-modal.hbs

@@ -1,8 +1,7 @@
-<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}}
+  @focusOnClose={{@focusOnClose}}
 >
   <div
     class="pix-modal"
@@ -30,4 +29,4 @@
       {{yield to="footer"}}
     </div>
   </div>
-</div>
+</PixOverlay>

package/addon/components/pix-modal.js

@@ -1,4 +1,3 @@
-import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import Component from '@glimmer/component';
 
@@ -11,17 +10,6 @@ export default class PixModal extends Component {
     }
   }
 
-  @action
-  closeAction(event) {
-    if (this.args.onCloseButtonClick && this.isClickOnOverlay(event)) {
-      this.args.onCloseButtonClick(event);
-    }
-  }
-
-  isClickOnOverlay(event) {
-    return event.target.classList.contains('pix-modal__overlay');
-  }
-
   get id() {
     return guidFor(this);
   }

package/addon/components/pix-overlay.hbs

@@ -0,0 +1,8 @@
+<div
+  class="pix-overlay {{unless @isVisible ' pix-overlay--hidden'}}"
+  {{on "click" this.onClick}}
+  {{trap-focus @isVisible @focusOnClose}}
+  {{on-escape-action @onClose}}
+>
+  {{yield}}
+</div>

package/addon/components/pix-overlay.js

@@ -0,0 +1,13 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+export default class PixOverlay extends Component {
+  @action
+  onClick(event) {
+    const isClickOnOverlay = event.target.classList.contains('pix-overlay');
+
+    if (this.args.onClose && isClickOnOverlay) {
+      this.args.onClose(event);
+    }
+  }
+}

package/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 @focusOnClose}}
-  {{on-escape-action @onClose}}
->
+<PixOverlay @isVisible={{@showSidebar}} @onClose={{@onClose}} @focusOnClose={{@focusOnClose}}>
   <div
     class="pix-sidebar {{unless @showSidebar ' pix-sidebar--hidden'}}"
     role="dialog"
@@ -30,4 +25,4 @@
       {{yield to="footer"}}
     </div>
   </div>
-</div>
+</PixOverlay>

package/addon/components/pix-sidebar.js

@@ -1,4 +1,3 @@
-import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import Component from '@glimmer/component';
 
@@ -11,17 +10,6 @@ export default class PixSidebar extends Component {
     }
   }
 
-  @action
-  closeAction(event) {
-    if (this.args.onClose && this.isClickOnOverlay(event)) {
-      this.args.onClose(event);
-    }
-  }
-
-  isClickOnOverlay(event) {
-    return event.target.classList.contains('pix-sidebar__overlay');
-  }
-
   get id() {
     return guidFor(this);
   }

package/addon/styles/_pix-modal.scss

@@ -2,51 +2,18 @@
 @use "pix-design-tokens/typography";
 @use "pix-design-tokens/shadows";
 
-.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;

package/addon/styles/_pix-overlay.scss

@@ -0,0 +1,13 @@
+.pix-overlay {
+  position: fixed;
+  z-index: 1000;
+  inset: 0;
+  overflow-y: auto;
+  background-color: rgba(var(--pix-primary-700-inline), 0.3);
+  transition: all 0.3s ease-in-out;
+
+  &--hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
+}

package/addon/styles/addon.scss

@@ -46,6 +46,7 @@
 @use 'pix-app-layout';
 @use 'pix-structure-switcher';
 @use 'pix-code';
+@use 'pix-overlay';
 @use 'pix-tabs';
 @use 'pix-gauge';
 

package/app/components/pix-overlay.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-overlay';

package/package.json

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