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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 48fa54ed21292bb753557e9c8175abc9b04e07c835d86bc2a42e362dd5ad4898
-  data.tar.gz: e3fa566ebd27f5b90e046c56a2e5b58fc60f33c27f254bea42565b7e56b75c5c
+  metadata.gz: af65045b9fd6e4b7e3017e555b208a0f00097bc536e3fc96d38330487393f320
+  data.tar.gz: d095e43d6e280baa202a91445a8c9e2d03167cee7f40ed3f91fa57256956eaf0
 SHA512:
-  metadata.gz: a0372d75667c45e895f60695316d3138132b694cc31c9c73135c24f527f8a269a6ea96686319f3fd2f7e3bc9ab1443e355e5e0a941c578d12abe0012ce156c83
-  data.tar.gz: 61f753d24ec060e002db18d5d552669506e4f6a0ad4161dd4ec372bc5c6324985d5ba27bfe00759e487cbd0f267e75d3ee9509d7a7f1ec02bce89d2bc6d2efcb
+  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'

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb

@@ -61,12 +61,12 @@
         ],
       },
     ],
-}] %>
+  }] %>
 
 
 <%= pb_rails("multi_level_select", props: {
     id: "default-multi-level-select",
     tree_data:treeData
-}) %>
+    }) %>
 
 

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx

@@ -74,7 +74,7 @@ const MultiLevelSelectDefault = (props) => {
       <MultiLevelSelect
           id="multiselect-default"
           onSelect={(selectedNodes) =>
-          console.log("Selected Items (default... with ids only)", selectedNodes)
+          console.log("Selected Items", selectedNodes)
           }
           treeData={treeData}
           {...props}

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md

@@ -2,4 +2,4 @@ The MultiLevelSelect kit renders a multi leveled select dropdown based on data f
 
 For the React version of the kit, the `onSelect` prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
 
-By default, the return will be an array of Id's. If you want to return the entire object, you can pass `returnCompleteData` as true. This will return an array of objects. 
+For the Rails version, the array of checked items is attached to the DOM in a data attribute titled `data-tree` on the wrapping div around  the MultiLevelSelect.

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb

@@ -64,8 +64,9 @@
     ],
   }] %>
 
+
 <%= pb_rails("multi_level_select", props: {
     id: "parent-persistence-multi-level-select",
     tree_data:treeData,
     return_all_selected: true
-}) %>
+    }) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx

@@ -74,7 +74,7 @@ const MultiLevelSelectReturnAllSelected = (props) => {
       <MultiLevelSelect
           id="multiselect-parent-persistence"
           onSelect={(selectedNodes) =>
-          console.log("Selected Items with Return All Selected Data", selectedNodes)
+          console.log("Selected Items", selectedNodes)
           }
           returnAllSelected
           treeData={treeData}

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

@@ -2,11 +2,8 @@ examples:
   rails:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
-  - multi_level_select_return_complete_data: Return Complete Data
-  - multi_level_select_with_form: With Form
   
   react:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
-  - multi_level_select_return_complete_data: Return Complete Data
   

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

@@ -1,3 +1,2 @@
 export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
-export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
-export { default as MultiLevelSelectReturnCompleteData } from './_multi_level_select_return_complete_data.jsx'
+export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'