From 7926684930fc8e3c7fb6ded55b6d5658a2967c02 Mon Sep 17 00:00:00 2001
From: venashial <venashial.levo@aleeas.com>
Date: Mon, 13 Jun 2022 21:43:57 -0700
Subject: [PATCH] Add Modal `trigger`s

---
 src/package/components/Button.svelte        |  2 --
 src/package/components/Modal.svelte         |  7 +++++++
 src/package/components/ModalDeletion.svelte |  5 ++++-
 src/routes/components/Modal.md              |  8 +++-----
 src/routes/components/ModalDeletion.md      | 13 +++----------
 5 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/package/components/Button.svelte b/src/package/components/Button.svelte
index cc3ed2ce..98e2d266 100644
--- a/src/package/components/Button.svelte
+++ b/src/package/components/Button.svelte
@@ -65,7 +65,6 @@
 <style lang="postcss">
 	.button {
 		display: flex;
-		justify-content: flex-start;
 		align-items: center;
 		justify-content: center;
 		padding: 0.5rem 1rem;
@@ -73,7 +72,6 @@
 		gap: 0.5rem;
 		cursor: pointer;
 		position: relative;
-		white-space: nowrap;
 		line-height: 100%;
 
 		color: var(--color-bg-contrast);
diff --git a/src/package/components/Modal.svelte b/src/package/components/Modal.svelte
index 45e6d16d..6ec7a83a 100644
--- a/src/package/components/Modal.svelte
+++ b/src/package/components/Modal.svelte
@@ -18,8 +18,14 @@
 	function close() {
 		open = false
 	}
+
+	function trigger() {
+		open = !open
+	}
 </script>
 
+<slot name="trigger" {trigger} />
+
 {#if open}
 	<div
 		class="modal-background"
@@ -130,6 +136,7 @@
 			display: flex;
 			justify-content: flex-end;
 			gap: 1rem;
+			flex-wrap: wrap;
 		}
 	}
 </style>
diff --git a/src/package/components/ModalDeletion.svelte b/src/package/components/ModalDeletion.svelte
index 9345c769..b0616ad2 100644
--- a/src/package/components/ModalDeletion.svelte
+++ b/src/package/components/ModalDeletion.svelte
@@ -16,7 +16,9 @@
 	let keyInput = ''
 </script>
 
-<Modal title={$t(`modal.deletion.${type}.title`)} bind:open>
+<Modal title={$t(`modal.deletion.${type}.title`)} bind:open let:trigger>
+	<slot slot="trigger" name="trigger" {trigger} />
+
 	{#if type === 'account' || 'project'}
 		<div class="important-banner">
 			<IconExclamation /><span>{$t('modal.deletion.generic.important')}</span>
@@ -29,6 +31,7 @@
 			bind:value={keyInput}
 			{id} />
 	</Field>
+
 	<Button color="danger" slot="button" disabled={key !== keyInput}>
 		<IconTrash />
 		{$t(`modal.deletion.${type}.action`)}
diff --git a/src/routes/components/Modal.md b/src/routes/components/Modal.md
index c6baae5f..e0da3606 100644
--- a/src/routes/components/Modal.md
+++ b/src/routes/components/Modal.md
@@ -1,14 +1,12 @@
 ```svelte example raised
 <script lang="ts">
-	import { Modal, Checkbox, Button } from 'omorphia'
+	import { Modal, Button } from 'omorphia'
 	import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
-
-	let open = false
 </script>
 
-<Checkbox bind:checked={open}>Open modal</Checkbox>
+<Modal title="Example modal" danger cancelButton let:trigger>
+	<Button on:click={trigger} slot="trigger">Open modal</Button>
 
-<Modal title="Example modal" danger cancelButton bind:open>
 	<p>Secret message goes here!</p>
 	<Button color="primary" slot="button"><IconArrowRight /> Continue</Button>
 </Modal>
diff --git a/src/routes/components/ModalDeletion.md b/src/routes/components/ModalDeletion.md
index 1d3ef4a1..222b5e9e 100644
--- a/src/routes/components/ModalDeletion.md
+++ b/src/routes/components/ModalDeletion.md
@@ -1,16 +1,9 @@
 ```svelte example raised
 <script lang="ts">
 	import { ModalDeletion, Button } from 'omorphia'
-
-	let open = false
 </script>
 
-<Button
-	color="danger"
-	on:click={() => {
-		open = true
-	}}>
-	Delete account
-</Button>
-<ModalDeletion type="account" key="venashial" bind:open />
+<ModalDeletion type="account" key="venashial" let:trigger>
+	<Button slot="trigger" color="danger" on:click={trigger}>Delete account</Button>
+</ModalDeletion>
 ```