From e8be9280c7b5099146bab5bec5f442ae8dbb59b8 Mon Sep 17 00:00:00 2001
From: brunnerh <brunnerh@users.noreply.github.com>
Date: Sat, 8 Jan 2022 18:24:33 +0100
Subject: [PATCH 1/4] Update TileGroup on programmatic selection change. (#971)

Only fire `select` event for user interaction (from RadioTile).

Uses `set` function instead of `$` to prevent cyclic dependency error.
---
 src/Tile/TileGroup.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Tile/TileGroup.svelte b/src/Tile/TileGroup.svelte
index 4a5cc508..ada2fc64 100644
--- a/src/Tile/TileGroup.svelte
+++ b/src/Tile/TileGroup.svelte
@@ -26,11 +26,12 @@
     },
     update: (value) => {
       selectedValue.set(value);
+      dispatch("select", value);
     },
   });
 
   $: selected = $selectedValue;
-  $: dispatch("select", $selectedValue);
+  $: selectedValue.set(selected);
 </script>
 
 <fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>

From d4db64e2d1257d32d587283a478efc760ce78b7d Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 8 Jan 2022 09:37:53 -0800
Subject: [PATCH 2/4] docs(radio-tile): add reactive examples (#979)

Enabled by #971
---
 docs/src/pages/components/RadioTile.svx       | 10 ++++++
 .../framed/RadioTile/RadioTileReactive.svelte | 31 +++++++++++++++++++
 .../RadioTile/RadioTileReactiveOneWay.svelte  | 21 +++++++++++++
 3 files changed, 62 insertions(+)
 create mode 100644 docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
 create mode 100644 docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte

diff --git a/docs/src/pages/components/RadioTile.svx b/docs/src/pages/components/RadioTile.svx
index 7e807532..400b1284 100644
--- a/docs/src/pages/components/RadioTile.svx
+++ b/docs/src/pages/components/RadioTile.svx
@@ -22,6 +22,16 @@ source: Tile/RadioTile.svelte
   </RadioTile>
 </TileGroup>
 
+### Reactive (one-way binding)
+
+<FileSource src="/framed/RadioTile/RadioTileReactiveOneWay" />
+
+### Reactive (two-way binding)
+
+Binding to the `selected` prop is a more concise approach to managing state.
+
+<FileSource src="/framed/RadioTile/RadioTileReactive" />
+
 ### Light variant
 
 <TileGroup legend="Service pricing tiers">
diff --git a/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte b/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
new file mode 100644
index 00000000..51c07468
--- /dev/null
+++ b/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { TileGroup, RadioTile, Button } from "carbon-components-svelte";
+
+  const values = ["Lite plan", "Standard plan", "Plus plan"];
+
+  let selected = values[0];
+</script>
+
+<TileGroup legend="Service pricing tiers" bind:selected>
+  {#each values as value}
+    <RadioTile value="{value}">{value}</RadioTile>
+  {/each}
+</TileGroup>
+
+<div>
+  Selected: <strong>{selected}</strong>
+</div>
+
+<Button
+  size="small"
+  disabled="{selected === values[1]}"
+  on:click="{() => (selected = values[1])}"
+>
+  Set to "{values[1]}"
+</Button>
+
+<style>
+  div {
+    margin: var(--cds-spacing-05) 0;
+  }
+</style>
diff --git a/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte b/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte
new file mode 100644
index 00000000..d2b3997a
--- /dev/null
+++ b/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte
@@ -0,0 +1,21 @@
+<script>
+  import { TileGroup, RadioTile } from "carbon-components-svelte";
+
+  const values = ["Lite plan", "Standard plan", "Plus plan"];
+
+  let selected = values[0];
+</script>
+
+<TileGroup
+  legend="Service pricing tiers"
+  on:select="{({ detail }) => (selected = detail)}"
+>
+  {#each values as value}
+    <RadioTile value="{value}" checked="{selected === value}">{value}</RadioTile
+    >
+  {/each}
+</TileGroup>
+
+<br />
+
+Selected: <strong>{selected}</strong>

From 75dcf24ae53a3344d089d5205313de441a6be2ea Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 8 Jan 2022 09:40:31 -0800
Subject: [PATCH 3/4] ci: only trigger workflow on pull requests

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 634a6b65..4684f648 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,5 +1,5 @@
 name: CI
-on: [push, pull_request]
+on: [pull_request]
 jobs:
   build:
     runs-on: ubuntu-latest

From 3ca0297b5e4bf613508b0b246f2f22801467e9b5 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 8 Jan 2022 09:41:00 -0800
Subject: [PATCH 4/4] docs(modal): add multiple modals example (#980)

Refs: #975
---
 docs/src/pages/components/Modal.svx           |  4 ++
 .../pages/framed/Modal/ModalMultiple.svelte   | 38 +++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 docs/src/pages/framed/Modal/ModalMultiple.svelte

diff --git a/docs/src/pages/components/Modal.svx b/docs/src/pages/components/Modal.svx
index e4ddd46f..ee93147c 100644
--- a/docs/src/pages/components/Modal.svx
+++ b/docs/src/pages/components/Modal.svx
@@ -14,6 +14,10 @@
 
 <FileSource src="/framed/Modal/PassiveModal" />
 
+### 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`.
diff --git a/docs/src/pages/framed/Modal/ModalMultiple.svelte b/docs/src/pages/framed/Modal/ModalMultiple.svelte
new file mode 100644
index 00000000..97a0e292
--- /dev/null
+++ b/docs/src/pages/framed/Modal/ModalMultiple.svelte
@@ -0,0 +1,38 @@
+<script>
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let openCreate = false;
+  let openDelete = false;
+</script>
+
+<Button on:click="{() => (openCreate = true)}">Create database</Button>
+<Button kind="danger-tertiary" on:click="{() => (openDelete = true)}">
+  Delete database
+</Button>
+
+<Modal
+  bind:open="{openCreate}"
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary="{() => (openCreate = false)}"
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>
+
+<Modal
+  danger
+  bind:open="{openDelete}"
+  modalHeading="Delete database"
+  primaryButtonText="Delete"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary="{() => (openDelete = false)}"
+  on:open
+  on:close
+  on:submit
+>
+  <p>This is a permanent action and cannot be undone.</p>
+</Modal>