From bf5506a6a1285d721ef1372ffd2cb9144553f456 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 14 May 2022 11:35:36 -0700
Subject: [PATCH] docs(date-picker): update docs on `flatpickrProps.static`

---
 docs/src/pages/components/DatePicker.svx         | 16 ++++++++++------
 .../framed/DatePicker/DatePickerModal.svelte     |  2 +-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index 732690a8..b7911757 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -69,6 +69,16 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
   </div>
 </InlineNotification>
 
+Carbon uses the zero dependency [flatpickr](https://github.com/flatpickr/flatpickr) library for its underlying calendar implementation.
+
+Set `datePickerType` to `"single"` or `"range"` for the calendar functionality.
+
+By default, the `flatpickr` option `static` is set to `true` so that the calendar is positioned inside the wrapper and next to the input element. This is required for the calendar position to work inside a [Modal](/components/Modal).
+
+Set `flatpickrProps.static` to `false` to opt out of this behavior.
+
+Specify [flatpickr options](https://flatpickr.js.org/options/) through the `flatpickrProps` prop.
+
 <FileSource src="/framed/DatePicker/DatePickerSingle" />
 
 ### Range
@@ -77,12 +87,6 @@ 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 ea33e5e9..af4eb2ad 100644
--- a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
+++ b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
@@ -8,7 +8,7 @@
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"
 >
-  <DatePicker datePickerType="single" flatpickrProps="{{ static: true }}">
+  <DatePicker datePickerType="single" style="min-height: 420px">
     <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
   </DatePicker>
 </Modal>