From a1932fa3dc748c56f82fb400f2af543f36e9da19 Mon Sep 17 00:00:00 2001
From: venashial <venashial.levo@aleeas.com>
Date: Sat, 18 Jun 2022 17:31:29 -0700
Subject: [PATCH] `sm` Modal size

---
 docs/routes/components/Modal.md | 10 +++++++++-
 src/components/Modal.svelte     | 19 ++++++++++++-------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/docs/routes/components/Modal.md b/docs/routes/components/Modal.md
index e0da36069..a8cbb2469 100644
--- a/docs/routes/components/Modal.md
+++ b/docs/routes/components/Modal.md
@@ -2,12 +2,20 @@
 <script lang="ts">
 	import { Modal, Button } from 'omorphia'
 	import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
+  	import IconCheck from 'virtual:icons/heroicons-outline/check'
 </script>
 
-<Modal title="Example modal" danger cancelButton let:trigger>
+<Modal title="Example modal" danger let:trigger>
 	<Button on:click={trigger} slot="trigger">Open modal</Button>
 
 	<p>Secret message goes here!</p>
 	<Button color="primary" slot="button"><IconArrowRight /> Continue</Button>
 </Modal>
+
+<Modal let:trigger size='sm'>
+	<Button on:click={trigger} slot="trigger">Confirm modal</Button>
+
+	Are you sure you want to delete this gallery image?
+	<Button color="primary" slot="button"><IconCheck /> Confirm</Button>
+</Modal>
 ```
diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
index 1d2ab80fe..7cd182cd7 100644
--- a/src/components/Modal.svelte
+++ b/src/components/Modal.svelte
@@ -7,7 +7,7 @@
 	export let open = false
 
 	/** Set the width of the modal */
-	export let size: 'md' | 'lg' = 'md'
+	export let size: 'sm' | 'md' | 'lg' = 'md'
 
 	export let title = ''
 
@@ -39,12 +39,14 @@
 	<div
 		class={classCombine(['modal', `modal--size-${size}`, 'card'])}
 		transition:fly={{ y: 400, duration: 250 }}>
-		<div class="modal__top">
-			<h2 class="title-secondary">{title}</h2>
-			<Button title="Close" color="transparent" on:click={close}>
-				<IconX width={20} />
-			</Button>
-		</div>
+		{#if title}
+			<div class="modal__top">
+				<h2 class="title-secondary">{title}</h2>
+				<Button title="Close" color="transparent" on:click={close}>
+					<IconX width={20} />
+				</Button>
+			</div>
+		{/if}
 
 		<slot />
 
@@ -83,6 +85,9 @@
 		overflow-y: auto;
 
 		&--size {
+			&-sm {
+				max-width: 450px;
+			}
 			&-md {
 				max-width: 600px;
 			}