From 6acd0bf425921c8f8ccf811b40eb62e9613c711e Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 2 Jun 2022 19:18:45 -0700
Subject: [PATCH] docs(modal): add "Custom focus" example

---
 docs/src/pages/components/Modal.svx           |  8 ++++++
 .../framed/Modal/ModalCustomFocus.svelte      | 27 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 docs/src/pages/framed/Modal/ModalCustomFocus.svelte

diff --git a/docs/src/pages/components/Modal.svx b/docs/src/pages/components/Modal.svx
index 1adf6bf9..6c9024ea 100644
--- a/docs/src/pages/components/Modal.svx
+++ b/docs/src/pages/components/Modal.svx
@@ -6,6 +6,14 @@
 
 <FileSource src="/framed/Modal/Modal" />
 
+### Custom focus
+
+By default, the modal close button will be focused when opened.
+
+Use the `selectorPrimaryFocus` to specify the element that should be focused when the modal is opened (e.g., `#id`, `.class`, `[data-attribute]`).
+
+<FileSource src="/framed/Modal/ModalCustomFocus" />
+
 ### Danger modal
 
 <FileSource src="/framed/Modal/DangerModal" />
diff --git a/docs/src/pages/framed/Modal/ModalCustomFocus.svelte b/docs/src/pages/framed/Modal/ModalCustomFocus.svelte
new file mode 100644
index 00000000..ea37142a
--- /dev/null
+++ b/docs/src/pages/framed/Modal/ModalCustomFocus.svelte
@@ -0,0 +1,27 @@
+<script>
+  import { Button, Modal, TextInput } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button on:click="{() => (open = true)}">Create database</Button>
+
+<Modal
+  bind:open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  selectorPrimaryFocus="#db-name"
+  on:click:button--secondary="{() => (open = false)}"
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+  <br />
+  <TextInput
+    id="db-name"
+    labelText="Database name"
+    placeholder="Enter database name..."
+  />
+</Modal>