playbook_ui 14.18.0.pre.alpha.PLAY20787400 → 14.18.0.pre.alpha.play2034zonesandcolors7407

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eaa89f27b581b891e8f2e308b3c2878cae2b2073485c731ab1f2143ce5201c43
-  data.tar.gz: 43c6a430f135f407da1de984fc6eb79d4aad2c5ca6e3228e22648c7a5df640b5
+  metadata.gz: 82af6f41e074ccd0c1072ae79ddb0855e52a009457ef0bba28f1e69184b1e1c9
+  data.tar.gz: 37b9ca3d21cbe1ef755604dac8072152649e5f8311860b5bcd02e12144153ec2
 SHA512:
-  metadata.gz: 03ec5e9d380203c29d2ec6335961b6bbdc600b5f52186145a4dfc8a57bbb470d12bccb0b720a56620418236b945a488ad04b3421d865d4039e656ac88e2a8e45
-  data.tar.gz: 40f77a4576409998dff40d9ef56b172aa09b891ec42db213cf14f11ce31659cd1ec89135e2ed8b803f52318ba7c9556846e16aa9d10bde2569c78a7ee3bf13f7
+  metadata.gz: ead03cac479441c769277d456c4caec0f7709340dfeec40acee19d00b55053cd16d6eb5332472958b89f928db25063cb748bd8149d4593b052303fd9a88900a2
+  data.tar.gz: f231e8c3219d2968d1632f2663c911f3331624c7bfe3da26adc3105ad26154d701543ccb8b8b83f2b6233bf2f175a37fada397697b5f814ccc1ff2b5959f8634

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -50,10 +50,6 @@ type DatePickerProps = {
   timeFormat?: string,
   type?: string,
   yearRange?: number[],
-  controlsStartId?: string,
-    controlsEndId?: string,
-    syncStartWith?: string,
-    syncEndWith?: string,
 } & GlobalProps
 
 const DatePicker = (props: DatePickerProps): React.ReactElement => {
@@ -102,10 +98,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     staticPosition = true,
     thisRangesEndToday = false,
     yearRange = [1900, 2100],
-    controlsStartId,
-    controlsEndId,
-    syncStartWith,
-    syncEndWith,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -142,10 +134,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       staticPosition,
       thisRangesEndToday,
       yearRange,
-      controlsStartId,
-      controlsEndId,
-      syncStartWith,
-      syncEndWith,
       required: false,
     }, scrollContainer)
   }, initializeOnce ? [] : undefined)

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -77,14 +77,6 @@ module Playbook
                                default: ""
       prop :validation_message, type: Playbook::Props::String,
                                 default: ""
-      prop :controls_start_id, type: Playbook::Props::String,
-                               default: ""
-      prop :controls_end_id, type: Playbook::Props::String,
-                             default: ""
-      prop :sync_start_with, type: Playbook::Props::String,
-                             default: ""
-      prop :sync_end_with, type: Playbook::Props::String,
-                           default: ""
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -116,10 +108,6 @@ module Playbook
           staticPosition: static_position,
           thisRangesEndToday: this_ranges_end_today,
           yearRange: year_range,
-          controlsStartId: controls_start_id,
-          controlsEndId: controls_end_id,
-          syncStartWith: sync_start_with,
-          syncEndWith: sync_end_with,
         }.to_json.html_safe
       end
 

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -32,11 +32,7 @@ type DatePickerConfig = {
   thisRangesEndToday?: boolean,
   timeCaption?: string,
   timeFormat?: string,
-  yearRange: number[],
-  controlsStartId?: string,
-    controlsEndId?: string,
-    syncStartWith?: string,
-    syncEndWith?: string,
+  yearRange: number[]
 } & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
 
 const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
@@ -71,10 +67,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     timeCaption = 'Select Time',
     timeFormat = 'at h:i K',
     yearRange,
-    controlsStartId,
-    controlsEndId,
-    syncStartWith,
-    syncEndWith,
   } = config
 
   // ===========================================================
@@ -283,47 +275,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     })
   }
 
-  // === Automatic Sync Logic for 3 input range pattern===
-
-  // If this is a quickpick that controls start and end
-  if (selectionType === "quickpick" && (controlsStartId || controlsEndId)) {
-    picker.config.onClose.push((selectedDates:string) => {
-      const [start, end] = selectedDates;
-
-      if (controlsStartId) {
-        const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-        startPicker?.setDate(start, true);
-      }
-
-      if (controlsEndId) {
-        const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-        endPicker?.setDate(end, true);
-      }
-    });
-  }
-
-  // If this is a start picker that syncs with a quickpick
-  if (syncStartWith) {
-    picker.config.onClose.push((selectedDates: string) => {
-      if (selectedDates?.length) {
-        const quickpick = (document.querySelector(`#${syncStartWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-        quickpick?.clear();
-      }
-    });
-  }
-
-  // If this is an end picker that syncs with a quickpick
-  if (syncEndWith) {
-    picker.config.onClose.push((selectedDates: string) => {
-      if (selectedDates?.length) {
-        const quickpick = (document.querySelector(`#${syncEndWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-        quickpick?.clear();
-      }
-    });
-  }
-// === End of Automatic Sync Logic ===
-
-    
   // Adding dropdown icons to year and month select
   dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
   if (picker.monthElements[0].parentElement) {

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

@@ -1,11 +1,14 @@
 import React from 'react'
 
 import DatePicker from '../_date_picker'
+import Icon from '../../pb_icon/_icon'
 
 const DatePickerError = (props) => (
   <div>
     <DatePicker
-        error="Invalid date. Please pick a valid date."
+        error={<>
+          <Icon icon="warning" /> Invalid date. Please pick a valid date.
+        </>}
         pickerId="date-picker-error"
         {...props}
     />

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

@@ -1,7 +1,3 @@
-To use the `quickpick`:
-- prop `mode` must be set to `range`
-- prop `selection_type` must be set to `quickpick`
-
 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.md

@@ -1 +1 @@
-Use `this_ranges_end_today`/`thisRangesEndToday` to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if the `this_ranges_end_today`/`thisRangesEndToday` prop is used, end date on that range will be today's date.
+Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.

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

@@ -1,5 +1 @@
-To use the `quickpick`:
-- prop `mode` must be set to `range`
-- prop `selectionType` must be set to `quickpick`
-
-Use the `onClose` handler function to access the startDate and endDate values. Check the [`onClose` example](https://playbook.powerapp.cloud/kits/date_picker/react#onclose) for more information.
+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

@@ -15,7 +15,6 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
-  - date_picker_range_pattern_rails: Range with 2 Date Pickers and a Quick Pick
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -48,7 +47,6 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
-  - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
   - 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

@@ -26,4 +26,3 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
 export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
-export { default as DatePickerRangePattern } from './_date_picker_range_pattern'

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -238,16 +238,6 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
       },
 
       onClose(selectedDates: Array<Date>) {
-        // Patch .clear() to also remove active state if cleared
-        const originalClear = fp.clear;
-        fp.clear = function (...args: any) {
-          const current = pluginData.rangesNav.querySelector('.active');
-          if (current) {
-            current.classList.remove('active');
-          }
-          activeLabel = "";
-          return originalClear.apply(this, args);
-        };
         // remove the active class from the button if the selected dates don't match the label
         if (!isLabelMatchingSelectedDates(selectedDates)) {
           pluginData.rangesButtons[activeLabel]?.classList.remove('active');

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb

@@ -0,0 +1,43 @@
+<% data_shadow = [
+  { id: "51", text: "Task 1" },
+  { id: "52", text: "Task 2" },
+  { id: "53", text: "Task 3" }
+] %>
+
+<% data_outline = [
+  { id: "61", text: "Task 1" },
+  { id: "62", text: "Task 2" },
+  { id: "63", text: "Task 3" }
+] %>
+
+<%= pb_rails("flex", props: { justify: "around" }) do %>
+  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
+    <%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
+      <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
+      <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
+        <% data_shadow.each do |item| %>
+          <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
+            <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
+              <%= pb_rails("body", props: { text: item[:text] }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
+    <%= pb_rails("draggable", props: { drop_zone_type: "outline", initial_items: data_outline }) do %>
+      <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outline", text_align: "center" }) %>
+      <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
+        <% data_outline.each do |item| %>
+          <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
+            <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
+              <%= pb_rails("body", props: { text: item[:text] }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb

@@ -0,0 +1,55 @@
+<% initial_items = [
+  {
+    id: "141",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "142",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "143",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<% next_init_items = [
+  {
+    id: "151",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "152",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "153",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "shadow", drop_zone_color: "primary"}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("flex", props: { gap: "sm" }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<br/>
+
+<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "outline", drop_zone_color: "purple"}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("flex", props: { gap: "sm" }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md

@@ -0,0 +1 @@
+  The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options.

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

@@ -17,5 +17,6 @@ examples:
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
+  - draggable_drop_zones: Draggable Drop Zones
+  - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_event_listeners: Draggable Event Listeners
-

data/app/pb_kits/playbook/pb_draggable/draggable.rb

@@ -5,9 +5,17 @@ module Playbook
     class Draggable < ::Playbook::KitBase
       prop :initial_items, type: Playbook::Props::Array,
                            default: []
+      prop :drop_zone_type, type: Playbook::Props::Enum,
+                            values: %w[ghost shadow outline line],
+                            default: "ghost"
+      prop :drop_zone_color, type: Playbook::Props::Enum,
+                             values: %w[neutral primary purple],
+                             default: "neutral"
 
       def data
-        Hash(prop(:data)).merge(pb_draggable: true)
+        Hash(prop(:data)).merge(pb_draggable: true,
+                                drop_zone_type: drop_zone_type,
+                                drop_zone_color: drop_zone_color)
       end
 
       def classname