RubyGems - playbook_ui - Versions diffs - 15.5.0 → 15.6.0.pre.alpha.PLAY2686contactkittextonly13049 - Mend

playbook_ui 15.5.0 → 15.6.0.pre.alpha.PLAY2686contactkittextonly13049

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 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.
2	+

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

	@@ -0,0 +1,2 @@
1	+ 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.
2	+

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

@@ -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 CHANGED Viewed

@@ -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.test.js CHANGED Viewed

@@ -251,4 +251,28 @@ describe('DatePicker Kit', () => {
       expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + new Date().formatDate())
     })
   })
+  test('displays defaultDate when it is later than maxDate', async () => {
+    const testId = 'datepicker-out-of-range-after'
+    const futureDateString = '01/15/2020'
+    const maxDateString = '01/10/2020'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          defaultDate={futureDateString}
+          format="m/d/Y"
+          maxDate={maxDateString}
+          pickerId="date-picker-out-of-range-after"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = within(kit).getByPlaceholderText('Select Date')
+    await waitFor(() => {
+      expect(input).toHaveValue('01/15/2020')
+    }, { timeout: 5000 })
+  })
 })

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

@@ -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>`

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb CHANGED Viewed

@@ -1,3 +1,24 @@
+<%
+  options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ]
+%>
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
@@ -10,6 +31,16 @@
         <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+        <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
+        <%= pb_rails("typeahead", props: {
+        id: "typeahead-default",
+        placeholder: "Select one...",
+        options: options,
+        name: :foo,
+        margin_top: "sm",
+        is_multi: false
+      })
+%>
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>

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

	@@ -1 +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.
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/tokens/colors) for reference.