From db520b99dc54d8e32ef1809713db0c63846b1f31 Mon Sep 17 00:00:00 2001
From: Nicco <hi@nicco.io>
Date: Thu, 4 Nov 2021 23:51:57 +0000
Subject: [PATCH] move to frame

---
 docs/src/pages/components/DatePicker.svx          | 15 +++++----------
 .../framed/DatePicker/DatePickerModal.svelte      |  9 +++++++++
 2 files changed, 14 insertions(+), 10 deletions(-)
 create mode 100644 docs/src/pages/framed/DatePicker/DatePickerModal.svelte

diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index 039f5054..30dd2a96 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -3,19 +3,10 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 ---
 
 <script>
-  import { DatePicker, DatePickerSkeleton, DatePickerInput, InlineNotification, CodeSnippet } from "carbon-components-svelte";
+  import { DatePicker, DatePickerSkeleton, DatePickerInput } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
-
-  const modalCodeSnippet = `<DatePicker datePickerType="single" flatpickrProps="{{ static: true }}">
-  <DatePickerInput />
-</DatePicker>"/>`
 </script>
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
-  <span class="body-short-01">If you are using the DatePicker inside of a Modal you might need to add <code>static</code> to the <code>flatpickrProps</code> as shown below to correct the positioning.</span>
-</InlineNotification>
-<CodeSnippet type="multi" code={modalCodeSnippet}/>
-
 ### Default (simple)
 
 <DatePicker>
@@ -78,6 +69,10 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 
 <FileSource src="/framed/DatePicker/DatePickerRange" />
 
+### DatePicker in a modal
+
+<FileSource src="/framed/DatePicker/DatePickerModal" />
+
 ### Skeleton
 
 <DatePickerSkeleton />
diff --git a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
new file mode 100644
index 00000000..23a855b0
--- /dev/null
+++ b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<Modal>
+  <DatePicker flatpickrProps="{{ static: true }}">
+    <DatePickerInput />
+  </DatePicker>"/>
+</Modal>