playbook_ui 16.2.0.pre.rc.3 → 16.2.0.pre.rc.4

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

@@ -4,16 +4,18 @@ import { PbDropdownKeyboard } from "./keyboard_accessibility";
 const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
 const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
 const CONTAINER_SELECTOR = "[data-dropdown-container]";
-const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
-const UP_ARROW_SELECTOR = "#dropdown_close_icon";
+const DOWN_ARROW_SELECTOR = "[data-dropdown-open-icon]";
+const UP_ARROW_SELECTOR = "[data-dropdown-close-icon]";
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
 const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
-const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
+const DROPDOWN_TRIGGER_DISPLAY = "[data-dropdown-trigger-display]";
 const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
-const DROPDOWN_INPUT = "#dropdown-selected-option";
+const DROPDOWN_INPUT = "[data-dropdown-selected-option]";
 const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
 const SEARCH_BAR_SELECTOR = "[data-dropdown-search]";
-const CLEAR_ICON_SELECTOR = "#dropdown_clear_icon";
+const CLEAR_ICON_SELECTOR = "[data-dropdown-clear-icon]";
+const LABEL_SELECTOR = '[data-dropdown="pb-dropdown-label"]';
+
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
@@ -30,14 +32,15 @@ export default class PbDropdown extends PbEnhancedElement {
   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
       ? JSON.parse(this.element.dataset.formPillProps)
       : {};
     const baseInput = this.element.querySelector(DROPDOWN_INPUT);
-    this.wasOriginallyRequired = baseInput && baseInput.hasAttribute("required");
+    this.wasOriginallyRequired =
+      baseInput && baseInput.hasAttribute("required");
     this.setDefaultValue();
     this.bindEventListeners();
     this.bindSearchInput();
@@ -75,15 +78,24 @@ export default class PbDropdown extends PbEnhancedElement {
   bindEventListeners() {
     const customTrigger =
       this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element;
-    customTrigger.addEventListener("click", () =>
-      this.toggleElement(this.target)
-    );
+    customTrigger.addEventListener("click", (e) => {
+      const label = e.target.closest(LABEL_SELECTOR);
+      if (label && label.htmlFor) {
+        const trigger = this.element.querySelector(
+          `#${CSS.escape(label.htmlFor)}`,
+        );
+        if (trigger) {
+          trigger.focus();
+        }
+      }
+      this.toggleElement(this.target);
+    });
 
     this.target.addEventListener("click", this.handleOptionClick.bind(this));
     document.addEventListener(
       "click",
       this.handleDocumentClick.bind(this),
-      true
+      true,
     );
   }
 
@@ -92,7 +104,7 @@ export default class PbDropdown extends PbEnhancedElement {
     if (!this.searchBar) return;
 
     this.searchBar.addEventListener("input", (e) =>
-      this.handleSearch(e.target.value)
+      this.handleSearch(e.target.value),
     );
   }
 
@@ -107,7 +119,7 @@ export default class PbDropdown extends PbEnhancedElement {
 
     // Live filter
     this.searchInput.addEventListener("input", (e) =>
-      this.handleSearch(e.target.value)
+      this.handleSearch(e.target.value),
     );
   }
 
@@ -161,28 +173,31 @@ export default class PbDropdown extends PbEnhancedElement {
 
   handleSearch(term = "") {
     const lcTerm = term.toLowerCase();
-    let hasMatch = false
+    let hasMatch = false;
     this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
       //make it so that if the option is selected, it will not show up in the search results
-      if (this.isMultiSelect && this.selectedOptions.has(opt.dataset.dropdownOptionLabel)) {
-      opt.style.display = "none";
-      return;
-    }
+      if (
+        this.isMultiSelect &&
+        this.selectedOptions.has(opt.dataset.dropdownOptionLabel)
+      ) {
+        opt.style.display = "none";
+        return;
+      }
       const label = JSON.parse(opt.dataset.dropdownOptionLabel)
         .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
+      if (match) hasMatch = true;
     });
 
     this.adjustDropdownHeight();
 
-    this.removeNoOptionsMessage()
+    this.removeNoOptionsMessage();
     if (!hasMatch) {
-      this.showNoOptionsMessage()
+      this.showNoOptionsMessage();
     }
   }
 
@@ -190,7 +205,8 @@ export default class PbDropdown extends PbEnhancedElement {
     if (this.element.querySelector(".dropdown_no_options")) return;
 
     const noOptionElement = document.createElement("div");
-    noOptionElement.className = "pb_body_kit_light dropdown_no_options pb_item_kit p_xs display_flex justify_content_center";
+    noOptionElement.className =
+      "pb_body_kit_light dropdown_no_options pb_item_kit p_xs display_flex justify_content_center";
     noOptionElement.textContent = "no option";
 
     this.target.appendChild(noOptionElement);
@@ -241,6 +257,8 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   isClickOutside(event) {
+    const label = event.target.closest(LABEL_SELECTOR);
+    if (label && this.element.contains(label)) return false;
     const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
     if (customTrigger) {
       return !customTrigger.contains(event.target);
@@ -271,8 +289,8 @@ export default class PbDropdown extends PbEnhancedElement {
         ? JSON.parse(
             this.element.querySelector(
               OPTION_SELECTOR +
-                `[data-dropdown-option-label*='"id":"${hiddenInput.value}"']`
-            ).dataset.dropdownOptionLabel
+                `[data-dropdown-option-label*='"id":"${hiddenInput.value}"']`,
+            ).dataset.dropdownOptionLabel,
           )
         : null;
     }
@@ -281,14 +299,14 @@ export default class PbDropdown extends PbEnhancedElement {
       new CustomEvent("pb:dropdown:selected", {
         detail,
         bubbles: true,
-      })
+      }),
     );
   }
 
   onOptionSelected(value, selectedOption) {
     const triggerElement = this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);
     const customDisplayElement = this.element.querySelector(
-      "#dropdown_trigger_custom_display"
+      '[data-dropdown-trigger-custom-display]',
     );
 
     if (triggerElement) {
@@ -296,36 +314,46 @@ 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 (startDateInput)
+              startDateInput.value = optionData.formatted_start_date;
           }
-          
+
           if (endDateId) {
             const endDateInput = document.getElementById(endDateId);
-            if (endDateInput) endDateInput.value = optionData.formatted_end_date;
+            if (endDateInput)
+              endDateInput.value = optionData.formatted_end_date;
           }
-          
+
           // Sync with DatePickers if controlsStartId/controlsEndId are present
           if (controlsStartId) {
-            const startPicker = document.querySelector(`#${controlsStartId}`)?._flatpickr;
+            const startPicker = document.querySelector(
+              `#${controlsStartId}`,
+            )?._flatpickr;
             if (startPicker) {
-              startPicker.setDate(optionData.formatted_start_date, true, "m/d/Y");
+              startPicker.setDate(
+                optionData.formatted_start_date,
+                true,
+                "m/d/Y",
+              );
             }
           }
-          
+
           if (controlsEndId) {
-            const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+            const endPicker = document.querySelector(
+              `#${controlsEndId}`,
+            )?._flatpickr;
             if (endPicker) {
               endPicker.setDate(optionData.formatted_end_date, true, "m/d/Y");
             }
@@ -336,22 +364,26 @@ export default class PbDropdown extends PbEnhancedElement {
             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;
+            const startPicker = document.querySelector(
+              `#${controlsStartId}`,
+            )?._flatpickr;
             if (startPicker) {
               startPicker.clear();
             }
           }
-          
+
           if (controlsEndId) {
-            const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+            const endPicker = document.querySelector(
+              `#${controlsEndId}`,
+            )?._flatpickr;
             if (endPicker) {
               endPicker.clear();
             }
@@ -391,7 +423,9 @@ export default class PbDropdown extends PbEnhancedElement {
           this.adjustDropdownHeight();
         }
       });
-      this.element.querySelector(DROPDOWN_INPUT).value = Array.from(this.selectedOptions)
+      this.element.querySelector(DROPDOWN_INPUT).value = Array.from(
+        this.selectedOptions,
+      )
         .map((opt) => JSON.parse(opt).id)
         .join(",");
     } else {
@@ -437,7 +471,7 @@ export default class PbDropdown extends PbEnhancedElement {
       this.keyboardHandler.focusedOptionIndex = -1;
       const options = this.element.querySelectorAll(OPTION_SELECTOR);
       options.forEach((option) =>
-        option.classList.remove("pb_dropdown_option_focused")
+        option.classList.remove("pb_dropdown_option_focused"),
       );
     }
   }
@@ -472,7 +506,7 @@ export default class PbDropdown extends PbEnhancedElement {
           hiddenInput.closest(".dropdown_wrapper").classList.add("error");
         }
       },
-      true
+      true,
     );
   }
 
@@ -482,7 +516,7 @@ export default class PbDropdown extends PbEnhancedElement {
         const dropdownWrapperElement = input.closest(".dropdown_wrapper");
         dropdownWrapperElement.classList.remove("error");
         const errorLabelElement = dropdownWrapperElement.querySelector(
-          ".pb_body_kit_negative"
+          ".pb_body_kit_negative",
         );
         if (errorLabelElement) {
           errorLabelElement.remove();
@@ -490,13 +524,13 @@ export default class PbDropdown extends PbEnhancedElement {
         return;
       }
     }
-    
+
     if (input.checkValidity()) {
       const dropdownWrapperElement = input.closest(".dropdown_wrapper");
       dropdownWrapperElement.classList.remove("error");
 
       const errorLabelElement = dropdownWrapperElement.querySelector(
-        ".pb_body_kit_negative"
+        ".pb_body_kit_negative",
       );
       if (errorLabelElement) {
         errorLabelElement.remove();
@@ -507,7 +541,7 @@ export default class PbDropdown extends PbEnhancedElement {
   setDefaultValue() {
     const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
     const optionEls = Array.from(
-      this.element.querySelectorAll(OPTION_SELECTOR)
+      this.element.querySelectorAll(OPTION_SELECTOR),
     );
     const defaultValue = hiddenInput.dataset.defaultValue || "";
     if (!defaultValue) return;
@@ -553,44 +587,53 @@ export default class PbDropdown extends PbEnhancedElement {
       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 (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;
+            const startPicker = document.querySelector(
+              `#${controlsStartId}`,
+            )?._flatpickr;
             if (startPicker) {
-              startPicker.setDate(optionData.formatted_start_date, true, "m/d/Y");
+              startPicker.setDate(
+                optionData.formatted_start_date,
+                true,
+                "m/d/Y",
+              );
             }
           }
-          
+
           if (controlsEndId) {
-            const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+            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);
@@ -651,9 +694,9 @@ export default class PbDropdown extends PbEnhancedElement {
   updatePills() {
     if (!this.isMultiSelect) return;
 
-    const wrapper = this.element.querySelector("#dropdown_pills_wrapper");
+    const wrapper = this.element.querySelector('[data-dropdown-pills-wrapper]');
     const placeholder = this.element.querySelector(
-      "#dropdown_trigger_display_multi_select"
+      '[data-dropdown-trigger-display-multi-select]',
     );
     if (!wrapper) return;
 
@@ -671,7 +714,12 @@ export default class PbDropdown extends PbEnhancedElement {
       // Create a form pill for each selected option
       const pill = document.createElement("div");
       const color = this.formPillProps.color || "primary";
-      pill.classList.add("pb_form_pill_kit", `pb_form_pill_${color}`, "pb_form_pill_none", "mr_xs");
+      pill.classList.add(
+        "pb_form_pill_kit",
+        `pb_form_pill_${color}`,
+        "pb_form_pill_none",
+        "mr_xs",
+      );
       if (this.formPillProps.size === "small") {
         pill.classList.add("pb_form_pill_small");
       }
@@ -696,8 +744,8 @@ export default class PbDropdown extends PbEnhancedElement {
 
         const optEl = this.element.querySelector(
           `${OPTION_SELECTOR}[data-dropdown-option-label*='"id":${JSON.stringify(
-            id
-          )}']`
+            id,
+          )}']`,
         );
         if (optEl) {
           optEl.style.display = "";
@@ -726,18 +774,18 @@ export default class PbDropdown extends PbEnhancedElement {
       }
     }
     const customDisplay = this.element.querySelector(
-      "#dropdown_trigger_custom_display"
+      '[data-dropdown-trigger-custom-display]',
     );
     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 = "";
@@ -746,22 +794,24 @@ export default class PbDropdown extends PbEnhancedElement {
       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;
+      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();
@@ -772,21 +822,24 @@ export default class PbDropdown extends PbEnhancedElement {
   // 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) {
+    if (
+      this.element.dataset.pbDropdownVariant !== "quickpick" ||
+      this.isMultiSelect
+    ) {
       return;
     }
-    
+
     const customDisplay = this.element.querySelector(
-      "#dropdown_trigger_custom_display"
+      '[data-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 = "";
@@ -795,7 +848,7 @@ export default class PbDropdown extends PbEnhancedElement {
       const endDateInput = document.getElementById(endDateId);
       if (endDateInput) endDateInput.value = "";
     }
-    
+
     this.resetDropdownValue();
     this.updateClearButton();
     this.emitSelectionChange();
@@ -822,7 +875,7 @@ export default class PbDropdown extends PbEnhancedElement {
       inp.dataset.generated = "true";
       baseInput.insertAdjacentElement("afterend", inp);
     });
-    
+
     // For multi-select, remove required from base input when there are selections
     // The generated inputs handle the form submission with actual values
     // Restore required attribute when there are no selections (if it was originally required)

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -45,6 +45,8 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
   const {
     autocomplete,
     clearable,
+    error,
+    errorId,
     filterItem,
     handleBackspace,
     handleChange,
@@ -53,8 +55,10 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     inputWrapperRef,
     isDropDownClosed,
     isInputFocused,
+    label: contextLabel,
     multiSelect,
     selected,
+    selectId,
     setIsInputFocused,
     toggleDropdown,
   } = useContext(DropdownContext);
@@ -104,6 +108,10 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     ? placeholder
     : "Select...";
 
+  const triggerAriaLabel = contextLabel
+    ? (children ? contextLabel : `${contextLabel}, ${defaultDisplayPlaceholder}`)
+    : undefined;
+
   return (
     <div {...ariaProps} 
         {...dataProps} 
@@ -114,6 +122,10 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
       {
           children ? (
             <div
+                aria-describedby={errorId}
+                aria-invalid={!!error}
+                aria-label={triggerAriaLabel}
+                id={selectId}
                 onClick={() => toggleDropdown()}
                 onKeyDown= {handleKeyDown}
                 ref={inputWrapperRef}
@@ -130,6 +142,10 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                   className={triggerWrapperClasses}
                   cursor={`${autocomplete ? "text" : "pointer"}`}
                   htmlOptions={{
+                    "aria-describedby": errorId,
+                    "aria-invalid": !!error,
+                    "aria-label": triggerAriaLabel,
+                    id: selectId,
                     onClick: () => handleWrapperClick(),
                     onKeyDown: handleKeyDown,
                     tabIndex: "0",

data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx

@@ -25,6 +25,12 @@ export const handleClickOutside =
       ) {
         shouldClose = false;
       }
+      // Target dropdown container to open dropdown
+      if (
+        targetElement.getAttribute("data-dropdown") === "pb-dropdown-label"
+      ) {
+        shouldClose = false;
+      }
       targetElement = targetElement.parentElement as HTMLElement;
     }
     if (

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

@@ -1,14 +1,16 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
+  <%= form.typeahead :example_typeahead_field, props: { label: true, required: true, required_indicator: true } %>
   <%= 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.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: true, 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.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
+  <%# <%= form.check_box :example_checkbox, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
   <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
 
   <%= form.actions do |action| %>

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -39,6 +39,13 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
+      @include transition_default;
+
+      &:focus-within {
+        border-color: $primary;
+        background-color: $focus_input_light;
+      }
+
       .input_inner_container {
         width: 100%;
       }