playbook_ui 15.6.0.pre.alpha.play266913088 → 15.6.0.pre.rc.0

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

@@ -47,7 +47,7 @@
 %>
 
 
-<%= pb_rails("dropdown", props: {id: "user-dropdown", options: options}) do %>
+<%= pb_rails("dropdown", props: {options: options}) do %>
     <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Select a User", custom_display: custom_display}) %>
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
@@ -71,8 +71,6 @@
 
 <script>
   document.addEventListener("pb:dropdown:selected", (e) => {
-    if (e.target.id !== "user-dropdown") return;
-    
     const option   = e.detail;
     const dropdown = e.target;
 

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

@@ -22,11 +22,6 @@ examples:
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_separators_hidden: Separators Hidden
-  - 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_with_date_pickers_rails: Quick Pick with Date Pickers
-  - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
 
   react:
   - dropdown_default: Default

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -10,10 +10,6 @@
             style="display: none"
             <%= object.required ? "required" : ""%>
         />
-        <% if object.variant == "quickpick" %>
-          <input id="<%= object.start_date_id %>" name="<%= object.start_date_name %>" style="display: none">
-          <input id="<%= object.end_date_id %>" name="<%= object.end_date_name %>" style="display: none">
-        <% end %>
         <% if content.present? %>
             <%= content.presence %>
             <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

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

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-require_relative "quickpick_helper"
-
 module Playbook
   module PbDropdown
     class Dropdown < Playbook::KitBase
@@ -16,7 +14,7 @@ module Playbook
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default subtle quickpick],
+                     values: %w[default subtle],
                      default: "default"
       prop :separators, type: Playbook::Props::Boolean,
                         default: true
@@ -28,32 +26,13 @@ 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,
-          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
+          form_pill_props: form_pill_props.to_json
+        )
       end
 
       def classname
@@ -69,15 +48,7 @@ module Playbook
       def input_default_value
         return "" unless default_value.present?
 
-        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
+        if multi_select
           default_value.map { |v| v.transform_keys(&:to_s)["id"] }.join(",")
         else
           default_value.transform_keys(&:to_s)["id"]
@@ -89,12 +60,7 @@ module Playbook
       end
 
       def options_with_blank
-        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)
+        blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options
       end
     end
   end

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

@@ -28,9 +28,6 @@ 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
@@ -255,67 +252,6 @@ 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 = "";
@@ -496,50 +432,9 @@ export default class PbDropdown extends PbEnhancedElement {
       if (!selectedOption) return;
 
       selectedOption.classList.add("pb_dropdown_option_selected");
-      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);
-      }
+      this.setTriggerElementText(
+        JSON.parse(selectedOption.dataset.dropdownOptionLabel).label
+      );
     }
   }
 
@@ -676,37 +571,6 @@ 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();
@@ -714,38 +578,6 @@ 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_file_upload/_file_upload.scss

@@ -1,5 +1,5 @@
 .pb_file_upload_kit {
-  .pb_card_kit {
+  .pb_card_kit_deselected_border_radius_md {
     border: 1px #ccc dashed;
     text-align: center;
   }
@@ -11,7 +11,7 @@
   }
   &.error,
   &.pb_file_upload_kit_error {
-    .pb_card_kit {
+    .pb_card_kit_deselected_border_radius_md {
       border-color: $error;
     }
     .pb_body_kit_negative {
@@ -30,12 +30,12 @@
 }
 
 .dark .pb_file_upload_kit {
-  .pb_card_kit {
+  .pb_card_kit_deselected_border_radius_md {
     border: 1px $text_dk_lighter dashed;
   }
   &.error,
   &.pb_file_upload_kit_error {
-    .pb_card_kit {
+    .pb_card_kit_deselected_border_radius_md {
       border-color: $error_dark;
     }
   }

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_home_address_street/_home_address_street.tsx

@@ -96,24 +96,20 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       {hasAllEmptyProps && '—'}
       {emphasis == 'street' && !hasAllEmptyProps &&
         <div>
-          {(address || houseStyle) && (
-            <Title
-                className="pb_home_address_street_address"
-                dark={dark}
-                size={4}
-            >
-              {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
-            </Title>
-          )}
-          {addressCont && (
-            <Title
-                className="pb_home_address_street_address"
-                dark={dark}
-                size={4}
-            >
-              {titleize(addressCont)}
-            </Title>
-          )}
+          <Title
+              className="pb_home_address_street_address"
+              dark={dark}
+              size={4}
+          >
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+          </Title>
+          <Title
+              className="pb_home_address_street_address"
+              dark={dark}
+              size={4}
+          >
+            {titleize(addressCont)}
+          </Title>
           <Body color="light">
             {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
           </Body>
@@ -121,14 +117,10 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       }
       {emphasis == 'city' && !hasAllEmptyProps &&
         <div>
-          {(address || houseStyle) && (
-            <Body color="light">
-              {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
-            </Body>
-          )}
-          {addressCont && (
-            <Body color="light">{titleize(addressCont)}</Body>
-          )}
+          <Body color="light">
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+          </Body>
+          <Body color="light">{titleize(addressCont)}</Body>
           <div>
             <Title
                 className="pb_home_address_street_address"
@@ -149,14 +141,10 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       }
       {emphasis == 'none' && !hasAllEmptyProps &&
         <div>
-          {(address || houseStyle) && (
-            <Body dark={dark}>
-              {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
-            </Body>
-          )}
-          {addressCont && (
-            <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
-          )}
+          <Body dark={dark}>
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+          </Body>
+          <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
           <div>
             <Body
                 color="light"

data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb

@@ -1,19 +1,15 @@
-<% if object.address_house_style.present? %>
-  <%= pb_rails "body", props: {
-    classname: "pb_home_address_street_address",
-    color: "light",
-    text: object.address_house_style,
-    dark: object.dark
-  } %>
-<% end %>
-<% if object.address_house_style2.present? %>
-  <%= pb_rails "body", props: {
-    classname: "pb_home_address_street_address",
-    color: "light",
-    text: object.address_house_style2,
-    dark: object.dark
-  } %>
-<% end %>
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  color: "light",
+  text: object.address_house_style,
+  dark: object.dark
+} %>
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  color: "light",
+  text: object.address_house_style2,
+  dark: object.dark
+} %>
 <div>
   <%= pb_rails "title", props: {
     tag: "span",

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb

@@ -8,4 +8,4 @@
   state: "PA",
   zipcode: "19382",
   territory: "PHL",
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/none_emphasis.html.erb

@@ -1,19 +1,15 @@
-<% if object.address_house_style.present? %>
-  <%= pb_rails "body", props: {
-    classname: "pb_home_address_street_address",
-    size: 4,
-    text: object.address_house_style,
-    dark: object.dark
-  } %>
-<% end %>
-<% if object.address_house_style2.present? %>
-  <%= pb_rails "body", props: {
-    classname: "pb_home_address_street_address",
-    size: 4,
-    text: object.address_house_style2,
-    dark: object.dark
-  } %>
-<% end %>
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style,
+  dark: object.dark
+} %>
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style2,
+  dark: object.dark
+} %>
 <%= pb_rails "body", props: {
   color: "light",
   text: object.city_state_zip,

data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb

@@ -1,19 +1,15 @@
-<% if object.address_house_style.present? %>
-  <%= pb_rails "title", props: {
-    classname: "pb_home_address_street_address",
-    size: 4,
-    text: object.address_house_style,
-    dark: object.dark
-  } %>
-<% end %>
-<% if object.address_house_style2.present? %>
-  <%= pb_rails "title", props: {
-    classname: "pb_home_address_street_address",
-    size: 4,
-    text: object.address_house_style2,
-    dark: object.dark
-  } %>
-<% end %>
+<%= pb_rails "title", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style,
+  dark: object.dark
+} %>
+<%= pb_rails "title", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style2,
+  dark: object.dark
+} %>
 <%= pb_rails "body", props: {
   color: "light",
   text: object.city_state_zip,

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -36,16 +36,6 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     height: $pb_multiple_users_size_xxs;
   }
 
-
-  .user_tooltip {
-    margin-left: $pb_multiple_users_overlap !important;
-  }
-
-  .user_count_tooltip {
-    margin-left: $pb_multiple_users_overlap !important;
-    position: relative;
-  }
-
   .pb_multiple_users_item {
     margin-left: $pb_multiple_users_overlap;
     margin-right: 0;