playbook_ui 15.6.0 → 15.7.0.pre.alpha.play263313229

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

@@ -275,6 +275,80 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   const { setMinDate, setMaxDate } = getMinMaxDates()
 
+  // Default Date + Min/Max Date Initialization Helper Functions section ----/
+  const toDateObject = (dateValue: any): Date | null => {
+    if (!dateValue) return null
+    if (dateValue instanceof Date) return dateValue
+    if (typeof dateValue === 'string') {
+      const parsed = new Date(dateValue)
+      return isNaN(parsed.getTime()) ? null : parsed
+    }
+    if (typeof dateValue === 'number') {
+      return new Date(dateValue)
+    }
+    return null
+  }
+
+  // Formatting Date for Flatpickr
+  const formatDateForFlatpickr = (dateValue: any): string | null => {
+    const dateObj = toDateObject(dateValue)
+    if (!dateObj) return null
+    
+    const year = dateObj.getFullYear()
+    const month = String(dateObj.getMonth() + 1).padStart(2, '0')
+    const day = String(dateObj.getDate()).padStart(2, '0')
+    return `${year}-${month}-${day}`
+  }
+
+  // Helper to check if defaultDate is earlier than minDate
+  const isDefaultDateBeforeMinDate = (defaultDateValue: any, minDateValue: any): boolean => {
+    if (!defaultDateValue || !minDateValue) return false
+    
+    const defaultDateObj = toDateObject(defaultDateValue)
+    const minDateObj = toDateObject(minDateValue)
+    
+    if (!defaultDateObj || !minDateObj) return false
+
+    const defaultDateOnly = new Date(defaultDateObj.getFullYear(), defaultDateObj.getMonth(), defaultDateObj.getDate())
+    const minDateOnly = new Date(minDateObj.getFullYear(), minDateObj.getMonth(), minDateObj.getDate())
+    
+    return defaultDateOnly < minDateOnly
+  }
+
+  // Helper to check if defaultDate is later than maxDate
+  const isDefaultDateAfterMaxDate = (defaultDateValue: any, maxDateValue: any): boolean => {
+    if (!defaultDateValue || !maxDateValue) return false
+    
+    const defaultDateObj = toDateObject(defaultDateValue)
+    const maxDateObj = toDateObject(maxDateValue)
+    
+    if (!defaultDateObj || !maxDateObj) return false
+    
+    const defaultDateOnly = new Date(defaultDateObj.getFullYear(), defaultDateObj.getMonth(), defaultDateObj.getDate())
+    const maxDateOnly = new Date(maxDateObj.getFullYear(), maxDateObj.getMonth(), maxDateObj.getDate())
+    
+    return defaultDateOnly > maxDateOnly
+  }
+
+  const defaultDateValue: any = defaultDateGetter()
+  // Only check for and out-of-range if user actually provided minDate/maxDate constraints
+  const isBeforeMin = minDate && isDefaultDateBeforeMinDate(defaultDateValue, setMinDate)
+  const isAfterMax = maxDate && isDefaultDateAfterMaxDate(defaultDateValue, setMaxDate)
+  
+  // Store these values for use in onClose handler
+  const hasOutOfRangeDefault = (isBeforeMin || isAfterMax) && defaultDateValue
+  
+  // Temporarily adjust minDate/maxDate to allow defaultDate to render if it's out of range via user provided minDate/maxDate constraints
+  const effectiveMinDate = isBeforeMin && defaultDateValue && minDate
+    ? formatDateForFlatpickr(defaultDateValue) || setMinDate
+    : setMinDate
+  
+  const effectiveMaxDate = isAfterMax && defaultDateValue && maxDate
+    ? formatDateForFlatpickr(defaultDateValue) || setMaxDate
+    : setMaxDate
+  
+  // End of Default Date + Min/Max Date Initialization Helper Functions section ----/
+  
   flatpickr(`#${pickerId}`, {
     allowInput,
     closeOnSelect,
@@ -286,11 +360,32 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     locale: {
       rangeSeparator: ' to '
     },
-    maxDate: setMaxDate,
-    minDate: setMinDate,
+    maxDate: effectiveMaxDate,
+    minDate: effectiveMinDate,
     mode,
     nextArrow: '<i class="far fa-angle-right"></i>',
     onOpen: [(_selectedDates, _dateStr, fp) => {
+      // If defaultDate was out of range of a dev set min/max date, restore it when calendar opens (in situation where the input was manually cleared or the calendar was closed without selection)
+      if (hasOutOfRangeDefault) {
+        const dateObj = toDateObject(defaultDateValue)
+        if (dateObj) {
+          const inputIsBlank = !fp.input.value || fp.input.value.trim() === ''
+          const noSelection = !fp.selectedDates || fp.selectedDates.length === 0
+          
+          if (inputIsBlank || noSelection) {
+            const formattedDate = fp.formatDate(dateObj, getDateFormat())
+            if (formattedDate) {
+              fp.input.value = formattedDate
+            }
+            fp.selectedDates = [dateObj]
+            fp.jumpToDate(dateObj)
+            setTimeout(() => {
+              yearChangeHook(fp)
+            }, 0)
+          }
+        }
+      }
+      
       calendarResizer()
       if (resizeRepositionHandlerRef) {
         window.removeEventListener('resize', resizeRepositionHandlerRef)
@@ -303,12 +398,30 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
       positionCalendarIfNeeded(fp)
     }],
-    onClose: [(selectedDates, dateStr) => {
+    onClose: [(selectedDates, dateStr, fp) => {
       if (resizeRepositionHandlerRef) {
         window.removeEventListener('resize', resizeRepositionHandlerRef)
         resizeRepositionHandlerRef = null
       }
       if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
+      
+      // If defaultDate was out of range and no date was selected, preserve the default date
+      if (hasOutOfRangeDefault && (!selectedDates || selectedDates.length === 0)) {
+        const dateObj = toDateObject(defaultDateValue)
+        if (dateObj && fp.input) {
+          const formattedDate = fp.formatDate(dateObj, getDateFormat())
+          if (formattedDate) {
+            setTimeout(() => {
+              if (fp.input && (!fp.selectedDates || fp.selectedDates.length === 0)) {
+                fp.input.value = formattedDate
+                fp.selectedDates = [dateObj]
+                fp.jumpToDate(dateObj)
+              }
+            }, 0)
+          }
+        }
+      }
+      
       onClose(selectedDates, dateStr)
     }],
     onChange: [(selectedDates, dateStr, fp) => {
@@ -330,6 +443,71 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
   picker.innerContainer.parentElement.id = `cal-${pickerId}`
 
+  // If defaultDate was out of range, restore the original minDate/maxDate after initialization (defaultDate displayed, still cannot select dates outside the actual range via user provided minDate/maxDate constraints)
+  if ((isBeforeMin || isAfterMax) && defaultDateValue) {
+    const dateObj = toDateObject(defaultDateValue)
+    const formattedDate = dateObj ? picker.formatDate(dateObj, getDateFormat()) : null
+    
+    setTimeout(() => {
+      if (!dateObj || !picker.input || !formattedDate) return
+
+      picker.setDate(dateObj, false)
+
+      if (isBeforeMin && setMinDate && minDate) {
+        picker.set('minDate', setMinDate)
+      }
+      if (isAfterMax && setMaxDate && maxDate) {
+        picker.set('maxDate', setMaxDate)
+      }
+      picker.input.value = formattedDate
+
+      picker.selectedDates = [dateObj]
+      
+      setTimeout(() => {
+        yearChangeHook(picker)
+      }, 0)
+      
+      // Restore function for out-of-range default dates
+      const restoreOutOfRangeValue = () => {
+        if (!picker.input) return
+        
+        const inputIsBlank = !picker.input.value || picker.input.value.trim() === ''
+        const noSelection = !picker.selectedDates || picker.selectedDates.length === 0
+        
+        if (inputIsBlank || noSelection) {
+          setTimeout(() => {
+            if (picker.input && (!picker.input.value || picker.input.value.trim() === '')) {
+              picker.input.value = formattedDate
+            }
+            if (!picker.selectedDates || picker.selectedDates.length === 0) {
+              picker.selectedDates = [dateObj]
+              if (picker.isOpen) {
+                picker.jumpToDate(dateObj)
+                picker.redraw()
+                setTimeout(() => {
+                  yearChangeHook(picker)
+                }, 0)
+              }
+            }
+          }, 0)
+        }
+      }
+      
+      const originalClear = picker.clear.bind(picker)
+      picker.clear = function(...args: any[]) {
+        const result = originalClear(...args)
+        setTimeout(() => restoreOutOfRangeValue(), 0)
+        return result
+      }
+
+      picker.input.addEventListener('input', restoreOutOfRangeValue)
+      
+      picker.config.onClose.push(() => {
+        restoreOutOfRangeValue()
+      })
+    }, 10)
+  }
+
   // replace year selector with dropdown
   picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
 
@@ -392,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();
         }
@@ -408,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/_dialog.tsx

@@ -51,6 +51,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
     cancelButton,
     confirmButton,
     className,
+    closeable,
     data = {},
     htmlOptions = {},
     id,
@@ -187,7 +188,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             style={{ content: dynamicInlineProps }}
         >
           <>
-            {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
+            {title && !status ? <Dialog.Header closeable={closeable}>{title}</Dialog.Header> : null}
             {!status && text ? <Dialog.Body>{text}</Dialog.Body> : null}
             {status && (
               <Dialog.Body

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -14,7 +14,7 @@
 >
     <%= pb_content_tag(:dialog, role: "dialog", "aria-modal": "true", "aria-label": "Dialog") do %>
             <% if object.status === "" && object.title %>
-                <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
+                <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id, closeable: object.closeable }) %>
             <% end %>
             <% if object.status === "" && object.text %>
                 <%= pb_rails("dialog/dialog_body", props: { text: object.text }) %>

data/app/pb_kits/playbook/pb_dialog/dialog.rb

@@ -23,6 +23,7 @@ module Playbook
                     default: ""
       prop :custom_event_type, type: Playbook::Props::String,
                                default: ""
+      prop :closeable, type: Playbook::Props::Boolean, default: true
 
       def classname
         generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}_#{placement}")

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -129,3 +129,17 @@ test('renders loading dialog with disabled buttons', async () => {
 
   cleanup()
 })
+
+test('renders dialog without close button when closeable is false', async () => {
+
+  const { queryByText, container } = render(<DialogTest closeable={false} />);
+
+  fireEvent.click(queryByText('Open Dialog'));
+
+  await waitFor(() => expect(queryByText("Header Title is the Title Prop")));
+
+  const closeBtn = container.querySelector('.pb_dialog_close_icon');
+  expect(closeBtn).not.toBeInTheDocument();
+
+  cleanup()
+})

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -1,10 +1,11 @@
 <%= pb_content_tag(:div, class: object.sticky_header) do %>
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
-
-            <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> aria-label="Close Dialog" >
-                <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon), aria: { hidden: true } }) %>
-            </button>
+            <% if object.closeable %>
+                <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> aria-label="Close Dialog" >
+                    <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon), aria: { hidden: true } }) %>
+                </button>
+            <% end %>
         <% end %>
         <%= pb_rails("section_separator") %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.rb

@@ -4,6 +4,8 @@ module Playbook
   module PbDialog
     class DialogHeader < Playbook::KitBase
       prop :title
+      prop :closeable, type: Playbook::Props::Boolean,
+                       default: true
 
       def classname
         generate_classname("dialog_header")

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

@@ -0,0 +1,24 @@
+<%= pb_rails("flex", props:{wrap:true}) do %>
+<%= pb_rails("button", props: { text: "Open Simple Dialog", data: {"open-dialog": "dialog-simple"}, margin_right:"md" }) %>
+<%= pb_rails("button", props: { text: "Open Complex Dialog", data: {"open-dialog": "dialog-complex2"} }) %>
+<% end %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-simple", 
+    size: "sm", 
+    title: "Header Title is the Title Prop", 
+    text: "Hello Body Text, Nice to meet ya.", 
+    cancel_button: "Cancel Button", 
+    closeable: false,
+    confirm_button: "Okay", 
+    confirm_button_id: "confirm-button-simple"
+}) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-complex2", 
+    size: "sm"
+}) do %>
+ <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex2", title:"Header Title inside Dialog Header", closeable: false } ) %>
+    <%= pb_rails("dialog/dialog_body", props:{text: "Hello Body Text, Nice to meet ya."}) %>
+    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Cancel Button", confirm_button: "Okay", confirm_button_id:"confirm-complex2", id: "dialog-complex2"}) %>
+<% end %>

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

@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+
+
+const DialogCloseable = () => {
+  // Simple example 
+  const [isOpenSimple, setIsOpenSimple] = useState(false)
+  const closeSimple = () => setIsOpenSimple(false)
+  const openSimple = () => setIsOpenSimple(true)
+
+    // Complex example
+  const [isOpenComplex, setIsOpenComplex] = useState(false)
+  const closeComplex = () => setIsOpenComplex(false)
+  const openComplex = () => setIsOpenComplex(true)
+
+  return (
+    <>
+      <Button 
+          marginRight='md'
+          onClick={openSimple}
+      >
+        {'Open Simple Dialog'}
+      </Button>
+      <Button onClick={openComplex}>{'Open Complex Dialog'}</Button>
+
+      <Dialog
+          cancelButton="Cancel Button"
+          closeable={false}
+          confirmButton="Okay"
+          onCancel={closeSimple}
+          onClose={closeSimple}
+          onConfirm={closeSimple}
+          opened={isOpenSimple}
+          size="sm"
+          text="Hello Body Text, Nice to meet ya."
+          title="Header Title is the Title Prop"
+      />
+      <Dialog
+          onClose={closeComplex}
+          opened={isOpenComplex}
+          size="sm"
+      >
+        <Dialog.Header closeable={false}>{'Header Title inside Dialog.Header'}</Dialog.Header>
+        <Dialog.Body>{'Hello Body Text, Nice to meet ya.'}</Dialog.Body>
+        <Dialog.Footer>
+          <Button onClick={closeComplex}>{'Okay'}</Button>
+          <Button
+              onClick={closeComplex}
+              variant="link"
+          >
+            {'Cancel Button'}
+          </Button>
+        </Dialog.Footer>
+      </Dialog>
+    </>
+  )
+}
+
+export default DialogCloseable

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

@@ -0,0 +1,3 @@
+The `closeable` prop can be set to false to optionally render the Dialog header without the close “X” button. `closeable` is set to true by default. 
+
+This prop can be used with the simple as well as the complex version of the Dialog as can be seen here.

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,8 @@ 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
 
 
   react:
@@ -25,6 +27,8 @@ 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:
   - dialog_default_swift: Simple

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

@@ -8,4 +8,6 @@ export { default as DialogStatus } from './_dialog_status.jsx'
 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 DialogLoading } from './_dialog_loading.jsx'
+export { default as DialogOverflowVisible } from './_dialog_overflow_visible.jsx'
+export { default as DialogCloseable } from './_dialog_closeable.jsx'

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -1 +1 @@
-You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/token/colors) for reference.
+You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/tokens/colors) for reference.