playbook_ui 15.6.0 → 15.7.0.pre.alpha.play263313229

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

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "quickpick_helper"
+
 module Playbook
   module PbDropdown
     class Dropdown < Playbook::KitBase
@@ -14,7 +16,7 @@ module Playbook
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default subtle],
+                     values: %w[default subtle quickpick],
                      default: "default"
       prop :separators, type: Playbook::Props::Boolean,
                         default: true
@@ -26,13 +28,32 @@ module Playbook
                           default: false
       prop :form_pill_props, type: Playbook::Props::HashProp,
                              default: {}
+      prop :range_ends_today, type: Playbook::Props::Boolean,
+                              default: false
+      prop :controls_end_id, type: Playbook::Props::String,
+                             default: ""
+      prop :controls_start_id, type: Playbook::Props::String,
+                               default: ""
+      prop :start_date_id, type: Playbook::Props::String,
+                           default: "start_date_id"
+      prop :start_date_name, type: Playbook::Props::String,
+                             default: "start_date_name"
+      prop :end_date_id, type: Playbook::Props::String,
+                         default: "end_date_id"
+      prop :end_date_name, type: Playbook::Props::String,
+                           default: "end_date_name"
 
       def data
         Hash(prop(:data)).merge(
           pb_dropdown: true,
           pb_dropdown_multi_select: multi_select,
-          form_pill_props: form_pill_props.to_json
-        )
+          pb_dropdown_variant: variant,
+          form_pill_props: form_pill_props.to_json,
+          start_date_id: variant == "quickpick" ? start_date_id : nil,
+          end_date_id: variant == "quickpick" ? end_date_id : nil,
+          controls_start_id: variant == "quickpick" && controls_start_id.present? ? controls_start_id : nil,
+          controls_end_id: variant == "quickpick" && controls_end_id.present? ? controls_end_id : nil
+        ).compact
       end
 
       def classname
@@ -48,7 +69,15 @@ module Playbook
       def input_default_value
         return "" unless default_value.present?
 
-        if multi_select
+        if variant == "quickpick"
+          d = default_value.to_s.downcase
+          matched_option = quickpick_options.find do |opt|
+            opt[:label].downcase == d
+          end
+          return matched_option[:id] if matched_option
+
+          ""
+        elsif multi_select
           default_value.map { |v| v.transform_keys(&:to_s)["id"] }.join(",")
         else
           default_value.transform_keys(&:to_s)["id"]
@@ -60,7 +89,12 @@ module Playbook
       end
 
       def options_with_blank
-        blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options
+        dropdown_options = variant == "quickpick" ? quickpick_options : options
+        blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + dropdown_options : dropdown_options
+      end
+
+      def quickpick_options
+        QuickpickHelper.get_quickpick_options(range_ends_today: range_ends_today)
       end
     end
   end

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

@@ -28,6 +28,9 @@ export default class PbDropdown extends PbEnhancedElement {
   clearBtn = null;
 
   connect() {
+    // Store instance on element for DatePicker sync
+    this.element._pbDropdownInstance = this;
+    
     this.keyboardHandler = new PbDropdownKeyboard(this);
     this.isMultiSelect = this.element.dataset.pbDropdownMultiSelect === "true";
     this.formPillProps = this.element.dataset.formPillProps
@@ -252,6 +255,67 @@ export default class PbDropdown extends PbEnhancedElement {
         const selectedLabel = JSON.parse(value).label;
         triggerElement.textContent = selectedLabel;
         this.emitSelectionChange();
+        
+        // Handle quickpick variant: populate start/end date hidden inputs
+        const optionData = JSON.parse(value);
+        const startDateId = this.element.dataset.startDateId;
+        const endDateId = this.element.dataset.endDateId;
+        const controlsStartId = this.element.dataset.controlsStartId;
+        const controlsEndId = this.element.dataset.controlsEndId;
+        
+        if (optionData.formatted_start_date && optionData.formatted_end_date) {
+          // Populate date inputs when option has date fields
+          if (startDateId) {
+            const startDateInput = document.getElementById(startDateId);
+            if (startDateInput) startDateInput.value = optionData.formatted_start_date;
+          }
+          
+          if (endDateId) {
+            const endDateInput = document.getElementById(endDateId);
+            if (endDateInput) endDateInput.value = optionData.formatted_end_date;
+          }
+          
+          // Sync with DatePickers if controlsStartId/controlsEndId are present
+          if (controlsStartId) {
+            const startPicker = document.querySelector(`#${controlsStartId}`)?._flatpickr;
+            if (startPicker) {
+              startPicker.setDate(optionData.formatted_start_date, true, "m/d/Y");
+            }
+          }
+          
+          if (controlsEndId) {
+            const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+            if (endPicker) {
+              endPicker.setDate(optionData.formatted_end_date, true, "m/d/Y");
+            }
+          }
+        } else if (startDateId || endDateId) {
+          // Clear date inputs when option doesn't have date fields (e.g., blank selection)
+          if (startDateId) {
+            const startDateInput = document.getElementById(startDateId);
+            if (startDateInput) startDateInput.value = "";
+          }
+          
+          if (endDateId) {
+            const endDateInput = document.getElementById(endDateId);
+            if (endDateInput) endDateInput.value = "";
+          }
+          
+          // Clear DatePickers as well
+          if (controlsStartId) {
+            const startPicker = document.querySelector(`#${controlsStartId}`)?._flatpickr;
+            if (startPicker) {
+              startPicker.clear();
+            }
+          }
+          
+          if (controlsEndId) {
+            const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+            if (endPicker) {
+              endPicker.clear();
+            }
+          }
+        }
       }
       if (customDisplayElement) {
         triggerElement.textContent = "";
@@ -432,9 +496,50 @@ export default class PbDropdown extends PbEnhancedElement {
       if (!selectedOption) return;
 
       selectedOption.classList.add("pb_dropdown_option_selected");
-      this.setTriggerElementText(
-        JSON.parse(selectedOption.dataset.dropdownOptionLabel).label
-      );
+      const optionData = JSON.parse(selectedOption.dataset.dropdownOptionLabel);
+      this.setTriggerElementText(optionData.label);
+      
+      // Handle quickpick variant: populate start/end date hidden inputs and sync DatePickers
+      if (optionData.formatted_start_date && optionData.formatted_end_date) {
+        const startDateId = this.element.dataset.startDateId;
+        const endDateId = this.element.dataset.endDateId;
+        const controlsStartId = this.element.dataset.controlsStartId;
+        const controlsEndId = this.element.dataset.controlsEndId;
+        
+        if (startDateId) {
+          const startDateInput = document.getElementById(startDateId);
+          if (startDateInput) startDateInput.value = optionData.formatted_start_date;
+        }
+        
+        if (endDateId) {
+          const endDateInput = document.getElementById(endDateId);
+          if (endDateInput) endDateInput.value = optionData.formatted_end_date;
+        }
+        
+        // Sync with DatePickers - retry with delays to ensure DatePickers are initialized
+        const syncDatePickers = () => {
+          if (controlsStartId) {
+            const startPicker = document.querySelector(`#${controlsStartId}`)?._flatpickr;
+            if (startPicker) {
+              startPicker.setDate(optionData.formatted_start_date, true, "m/d/Y");
+            }
+          }
+          
+          if (controlsEndId) {
+            const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+            if (endPicker) {
+              endPicker.setDate(optionData.formatted_end_date, true, "m/d/Y");
+            }
+          }
+        };
+        
+        // Try immediately
+        syncDatePickers();
+        
+        // Retry after short delay in case DatePickers aren't ready yet
+        setTimeout(syncDatePickers, 100);
+        setTimeout(syncDatePickers, 300);
+      }
     }
   }
 
@@ -571,6 +676,37 @@ export default class PbDropdown extends PbEnhancedElement {
     if (customDisplay) {
       customDisplay.style.display = "none";
     }
+    
+    // Clear quickpick hidden inputs
+    const startDateId = this.element.dataset.startDateId;
+    const endDateId = this.element.dataset.endDateId;
+    const controlsStartId = this.element.dataset.controlsStartId;
+    const controlsEndId = this.element.dataset.controlsEndId;
+    
+    if (startDateId) {
+      const startDateInput = document.getElementById(startDateId);
+      if (startDateInput) startDateInput.value = "";
+    }
+    if (endDateId) {
+      const endDateInput = document.getElementById(endDateId);
+      if (endDateInput) endDateInput.value = "";
+    }
+    
+    // Clear linked DatePickers if controlsStartId/controlsEndId are present
+    if (controlsStartId) {
+      const startPicker = document.querySelector(`#${controlsStartId}`)?._flatpickr;
+      if (startPicker) {
+        startPicker.clear();
+      }
+    }
+    
+    if (controlsEndId) {
+      const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+      if (endPicker) {
+        endPicker.clear();
+      }
+    }
+    
     this.resetDropdownValue();
     this.updatePills();
     this.updateClearButton();
@@ -578,6 +714,38 @@ export default class PbDropdown extends PbEnhancedElement {
     this.emitSelectionChange();
   }
 
+  // Method for DatePicker sync - only clears the dropdown, not the DatePickers
+  clearSelected() {
+    // Only clear if this is a single-select quickpick variant
+    if (this.element.dataset.pbDropdownVariant !== "quickpick" || this.isMultiSelect) {
+      return;
+    }
+    
+    const customDisplay = this.element.querySelector(
+      "#dropdown_trigger_custom_display"
+    );
+    if (customDisplay) {
+      customDisplay.style.display = "none";
+    }
+    
+    // Clear quickpick hidden inputs only (not the DatePickers)
+    const startDateId = this.element.dataset.startDateId;
+    const endDateId = this.element.dataset.endDateId;
+    
+    if (startDateId) {
+      const startDateInput = document.getElementById(startDateId);
+      if (startDateInput) startDateInput.value = "";
+    }
+    if (endDateId) {
+      const endDateInput = document.getElementById(endDateId);
+      if (endDateInput) endDateInput.value = "";
+    }
+    
+    this.resetDropdownValue();
+    this.updateClearButton();
+    this.emitSelectionChange();
+  }
+
   syncHiddenInputs() {
     if (!this.isMultiSelect) return;
     this.element

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

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDropdown
+    module QuickpickHelper
+      class << self
+        def get_quickpick_options(range_ends_today: false)
+          today = Date.today
+          yesterday = today - 1.day
+
+          this_week_start_date = first_day_of_week(today)
+          this_week_end_date = range_ends_today ? today : last_day_of_week(today)
+          last_week_start_date = previous_week_start_date(today)
+          last_week_end_date = previous_week_end_date(today)
+
+          this_month_start_date = today.beginning_of_month
+          this_month_end_date = range_ends_today ? today : today.end_of_month
+          last_month_start_date = (today - 1.month).beginning_of_month
+          last_month_end_date = (today - 1.month).end_of_month
+
+          this_quarter_start_date = today.beginning_of_quarter
+          this_quarter_end_date = range_ends_today ? today : today.end_of_quarter
+          last_quarter_start_date = (today - 3.months).beginning_of_quarter
+          last_quarter_end_date = (today - 3.months).end_of_quarter
+
+          this_year_start_date = today.beginning_of_year
+          this_year_end_date = range_ends_today ? today : today.end_of_year
+          last_year_start_date = (today - 1.year).beginning_of_year
+          last_year_end_date = (today - 1.year).end_of_year
+
+          [
+            { id: "quickpick-today", label: "Today", value: [today.to_s, today.to_s], formatted_start_date: format_date(today), formatted_end_date: format_date(today) },
+            { id: "quickpick-yesterday", label: "Yesterday", value: [yesterday.to_s, yesterday.to_s], formatted_start_date: format_date(yesterday), formatted_end_date: format_date(yesterday) },
+            { id: "quickpick-this-week", label: "This Week", value: [this_week_start_date.to_s, this_week_end_date.to_s], formatted_start_date: format_date(this_week_start_date), formatted_end_date: format_date(this_week_end_date) },
+            { id: "quickpick-this-month", label: "This Month", value: [this_month_start_date.to_s, this_month_end_date.to_s], formatted_start_date: format_date(this_month_start_date), formatted_end_date: format_date(this_month_end_date) },
+            { id: "quickpick-this-quarter", label: "This Quarter", value: [this_quarter_start_date.to_s, this_quarter_end_date.to_s], formatted_start_date: format_date(this_quarter_start_date), formatted_end_date: format_date(this_quarter_end_date) },
+            { id: "quickpick-this-year", label: "This Year", value: [this_year_start_date.to_s, this_year_end_date.to_s], formatted_start_date: format_date(this_year_start_date), formatted_end_date: format_date(this_year_end_date) },
+            { id: "quickpick-last-week", label: "Last Week", value: [last_week_start_date.to_s, last_week_end_date.to_s], formatted_start_date: format_date(last_week_start_date), formatted_end_date: format_date(last_week_end_date) },
+            { id: "quickpick-last-month", label: "Last Month", value: [last_month_start_date.to_s, last_month_end_date.to_s], formatted_start_date: format_date(last_month_start_date), formatted_end_date: format_date(last_month_end_date) },
+            { id: "quickpick-last-quarter", label: "Last Quarter", value: [last_quarter_start_date.to_s, last_quarter_end_date.to_s], formatted_start_date: format_date(last_quarter_start_date), formatted_end_date: format_date(last_quarter_end_date) },
+            { id: "quickpick-last-year", label: "Last Year", value: [last_year_start_date.to_s, last_year_end_date.to_s], formatted_start_date: format_date(last_year_start_date), formatted_end_date: format_date(last_year_end_date) },
+          ]
+        end
+
+      private
+
+        def format_date(date)
+          date.strftime("%m/%d/%Y")
+        end
+
+        def format_date_range(start_date, end_date)
+          "#{format_date(start_date)} - #{format_date(end_date)}"
+        end
+
+        def first_day_of_week(date)
+          # Monday as first day of week
+          date.beginning_of_week(:monday)
+        end
+
+        def last_day_of_week(date)
+          # Sunday as last day of week
+          date.end_of_week(:monday)
+        end
+
+        def previous_week_start_date(date)
+          first_day_of_week(date) - 1.week
+        end
+
+        def previous_week_end_date(date)
+          last_day_of_week(date) - 1.week
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx

@@ -6,10 +6,10 @@ import { GlobalProps, globalProps } from '../../utilities/globalProps'
 import Card from '../../pb_card/_card'
 
 export type FilterBackgroundProps = {
-  background: boolean,
-  className: string,
+  background?: boolean,
+  className?: string,
   children?: React.ReactChild[] | React.ReactChild,
-  dark: boolean,
+  dark?: boolean,
 } & GlobalProps
 
 const FilterBackground = (props: FilterBackgroundProps): React.ReactElement => {

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" } %>

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

@@ -0,0 +1,14 @@
+<%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
+  <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
+  <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
+
+  <%= form.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.md

@@ -0,0 +1,3 @@
+The `required_indicator` prop adds a red asterisk (*) to the input label, visually marking the field as required. This works with both `label: true` for auto-generated labels and `label: "Custom Text"` for custom labels.
+
+While it's typically used alongside the `required` prop for HTML5 validation, you can use `required_indicator` independently if you're handling validation differently (e.g., client-side or backend validation).

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

@@ -4,3 +4,4 @@ examples:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
   - form_form_with_loading: Default + Loading
+  - form_with_required_indicator: With Optional Required Indicator

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -10,6 +10,7 @@ import solidGauge from "highcharts/modules/solid-gauge";
 import defaultColors from "../tokens/exports/_colors.module.scss";
 import typography from "../tokens/exports/_typography.module.scss";
 
+import { deprecatedKitWarning } from "../utilities/deprecated";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import { GenericObject } from "../types";
@@ -191,6 +192,11 @@ const Gauge = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chartData]);
 
+    useEffect(() => {
+    // Warn about deprecated kit
+    deprecatedKitWarning('Gauge', 'Please use "PbGaugeChart" instead.');
+  }, []);
+
   return (
     <HighchartsReact
         containerProps={{

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 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";
@@ -142,6 +143,11 @@ const LineGraph = ({
     setOptions(merge(staticOptions, customOptions));
   }, [chartData]);
 
+    useEffect(() => {
+      // Warn about deprecated kit
+      deprecatedKitWarning('LineGraph', 'Please use "PbLineGraph" instead.');
+    }, []);
+
   return (
     <HighchartsReact
         containerProps={{

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.md

@@ -1 +1 @@
-Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Error shows that the radio option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -29,6 +29,7 @@ type SelectProps = {
   id?: string,
   includeBlank?: string,
   inline?: boolean,
+  inputOptions?: {[key: string]: string | number | boolean | (() => void)},
   label?: string,
   margin: string,
   marginBottom: string,
@@ -63,6 +64,7 @@ const Select = ({
   label,
   htmlOptions = {},
   inline = false,
+  inputOptions = {},
   multiple = false,
   name,
   onChange = () => undefined,
@@ -94,14 +96,17 @@ const Select = ({
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
+  const selectId = (inputOptions?.id as string) || name
+
   const selectBody =(() =>{
     if (children) return children
     return (
       <select
           {...htmlOptions}
           {...domSafeProps(props)}
+          {...inputOptions}
           disabled={disabled}
-          id={name}
+          id={selectId}
           multiple={multiple}
           name={name}
           onChange={onChange}
@@ -125,7 +130,7 @@ const Select = ({
       {label &&
         <label
             className="pb_select_kit_label"
-            htmlFor={name}
+            htmlFor={selectId}
         >
           <Caption 
               dark={props.dark}
@@ -135,7 +140,7 @@ const Select = ({
       }
       <label
           className={selectWrapperClass}
-          htmlFor={name}
+          htmlFor={selectId}
       >
         {selectBody}
         { multiple !== true ?

data/app/pb_kits/playbook/pb_select/docs/_select_error.md

@@ -1 +1 @@
-Select w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Select w/ Error shows that an option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.html.erb

@@ -0,0 +1,16 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "favorite_food",
+  options: [
+    { value: "pizza", value_text: "Pizza" },
+    { value: "tacos", value_text: "Tacos" },
+    { value: "sushi", value_text: "Sushi" }
+  ],
+  input_options: {
+    'aria-label': "Select your favorite food",
+    class: "custom-select-class",
+    data: { controller: "search", action: "change->search#filter" },
+    id: "favorite-food-select"
+  }
+}) %>
+

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectInputOptions = (props) => {
+  const options = [
+    { value: 'pizza', text: 'Pizza' },
+    { value: 'tacos', text: 'Tacos' },
+    { value: 'sushi', text: 'Sushi' },
+  ]
+
+  return (
+    <>
+      <Select
+          inputOptions={{
+            'aria-label': 'Select your favorite food',
+            className: 'custom-select-class',
+            id: 'favorite-food-select',
+          }}
+          label="Favorite Food"
+          name="favorite_food"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default SelectInputOptions
+

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.md

@@ -0,0 +1 @@
+Use the `input_options` / `inputOptions` prop to pass additional attributes directly to the underlying `<select>` element instead of the outer wrapper. This is useful for applying data attributes, custom IDs, or other HTML attributes that need to be on the select element itself.

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

@@ -15,6 +15,7 @@ examples:
   - select_inline_compact: Select Inline Compact
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
+  - select_input_options: Input Options
 
 
 
@@ -33,6 +34,7 @@ examples:
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
   - select_react_hook: React Hook
+  - select_input_options: Input Options
 
   swift:
   - select_default_swift: Default

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

@@ -12,3 +12,4 @@ export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
 export { default as SelectReactHook } from './_select_react_hook.jsx'
 export { default as SelectCustomSelectSubheaders } from './_select_custom_select_subheaders.jsx'
+export { default as SelectInputOptions } from './_select_input_options.jsx'

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -2,11 +2,11 @@
   id: nil,
   class: object.classnames ) do %>
   <% if object.label %>
-    <label class="pb_select_kit_label" for="<%= object.name %>">
+    <label class="pb_select_kit_label" for="<%= object.input_options[:id] || object.name %>">
       <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     </label>
   <% end %>
-  <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
+  <label class="<%= object.select_wrapper_class %>" for="<%= object.input_options[:id] || object.name %>">
     <% if content.present? %>
       <%= content %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -14,6 +14,8 @@ module Playbook
       prop :error
       prop :include_blank
       prop :inline, type: Playbook::Props::Boolean, default: false
+      prop :input_options, type: Playbook::Props::HashProp,
+                           default: {}
       prop :label
       prop :multiple, type: Playbook::Props::Boolean, default: false
       prop :name
@@ -38,7 +40,7 @@ module Playbook
           multiple: multiple,
           onchange: onchange,
           include_blank: include_blank,
-        }.merge(attributes)
+        }.merge(attributes).merge(input_options)
       end
 
       def classname