Merge branch 'master' into tile-required

.github/workflows/ci.yml

@@ -1,5 +1,5 @@
 name: CI
-on: [push, pull_request]
+on: [pull_request]
 jobs:
   build:
     runs-on: ubuntu-latest

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`.

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

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>

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>

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>

src/Tile/TileGroup.svelte

@@ -39,13 +39,14 @@
     },
     update: (value) => {
       selectedValue.set(value);
+      dispatch("select", value);
     },
   });
 
   $: selected = $selectedValue;
+  $: selectedValue.set(selected);
   $: inputsName.set(name);
   $: inputsRequired.set(required);
-  $: dispatch("select", $selectedValue);
 </script>
 
 <fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>