feat(modal): support 3-button Modal, ComposedModal (#724)

* feat(modal): support 3-button modal #528, #472

* fix(modal): "supercede" --> "supersede"

* test(modal): test secondaryButtons prop, updated click:button--secondary custom event

* docs(modal): add multiple secondary button example for ComposedModal

* docs(modal): rename example

* fix(modal): do not render secondary button if secondaryButtonText is falsy

* docs(composed-modal): add button to re-open modal

docs/src/pages/components/ComposedModal.svx

@@ -9,3 +9,9 @@ components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter"]
 ### Composed modal
 
 <FileSource src="/framed/Modal/ComposedModal" />
+
+### Multiple secondary buttons
+
+Use the `secondaryButtons` prop in `ModalFooter` to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`.
+
+<FileSource src="/framed/Modal/3ButtonComposedModal" />

docs/src/pages/components/Modal.svx

@@ -14,6 +14,12 @@
 
 <FileSource src="/framed/Modal/PassiveModal" />
 
+### 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`.
+
+<FileSource src="/framed/Modal/3ButtonModal" />
+
 ### Extra-small size
 
 <FileSource src="/framed/Modal/ModalExtraSmall" />

docs/src/pages/framed/Modal/3ButtonComposedModal.svelte

@@ -0,0 +1,31 @@
+<script>
+  import {
+    Button,
+    ComposedModal,
+    ModalHeader,
+    ModalBody,
+    ModalFooter,
+    Checkbox,
+  } from "carbon-components-svelte";
+
+  let open = true;
+  let checked = false;
+</script>
+
+<Button on:click="{() => (open = true)}">Review changes</Button>
+
+<ComposedModal bind:open on:submit="{() => (open = false)}">
+  <ModalHeader label="Changes" title="Confirm changes" />
+  <ModalBody hasForm>
+    <Checkbox labelText="I have reviewed the changes" bind:checked />
+  </ModalBody>
+  <ModalFooter
+    primaryButtonText="Proceed"
+    primaryButtonDisabled="{!checked}"
+    secondaryButtons="{[{ text: 'Cancel' }, { text: 'Review' }]}"
+    on:click:button--secondary="{({ detail }) => {
+      if (detail.text === 'Cancel') open = false;
+      if (detail.text === 'Review') console.log('Review');
+    }}"
+  />
+</ComposedModal>

docs/src/pages/framed/Modal/3ButtonModal.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button on:click="{() => (open = true)}">Create database</Button>
+
+<Modal
+  bind:open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtons="{[{ text: 'Cancel' }, { text: 'Edit' }]}"
+  on:click:button--secondary="{({ detail }) => {
+    if (detail.text === 'Cancel') open = false;
+    if (detail.text === 'Edit') console.log('Edit');
+  }}"
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>