playbook_ui 15.7.0 → 15.8.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 71dc76821c0c875363dbf67c1969a0f24eb0c5ea2fdb791b70c0d95a6732a3d5
-  data.tar.gz: d95d190f3644e074b60828cf363fb37d99338050a29b4ab847ebe5bf99fe55f3
+  metadata.gz: d0177497af81bb89af7b26046f27197942cb10b7a6640df32234376c1f7cedcb
+  data.tar.gz: 164f59f14bfffc0a889b4859363c311d09dafddf5c1fce518000a42c4e647623
 SHA512:
-  metadata.gz: 4ea3c249a93b41caa33133053b9fccb280d01b539c4bc61516e7a231174ef7cb879d35d756bb4fea03f4e5d35d7f52d39b593a49a7b0374f509a724a27fc86d3
-  data.tar.gz: aed75a53ce523d6736b2e8ab00986472f1068f7c2f8e1f5c50194d10003ccccc1e31320a2d45fa59da4e31b6539c84a9d768112f6cf541274cac96dda9468347
+  metadata.gz: 6c3ead358396ac6c1adf2c5a2a5af3409513bfc0a944fa7298d74135b66ea59f865e30a51167b6f81247967b5ac2be7326aa5717d5b3d0c2993a2a2a96831d48
+  data.tar.gz: 4a5d41bdcc5e01b9dc0a3ffbaba5292702873902e5325dfeba5759e54049e03c95ce6ba760a0c0e8b1c9bd35c0ca6958bbec137fe7a33da7d978148cc6bc5b2f

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,3 @@
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -98,6 +97,7 @@
 @import 'pb_text_input/text_input';
 @import 'pb_textarea/textarea';
 @import 'pb_time/time';
+@import 'pb_time_picker/time_picker';
 @import 'pb_time_range_inline/time_range_inline';
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_timeline/timeline';

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -20,12 +20,23 @@ import {
     handleClickOutside,
 } from "./utilities";
 
+type CustomQuickPickDate = {
+    label: string;
+    value: string[] | { timePeriod: string; amount: number };
+};
+
+type CustomQuickPickDates = {
+    override?: boolean;
+    dates: CustomQuickPickDate[];
+};
+
 type DropdownProps = {
     aria?: { [key: string]: string };
     autocomplete?: boolean;
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
+    customQuickPickDates?: CustomQuickPickDates;
     formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
@@ -63,6 +74,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
+        customQuickPickDates,
         dark = false,
         data = {},
         defaultValue = {},
@@ -95,7 +107,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     // ------------- Quick Pick ---------------------------------
     // Use QuickPick options when variant is "quickpick"
     const dropdownOptions = variant === "quickpick" 
-        ? getQuickPickOptions(rangeEndsToday) 
+        ? getQuickPickOptions(rangeEndsToday, customQuickPickDates) 
         : (options || []);
     // ----------------------------------------------------------
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.jsx

@@ -0,0 +1,56 @@
+import React from "react"
+import Dropdown from "../_dropdown"
+
+const DropdownQuickpickCustom = (props) => (
+  <div>
+    <Dropdown
+        customQuickPickDates={{
+          dates: [
+            // Allow Playbook to handle the logic...
+            {
+              label: "Last 15 months",
+              value: {
+                timePeriod: "months",
+                amount: 15,
+              },
+            },
+            // Or, be explicit with an exact date range for more control...
+            {
+              label: "First Week of June 2022",
+              value: ["06/01/2022", "06/07/2022"],
+            },
+          ],
+        }}
+        label="Date Range"
+        marginBottom="sm"
+        onSelect={(selectedItem) => console.log(selectedItem)}
+        variant="quickpick"
+        {...props}
+    />
+    <Dropdown
+        customQuickPickDates={{
+          dates: [
+            {
+              label: "Last 15 months",
+              value: {
+                timePeriod: "months",
+                amount: 15,
+              },
+            },
+            {
+              label: "First Week of June 2022",
+              value: ["06/01/2022", "06/07/2022"],
+            },
+          ],
+          override: false,
+        }}
+        label="Date Range - Append to Defaults"
+        onSelect={(selectedItem) => console.log(selectedItem)}
+        variant="quickpick"
+        {...props}
+    />
+  </div>
+)
+
+export default DropdownQuickpickCustom
+

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.md

@@ -0,0 +1,10 @@
+The `customQuickPickDates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
+
+**The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
+- An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
+- An object with `timePeriod` and `amount` properties for dynamic date calculations:
+  - The `timePeriod` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
+  - The `amount` property accepts any number.
+
+**The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
+

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.html.erb

@@ -0,0 +1,64 @@
+<%= pb_rails("dropdown", props: {
+  custom_quick_pick_dates: {
+    dates: [
+      # Allow Playbook to handle the logic...
+      {
+        label: "Last 15 months",
+        value: {
+          time_period: "months",
+          amount: 15
+        }
+      },
+      # Or, be explicit with an exact date range for more control...
+      {
+        label: "First Week of June 2022",
+        value: ["06/01/2022", "06/07/2022"]
+      }
+    ]
+  },
+  id: "date-range-quickpick-custom",
+  label: "Date Range",
+  margin_bottom: "sm",
+  variant: "quickpick"
+}) %>
+
+<%= pb_rails("dropdown", props: {
+  custom_quick_pick_dates: {
+    override: false,
+    dates: [
+      {
+        label: "Last 15 months",
+        value: {
+          time_period: "months",
+          amount: 15
+        }
+      },
+      {
+        label: "First Week of June 2022",
+        value: ["06/01/2022", "06/07/2022"]
+      }
+    ]
+  },
+  id: "date-range-quickpick-custom-append-to-defaults",
+  label: "Date Range - Append to Defaults",
+  variant: "quickpick"
+}) %>
+
+<script>
+  const dropdown1 = document.getElementById("date-range-quickpick-custom");
+  if (dropdown1) {
+    dropdown1.addEventListener("pb:dropdown:selected", (e) => {
+      const option = e.detail;
+      console.log("Selected option:", option);
+    });
+  }
+
+  const dropdown2 = document.getElementById("date-range-quickpick-custom-append-to-defaults");
+  if (dropdown2) {
+    dropdown2.addEventListener("pb:dropdown:selected", (e) => {
+      const option = e.detail;
+      console.log("Selected option:", option);
+    });
+  }
+</script>
+

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.md

@@ -0,0 +1,10 @@
+The `custom_quick_pick_dates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
+
+**The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
+- An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
+- An object with `time_period` and `amount` properties for dynamic date calculations:
+  - The `time_period` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
+  - The `amount` property accepts any number.
+
+**The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
+

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

@@ -25,6 +25,7 @@ examples:
   - dropdown_quickpick_rails: Quick Pick Variant
   - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_custom_rails: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
 
@@ -57,6 +58,7 @@ examples:
   - dropdown_quickpick: Quick Pick Variant
   - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
 
 

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

@@ -26,4 +26,5 @@ export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_
 export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
 export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
 export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
-export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
+export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
+export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -15,6 +15,8 @@ module Playbook
       prop :default_value
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
+      prop :custom_quick_pick_dates, type: Playbook::Props::HashProp,
+                                     default: {}
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default subtle quickpick],
                      default: "default"
@@ -94,7 +96,10 @@ module Playbook
       end
 
       def quickpick_options
-        QuickpickHelper.get_quickpick_options(range_ends_today: range_ends_today)
+        QuickpickHelper.get_quickpick_options(
+          range_ends_today: range_ends_today,
+          custom_quick_pick_dates: custom_quick_pick_dates
+        )
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -539,4 +539,125 @@ test("quickpick option values are Date objects", () => {
   expect(endDate.getTime()).not.toBeNaN()
   
   expect(endDate.getTime()).toBeGreaterThanOrEqual(startDate.getTime())
+})
+
+test("customQuickPickDates overrides default options when override is true or undefined", () => {
+  render(
+    <Dropdown
+        customQuickPickDates={{
+          dates: [
+            {
+              label: "Last 15 months",
+              value: { timePeriod: "months", amount: 15 }
+            },
+            {
+              label: "Custom Range",
+              value: ["06/01/2022", "06/07/2022"]
+            }
+          ]
+        }}
+        data={{ testid: testId }}
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const options = kit.querySelectorAll('.pb_dropdown_option_list')
+  
+  expect(options.length).toBe(2)
+  expect(options[0]).toHaveTextContent("Last 15 months")
+  expect(options[1]).toHaveTextContent("Custom Range")
+})
+
+test("customQuickPickDates appends to defaults when override is false", () => {
+  render(
+    <Dropdown
+        customQuickPickDates={{
+          override: false,
+          dates: [
+            {
+              label: "Custom Option",
+              value: { timePeriod: "days", amount: 30 }
+            }
+          ]
+        }}
+        data={{ testid: testId }}
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const options = kit.querySelectorAll('.pb_dropdown_option_list')
+  
+  expect(options.length).toBe(11)
+  expect(options[0]).toHaveTextContent("Today")
+  expect(options[10]).toHaveTextContent("Custom Option")
+})
+
+test("customQuickPickDates with explicit date array returns correct values", () => {
+  const onSelectMock = jest.fn()
+  
+  render(
+    <Dropdown
+        customQuickPickDates={{
+          dates: [
+            {
+              label: "First Week of June 2022",
+              value: ["06/01/2022", "06/07/2022"]
+            }
+          ]
+        }}
+        data={{ testid: testId }}
+        onSelect={onSelectMock}
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const option = kit.querySelector('.pb_dropdown_option_list')
+  
+  fireEvent.click(option)
+  
+  const selectedItem = onSelectMock.mock.calls[0][0]
+  
+  expect(selectedItem.label).toBe("First Week of June 2022")
+  expect(Array.isArray(selectedItem.value)).toBe(true)
+  expect(selectedItem.value.length).toBe(2)
+})
+
+test("customQuickPickDates with timePeriod calculates dates correctly", () => {
+  const onSelectMock = jest.fn()
+  
+  render(
+    <Dropdown
+        customQuickPickDates={{
+          dates: [
+            {
+              label: "Last 7 days",
+              value: { timePeriod: "days", amount: 7 }
+            }
+          ]
+        }}
+        data={{ testid: testId }}
+        onSelect={onSelectMock}
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const option = kit.querySelector('.pb_dropdown_option_list')
+  
+  fireEvent.click(option)
+  
+  const selectedItem = onSelectMock.mock.calls[0][0]
+  
+  expect(selectedItem.label).toBe("Last 7 days")
+  expect(Array.isArray(selectedItem.value)).toBe(true)
+  
+  const [startDate, endDate] = selectedItem.value
+  expect(startDate instanceof Date).toBe(true)
+  expect(endDate instanceof Date).toBe(true)
+  
+  const today = new Date()
+  expect(endDate.toDateString()).toBe(today.toDateString())
 })

data/app/pb_kits/playbook/pb_dropdown/quickpick/index.ts

@@ -11,8 +11,78 @@ type QuickPickOption = {
   id?: string;
 };
 
+type CustomQuickPickDate = {
+  label: string;
+  value: string[] | { timePeriod: string; amount: number };
+};
+
+type CustomQuickPickDates = {
+  override?: boolean;
+  dates: CustomQuickPickDate[];
+};
+
+// Helper function to calculate date range from timePeriod and amount
+const calculateDateRange = (timePeriod: string, amount: number): Date[] => {
+  const endDate = new Date();
+  const startDate = new Date();
+
+  switch (timePeriod) {
+    case 'days':
+      startDate.setDate(endDate.getDate() - amount);
+      break;
+    case 'weeks':
+      startDate.setDate(endDate.getDate() - (amount * 7));
+      break;
+    case 'months':
+      startDate.setMonth(endDate.getMonth() - amount);
+      break;
+    case 'quarters':
+      startDate.setMonth(endDate.getMonth() - (amount * 3));
+      break;
+    case 'years':
+      startDate.setFullYear(endDate.getFullYear() - amount);
+      break;
+    default:
+      throw new Error('Invalid time period');
+  }
+  return [startDate, endDate];
+};
+
+// Helper to format date for display
+const formatDate = (date: Date) => {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = date.getFullYear();
+
+  return `${month}/${day}/${year}`;
+};
+
+// Helper to create a QuickPickOption from a custom date
+const createOptionFromCustomDate = (customDate: CustomQuickPickDate): QuickPickOption => {
+  let dateRange: Date[];
+  
+  if (Array.isArray(customDate.value)) {
+    // Explicit date range as string array
+    dateRange = customDate.value.map((dateStr: string) => new Date(dateStr));
+  } else {
+    // Calculate from timePeriod and amount
+    dateRange = calculateDateRange(
+      customDate.value.timePeriod,
+      customDate.value.amount
+    );
+  }
+
+  return {
+    label: customDate.label,
+    value: dateRange,
+    formattedStartDate: formatDate(dateRange[0]),
+    formattedEndDate: formatDate(dateRange[1]),
+    id: `quickpick-${customDate.label.toLowerCase().replace(/\s+/g, '-')}`,
+  };
+};
+
 // Helper to get QuickPick options with date ranges
-const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
+const getQuickPickOptions = (rangeEndsToday = false, customQuickPickDates?: CustomQuickPickDates): QuickPickOption[] => {
   const today = new Date();
   const yesterday = DateTime.getYesterdayDate(new Date());
 
@@ -36,14 +106,7 @@ const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
   const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date());
   const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date());
 
-  const formatDate = (date: Date) => {
-  const day = String(date.getDate()).padStart(2, "0")
-  const month = String(date.getMonth() + 1).padStart(2, "0")
-  const year = date.getFullYear()
-
-  return `${month}/${day}/${year}`
-}
-  return [
+  const defaultOptions: QuickPickOption[] = [
     { label: 'Today', value: [today, today], id: 'quickpick-today' },
     { label: 'Yesterday', value: [yesterday, yesterday], formattedStartDate: `${formatDate(yesterday)}`, formattedEndDate: `${formatDate(yesterday)}`, id: 'quickpick-yesterday' },
     { label: 'This Week', value: [thisWeekStartDate, thisWeekEndDate], formattedStartDate: `${formatDate(thisWeekStartDate)}`, formattedEndDate: `${formatDate(thisWeekEndDate)}`, id: 'quickpick-this-week' },
@@ -55,6 +118,19 @@ const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
     { label: 'Last Quarter', value: [lastQuarterStartDate, lastQuarterEndDate], formattedStartDate: `${formatDate(lastQuarterStartDate)}`, formattedEndDate: `${formatDate(lastQuarterEndDate)}`, id: 'quickpick-last-quarter' },
     { label: 'Last Year', value: [lastYearStartDate, lastYearEndDate], formattedStartDate: `${formatDate(lastYearStartDate)}`, formattedEndDate: `${formatDate(lastYearEndDate)}`, id: 'quickpick-last-year' },
   ];
+
+  // Handle customQuickPickDates and override logic
+  if (customQuickPickDates && customQuickPickDates.dates && customQuickPickDates.dates.length > 0) {
+    const customOptions = customQuickPickDates.dates.map(createOptionFromCustomDate);
+    
+    if (customQuickPickDates.override === false) {
+      return [...defaultOptions, ...customOptions];
+    }
+    
+    return customOptions;
+  }
+
+  return defaultOptions;
 };
 
 export default getQuickPickOptions

data/app/pb_kits/playbook/pb_dropdown/quickpick_helper.rb

@@ -4,7 +4,31 @@ module Playbook
   module PbDropdown
     module QuickpickHelper
       class << self
-        def get_quickpick_options(range_ends_today: false)
+        def get_quickpick_options(range_ends_today: false, custom_quick_pick_dates: {})
+          default_options = build_default_options(range_ends_today)
+
+          # Handle custom_quick_pick_dates
+          return default_options if custom_quick_pick_dates.blank?
+
+          dates = custom_quick_pick_dates[:dates] || custom_quick_pick_dates["dates"]
+          return default_options if dates.blank?
+
+          custom_options = dates.map { |date_config| build_custom_option(date_config) }
+
+          # Override logic
+          override = custom_quick_pick_dates[:override]
+          override = custom_quick_pick_dates["override"] if override.nil?
+
+          if override == false
+            default_options + custom_options
+          else
+            custom_options
+          end
+        end
+
+      private
+
+        def build_default_options(range_ends_today)
           today = Date.today
           yesterday = today - 1.day
 
@@ -42,7 +66,64 @@ module Playbook
           ]
         end
 
-      private
+        def build_custom_option(date_config)
+          label = date_config[:label] || date_config["label"]
+          value = date_config[:value] || date_config["value"]
+
+          date_range = calculate_date_range(value)
+          start_date = date_range[0]
+          end_date = date_range[1]
+
+          {
+            id: "quickpick-#{label.downcase.gsub(/\s+/, '-')}",
+            label: label,
+            value: [start_date.to_s, end_date.to_s],
+            formatted_start_date: format_date(start_date),
+            formatted_end_date: format_date(end_date),
+          }
+        end
+
+        def calculate_date_range(value)
+          # Parse date strings if value is an array
+          if value.is_a?(Array)
+            [parse_date_string(value[0]), parse_date_string(value[1])]
+          else
+            # Calculate date range from time_period and amount
+            time_period = value[:time_period] || value["time_period"] || value[:timePeriod] || value["timePeriod"]
+            amount = value[:amount] || value["amount"]
+
+            end_date = Date.today
+            start_date = calculate_start_date(time_period, amount, end_date)
+
+            [start_date, end_date]
+          end
+        end
+
+        def parse_date_string(date_str)
+          # Handle US date format (MM/DD/YYYY) because Ruby's Date.parse defaults to European format (DD/MM/YYYY)
+          if date_str.include?("/")
+            Date.strptime(date_str, "%m/%d/%Y")
+          else
+            Date.parse(date_str)
+          end
+        end
+
+        def calculate_start_date(time_period, amount, end_date)
+          case time_period.to_s
+          when "days"
+            end_date - amount.days
+          when "weeks"
+            end_date - amount.weeks
+          when "months"
+            end_date - amount.months
+          when "quarters"
+            end_date - (amount * 3).months
+          when "years"
+            end_date - amount.years
+          else
+            raise ArgumentError, "Invalid time period: #{time_period}"
+          end
+        end
 
         def format_date(date)
           date.strftime("%m/%d/%Y")

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -30,10 +30,6 @@ module Playbook
         closeable.present? ? " remove_toast" : ""
       end
 
-      def auto_close_class
-        auto_close.present? ? " auto_close_#{auto_close}" : ""
-      end
-
       def position_class
         horizontal && vertical ? " positioned_toast #{vertical} #{horizontal}" : ""
       end
@@ -42,6 +38,14 @@ module Playbook
         multi_line.present? ? "multi_line" : nil
       end
 
+      def auto_close_attribute
+        auto_close.present? ? { "pb-auto-close": auto_close } : {}
+      end
+
+      def data
+        Hash(prop(:data)).merge(auto_close_attribute)
+      end
+
       def icon_value
         icon || case status
                 when "success"
@@ -61,9 +65,7 @@ module Playbook
 
       def classname
         default_z_index = z_index.present? ? "" : " z_index_max"
-        # IMPORTANT: the AutoClose class must be the last class in the string for JS to read it correctly
-        # Changing the order will break the auto_close functionality
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index + auto_close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index
       end
     end
   end

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

@@ -21,17 +21,12 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
   }
 
   autoCloseToast(element) {
-    const classListValues = element.classList.value
-    const hasAutoCloseClass = classListValues.includes('auto_close')
-
-    if (hasAutoCloseClass) {
-      const classList = classListValues.split(' ')
-      const autoCloseValue = classList[classList.length - 1].split('_')[2]
-      const autoCloseIntValue = parseInt(autoCloseValue)
+    const autoCloseDataAttr = element.getAttribute('data-pb-auto-close')
 
+    if (autoCloseDataAttr) {
       setTimeout(() => {
         this.removeToast(element)
-      }, autoCloseIntValue)
+      }, parseInt(autoCloseDataAttr))
     }
   }
 }

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -116,7 +116,7 @@
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form-default", tree_data: treeData, margin_bottom: "sm", label: "Example Multi Level Select field" } %>
-
+  <%= form.time_picker :example_time_picker, props: { label: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -117,7 +117,8 @@
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
-
+  <%= form.time_picker :example_time_picker_validation, props: { label: true, required: true, validation_message: "Please select a time." } %>
+ 
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>