From d829462cd931b156552fff5327aaa0a3eeb0f57c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 10 May 2021 16:14:39 +0100
Subject: [PATCH] Add inline prop for modals to allow them to be used as actual
 components on pages

---
 packages/bbui/src/Modal/Modal.svelte | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index f1a51d0ea1..4253da9b30 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -7,9 +7,10 @@
   import Context from "../context"
 
   export let fixed = false
+  export let inline = false
 
   const dispatch = createEventDispatcher()
-  let visible = !!fixed
+  let visible = fixed || inline
   $: dispatch(visible ? "show" : "hide")
 
   export function show() {
@@ -20,7 +21,7 @@
   }
 
   export function hide() {
-    if (!visible || fixed) {
+    if (!visible || fixed || inline) {
       return
     }
     visible = false
@@ -45,7 +46,13 @@
 
 <svelte:window on:keydown={handleKey} />
 
-{#if visible}
+<!-- These svelte if statements need to be defined like this. -->
+<!-- The modal transitions do not work if nested inside more than one "if" -->
+{#if visible && inline}
+  <div use:focusFirstInput class="spectrum-Modal is-open">
+    <slot />
+  </div>
+{:else if visible}
   <Portal target=".modal-container">
     <div
       class="spectrum-Underlay is-open"