playbook_ui 15.6.0.pre.alpha.play263913015 → 15.6.0.pre.alpha.play265012865

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 526e2a456a333473009406a753d4a9513b99a33bef1a69e92410d94cdc23c3aa
-  data.tar.gz: 0b7ef7af65efedfcf5f2f1da554acd8e9d04ab95361feaf3425d5285171946b8
+  metadata.gz: 1f00eed8d72dd338dfb0665fdbc61354194cc91f5cdf0755368f84f909c8d251
+  data.tar.gz: 31c851467170e08092848d43f25a82f61ce30c41aba7814eada0d8a663319806
 SHA512:
-  metadata.gz: 1775155366eab8937dfac61095faa4a4281dfe3981a6839c97e7e35fb233716da18b8b1285d1a88ff8529c0a0560858c22808e0ba0df43102ff6cbdb02efc38e
-  data.tar.gz: 36ae7bbfcd1182ff97a85c018ecef7232877fabf931d30428fa8ac7b69890fd31e714f0bd9e644698665a644f5d14d2eaf8dcf2f88788050a6665fdec2aad9d4
+  metadata.gz: 9ed414cfd8bf2656d273e36c8ad280b64ced9172ae1914b42aaa652b4799738834f0d36206059a892f4cffa272af41ecfeaaeb0325e18f014bce04a78d697388
+  data.tar.gz: 2e155137b2e170bc7704c3a3419d61b9ae9da0f21d5505fdff5552e4d175433656e9cd9fe6d7fae829e903999b1917c02de35a382107d38aace4eee21e297581

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { deprecatedKitWarning } from "../utilities/deprecated";
 
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts";
@@ -168,6 +169,11 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
 
   const [options, setOptions] = useState({});
 
+  useEffect(() => {
+    // Warn about deprecated kit (only once per page load, dev mode only)
+    deprecatedKitWarning('BarGraph', '[Playbook] The "BarGraph" kit is deprecated. Please use "PbBarGraph" instead.');
+  }, []);
+
   useEffect(() => {
     setOptions(merge(staticOptions, customOptions));
   }, [chartData]);

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.
+Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -25,11 +25,11 @@ exports[`html structure is correct 1`] = `
           >
             <div
               class="icon_wrapper"
-              style="vertical-align: middle;"
+              style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
               <svg
                 aria-label="chevron-down icon"
-                class="pb_custom_icon svg-inline--fa color_text_lt_lighter svg_lg svg_fw"
+                class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
                 color="currentColor"
                 fill="none"
                 height="auto"

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx

@@ -27,12 +27,12 @@ type colorMap = {
 };
 
 const colorMap = {
-  default:"text_lt_default",
-  light: "text_lt_light",
-  lighter: "text_lt_lighter",
-  link: "primary",
-  error: "error",
-  success: "text_dk_success_sm",
+  default: "#242B42",
+  light: "#687887",
+  lighter: "#C1CDD6",
+  link: "#0056CF",
+  error: "#FF2229",
+  success: "#00CA74",
 };
 
 const CollapsibleIcon = ({
@@ -68,10 +68,9 @@ const CollapsibleIcon = ({
               className="icon_wrapper"
               key={icon ? showIcon(icon)[0] : "chevron-down"}
               onClick={(e) => handleIconClick(e)}
-              style={{ verticalAlign: "middle"}}
+              style={{ verticalAlign: "middle", color: color }}
           >
             <Icon
-                color={color}
                 icon={icon ? showIcon(icon)[0] : "chevron-down"}
                 size={iconSize}
             />
@@ -81,10 +80,9 @@ const CollapsibleIcon = ({
               className="icon_wrapper"
               key={icon ? showIcon(icon)[1] : "chevron-up"}
               onClick={(e) => handleIconClick(e)}
-              style={{ verticalAlign: "middle" }}
+              style={{ verticalAlign: "middle", color: color }}
           >
             <Icon
-                color={color}
                 icon={icon ? showIcon(icon)[1] : "chevron-up"}
                 size={iconSize}
             />

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -7,6 +7,7 @@ const CollapsibleIcons = (props) => {
   <>
   <Collapsible
       icon={['plus','minus']}
+      iconColor='white'
   >
     <Collapsible.Main {...props}>
       <div>{'Main Section'}</div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx

@@ -22,6 +22,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -40,6 +41,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -58,6 +60,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
         <Collapsible.Main padding="sm" 

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -251,28 +251,4 @@ 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

@@ -275,80 +275,6 @@ 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,
@@ -360,32 +286,11 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     locale: {
       rangeSeparator: ' to '
     },
-    maxDate: effectiveMaxDate,
-    minDate: effectiveMinDate,
+    maxDate: setMaxDate,
+    minDate: setMinDate,
     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)
@@ -398,30 +303,12 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
       positionCalendarIfNeeded(fp)
     }],
-    onClose: [(selectedDates, dateStr, fp) => {
+    onClose: [(selectedDates, dateStr) => {
       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) => {
@@ -443,71 +330,6 @@ 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_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/tokens/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/token/colors) for reference.