playbook_ui 14.18.0.pre.alpha.play2149overlaykitdynamicbug7619 → 14.18.0.pre.alpha.revert4567revert4553PLAY2056ATcolbordercolors7469

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

@@ -11,8 +11,6 @@ const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
 const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
 const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
 const DROPDOWN_INPUT = "#dropdown-selected-option";
-const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
-const SEARCH_BAR_SELECTOR = "[data-dropdown-search]";
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
@@ -27,11 +25,9 @@ export default class PbDropdown extends PbEnhancedElement {
     this.keyboardHandler = new PbDropdownKeyboard(this);
     this.setDefaultValue();
     this.bindEventListeners();
-    this.bindSearchInput();
     this.updateArrowDisplay(false);
     this.handleFormValidation();
     this.handleFormReset();
-    this.bindSearchBar();
   }
 
   bindEventListeners() {
@@ -49,53 +45,6 @@ export default class PbDropdown extends PbEnhancedElement {
     );
   }
 
-  bindSearchBar() {
-    this.searchBar = this.element.querySelector(SEARCH_BAR_SELECTOR);
-    if (!this.searchBar) return;
-  
-    this.searchBar.addEventListener("input", (e) =>
-      this.handleSearch(e.target.value)
-    );
-  }
-
-  bindSearchInput() {
-    this.searchInput = this.element.querySelector(SEARCH_INPUT_SELECTOR);
-    if (!this.searchInput) return;
-
-    // Focus the input when anyone clicks the wrapper
-    this.element
-      .querySelector(TRIGGER_SELECTOR)
-      ?.addEventListener("click", () => this.searchInput.focus());
-
-    // Live filter
-    this.searchInput.addEventListener("input", (e) =>
-      this.handleSearch(e.target.value)
-    );
-  }
-
-  handleSearch(term = "") {
-    const lcTerm = term.toLowerCase();
-    this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
-      const label = JSON.parse(opt.dataset.dropdownOptionLabel).label
-        .toString()
-        .toLowerCase();
-
-      // hide or show option
-      const match = label.includes(lcTerm);
-      opt.style.display = match ? "" : "none";
-    });
-
-    if (this.target.classList.contains("open")) {
-      const el = this.target;
-        el.style.height = "auto";
-        requestAnimationFrame(() => {
-        const newHeight = el.scrollHeight + "px";
-          el.offsetHeight; // force reflow
-        el.style.height = newHeight;
-      });
-    }
-  }
-
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
     const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
@@ -110,7 +59,6 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   handleDocumentClick(event) {
-    if (event.target.closest(SEARCH_BAR_SELECTOR)) return;
     if (this.isClickOutside(event) && this.target.classList.contains("open")) {
       this.hideElement(this.target);
       this.updateArrowDisplay(false);
@@ -151,11 +99,6 @@ export default class PbDropdown extends PbEnhancedElement {
       }
     }
 
-    const autocompleteInput = this.element.querySelector(SEARCH_INPUT_SELECTOR);
-    if (autocompleteInput){
-      autocompleteInput.value = JSON.parse(value).label;
-    }
-
     const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
     if (customTrigger) {
       if (this.target.classList.contains("open")) {

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

@@ -1,6 +1,4 @@
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
-const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
-
 export class PbDropdownKeyboard {
   constructor(dropdown) {
     this.dropdown = dropdown;
@@ -9,9 +7,6 @@ export class PbDropdownKeyboard {
       this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
     );
     this.focusedOptionIndex = -1;
-    this.searchInput = this.dropdownElement.querySelector(
-      SEARCH_INPUT_SELECTOR
-    );
     this.init();
   }
 
@@ -20,18 +15,6 @@ export class PbDropdownKeyboard {
       "keydown",
       this.handleKeyDown.bind(this)
     );
-    if (this.searchInput) {
-      this.searchInput.addEventListener("input", () =>
-        this.openDropdownIfClosed()
-      );
-    }
-  }
-
-  openDropdownIfClosed() {
-    if (!this.dropdown.target.classList.contains("open")) {
-      this.dropdown.showElement(this.dropdown.target);
-      this.dropdown.updateArrowDisplay(true);
-    }
   }
 
   handleKeyDown(event) {
@@ -67,15 +50,6 @@ export class PbDropdownKeyboard {
         this.dropdown.updateArrowDisplay(false);
         this.resetFocus();
         break;
-      case "Backspace":
-        if (this.searchInput) {
-          setTimeout(() => {
-            if (this.searchInput.value.trim() === "") {
-              this.dropdown.resetDropdownValue();
-            }
-          }, 0); 
-        }
-        break;
       default:
         break;
     }

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

@@ -46,6 +46,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
     inputRef,
     isDropDownClosed,
     setFocusedOptionIndex,
+    triggerRef
   } = useContext(DropdownContext);
 
   const ariaProps = buildAriaProps(aria);
@@ -66,7 +67,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
         id={id}
         onMouseEnter={() => setFocusedOptionIndex(-1)}
         ref={dropdownContainerRef}
-        style={{ position: "absolute"}}
+        style={triggerRef ? {} : { position: "absolute"}}
     >
       {searchbar && (
         <TextInput dark={dark}

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

@@ -53,6 +53,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     selected,
     setIsInputFocused,
     toggleDropdown,
+    triggerRef,
   } = useContext(DropdownContext);
 
   const handleKeyDown = useHandleOnKeyDown();
@@ -98,6 +99,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
         id={id}
     >
       {
+        !triggerRef && (
           children ? (
             <div
                 onClick={() => toggleDropdown()}
@@ -145,10 +147,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       <input
                           className="dropdown_input"
                           onChange={handleChange}
-                          onClick={(e) => {
-                            e.stopPropagation();// keep the wrapper’s handler from firing
-                            toggleDropdown();
-                          }}
+                          onClick={() => toggleDropdown()}
                           onFocus={() => setIsInputFocused(true)}
                           onKeyDown={handleKeyDown}
                           placeholder={
@@ -182,6 +181,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
               </Flex>
             </>
           )
+        )
       }
     </div>
   );

data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss

@@ -23,39 +23,35 @@
 @mixin error-state-right-side-select-kit {
   &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
   &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
-    &:not(:has(.pb_phone_number_input)) {
-      align-items: flex-start;
+    align-items: flex-start;
 
-      .pb_select_kit_wrapper {
-        padding-top: $space_md;
-        margin-top: 2px;
+    .pb_select_kit_wrapper {
+      padding-top: $space_md;
+      margin-top: 2px;
 
-        .pb_select_kit_caret {
-          padding-top: $space_md;
-        }
+      .pb_select_kit_caret {
+        padding-top: $space_md;
       }
+    }
 
-      .pb_select_kit_wrapper.error {
-        padding-top: $space_md;
-        margin-top: 2px;
+    .pb_select_kit_wrapper.error {
+      padding-top: $space_md;
+      margin-top: 2px;
 
-        .pb_select_kit_caret {
-          padding-top: $space_xl;
-        }
+      .pb_select_kit_caret {
+        padding-top: $space_xl;
       }
     }
   }
 }
 
 @mixin error-state-left-side-select-kit {
-  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_text_input_kit.error) {
-    &:not(:has(.pb_phone_number_input)) {
-      align-items: flex-start;
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+    align-items: flex-start;
 
-      .pb_text_input_kit.error {
-        padding-top: $space_md;
-        margin-top: 2px;
-      }
+    .pb_text_input_kit.error {
+      padding-top: $space_md;
+      margin-top: 2px;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_overlay/_overlay.scss

@@ -78,8 +78,7 @@ $overlay_colors: (
   &.overlay-hide-scrollbar {
     & [class*="overflow_x_auto"],
     & [class*="overflow_y_auto"],
-    & [class*="overflow_auto"],
-    .overlay_token_container {
+    & [class*="overflow_auto"] {
       &::-webkit-scrollbar {
         display: none !important;
       }

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx

@@ -9,7 +9,7 @@ const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
         <Flex
             columnGap="lg"
             orientation="row"
-            ref={ref}
+            ref={ref} 
         >
             {Array.from({ length: 15 }, (_, index) => (
                 <FlexItem key={index}>

data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx

@@ -30,7 +30,7 @@ const OverlayToken = (props: OverlayChildrenProps) => {
         if (container) {
             const { scrollLeft, scrollWidth, clientWidth } = container;
             const atStart = scrollLeft === 0;
-            const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;
+            const atEnd = scrollLeft + clientWidth >= scrollWidth - 1; 
 
             setIsAtStart(atStart);
             setIsAtEnd(atEnd);
@@ -64,17 +64,16 @@ const OverlayToken = (props: OverlayChildrenProps) => {
     return (
         <>
             <div className={dynamic ? isAtStart ? '' : previousOverlayClassName : previousOverlayClassName} />
-            {dynamic ?
+            {dynamic ? 
                 <div
-                    className="overlay_token_container"
                     ref={scrollContainerRef}
                     style={{
-                        overflowX: 'auto',
+                        overflowX: 'auto',     
                     }}
                 >
                     {children}
                 </div>
-                :
+                : 
                     children
                 }
             {hasSubsequentOverlay &&

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

@@ -143,16 +143,6 @@
       select {
         font-size: 12px;
       }
-      .pb_select_kit_wrapper.error {
-        .pb_select_kit_caret {
-          top: 13.7px;
-        }
-      }
-    }
-    .pb_select_kit_wrapper.error {
-      .pb_select_kit_caret {
-        top: 16.2px;
-      }
     }
   }
 }

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

@@ -1,5 +1,5 @@
 <%= pb_rails("select", props: {
-  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
+  error: "Please make a valid selection",
   label: "Favorite Food",
   name: "food",
   options: [

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx

@@ -8,7 +8,7 @@ const TableWithCollapsibleWithCustomClick = (props) => {
 
   const Content = () => {
     return (
-      <Card
+      <Card 
           borderNone
           borderRadius="none"
           padding="md"
@@ -37,7 +37,7 @@ return (
 
         </Table.Head>
         <Table.Body>
-          <Table.Row collapsible
+          <Table.Row collapsible 
               collapsibleContent={<Content/>}
               toggleCellId="cell-1"
               {...props}
@@ -47,7 +47,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer"
+            <Table.Cell cursor="pointer" 
                 id="cell-1"
                 textAlign="right"
             >
@@ -59,7 +59,7 @@ return (
             </Table.Cell>
 
           </Table.Row>
-          <Table.Row collapsible
+          <Table.Row collapsible 
               collapsibleContent={<Content/>}
               toggleCellId="cell-2"
               {...props}
@@ -69,7 +69,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer"
+            <Table.Cell cursor="pointer" 
                 id="cell-2"
                 textAlign="right"
             >
@@ -81,7 +81,7 @@ return (
             </Table.Cell>
 
           </Table.Row>
-          <Table.Row collapsible
+          <Table.Row collapsible 
               collapsibleContent={<Content/>}
               toggleCellId="cell-3"
               {...props}
@@ -91,7 +91,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer"
+            <Table.Cell cursor="pointer" 
                 id="cell-3"
                 textAlign="right"
             >

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -55,7 +55,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions);
   const sideHighlightClass =
     sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
-
+  
   const [isCollapsed, setIsCollapsed] = useCollapsible(true);
 
   const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
@@ -83,14 +83,14 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
       target instanceof SVGElement &&
       (target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
 
-        if (clickedCell || (clickedCell && isIconClick)) {
+        if (clickedCell || isIconClick) { 
       setIsCollapsed(!isCollapsed);
       }
     } else {
       setIsCollapsed(!isCollapsed);
     }
   };
-
+    
   return (
     <>
       {collapsible ? (
@@ -116,7 +116,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
                   tag="td"
               >
                 <tr/>
-                <Collapsible.Content
+                <Collapsible.Content 
                     className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
                     dark={dark}
                     margin="none"
@@ -149,7 +149,7 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
                   tag="td"
               >
                 <tr/>
-                <Collapsible.Content
+                <Collapsible.Content 
                     className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
                     dark={dark}
                     margin="none"

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb

@@ -4,7 +4,7 @@
     border: true,
     icon: "user"
   },
-  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please enter a valid email address"),
+  error: "Please enter a valid email address",
   label: "Email Address",
   placeholder: "Enter email address",
   type: "email"

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb

@@ -1,5 +1 @@
-<%= pb_rails("textarea", props: {
-  error: raw(pb_rails("icon", props: { icon: "warning" }) + " This field has an error!"),
-  label: "Label",
-  rows: 4
-}) %>
+<%= pb_rails("textarea", props: { error: "This field has an error!", label: "Label", rows: 4}) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb

@@ -8,14 +8,7 @@
 
 %>
 
-<%= pb_rails("typeahead", props: {
-  id: "typeahead-error-example",
-  options: options,
-  error: "Please make a valid selection",
-  label: "Products",
-  name: :foo,
-  is_multi: false
-}) %>
+<%= pb_rails("typeahead", props: { id: "typeahead-error-example", options: options, error: "Please make a valid selection", label: "Products", name: :foo, is_multi: false }) %>
 
 <!-- This section is an example of the available JavaScript event hooks -->
 <%= javascript_tag defer: "defer" do %>