From 20e3cef1c9dd028d744de82e8f7e6c4c7e14b3c2 Mon Sep 17 00:00:00 2001
From: Chris Sainty <chrissainty@users.noreply.github.com>
Date: Fri, 14 Oct 2022 10:27:48 +0100
Subject: [PATCH] Added automatic ModalSize which sizes the modal based on the
 component being rendered (#464)

---
 docs/docs/configuration/size.md                    | 1 +
 samples/BlazorServer/Pages/Size.razor              | 1 +
 samples/BlazorWebAssembly/Pages/Size.razor         | 1 +
 src/Blazored.Modal/BlazoredModalInstance.razor.cs  | 3 +++
 src/Blazored.Modal/BlazoredModalInstance.razor.css | 7 +++++++
 src/Blazored.Modal/Configuration/ModalSize.cs      | 3 ++-
 6 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/docs/docs/configuration/size.md b/docs/docs/configuration/size.md
index 3b13aa5f..9ed396db 100644
--- a/docs/docs/configuration/size.md
+++ b/docs/docs/configuration/size.md
@@ -6,6 +6,7 @@ sidebar_position: 1
 
 The width of a modal can be configured using the `Size` option. Blazored Modal has a range of built-in sizes as well as the ability to define a custom size.
 
+- Automatic (Size is determined by the content)
 - Small (300px)
 - Medium (500px)
 - Large (800px)
diff --git a/samples/BlazorServer/Pages/Size.razor b/samples/BlazorServer/Pages/Size.razor
index cc70de43..ce8e6a1c 100644
--- a/samples/BlazorServer/Pages/Size.razor
+++ b/samples/BlazorServer/Pages/Size.razor
@@ -42,6 +42,7 @@
     </div>
 </div>
 
+<button @onclick="@(() => SetSize(ModalSize.Automatic))" class="btn btn-secondary">Automatic</button>
 <button @onclick="@(() => SetSize(ModalSize.Small))" class="btn btn-secondary">Small</button>
 <button @onclick="DefaultSize" class="btn btn-primary">Medium (default)</button>
 <button @onclick="@(() => SetSize(ModalSize.Large))" class="btn btn-secondary">Large</button>
diff --git a/samples/BlazorWebAssembly/Pages/Size.razor b/samples/BlazorWebAssembly/Pages/Size.razor
index cc70de43..ce8e6a1c 100644
--- a/samples/BlazorWebAssembly/Pages/Size.razor
+++ b/samples/BlazorWebAssembly/Pages/Size.razor
@@ -42,6 +42,7 @@
     </div>
 </div>
 
+<button @onclick="@(() => SetSize(ModalSize.Automatic))" class="btn btn-secondary">Automatic</button>
 <button @onclick="@(() => SetSize(ModalSize.Small))" class="btn btn-secondary">Small</button>
 <button @onclick="DefaultSize" class="btn btn-primary">Medium (default)</button>
 <button @onclick="@(() => SetSize(ModalSize.Large))" class="btn btn-secondary">Large</button>
diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor.cs b/src/Blazored.Modal/BlazoredModalInstance.razor.cs
index cfc7a6f8..5fc5ca2c 100644
--- a/src/Blazored.Modal/BlazoredModalInstance.razor.cs
+++ b/src/Blazored.Modal/BlazoredModalInstance.razor.cs
@@ -237,6 +237,9 @@ private string SetSize()
                     return GlobalModalOptions.SizeCustomClass;
 
                 throw new InvalidOperationException("Size set to Custom without a SizeCustomClass set");
+            
+            case ModalSize.Automatic:
+                return "size-automatic";
 
             default:
                 return "size-medium";
diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor.css b/src/Blazored.Modal/BlazoredModalInstance.razor.css
index 310b0d84..f89e8713 100644
--- a/src/Blazored.Modal/BlazoredModalInstance.razor.css
+++ b/src/Blazored.Modal/BlazoredModalInstance.razor.css
@@ -47,6 +47,13 @@
     margin-right: auto;
 }
 
+.size-automatic {
+    width: -moz-fit-content;
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 .bm-header {
     display: flex;
     align-items: flex-start;
diff --git a/src/Blazored.Modal/Configuration/ModalSize.cs b/src/Blazored.Modal/Configuration/ModalSize.cs
index e7091e55..0e8b6029 100644
--- a/src/Blazored.Modal/Configuration/ModalSize.cs
+++ b/src/Blazored.Modal/Configuration/ModalSize.cs
@@ -6,5 +6,6 @@ public enum ModalSize
     Medium,
     Large,
     ExtraLarge,
-    Custom
+    Custom,
+    Automatic
 }
\ No newline at end of file