playbook_ui_docs 12.26.0.pre.alpha.multiselectfixes825 → 12.26.1.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown831

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1748b24cf07ed87f1e0d80a63ed993153b9aea577af65b1edf8a78e88820e240
-  data.tar.gz: '015459004e58d7a8ff95e3046205e72c2d04190c6412e1e095f5b17e4efb0082'
+  metadata.gz: af65045b9fd6e4b7e3017e555b208a0f00097bc536e3fc96d38330487393f320
+  data.tar.gz: d095e43d6e280baa202a91445a8c9e2d03167cee7f40ed3f91fa57256956eaf0
 SHA512:
-  metadata.gz: ae91798b77e0105c86d6a46f6d2280a395337556bbbc67b1c627e29f28f3d4374242116d8a73516d074d9a2558c9f2381350f0c472b42193032eb9b3d8f04bb6
-  data.tar.gz: 2bbd87b9fac84f86fb5a67ad3581b845a069517ad0518eebdcc65e5cf3e188f15b5f629b67e0a2aa7ff140c71093d3c6e0e9244a88d5f988dd086597be2a32f8
+  metadata.gz: 506715be37c5d6f1a12bb4a8eac600900bbde3321d6d89aa37a696c21073167d3fbb86cd8c415e6efbb1b885ced1dcb9121dbd2e7257780854d33b71b569be3c
+  data.tar.gz: 56b0a77981d2bba8dc955cc7a52ec2d3bb2beeef28dfb9e8baecce5c4d4b712c0cd4653bdacfcb49ebdb203a26fc6b80792c9eef0c591a244b05d003c3eadd67

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  end_date_id: "quick-pick-end-date",
+  end_date_name: "quick-pick-end-date",
+  mode: "range",
+  picker_id: "date-picker-quick-pick",
+  placeholder: "mm/dd/yyyy → mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "quick-pick-start-date",
+  start_date_name: "quick-pick-start-date"
+}) %>
+

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md

@@ -0,0 +1,3 @@
+This date range variant uses hidden inputs to handle start and end dates. While they are not required props, it is advisable to specify a unique `start_date_id`, `start_date_name`, `end_date_id`, and `end_date_name` for each quick pick instance you place in a form and/or on a page.
+
+Like all other date pickers, the quick pick does require a `picker_id`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  end_date_id: "range-limit-end-date",
+  end_date_name: "range-limit-end-date",
+  mode: "range",
+  picker_id: "thisRangesEndToday",
+  placeholder: "mm/dd/yyyy → mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "range-limit-start-date",
+  start_date_name: "range-limit-start-date",
+  this_ranges_end_today: true
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import DatePicker from '../_date_picker'
+
+const DatePickerQuickPickRangeLimit = (props) => (
+  <>
+    <DatePicker
+        allowInput
+        mode="range"
+        pickerId="thisRangesEndToday"
+        placeholder="mm/dd/yyyy → mm/dd/yyyy"
+        selectionType="quickpick"
+        thisRangesEndToday
+        {...props}
+    />
+  </>
+)
+
+export default DatePickerQuickPickRangeLimit

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md

@@ -0,0 +1 @@
+Applying `this_ranges_end_today` (Rails) or `thisRangesEndToday` (React) causes all “This” preset ranges (i.e., this week, this month, this quarter, this year) to use an endDate of today, instead of their natural end date in the future.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import DatePicker from '../_date_picker'
+
+const DatePickerQuickPickReact = (props) => (
+  <>
+    <DatePicker
+        allowInput
+        mode="range"
+        pickerId="date-picker-quick-pick"
+        placeholder="mm/dd/yyyy → mm/dd/yyyy"
+        selectionType="quickpick"
+        {...props}
+    />
+  </>
+)
+
+export default DatePickerQuickPickReact

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md

@@ -0,0 +1 @@
+Use the `onChange` handler function to access the startDate and endDate values. Check the [`onChange` example](https://playbook.powerapp.cloud/kits/date_picker/react#onchange) for more information.

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -8,6 +8,8 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_range: Range
+  - date_picker_quick_pick_rails: Range (Quick Pick)
+  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -33,6 +35,8 @@ examples:
   - date_picker_on_change: onChange
   - date_picker_on_close: onClose
   - date_picker_range: Range
+  - date_picker_quick_pick_react: Range (Quick Pick)
+  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -19,4 +19,6 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
 export { default as DatePickerAllowInput } from './_date_picker_allow_input'
-export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
+export { default as DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
+export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'