playbook_ui 15.4.0.pre.alpha.testingseparation12413 → 15.4.0.pre.rc.0

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -70,36 +70,22 @@
   <%= javascript_tag do %>
     (function() {
       const loadDatePicker = () => {
-        const input = document.getElementById("<%= object.picker_id %>");
-        if (input && !input._flatpickr) {
-          datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
 
-          if (<%= object.selection_type == "quickpick" %>) {
-            document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
-              const startDate = document.getElementById("<%= object.start_date_id %>")
-              const endDate = document.getElementById("<%= object.end_date_id %>")
-              const splittedValue = target.value.split(" to ")
-              startDate.value = splittedValue[0]
-              endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
-            })
-          }
+        if (<%= object.selection_type == "quickpick" %>) {
+          document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
+            const startDate = document.getElementById("<%= object.start_date_id %>")
+            const endDate = document.getElementById("<%= object.end_date_id %>")
+            const splittedValue = target.value.split(" to ")
+            startDate.value = splittedValue[0]
+            endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+          })
         }
       }
 
-      // Try to initialize immediately if DOM is ready
-      if (document.readyState === "loading") {
-        window.addEventListener("DOMContentLoaded", loadDatePicker)
-      } else {
+      window.addEventListener("DOMContentLoaded", () => {
         loadDatePicker()
-      }
-
-      // For dynamically added content (modals, etc.), check again after a brief delay
-      setTimeout(() => {
-        const input = document.getElementById("<%= object.picker_id %>");
-        if (input && !input._flatpickr) {
-          loadDatePicker();
-        }
-      }, 100);
+      })
 
       if (<%= !object.custom_event_type.empty? %>) {
         window.addEventListener("<%= object.custom_event_type %>", () => {

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -85,8 +85,6 @@ module Playbook
                              default: ""
       prop :sync_end_with, type: Playbook::Props::String,
                            default: ""
-      prop :cursor, type: Playbook::Props::String,
-                    default: "pointer"
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

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

@@ -182,33 +182,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
-  const positionCalendarIfNeeded = (fp: Instance) => {
-    const cal = document.querySelector(`#cal-${pickerId}`) as HTMLElement
-    if (!cal) return
-
-    const inputRect = fp.input.getBoundingClientRect()
-    const h = cal.getBoundingClientRect().height || 300
-    const spaceBelow = window.innerHeight - inputRect.bottom
-    const spaceAbove = inputRect.top
-
-    if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
-      if (staticPosition) {
-        cal.style.top = 'auto'
-        cal.style.bottom = 'calc(100% + 5px)'
-      } else {
-        cal.style.position = 'fixed'
-        cal.style.top = `${Math.max(10, inputRect.top - h - 5)}px`
-        cal.style.left = `${inputRect.left}px`
-      }
-    } else if (staticPosition) {
-      cal.style.top = ''
-      cal.style.bottom = ''
-    } else {
-      Object.assign(cal.style, { position: '', top: '', left: '', bottom: '', right: '', transform: '' })
-      fp._positionCalendar()
-    }
-  }
-
   const setPlugins = (thisRangesEndToday: boolean, customQuickPickDates: any) => {
     const pluginList = []
 
@@ -266,9 +239,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
-  // Store resize / position handler reference for cleanup
-  let resizeRepositionHandlerRef: (() => void) | null = null
-
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -290,24 +260,13 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     minDate: setMinDate,
     mode,
     nextArrow: '<i class="far fa-angle-right"></i>',
-    onOpen: [(_selectedDates, _dateStr, fp) => {
+    onOpen: [() => {
       calendarResizer()
-      if (resizeRepositionHandlerRef) {
-        window.removeEventListener('resize', resizeRepositionHandlerRef)
-      }
-      resizeRepositionHandlerRef = () => {
-        calendarResizer()
-        positionCalendarIfNeeded(fp)
-      }
-      window.addEventListener('resize', resizeRepositionHandlerRef)
+      window.addEventListener('resize', calendarResizer)
       if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
-      positionCalendarIfNeeded(fp)
     }],
     onClose: [(selectedDates, dateStr) => {
-      if (resizeRepositionHandlerRef) {
-        window.removeEventListener('resize', resizeRepositionHandlerRef)
-        resizeRepositionHandlerRef = null
-      }
+      window.removeEventListener('resize', calendarResizer)
       if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
       onClose(selectedDates, dateStr)
     }],
@@ -391,14 +350,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   if (syncStartWith) {
     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)
-        if (element?._dropdownRef?.current) {
-          element._dropdownRef.current.clearSelected();
-        } else {
-          const quickpick = element?._flatpickr;
-          quickpick?.clear();
-        }
+        const quickpick = (document.querySelector(`#${syncStartWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        quickpick?.clear();
       }
     });
   }
@@ -407,14 +360,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   if (syncEndWith) {
     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)
-        if (element?._dropdownRef?.current) {
-          element._dropdownRef.current.clearSelected();
-        } else {
-          const quickpick = element?._flatpickr;
-          quickpick?.clear();
-        }
+        const quickpick = (document.querySelector(`#${syncEndWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        quickpick?.clear();
       }
     });
   }

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

@@ -48,8 +48,7 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
-  # - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
-  - date_picker_and_dropdown_range: Range with Dropdown and 2 Date Pickers
+  - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -26,5 +26,4 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
 export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
-export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
-export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
+export { default as DatePickerRangePattern } from './_date_picker_range_pattern'

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -19,7 +19,6 @@ type DateRangeInlineProps = {
   icon?: boolean;
   id?: string;
   size?: "sm" | "xs";
-  showCurrentYear?: boolean;
   startDate?: Date;
 };
 
@@ -46,7 +45,6 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
     icon = false,
     size = "sm",
     startDate,
-    showCurrentYear = false,
   } = props;
 
   const dateInCurrentYear = () => {
@@ -62,10 +60,13 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions);
   
   const renderTime = (date: Date) => {
-    const includeYear = showCurrentYear || !dateInCurrentYear();
     return (
       <time dateTime={dateTimeIso(date)}>
-        {` ${dateTimestamp(date, includeYear)} `}
+        {dateInCurrentYear() ? (
+          ` ${dateTimestamp(date, false)} `
+        ) : (
+          ` ${dateTimestamp(date, true)} `
+        )}
       </time>
     );
   };
@@ -82,8 +83,7 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             {icon && (
               <Caption 
                   dark={dark} 
-                  tag="span"
-              >
+                  tag="span">
                 <Icon
                     className="pb_date_range_inline_icon"
                     dark={dark}
@@ -96,14 +96,12 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             )}
             <Caption 
                 dark={dark} 
-                tag="span"
-            >
+                tag="span">
               {renderTime(startDate)}
             </Caption>
             <Caption 
                 dark={dark} 
-                tag="span"
-            >
+                tag="span">
               <Icon
                   className="pb_date_range_inline_arrow"
                   dark={dark}
@@ -114,8 +112,7 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             </Caption>
             <Caption 
                 dark={dark} 
-                tag="span"
-            >
+                tag="span">
               {renderTime(endDate)}
             </Caption>
           </>
@@ -127,8 +124,7 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
               <Body 
                   color={"light"} 
                   dark={dark}
-                  tag="span"
-              >
+                  tag="span">
                 <Icon
                     className="pb_date_range_inline_icon"
                     dark={dark}
@@ -141,15 +137,13 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             )}
             <Body 
                 dark={dark} 
-                tag="span"
-            >
+                tag="span">
               {renderTime(startDate)}
             </Body>
             <Body 
                 color={"light"} 
                 dark={dark} 
-                tag="span"
-            >
+                tag="span">
               <Icon
                   className="pb_date_range_inline_arrow"
                   dark={dark}
@@ -160,8 +154,7 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             </Body>
             <Body 
                 dark={dark} 
-                tag="span"
-            >
+                tag="span">
               {renderTime(endDate)}
             </Body>
           </>

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb

@@ -14,8 +14,7 @@ module Playbook
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"
-      prop :show_current_year, type: Playbook::Props::Boolean,
-                               default: false
+
       def classname
         generate_classname("pb_date_range_inline_kit", dark_class, align)
       end
@@ -39,12 +38,11 @@ module Playbook
       end
 
       def time_display(time)
-        include_year = show_current_year || !dates_in_current_year?
         content_tag(:time, datetime: time.to_iso) do
-          if include_year
-            "#{time.to_month_downcase} #{time.to_day}, #{time.to_year}"
-          else
+          if dates_in_current_year?
             "#{time.to_month_downcase} #{time.to_day}"
+          else
+            "#{time.to_month_downcase} #{time.to_day}, #{time.to_year}"
           end
         end
       end

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js

@@ -111,23 +111,6 @@ describe("DateRangeInline Kit", () => {
         const text = kit.querySelector('.pb_caption_kit_md:first-child')
         expect(text.textContent).toEqual(" Jan 15 ")
     })
-
-    test("renders DateRangeInline with year when showCurrentYear is true", () => {
-        const currentYear = new Date().getFullYear()
-        render(
-            <DateRangeInline
-                data={{ testid: testId }}
-                endDate={new Date((`15 Aug ${currentYear}`))}
-                showCurrentYear
-                size="xs"
-                startDate={new Date(`15 Jan ${currentYear}`)}
-            />
-        )
-
-        const kit = screen.getByTestId(testId)
-        const text = kit.querySelector('.pb_caption_kit_md:first-child')
-        expect(text.textContent).toEqual(` Jan 15, ${currentYear} `)
-    })
     
 
 })

data/app/pb_kits/playbook/pb_date_range_inline/docs/_description.md

@@ -1 +1 @@
-Use to display a date range.
+Use to display a date range. Year will not show if it is the current year.

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

@@ -2,12 +2,11 @@ examples:
   
   rails:
   - date_range_inline_default: Default
-  - date_range_inline_show_current_year: Show Current Year
+  
   
   react:
   - date_range_inline_default: Default
-  - date_range_inline_show_current_year: Show Current Year
-  
+
   swift:
   - date_range_inline_default_swift: Default
   - date_range_inline_props_swift: ""

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

@@ -1,2 +1 @@
 export { default as DateRangeInlineDefault } from './_date_range_inline_default.jsx'
-export { default as DateRangeInlineShowCurrentYear } from './_date_range_inline_show_current_year.jsx'

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -19,7 +19,6 @@ type DateStackedProps = {
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
-  showCurrentYear?: boolean;
 };
 
 const sizes: {sm: 4, md: 3} = {
@@ -38,7 +37,6 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
     data={},
     htmlOptions={},
     size = "sm",
-    showCurrentYear = false,
   } = props;
   const classes = classnames(
     buildCss("pb_date_stacked_kit", align, size, {
@@ -57,7 +55,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
   return (
     <>
       {bold == false ? (
-        <div
+        <div 
             {...dataProps}
             {...htmlProps}
             className={classes}
@@ -70,10 +68,10 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
                 text={DateTime.toDay(date).toString()}
             />
           </div>
-          {(currentYear != inputYear || showCurrentYear) && <Caption size="xs">{inputYear}</Caption>}
+          {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
         </div>
       ) : (
-          <div
+          <div 
               {...dataProps}
               {...htmlProps}
               className={classes}
@@ -91,7 +89,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
                   size="4"
                   text={DateTime.toDay(date).toString()}
               />
-              {(currentYear != inputYear || showCurrentYear) && <Title size="4">{inputYear}</Title>}
+              {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
             </div>
           </div>
       )}

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb

@@ -4,15 +4,16 @@
 
       <div class="pb_date_stacked_day_month">
         <%= pb_rails("caption", props: { text: object.month }) %>
-        <%= pb_rails("title", props: { text: object.day , size: object.title_size }) %>
+        <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %><% end %>
         <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
       </div>
 
     <% else %>
       <div class="pb_date_stacked_day_month">
         <%= pb_rails("title", props: { text: object.month, size: 4 }) %>
-        <%= pb_rails("title", props: { text: object.day, size: 4 }) %>
+        <%= pb_rails("title", props: { text: object.day, size: 4 }) do %><% end %>
         <%= pb_rails("title", props: { text: object.year, size:4 }) %>
+
       </div>
 
     <% end %>

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb

@@ -16,8 +16,6 @@ module Playbook
                   default: false
       prop :bold, type: Playbook::Props::Boolean,
                   default: false
-      prop :show_current_year, type: Playbook::Props::Boolean,
-                               default: false
 
       def classname
         generate_classname("pb_date_stacked_kit", align, size, reverse_class, dark_class)
@@ -39,15 +37,11 @@ module Playbook
       end
 
       def year
-        if show_current_year
-          Playbook::PbKit::PbDateTime.new(date).to_year.to_s
-        else
-          current_year = DateTime.now.year.to_i
-          year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
-          if current_year != year
-            content_tag(:time, datetime: year) do
-              year.to_s
-            end
+        current_year = DateTime.now.year.to_i
+        year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
+        if current_year != year
+          content_tag(:time, datetime: year) do
+            year.to_s
           end
         end
       end

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js

@@ -22,7 +22,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="sm"
+                size="sm"      
             />
         )
 
@@ -36,7 +36,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="sm"
+                size="sm"      
             />
         )
 
@@ -51,7 +51,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="sm"
+                size="sm"      
             />
         )
 
@@ -66,7 +66,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="md"
+                size="md"      
             />
         )
 
@@ -80,7 +80,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={futureDate}
-                size="sm"
+                size="sm"      
             />
         )
 
@@ -89,23 +89,6 @@ describe("DateStacked Kit", () => {
         expect(text.textContent).toEqual("2016")
     })
 
-    test("renders current year when showCurrentYear is true", () => {
-        render(
-            <DateStacked
-                align="left"
-                data={{ testid: testId }}
-                date={new Date()}
-                showCurrentYear
-                size="sm"
-            />
-        )
-
-        const kit = screen.getByTestId(testId)
-        const text = kit.querySelector(".pb_caption_kit_xs")
-        const currentYear = new Date().getFullYear()
-        expect(text.textContent).toEqual(`${currentYear}`)
-    })
-
     test("renders correct className when order reversed", () => {
         render(
             <DateStacked
@@ -113,7 +96,7 @@ describe("DateStacked Kit", () => {
                 data={{ testid: testId }}
                 date={futureDate}
                 reverse
-                size="sm"
+                size="sm"      
             />
         )
         const kit = screen.getByTestId(testId)
@@ -127,7 +110,7 @@ describe("DateStacked Kit", () => {
                 bold
                 data={{ testid: testId }}
                 date={futureDate}
-                size="md"
+                size="md"      
             />
         )
 
@@ -142,7 +125,7 @@ describe("DateStacked Kit", () => {
                 align="center"
                 data={{ testid: testId }}
                 date={futureDate}
-                size="md"
+                size="md"      
             />
         )
 
@@ -156,7 +139,7 @@ describe("DateStacked Kit", () => {
                 align="right"
                 data={{ testid: testId }}
                 date={futureDate}
-                size="md"
+                size="md"      
             />
         )
 

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb

@@ -2,4 +2,4 @@
 
 <br>
 
-<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), size: "md"}) %>
+<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md"}) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx

@@ -15,7 +15,7 @@ const DateStackedDefault = (props) => {
       <br />
 
       <DateStacked
-          date={new Date('20 Mar 2018')}
+          date={new Date()}
           size="md"
           {...props}
       />

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20) }) %>
+
+<br>
+
+<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), size: "md"}) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/{_date_stacked_current_year.jsx → _date_stacked_not_current_year.jsx}

@@ -1,13 +1,12 @@
 import React from 'react'
 import DateStacked from '../_date_stacked'
 
-const DateStackedCurrentYear = (props) => {
+const DateStackedNotCurrentYear = (props) => {
   return (
     <div>
 
       <DateStacked
-          date={new Date()}
-          showCurrentYear
+          date={new Date('20 Mar 2018')}
           size="sm"
           {...props}
       />
@@ -15,13 +14,13 @@ const DateStackedCurrentYear = (props) => {
       <br />
 
       <DateStacked
-          date={new Date()}
-          showCurrentYear
+          date={new Date('20 Mar 2018')}
           size="md"
           {...props}
       />
+
     </div>
   )
 }
 
-export default DateStackedCurrentYear
+export default DateStackedNotCurrentYear

data/app/pb_kits/playbook/pb_date_stacked/docs/_description.md

@@ -1 +1 @@
-Use to display the date, stacking month and day.
+Use to display the date, stacking month and day. Year will not show if it is the current year.

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

@@ -2,7 +2,7 @@ examples:
 
   rails:
   - date_stacked_default: Default
-  - date_stacked_current_year: Show Current Year
+  - date_stacked_not_current_year: Not Current Year
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
@@ -11,7 +11,7 @@ examples:
 
   react:
   - date_stacked_default: Default
-  - date_stacked_current_year: Show Current Year
+  - date_stacked_not_current_year: Not Current Year
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_bold: Bold

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

@@ -1,6 +1,6 @@
 export { default as DateStackedBold } from './_date_stacked_bold.jsx'
 export { default as DateStackedDefault } from './_date_stacked_default.jsx'
-export { default as DateStackedCurrentYear } from './_date_stacked_current_year.jsx'
+export { default as DateStackedNotCurrentYear } from './_date_stacked_not_current_year.jsx'
 export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
 export { default as DateStackedSizes } from './_date_stacked_sizes.jsx'
 export { default as DateStackedAlign } from './_date_stacked_align.jsx'