From 4e29ca8b7cb1ed4f7fd3edb187ee2f016b311d08 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 27 Aug 2022 11:10:28 -0700
Subject: [PATCH] docs(expandable-tile): add "With interactive content" example

#1464
---
 docs/src/pages/components/ExpandableTile.svx | 24 ++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/ExpandableTile.svx b/docs/src/pages/components/ExpandableTile.svx
index 680cac9d..56be8c24 100644
--- a/docs/src/pages/components/ExpandableTile.svx
+++ b/docs/src/pages/components/ExpandableTile.svx
@@ -3,7 +3,7 @@ source: Tile/ExpandableTile.svelte
 ---
 
 <script>
-  import { ExpandableTile } from "carbon-components-svelte";
+  import { ExpandableTile, Button } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -33,4 +33,24 @@ source: Tile/ExpandableTile.svelte
 <ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
   <div slot="above" style="height: 10rem">Above the fold content here</div>
   <div slot="below" style="height: 10rem">Below the fold content here</div>
-</ExpandableTile>
\ No newline at end of file
+</ExpandableTile>
+
+## With interactive content
+
+For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.
+
+<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
+  <div slot="above" style="height: 10rem">
+    <a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
+      Native element
+    </a>
+    <br /><br />
+    <Button on:click={e => {
+      e.stopPropagation();
+      console.log("Hello world");
+    }}>
+      Svelte component
+    </Button>
+  </div>
+  <div slot="below" style="height: 10rem">Below the fold content here</div>
+</ExpandableTile>