From 373feac05470940d47a23b3390591fd2f9573fc1 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 1 Jan 2022 10:05:12 -0800
Subject: [PATCH] docs(date-picker): improve "DatePicker in a modal" example

---
 docs/src/pages/components/DatePicker.svx                | 6 ++++++
 docs/src/pages/framed/DatePicker/DatePickerModal.svelte | 7 ++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index 30dd2a96..1374344f 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -71,6 +71,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 
 ### DatePicker in a modal
 
+Use `flatpickrProps` to set `static: true` for the calendar to be positioned relative to the input element.
+
+This is needed when placing a `DatePicker` inside of a `Modal` component.
+
+Refer to [flatpickr options](https://flatpickr.js.org/options/) for a full list of config options.
+
 <FileSource src="/framed/DatePicker/DatePickerModal" />
 
 ### Skeleton
diff --git a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
index 3940d610..ea33e5e9 100644
--- a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
+++ b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
@@ -2,7 +2,12 @@
   import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte";
 </script>
 
-<Modal open modalHeading="DatePicker">
+<Modal
+  open
+  modalHeading="Meeting date"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+>
   <DatePicker datePickerType="single" flatpickrProps="{{ static: true }}">
     <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
   </DatePicker>