playbook_ui_docs 15.7.0.pre.rc.2 → 15.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 39318022ac52187d638e009ef528f900f31188ef406833afb88319beaa4ee9db
-  data.tar.gz: 98272e6d84b4e73e5dbcc8c9eded97fbd6aa0dd7f3a34a69d79f61a1bccace24
+  metadata.gz: 785d6561b9499279ffa5a3f2aab38571a743962d2de8f66b12b6d9beaecc60c4
+  data.tar.gz: 6875304ffd91afc147369b6de418c7ed668ae28b974bc6ac2adef136f71401ae
 SHA512:
-  metadata.gz: ff7f84555817e8624527737bf9b4a2dfdb6b9a408d610d1f2f3c09d159434f7e212ce1994dd7589b4f95f4162f1fe9d6a5b1bda06e26aab3a85415f4a770a159
-  data.tar.gz: 854dedd7ce2a2afb5945fb01b7e032924c3a7b15a16ef68dc667833a2b63c914d4769eb8c739cecfc8553b9b57e6f5f6b7efa205c07c38c2707f85700d62b1bd
+  metadata.gz: ff2ccd9f01c25491c8fb94b20cde950c1fdbbcb45d80f2ff56886d355182d1d5a43478683e9a549fd643d4af35d6bacbb08c8e1b3834d3d0961b52278fbe67b6
+  data.tar.gz: f3085b98700a563fa2a73152fa9b484e4ef85297dddc7aeea46fab8c8b0d598cb1a2a888c4138e44d041ea9c6b4ca034788708753217a27259d228cf2505d5b3

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

@@ -1,20 +1,29 @@
-<%= pb_rails("date_picker", props: {
-  mode: "range",
-  picker_id: "quick-pick-date-range",
-  placeholder: "Select a Date Range",
-  selection_type: "quickpick",
-  controls_end_id: "quick-pick-date-range-end",
-  controls_start_id: "quick-pick-date-range-start",
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-quickpick-with-date-pickers-1",
+  label: "Date Range",
+  name: "date_range",
+  margin_bottom: "sm",
+  variant: "quickpick",
+  controls_start_id: "start-date-picker-1",
+  controls_end_id: "end-date-picker-1",
+  start_date_id: "quickpick_start_date_1",
+  start_date_name: "start_date",
+  end_date_id: "quickpick_end_date_1",
+  end_date_name: "end_date"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  picker_id: "quick-pick-date-range-start",
-  placeholder: "Select a Start Date",
-  sync_start_with:"quick-pick-date-range",
+  picker_id: "start-date-picker-1",
+  label: "Start Date",
+  name: "start_date_picker",
+  placeholder: "Select Start Date",
+  sync_start_with: "dropdown-quickpick-with-date-pickers-1"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  picker_id: "quick-pick-date-range-end",
-  placeholder: "Select an End Date",
-  sync_end_with:"quick-pick-date-range",
-}) %>
+  picker_id: "end-date-picker-1",
+  label: "End Date",
+  name: "end_date_picker",
+  placeholder: "Select End Date",
+  sync_end_with: "dropdown-quickpick-with-date-pickers-1"
+}) %>

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

@@ -1,4 +1,4 @@
-You can link a Quickpick DatePicker to standard DatePickers using the following props:
+You can link a Quickpick Dropdown to standard DatePickers using the following props:
 
 **For the Quickpick DatePicker**:
 `controls_start_id`: ID of the DatePicker that should receive the start date.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.html.erb

@@ -0,0 +1,71 @@
+<% 
+  typeahead_options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca"
+    },
+    {
+      label: "Australia",
+      value: "australia",
+      id: "au"
+    },
+    {
+      label: "Germany",
+      value: "germany",
+      id: "de"
+    },
+    {
+      label: "France",
+      value: "france",
+      id: "fr"
+    },
+    {
+      label: "Japan",
+      value: "japan",
+      id: "jp"
+    },
+    {
+      label: "Brazil",
+      value: "brazil",
+      id: "br"
+    }
+  ]
+%>
+
+<%= pb_rails("button", props: { text: "Open Dialog with Overflow Visible", data: {"open-dialog": "dialog-overflow-visible"} }) %>
+
+<%= pb_rails("dialog", props: { 
+    id: "dialog-overflow-visible", 
+    size: "md", 
+    overflow: "visible"
+}) do %>
+  <%= pb_rails("dialog/dialog_header", props: { id: "dialog-overflow-visible" } ) do %>
+    <%= pb_rails("body", props: { text: "Select Location" }) %>
+  <% end %>
+  <%= pb_rails("dialog/dialog_body") do %>
+    <%= pb_rails("typeahead", props: {
+      options: typeahead_options,
+      placeholder: "Select a location...",
+      id: "location-typeahead",
+      is_multi: false,
+    }) %>
+  <% end %>
+  <%= pb_rails("dialog/dialog_footer", props: {
+    cancel_button: "Cancel",
+    confirm_button: "Save",
+    confirm_button_id: "confirm-overflow-visible",
+    id: "dialog-overflow-visible"
+  }) %>
+<% end %>
+

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+
+import Body from '../../pb_body/_body'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Typeahead from '../../pb_typeahead/_typeahead'
+
+const DialogOverflowVisible = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => setIsOpen(false)
+  const open = () => setIsOpen(true)
+
+  const typeaheadOptions = [
+    { label: "United States", value: "unitedStates", id: "us" },
+    { label: "United Kingdom", value: "unitedKingdom", id: "gb" },
+    { label: "Canada", value: "canada", id: "ca" },
+    { label: "Australia", value: "australia", id: "au" },
+    { label: "Germany", value: "germany", id: "de" },
+    { label: "France", value: "france", id: "fr" },
+    { label: "Japan", value: "japan", id: "jp" },
+    { label: "Brazil", value: "brazil", id: "br" },
+  ]
+
+  return (
+    <>
+      <Button onClick={open}>{'Open Dialog with Overflow Visible'}</Button>
+      <Dialog
+          onClose={close}
+          opened={isOpen}
+          overflow="visible"
+          size="md"
+      >
+        <Dialog.Header>
+          <Body>{'Select Location'}</Body>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Typeahead
+              options={typeaheadOptions}
+              placeholder="Select a location..."
+          />
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Button onClick={close}>{'Save'}</Button>
+          <Button
+              onClick={close}
+              variant="link"
+          >
+            {'Cancel'}
+          </Button>
+        </Dialog.Footer>
+      </Dialog>
+    </>
+  )
+}
+
+export default DialogOverflowVisible
+

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_rails.md

@@ -0,0 +1 @@
+Use the `overflow: "visible"` global prop to allow Typeahead dropdown menus to appear outside the dialog boundaries. By default, dialogs clip content that extends beyond their edges, but this prop enables pop-up elements to render above the dialog overlay. 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_react.md

@@ -0,0 +1 @@
+Use the `overflow="visible"` global prop to allow Date Picker and Typeahead dropdown menus to appear outside the dialog boundaries. By default, dialogs clip content that extends beyond their edges, but this prop enables pop-up elements to render above the dialog overlay. 

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

@@ -12,6 +12,7 @@ examples:
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
   - dialog_turbo_frames: Within Turbo Frames
+  - dialog_overflow_visible: Overflow Visible
   - dialog_closeable: Close Button in Header
 
 
@@ -26,6 +27,7 @@ examples:
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
+  - dialog_overflow_visible: Overflow Visible
   - dialog_closeable: Close Button in Header
 
   swift:

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

@@ -9,4 +9,5 @@ export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
 export { default as DialogFullHeight } from './_dialog_full_height.jsx'
 export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
 export { default as DialogLoading } from './_dialog_loading.jsx'
-export { default as DialogCloseable } from './_dialog_closeable.jsx'
+export { default as DialogOverflowVisible } from './_dialog_overflow_visible.jsx'
+export { default as DialogCloseable } from './_dialog_closeable.jsx'

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb

@@ -20,12 +20,14 @@
 
 %>
 
-<%= pb_rails("dropdown", props: {options: options}) %>
+<%= pb_rails("dropdown", props: {id: "country-dropdown", options: options}) %>
 
 <script>
   document.addEventListener("pb:dropdown:selected", (e) => {
-    const option   = e.detail;
-    const dropdown = e.target;
-    console.log("Selected option:", option);
-})
+    if (e.target.id === "country-dropdown") {
+      const option   = e.detail;
+      const dropdown = e.target;
+      console.log("Selected option:", option);
+    }
+  });
 </script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.html.erb

@@ -0,0 +1,19 @@
+
+<%= pb_rails("dropdown", props: {
+  id: "date-range-with-default",
+  label: "Date Range",
+  variant: "quickpick",
+  default_value: "This Year"
+}) %>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const dropdown = document.getElementById("date-range-with-default");
+    if (dropdown) {
+      dropdown.addEventListener("pb:dropdown:selected", (e) => {
+        const option = e.detail;
+        console.log("Selected option:", option);
+      });
+    }
+  });
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("dropdown", props: {id: "date-range-quickpick-1", label: "Date Range", variant: "quickpick"}) %>
+
+
+<script>
+  const dropdown = document.getElementById("date-range-quickpick-1");
+  if (dropdown) {
+    dropdown.addEventListener("pb:dropdown:selected", (e) => {
+      const option = e.detail;
+      console.log("Selected option:", option);
+    });
+  }
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.md

@@ -0,0 +1,26 @@
+The `quickpick` variant provides predefined date based options when `variant:"quickpick"` is used. 
+
+Open the Dropdown above to see the default options.
+
+The quickpick variant automatically generates hidden inputs for `start_date` and `end_date` which are populated when a date range is selected. These inputs are ready for form submission.
+
+You can customize the input names and IDs using the following props:
+- `start_date_name` - The name attribute for the start date input (default: `"start_date_name"`)
+- `start_date_id` - The ID attribute for the start date input (default: `"start_date_id"`)
+- `end_date_name` - The name attribute for the end date input (default: `"end_date_name"`)
+- `end_date_id` - The ID attribute for the end date input (default: `"end_date_id"`)
+
+Example with custom names:
+```ruby
+pb_rails("dropdown", props: {
+  variant: "quickpick",
+  start_date_name: "filter[start_date]",
+  start_date_id: "filter_start_date",
+  end_date_name: "filter[end_date]",
+  end_date_id: "filter_end_date"
+})
+```
+
+The Dropdown kit also comes with a custom event called "pb:dropdown:selected" which updates dynamically with the selection as it changes. See code snippet to see this in action.
+
+In addition, a data attribute called data-option-selected with the selection is also rendered on the parent dropdown div.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.html.erb

@@ -0,0 +1,19 @@
+
+<%= pb_rails("dropdown", props: {
+  id: "date-range-quickpick-end-today",
+  label: "Date Range", 
+  variant: "quickpick", 
+  range_ends_today: true 
+}) %>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const dropdown = document.getElementById("date-range-quickpick-end-today");
+    if (dropdown) {
+      dropdown.addEventListener("pb:dropdown:selected", (e) => {
+        const option = e.detail;
+        console.log("Selected option:", option);
+      });
+    }
+  });
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.md

@@ -0,0 +1 @@
+The optional `range_ends_today` prop can be used with the `quickpick` variant 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 `range_ends_today` prop is used, end date on that range will be today's date.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-quickpick-with-date-pickers-default",
+  label: "Date Range",
+  name: "date_range",
+  margin_bottom: "sm",
+  variant: "quickpick",
+  default_value: "This Month",
+  controls_start_id: "start-date-picker-default",
+  controls_end_id: "end-date-picker-default",
+  start_date_id: "quickpick_start_date_default",
+  start_date_name: "start_date",
+  end_date_id: "quickpick_end_date_default",
+  end_date_name: "end_date"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "start-date-picker-default",
+  label: "Start Date",
+  name: "start_date_picker",
+  placeholder: "Select Start Date",
+  sync_start_with: "dropdown-quickpick-with-date-pickers-default"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "end-date-picker-default",
+  label: "End Date",
+  name: "end_date_picker",
+  placeholder: "Select End Date",
+  sync_end_with: "dropdown-quickpick-with-date-pickers-default"
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.md

@@ -0,0 +1,3 @@
+This example demonstrates the 3-input pattern with a default value. The dropdown is initialized with "This Month" selected, and both DatePickers are automatically populated with the corresponding start and end dates.
+
+The default value can be set using the `default_value` prop with any of the quickpick option labels.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.html.erb

@@ -0,0 +1,29 @@
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-quickpick-with-date-pickers",
+  label: "Date Range",
+  name: "date_range",
+  margin_bottom: "sm",
+  variant: "quickpick",
+  controls_start_id: "start-date-picker",
+  controls_end_id: "end-date-picker",
+  start_date_id: "quickpick_start_date",
+  start_date_name: "start_date",
+  end_date_id: "quickpick_end_date",
+  end_date_name: "end_date"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "start-date-picker",
+  label: "Start Date",
+  name: "start_date_picker",
+  placeholder: "Select Start Date",
+  sync_start_with: "dropdown-quickpick-with-date-pickers"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "end-date-picker",
+  label: "End Date",
+  name: "end_date_picker",
+  placeholder: "Select End Date",
+  sync_end_with: "dropdown-quickpick-with-date-pickers"
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.md

@@ -0,0 +1,13 @@
+The quickpick variant can be synced with two DatePickers for a 3-input pattern. When a quickpick option is selected from the dropdown, both DatePickers are automatically populated. When either DatePicker is manually changed, the dropdown is cleared.
+
+#### Props for 3-Input Pattern:
+
+- `controls_start_id` - ID of the start DatePicker to sync with
+- `controls_end_id` - ID of the end DatePicker to sync with
+
+#### DatePicker Props:
+
+- `sync_start_with` - ID of the dropdown to clear when start date changes
+- `sync_end_with` - ID of the dropdown to clear when end date changes
+
+This pattern allows users to quickly select common date ranges or manually pick specific dates.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -47,7 +47,7 @@
 %>
 
 
-<%= pb_rails("dropdown", props: {options: options}) do %>
+<%= pb_rails("dropdown", props: {id: "user-dropdown", options: options}) do %>
     <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Select a User", custom_display: custom_display}) %>
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
@@ -71,6 +71,8 @@
 
 <script>
   document.addEventListener("pb:dropdown:selected", (e) => {
+    if (e.target.id !== "user-dropdown") return;
+    
     const option   = e.detail;
     const dropdown = e.target;
 

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

@@ -22,6 +22,11 @@ examples:
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_separators_hidden: Separators Hidden
+  - dropdown_quickpick_rails: Quick Pick Variant
+  - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
+  - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
+  - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
 
   react:
   - dropdown_default: Default

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 15.7.0.pre.rc.2
+  version: 15.7.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-12-15 00:00:00.000000000 Z
+date: 2025-12-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -816,6 +816,10 @@ files:
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.html.erb
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_rails.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_react.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_props_swift.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx
@@ -920,12 +924,21 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx