US206196 set overlay inside modal outer container.

Author: chrisdo1

elements/pfe-modal/src/pfe-modal.html

@@ -1,5 +1,6 @@
 <slot name="pfe-modal--trigger"></slot>
-<section class="pfe-modal__overlay" hidden>
+<section class="pfe-modal__outer" hidden>
+	<div class="pfe-modal__overlay"></div>
 	<div class="pfe-modal__wrapper" tabindex="0" role="dialog" hidden>
 		<div class="pfe-modal__container">
 			<slot name="pfe-modal--header"></slot>

elements/pfe-modal/src/pfe-modal.js

@@ -71,6 +71,7 @@ class PfeModal extends PFElement {
     this._modalCloseButton = this.shadowRoot.querySelector(`.${this.tag}__close`);
     this._overlay = this.shadowRoot.querySelector(`.${this.tag}__overlay`);
     this._container = this.shadowRoot.querySelector(`.${this.tag}__container`);
+    this._outer = this.shadowRoot.querySelector(`.${this.tag}__outer`);
 
     this._observer = new MutationObserver(() => {
       this._mapSchemaToSlots(this.tag, this.slots);
@@ -165,13 +166,15 @@ class PfeModal extends PFElement {
         // Reveal the container and overlay
         this._modalWrapper.removeAttribute("hidden");
         this._overlay.removeAttribute("hidden");
+        this._outer.removeAttribute("hidden");
         // Set the focus to the container
         this._modalWrapper.focus();
       } else {
         this.open = false;
         // Hide the container and overlay
         this._modalWrapper.setAttribute("hidden", true);
         this._overlay.setAttribute("hidden", true);
+        this._outer.setAttribute("hidden", true);
         // Move focus back to the trigger element
         this.trigger.focus();
       }

elements/pfe-modal/src/pfe-modal.scss

@@ -22,7 +22,7 @@ $pfe-modal--breakpoint--medium: 640px;
 }
 
 .pfe-modal {
-	&__overlay {
+	&__outer {
 		display: flex;
 		position: fixed;
 		height: 100%;
@@ -33,6 +33,18 @@ $pfe-modal--breakpoint--medium: 640px;
 		align-items: center;
 		justify-content: center;
 		z-index: 2;
+
+		&[hidden] {
+			display: none;
+			z-index: 0;
+		}
+	}
+	&__overlay {
+		position: fixed;
+		height: 100%;
+		width: 100%;
+		top: 0;
+		left: 0;
 		background-color: pfe-local($cssvar: BackgroundColor, $region: overlay);
 		cursor: pointer;
 
@@ -42,6 +54,7 @@ $pfe-modal--breakpoint--medium: 640px;
 	}
 	&__wrapper {
 		z-index: 2;
+		position: relative;
 		max-width: pfe-local(MaxWidth--mobile);
 		min-width: pfe-local(MinWidth);
 		min-height: pfe-local(MinHeight);