From 04f18ae5e99527fb6cb247af41d3d05e051acd08 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Wed, 29 Jun 2022 10:14:22 -0700
Subject: [PATCH] docs(notification): add examples "Prevent default close
 behavior" (#1380)

Follow-up to #1379
---
 .../src/pages/components/InlineNotification.svx | 15 +++++++++++++++
 docs/src/pages/components/ToastNotification.svx | 17 ++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/components/InlineNotification.svx b/docs/src/pages/components/InlineNotification.svx
index 98b461d4..d976ee49 100644
--- a/docs/src/pages/components/InlineNotification.svx
+++ b/docs/src/pages/components/InlineNotification.svx
@@ -11,6 +11,21 @@ source: Notification/InlineNotification.svelte
 
 <InlineNotification title="Error:" subtitle="An internal server error occurred." />
 
+### Prevent default close behavior
+
+`InlineNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event.
+
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">
+    Svelte version 3.48.0 or greater is required.
+  </div>
+</InlineNotification>
+
+<InlineNotification title="Error" subtitle="An internal server error occurred." on:close={(e) => {
+  e.preventDefault();
+  // custom close logic (e.g., transitions)
+}} />
+
 ### Slottable title, subtitle
 
 <InlineNotification>
diff --git a/docs/src/pages/components/ToastNotification.svx b/docs/src/pages/components/ToastNotification.svx
index 80ddaed4..a430fb8e 100644
--- a/docs/src/pages/components/ToastNotification.svx
+++ b/docs/src/pages/components/ToastNotification.svx
@@ -3,7 +3,7 @@ source: Notification/ToastNotification.svelte
 ---
 
 <script>
-  import { ToastNotification } from "carbon-components-svelte";
+  import { ToastNotification, InlineNotification } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -11,6 +11,21 @@ source: Notification/ToastNotification.svelte
 
 <ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
 
+### Prevent default close behavior
+
+`ToastNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event.
+
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">
+    Svelte version 3.48.0 or greater is required.
+  </div>
+</InlineNotification>
+
+<ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" on:close={(e) => {
+  e.preventDefault();
+  // custom close logic (e.g., transitions)
+}} />
+
 ### Slottable title, subtitle, caption
 
 <ToastNotification>