From 992ca26221ab92ebb1458aef30f5e3dfa3c5c002 Mon Sep 17 00:00:00 2001
From: karel kremer <karel.kremer@redpencil.io>
Date: Mon, 11 Mar 2024 16:24:52 +0100
Subject: [PATCH 1/3] add insertBefore=null so the content of the existing
 modal isn't replaced (see in-element docs), make backdrop and modal z-index
 the same, so new modals can be shown over existing modals

---
 addon/components/au-modal.gjs   | 2 +-
 styles/components/_c-modal.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/addon/components/au-modal.gjs b/addon/components/au-modal.gjs
index 8b189b5a1..ad867b1d4 100644
--- a/addon/components/au-modal.gjs
+++ b/addon/components/au-modal.gjs
@@ -85,7 +85,7 @@ export default class AuModal extends Component {
 
   <template>
     {{#if @modalOpen}}
-      {{#in-element this.destinationElement}}
+      {{#in-element this.destinationElement insertBefore=null}}
         <div class="au-c-modal-backdrop {{if @modalOpen 'is-visible'}}"></div>
         <div
           id="{{@id}}"
diff --git a/styles/components/_c-modal.scss b/styles/components/_c-modal.scss
index b8c9ec0a4..142d4f3ab 100644
--- a/styles/components/_c-modal.scss
+++ b/styles/components/_c-modal.scss
@@ -6,7 +6,7 @@
    ========================================================================== */
 
 $au-modal-z-index: 9999 !default;
-$au-modal-backdrop-z-index: 9998 !default;
+$au-modal-backdrop-z-index: 9999 !default;
 
 /* Component
   ========================================================================== */

From 1352ab2835cf74e6cf13d6d3deb75b59cc35daae Mon Sep 17 00:00:00 2001
From: karel kremer <karel.kremer@redpencil.io>
Date: Tue, 12 Mar 2024 09:09:09 +0100
Subject: [PATCH 2/3] add test showing two modals at once

---
 tests/integration/components/au-modal-test.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/tests/integration/components/au-modal-test.js b/tests/integration/components/au-modal-test.js
index acdba178e..97aa520b2 100644
--- a/tests/integration/components/au-modal-test.js
+++ b/tests/integration/components/au-modal-test.js
@@ -248,4 +248,19 @@ module('Integration | Component | au-modal', function (hooks) {
     await click(closeButton);
     assert.strictEqual(timesCalled, 1);
   });
+
+  test('it can render multiple modals at once', async function (assert) {
+    await render(hbs`
+      <AuModalContainer />
+      <AuModal @modalOpen={{true}}>
+        <div data-test-content-one>One!</div>
+      </AuModal>
+      <AuModal @modalOpen={{true}}>
+        <div data-test-content-two>Two!</div>
+      </AuModal>
+    `);
+
+    assert.dom('[data-test-content-one]').containsText('One!');
+    assert.dom('[data-test-content-two]').containsText('Two!');
+  });
 });

From 4046458049241b3ee52b9a88750f87b49d9b6840 Mon Sep 17 00:00:00 2001
From: karel kremer <karel.kremer@redpencil.io>
Date: Tue, 12 Mar 2024 09:28:16 +0100
Subject: [PATCH 3/3] add deprecation warning for modal backdrop z index
 variable

---
 styles/components/_c-modal.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/styles/components/_c-modal.scss b/styles/components/_c-modal.scss
index 142d4f3ab..73d9ac01d 100644
--- a/styles/components/_c-modal.scss
+++ b/styles/components/_c-modal.scss
@@ -6,7 +6,11 @@
    ========================================================================== */
 
 $au-modal-z-index: 9999 !default;
-$au-modal-backdrop-z-index: 9999 !default;
+$au-modal-backdrop-z-index: $au-modal-z-index !default;
+
+@if $au-modal-z-index != $au-modal-backdrop-z-index {
+  @warn "DEPRECATED $au-modal-backdrop-z-index. This property has been deprecated and $au-modal-z-index and $au-modal-backdrop-z-index have different values. This will result in unexpected behavior when showing multiple modals.";
+}
 
 /* Component
   ========================================================================== */