docs(modal): add "Has scrolling content," "Custom focus" examples (#1334)

* docs(modal): add example "Has scrolling content"

* docs(modal): add "Custom focus" example

* docs: do not open modals initially

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" />
@@ -14,13 +22,19 @@
 
 <FileSource src="/framed/Modal/PassiveModal" />
 
+### Has scrolling content
+
+Setting `hasScrollingContent` to `true` increases the vertical space within the modal.
+
+<FileSource src="/framed/Modal/ModalScrollingContent" />
+
 ### Multiple modals
 
 <FileSource src="/framed/Modal/ModalMultiple" />
 
 ### Multiple secondary buttons
 
-Use the `secondaryButtons` prop to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`.
+Use the `secondaryButtons` prop to render two secondary buttons. The prop is a 2-tuple type that supersedes `secondaryButtonText`.
 
 <FileSource src="/framed/Modal/3ButtonModal" />
 

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}"

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>

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"

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"

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"

docs/src/pages/framed/Modal/ModalScrollingContent.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<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
+    an IBM Cloud® service with a 99.99% SLA.
+  </p>
+  <br />
+  <p>
+    The database elastically scales throughput and storage, and its API and
+    replication protocols are compatible with Apache CouchDB for hybrid or
+    multicloud architectures.
+  </p>
+</Modal>

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"