From c804761ad20c08d8e4d10e8e41f829186e33f2ac Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 2 Jun 2022 19:22:37 -0700
Subject: [PATCH] docs: do not open modals initially

Open modals can steal the document focus.
---
 docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte    | 8 ++++++--
 docs/src/pages/framed/Modal/ModalExtraSmall.svelte        | 8 ++++++--
 docs/src/pages/framed/Modal/ModalLarge.svelte             | 8 ++++++--
 .../pages/framed/Modal/ModalPreventOutsideClick.svelte    | 8 ++++++--
 docs/src/pages/framed/Modal/ModalScrollingContent.svelte  | 8 ++++++--
 docs/src/pages/framed/Modal/ModalSmall.svelte             | 8 ++++++--
 6 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte b/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
index e096c3aa..cf69f2ab 100644
--- a/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
+++ b/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
@@ -1,10 +1,14 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
   import Send from "carbon-icons-svelte/lib/Send.svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Create database</Button>
+
 <Modal
-  open
+  bind:open
   modalHeading="Invite someone"
   primaryButtonText="Send invitation"
   primaryButtonIcon="{Send}"
diff --git a/docs/src/pages/framed/Modal/ModalExtraSmall.svelte b/docs/src/pages/framed/Modal/ModalExtraSmall.svelte
index 3e8c246e..2c78917f 100644
--- a/docs/src/pages/framed/Modal/ModalExtraSmall.svelte
+++ b/docs/src/pages/framed/Modal/ModalExtraSmall.svelte
@@ -1,10 +1,14 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Create database</Button>
+
 <Modal
   size="xs"
-  open
+  bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"
diff --git a/docs/src/pages/framed/Modal/ModalLarge.svelte b/docs/src/pages/framed/Modal/ModalLarge.svelte
index 36b9b1be..73a4ac4e 100644
--- a/docs/src/pages/framed/Modal/ModalLarge.svelte
+++ b/docs/src/pages/framed/Modal/ModalLarge.svelte
@@ -1,10 +1,14 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Create database</Button>
+
 <Modal
   size="lg"
-  open
+  bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"
diff --git a/docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte b/docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte
index ff0ee426..64f09dc9 100644
--- a/docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte
+++ b/docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte
@@ -1,10 +1,14 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Create database</Button>
+
 <Modal
   preventCloseOnClickOutside
-  open
+  bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"
diff --git a/docs/src/pages/framed/Modal/ModalScrollingContent.svelte b/docs/src/pages/framed/Modal/ModalScrollingContent.svelte
index 0b4782fc..5f77745b 100644
--- a/docs/src/pages/framed/Modal/ModalScrollingContent.svelte
+++ b/docs/src/pages/framed/Modal/ModalScrollingContent.svelte
@@ -1,8 +1,12 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
 </script>
 
-<Modal open passiveModal modalHeading="About Cloudant" hasScrollingContent>
+<Button on:click="{() => (open = true)}">Create database</Button>
+
+<Modal bind:open passiveModal modalHeading="About Cloudant" hasScrollingContent>
   <p>
     Cloudant is a fully managed, distributed database optimized for heavy
     workloads and fast-growing web and mobile apps, IBM Cloudant is available as
diff --git a/docs/src/pages/framed/Modal/ModalSmall.svelte b/docs/src/pages/framed/Modal/ModalSmall.svelte
index 7fb1e9db..d28fca07 100644
--- a/docs/src/pages/framed/Modal/ModalSmall.svelte
+++ b/docs/src/pages/framed/Modal/ModalSmall.svelte
@@ -1,10 +1,14 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Create database</Button>
+
 <Modal
   size="sm"
-  open
+  bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"