playbook_ui 15.4.0.pre.alpha.PLAY1541responsivefloorPOC12370 → 15.4.0.pre.alpha.PLAY2429datepickeropenonscreenstatic12263

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0aad7539ef05d2ddb33241d40497b0ac7e061f7bdbf06c8b21540f41ae4bea0c
-  data.tar.gz: a7fbdf0ac8cc63a65d61054669b7f8db2e8f918e70ba6be3d5cd561a9df3d6b5
+  metadata.gz: '078ba558616f3d9652e67f43a347d3d8aefc110aa2d508a5733bd795b067c11c'
+  data.tar.gz: fa53a9d154f6087f72bd482dc68d75e152a25f59e156ca477afd7f9cadf2984f
 SHA512:
-  metadata.gz: acbea506335247a4678e67c024d0ab948c3ab0b6b68985fae5ca686f1b865bd4a28c1726d2f51ab4863ceea61e6ef1e4dd58202cfdc87a5ca6bd8f9445ac1d4e
-  data.tar.gz: 387dc60dc4d726a03241e159a102f9cf35353c79d06eb544a6ea8f4859530927135f5bea3cecb501025c6977dd384cede79d0abce770233c0c2c112f5b842a24
+  metadata.gz: 1f55d101f6dd2a8069ed1e2b4ff753360fc2f03242d3c6978a18789d41dca270a8f13286cc74a57ab8565d6fb7e4c58ef75e769206ff8a2ee2b45c21f091afbd
+  data.tar.gz: c0e5da234a64692508e34ace0559178733de1e0703cb553fdf0c1c61901d1332e9dc4074b5d895d08b157b2c35f5976103d94acd145a3189bfe51826e7bda940

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_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'

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

@@ -1,7 +1,7 @@
 <%= 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 %>
-  <%= pb_form_with(scope: :example, method: :get, url: "", options: { remote: true }) do |form| %>
+  <form>
     <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
         <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
     <% end %>
@@ -13,5 +13,5 @@
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
-  <% end %>
+  </form>
 <% end %>

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -126,7 +126,7 @@ export default class PbDropdown extends PbEnhancedElement {
         .label.toString()
         .toLowerCase();
 
-    // hide or show option
+      // hide or show option
       const match = label.includes(lcTerm);
       opt.style.display = match ? "" : "none";
       if (match) hasMatch = true

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState } from "react";
 import classnames from "classnames";
 
 import { globalProps, GlobalProps } from "../utilities/globalProps";
@@ -36,7 +36,6 @@ type FixedConfirmationToastProps = {
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
   const [showToast, toggleToast] = useState(true);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const {
     autoClose = 0,
@@ -68,42 +67,21 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
 
   const htmlProps = buildHtmlProps(htmlOptions);
 
-  useEffect(() => {
-    toggleToast(open);
-  }, [open]);
-
-  // Manage auto-close timeout separately
-  useEffect(() => {
-    // Clear any existing timeout
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-
-    // Set new timeout if autoClose is enabled and toast is open
-    if (autoClose && open && showToast) {
-      timeoutRef.current = setTimeout(() => {
+  const autoCloseToast = () => {
+    if (autoClose && open) {
+      setTimeout(() => {
         toggleToast(false);
         onClose();
-        timeoutRef.current = null;
       }, autoClose);
     }
+  };
 
-    // Cleanup function to clear timeout on unmount or when dependencies change
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-      }
-    };
-  }, [autoClose, open, showToast, onClose]);
+  useEffect(() => {
+    toggleToast(open);
+    autoCloseToast();
+  }, [open]);
 
   const handleClick = () => {
-    // Clear autoClose timeout when manually closing
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
     toggleToast(!closeable);
     onClose();
   };