playbook_ui 15.6.0.pre.alpha.play266013023 → 15.6.0.pre.alpha.play266913088

data/app/pb_kits/playbook/pb_contact/contact.html.erb

@@ -1,24 +1,23 @@
-<%= pb_content_tag do %>
-  <%= pb_rails("body", props: { 
-        tag: "span", 
-        classname: "pb_contact_kit", 
-        color: "light",
-        dark: object.dark
-  }) do %>
-    <% if contact_type == "email" %>
-      <%= pb_rails("icon", props: { 
-            custom_icon: Playbook::Engine::root.join(envelope_path),
-            fixed_width: true,
-            dark: object.dark
-      }) %>
+<% if object.unstyled %>
+  <%= content_tag :span, class: object.classname, id: object.id, data: object.data, aria: object.aria, **object.html_options do %>
+    <% if icon_enabled %>
+      <% if contact_type == "email" %>
+        <%= pb_rails("icon", props: { 
+              custom_icon: Playbook::Engine::root.join(envelope_path),
+              fixed_width: true,
+              dark: object.dark
+        }) %>
+      <% else %>
+        <%= pb_rails("icon", props: { 
+              icon: object.contact_icon, 
+              fixed_width: true,
+              dark: object.dark
+        }) %>
+      <% end %>
+      <%= " #{object.formatted_contact_value}" if object.contact_value %>
     <% else %>
-      <%= pb_rails("icon", props: { 
-            icon: object.contact_icon, 
-            fixed_width: true,
-            dark: object.dark
-      }) %>
+      <%= object.formatted_contact_value if object.contact_value %>
     <% end %>
-    <%= object.formatted_contact_value if object.contact_value %>
 
     <%= pb_rails("caption", props: { 
           text: object.contact_detail, 
@@ -27,4 +26,39 @@
           dark: object.dark
         }) if object.contact_detail %>
   <% end %>
+<% else %>
+  <%= pb_content_tag do %>
+    <%= pb_rails("body", props: { 
+          tag: "span", 
+          classname: "pb_contact_kit", 
+          color: "light",
+          dark: object.dark
+    }) do %>
+      <% if icon_enabled %>
+        <% if contact_type == "email" %>
+          <%= pb_rails("icon", props: { 
+                custom_icon: Playbook::Engine::root.join(envelope_path),
+                fixed_width: true,
+                dark: object.dark
+          }) %>
+        <% else %>
+          <%= pb_rails("icon", props: { 
+                icon: object.contact_icon, 
+                fixed_width: true,
+                dark: object.dark
+          }) %>
+        <% end %>
+        <%= " #{object.formatted_contact_value}" if object.contact_value %>
+      <% else %>
+        <%= object.formatted_contact_value if object.contact_value %>
+      <% end %>
+
+      <%= pb_rails("caption", props: { 
+            text: object.contact_detail, 
+            tag: 'span', 
+            size: 'xs',
+            dark: object.dark
+          }) if object.contact_detail %>
+    <% end %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -8,6 +8,8 @@ module Playbook
       prop :contact_type
       prop :contact_value
       prop :contact_detail
+      prop :icon_enabled, type: Playbook::Props::Boolean, default: true
+      prop :unstyled, type: Playbook::Props::Boolean, default: false
 
       def classname
         generate_classname("pb_contact_kit")
@@ -44,7 +46,15 @@ module Playbook
         elsif contact_type == "international"
           contact_value
         else
-          number_to_phone(formatted_value, area_code: true)
+          # Check if number has leading 1 (US country code)
+          # Format like "+1 (212) 555-1234"
+          intl_code = ""
+          cleaned_number = formatted_value
+          if cleaned_number.length == 11 && cleaned_number.start_with?("1")
+            intl_code = "+1 "
+            cleaned_number = cleaned_number.sub(/^1/, "")
+          end
+          "#{intl_code}#{number_to_phone(cleaned_number, area_code: true)}"
         end
       end
 

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -149,3 +149,79 @@ test('international contact type preserves original format', () => {
   const kit = screen.getByTestId('test-international-format')
   expect(kit).toHaveTextContent('+44 20 7946 0958')
 })
+
+test('iconEnabled prop hides icon when false', () => {
+  render(
+    <>
+      <Contact
+          contactType="home"
+          contactValue="2125551234"
+          data={{ testid: 'test-with-icon' }}
+          iconEnabled
+      />
+      <Contact
+          contactType="home"
+          contactValue="2125551234"
+          data={{ testid: 'test-without-icon' }}
+          iconEnabled={false}
+      />
+    </>
+  )
+
+  // With icon enabled, should have icon
+  expect(screen.getByTestId('test-with-icon').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  
+  // Without icon, should not have icon
+  expect(screen.getByTestId('test-without-icon').querySelector('.pb_custom_icon')).not.toBeInTheDocument()
+  
+  // But should still have the formatted phone number
+  expect(screen.getByTestId('test-without-icon')).toHaveTextContent('(212) 555-1234')
+})
+
+test('unstyled prop renders without Body wrapper', () => {
+  render(
+    <>
+      <Contact
+          contactType="home"
+          contactValue="2125551234"
+          data={{ testid: 'test-styled' }}
+      />
+      <Contact
+          contactType="home"
+          contactValue="2125551234"
+          data={{ testid: 'test-unstyled' }}
+          unstyled
+      />
+    </>
+  )
+
+  // Styled version should have Body wrapper with pb_contact_kit class
+  const styled = screen.getByTestId('test-styled')
+  const styledBody = styled.querySelector('span.pb_contact_kit')
+  expect(styledBody).toBeInTheDocument()
+  expect(styledBody).toHaveTextContent('(212) 555-1234')
+
+  // Unstyled version should be a span without Body wrapper
+  const unstyled = screen.getByTestId('test-unstyled')
+  expect(unstyled.tagName).toBe('SPAN')
+  expect(unstyled.querySelector('span.pb_contact_kit')).not.toBeInTheDocument()
+  expect(unstyled).toHaveTextContent('(212) 555-1234')
+})
+
+test('unstyled and iconEnabled work together', () => {
+  render(
+    <Contact
+        contactType="home"
+        contactValue="2125551234"
+        data={{ testid: 'test-unstyled-no-icon' }}
+        iconEnabled={false}
+        unstyled
+    />
+  )
+
+  const kit = screen.getByTestId('test-unstyled-no-icon')
+  expect(kit.tagName).toBe('SPAN')
+  expect(kit.querySelector('.pb_custom_icon')).not.toBeInTheDocument()
+  expect(kit.querySelector('.pb_body_kit')).not.toBeInTheDocument()
+  expect(kit).toHaveTextContent('(212) 555-1234')
+})

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("body", props: { color: "default" }) do %>
+  <%= pb_rails("contact", props: { 
+        contact_value: "2125551234",
+        icon_enabled: false,
+        unstyled: true
+  }) %>
+<% end %>
+
+<%= pb_rails("body", props: { color: "light" }) do %>
+  <%= pb_rails("contact", props: { 
+        contact_value: "12125551234",
+        icon_enabled: false,
+        unstyled: true
+  }) %>
+<% end %>
+
+<%= pb_rails("body", props: { color: "lighter" }) do %>
+  <%= pb_rails("contact", props: { 
+        contact_value: "4155551234",
+        icon_enabled: false,
+        unstyled: true
+  }) %>
+<% end %>
+
+<%= pb_rails("body", props: { color: "default" }) do %>
+  <%= pb_rails("contact", props: { 
+        contact_type: "extension",
+        contact_value: "1234",
+        icon_enabled: false,
+        unstyled: true
+  }) %>
+<% end %>
+

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import Contact from "../../pb_contact/_contact"
+import Body from "../../pb_body/_body"
+
+const ContactUnstyled = (props) => {
+  return (
+    <div>
+      <Body color="default">
+        <Contact
+            contactValue="2125551234"
+            iconEnabled={false}
+            unstyled
+            {...props}
+        />
+      </Body>
+      <Body color="light">
+        <Contact
+            contactValue="12125551234"
+            iconEnabled={false}
+            unstyled
+            {...props}
+        />
+      </Body>
+      <Body color="lighter">
+        <Contact
+            contactValue="4155551234"
+            iconEnabled={false}
+            unstyled
+            {...props}
+        />
+      </Body>
+      <Body color="default">
+        <Contact
+            contactType="extension"
+            contactValue="1234"
+            iconEnabled={false}
+            unstyled
+            {...props}
+        />
+      </Body>
+    </div>
+  )
+}
+
+export default ContactUnstyled
+

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_rails.md

@@ -0,0 +1,2 @@
+Use the Contact kit with `icon_enabled: false` and `unstyled: true` to display phone numbers with full typography control. When `unstyled: true`, the Contact kit renders just the formatted text without a Body wrapper, allowing you to wrap it in your own Typography kit to control the color and styling.
+

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_react.md

@@ -0,0 +1,2 @@
+Use the Contact kit with `iconEnabled={false}` and `unstyled` to display phone numbers with full typography control. With `unstyled`, the Contact kit renders just the formatted text without a Body wrapper, allowing you to wrap it in your own Typography kit to control the color and styling.
+

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

@@ -3,11 +3,13 @@ examples:
   rails:
   - contact_default: Default
   - contact_with_detail: Detail Indicator
+  - contact_unstyled: Unstyled
 
 
   react:
   - contact_default: Default
   - contact_with_detail: Detail Indicator
+  - contact_unstyled: Unstyled
 
 
   swift:

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

@@ -1,2 +1,3 @@
 export { default as ContactDefault } from './_contact_default.jsx'
 export { default as ContactWithDetail } from './_contact_with_detail.jsx'
+export { default as ContactUnstyled } from './_contact_unstyled.jsx'

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

@@ -570,10 +570,16 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
         const element = document.querySelector(`#${syncStartWith}`) as any;
-        // Check if it's a Dropdown QuickPick (has _dropdownRef) or DatePicker QuickPick (has _flatpickr)
+        // Check if it's a React Dropdown (has _dropdownRef)
         if (element?._dropdownRef?.current) {
           element._dropdownRef.current.clearSelected();
-        } else {
+        }
+        // Check if it's a Rails Dropdown (has _pbDropdownInstance)
+        else if (element?._pbDropdownInstance) {
+          element._pbDropdownInstance.clearSelected();
+        }
+        // Check if it's a DatePicker QuickPick (has _flatpickr)
+        else {
           const quickpick = element?._flatpickr;
           quickpick?.clear();
         }
@@ -586,10 +592,16 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     picker.config.onClose.push((selectedDates: string) => {
       if (selectedDates?.length) {
         const element = document.querySelector(`#${syncEndWith}`) as any;
-        // Check if it's a Dropdown QuickPick (has _dropdownRef) or DatePicker QuickPick (has _flatpickr)
+        // Check if it's a React Dropdown (has _dropdownRef)
         if (element?._dropdownRef?.current) {
           element._dropdownRef.current.clearSelected();
-        } else {
+        }
+        // Check if it's a Rails Dropdown (has _pbDropdownInstance)
+        else if (element?._pbDropdownInstance) {
+          element._pbDropdownInstance.clearSelected();
+        }
+        // Check if it's a DatePicker QuickPick (has _flatpickr)
+        else {
           const quickpick = element?._flatpickr;
           quickpick?.clear();
         }

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.