From cf5bface5950c7170ff9fc14cee86ec544237ec9 Mon Sep 17 00:00:00 2001
From: Bartosz Cylwik <bartosz.cylwik94@gmail.com>
Date: Tue, 28 Nov 2023 12:16:26 +0100
Subject: [PATCH] Modal - add backdrop class customization

---
 .../docs/standard/components/modal/a.html       | 17 ++++++++++++++++-
 src/js/components/modal.js                      |  4 ++++
 src/js/util/backdrop.js                         |  2 +-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/standard/components/modal/a.html b/site/content/docs/standard/components/modal/a.html
index 857b6056d..8d3fe1845 100644
--- a/site/content/docs/standard/components/modal/a.html
+++ b/site/content/docs/standard/components/modal/a.html
@@ -358,6 +358,21 @@ <h4 class="mt-4 font-bold">Via JavaScript</h4>
                     <tbody>
                       <tr
                         class="border-b bg-neutral-100 dark:border-neutral-500 dark:bg-neutral-700">
+                        <td
+                          class="border-r px-6 py-4 font-medium dark:border-neutral-500 max-lg:whitespace-nowrap">
+                          <code>backdrop</code>
+                        </td>
+                        <td
+                          class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
+                          opacity-50 transition-all duration-300 ease-in-out
+                          fixed top-0 left-0 z-[1040] bg-black w-screen h-screen
+                        </td>
+                        <td class="px-6 py-4 max-lg:whitespace-nowrap">
+                          Sets styles for the backdrop.
+                        </td>
+                      </tr>
+                      <tr
+                        class="border-b bg-white dark:border-neutral-500 dark:bg-neutral-600">
                         <td
                           class="border-r px-6 py-4 font-medium dark:border-neutral-500 max-lg:whitespace-nowrap">
                           <code>static</code>
@@ -372,7 +387,7 @@ <h4 class="mt-4 font-bold">Via JavaScript</h4>
                         </td>
                       </tr>
                       <tr
-                        class="border-b bg-white dark:border-neutral-500 dark:bg-neutral-600">
+                        class="border-b bg-neutral-100 dark:border-neutral-500 dark:bg-neutral-700">
                         <td
                           class="border-r px-6 py-4 font-medium dark:border-neutral-500 max-lg:whitespace-nowrap">
                           <code>staticProperties</code>
diff --git a/src/js/components/modal.js b/src/js/components/modal.js
index c3a182611..151215558 100644
--- a/src/js/components/modal.js
+++ b/src/js/components/modal.js
@@ -50,12 +50,15 @@ const DefaultClasses = {
   show: "transform-none",
   static: "scale-[1.02]",
   staticProperties: "transition-scale duration-300 ease-in-out",
+  backdrop:
+    "opacity-50 transition-all duration-300 ease-in-out fixed top-0 left-0 z-[1040] bg-black w-screen h-screen",
 };
 
 const DefaultClassesType = {
   show: "string",
   static: "string",
   staticProperties: "string",
+  backdrop: "string",
 };
 
 const EVENT_HIDE = `hide${EVENT_KEY}`;
@@ -216,6 +219,7 @@ class Modal extends BaseComponent {
     return new Backdrop({
       isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value
       isAnimated: this._isAnimated(),
+      backdropClasses: this._classes.backdrop,
     });
   }
 
diff --git a/src/js/util/backdrop.js b/src/js/util/backdrop.js
index 715571cc1..279ea7ecb 100644
--- a/src/js/util/backdrop.js
+++ b/src/js/util/backdrop.js
@@ -32,7 +32,7 @@ const DefaultType = {
   isAnimated: "boolean",
   rootElement: "(element|string)",
   clickCallback: "(function|null)",
-  backdropClasses: "(array|null)",
+  backdropClasses: "(array|string|null)",
 };
 const NAME = "backdrop";
 const EVENT_MOUSEDOWN = `mousedown.te.${NAME}`;