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/COMPONENT_API.json

@@ -5397,6 +5397,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "secondaryButtons",
+          "kind": "let",
+          "description": "2-tuple prop to render two secondary buttons for a 3 button modal\nsupersedes `secondaryButtonText`",
+          "type": "[{ text: string; }, { text: string; }]",
+          "value": "[]",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "selectorPrimaryFocus",
           "kind": "let",
@@ -5459,13 +5469,17 @@
           "name": "transitionend",
           "detail": "{ open: boolean; }"
         },
+        {
+          "type": "dispatched",
+          "name": "click:button--secondary",
+          "detail": "{ text: string; }"
+        },
         { "type": "forwarded", "name": "keydown", "element": "div" },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
         { "type": "forwarded", "name": "mouseleave", "element": "div" },
         { "type": "dispatched", "name": "submit" },
-        { "type": "dispatched", "name": "click:button--secondary" },
         { "type": "dispatched", "name": "close" },
         { "type": "dispatched", "name": "open" }
       ],
@@ -5545,6 +5559,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "secondaryButtons",
+          "kind": "let",
+          "description": "2-tuple prop to render two secondary buttons for a 3 button modal\nsupersedes `secondaryButtonText`",
+          "type": "[{ text: string; }, { text: string; }]",
+          "value": "[]",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "secondaryClass",
           "kind": "let",
@@ -5566,7 +5590,13 @@
         }
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
-      "events": [],
+      "events": [
+        {
+          "type": "dispatched",
+          "name": "click:button--secondary",
+          "detail": "{ text: string; }"
+        }
+      ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },

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>