playbook_ui 14.18.0.pre.alpha.play2087emptystatekitbuildrails7533 → 14.18.0.pre.alpha.play2149overlaykitdynamicbug7619

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx}

@@ -1,15 +1,13 @@
-import React, { useState } from 'react'
+import React from 'react'
 
-import Dropdown from '../../pb_dropdown/_dropdown'
+import Dropdown from '../_dropdown'
 import Badge from '../../pb_badge/_badge'
+import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import Avatar from '../../pb_avatar/_avatar'
 import User from '../../pb_user/_user'
 
 
-const DropdownWithAutocompleteAndCustomDisplay = (props) => {
-  const [selectedOption, setSelectedOption] = useState();
-
+const DropdownWithAutocompleteWithSubcomponents = (props) => {
   const options = [
     {
       label: "Jasper Furniss",
@@ -45,34 +43,21 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
     }
   ];
 
-  const CustomDisplay = () => {
-    return (
-      <>
-      {
-        selectedOption && (
-            <Avatar
-                name={selectedOption.label}
-                size="xs"
-            />
-        )
-      }
-    </>
-    )
-  };
 
   return (
   <div>
     <Dropdown autocomplete
-        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >
-        <Dropdown.Trigger customDisplay={<CustomDisplay/>} />
         {options.map((option) => (
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <>
+            <Flex
+                align="center"
+                justify="between"
+            >
               <FlexItem>
                 <User
                     align="left"
@@ -85,6 +70,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
               </FlexItem>
               <FlexItem>
                 <Badge
+                    dark
                     rounded
                     text={option.status}
                     variant={`${
@@ -96,7 +82,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
                     }`}
                 />
               </FlexItem>
-            </>
+            </Flex>
           </Dropdown.Option>
         ))}
     </Dropdown>
@@ -104,4 +90,4 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
   )
 }
 
-export default  DropdownWithAutocompleteAndCustomDisplay
+export default  DropdownWithAutocompleteWithSubcomponents

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

@@ -0,0 +1 @@
+`autocomplete` prop can also be used in conjunction with the subcomponent structure.

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

@@ -0,0 +1 @@
+The `useDropdown` hook can also be used to toggle the dropdown open and closed using an external control. To do so, you must manage state with the custom hook, pass the `dropdown:'pb-dropdown-trigger'` data attribute to the external control and use the `isClosed` prop as shown. 

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

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+import IconCircle from '../../pb_icon_circle/_icon_circle';
+
+const DropdownWithSearch = (props) => {
+const [selectedOption, setSelectedOption] = useState();
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+      icon: "🇺🇸",
+      id: "United-states"
+
+    },
+    {
+      label: "United Kingdom",
+      value: "United Kingdom",
+      icon: "🇬🇧",
+      id: "united-kingdom"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      icon: "🇵🇰",
+      id: "pakistan"
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger>
+        <div key={selectedOption ? selectedOption.icon : "flag"}>
+            <IconCircle
+                cursor="pointer"
+                icon={selectedOption ? selectedOption.icon : "flag"}
+                variant="royal"
+            />
+        </div>
+      </Dropdown.Trigger>
+      <Dropdown.Container maxWidth="xs"
+          searchbar
+      >
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          />
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+  </div>
+  )
+}
+
+export default  DropdownWithSearch

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

@@ -0,0 +1,2 @@
+The optional `searchbar` boolean prop can also be used on the `Dropdown.Container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
+`searchbar` is set to false by default. 

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

@@ -0,0 +1,52 @@
+<% 
+  options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "us"
+    },
+    {
+      label: "United Kingdom",
+      value: "United Kingdom",
+      areaCode: "+44",
+      icon: "🇬🇧",
+      id: "gb"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pk"
+    }
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) do %>
+    <%= pb_rails("dropdown/dropdown_trigger") do %>
+        <%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
+    <% end %>
+    <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs", searchbar: true}) do %>
+        <% options.each do |option| %>
+            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
+              <%= pb_rails("flex", props: {
+                align: "center",
+                justify: "between",
+                }) do %>
+                <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("flex") do %>
+                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                      <% end %>
+                  <% end %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+                  <% end %>
+              <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,2 @@
+The optional `searchbar` boolean prop can also be used on the `dropdown/dropdown_container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
+`searchbar` is set to false by default. 

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

@@ -1,12 +1,15 @@
 examples:
   rails:
   - dropdown_default: Default
+  - dropdown_with_autocomplete: Autocomplete
   - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
+  - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
   - dropdown_with_custom_display_rails: Custom Display
   - dropdown_with_custom_trigger_rails: Custom Trigger
+  - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
@@ -15,20 +18,20 @@ examples:
 
   react:
   - dropdown_default: Default
+  - dropdown_with_autocomplete: Autocomplete
   - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure: Subcomponent Structure
+  - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
+  - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
-  # - dropdown_with_autocomplete: Autocomplete
-  # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
-  # - dropdown_with_external_control: useDropdown Hook
-  # - dropdown_with_hook: useDropdown Hook with Any Trigger
+  - dropdown_with_external_control: useDropdown Hook
 

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

@@ -3,11 +3,10 @@ export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_di
 export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
 export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
 export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
-export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
+export { default as DropdownWithAutocompleteWithSubcomponents } from './_dropdown_with_autocomplete_with_subcomponents.jsx'
 export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
 export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
 export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
-export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
 export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
@@ -15,3 +14,4 @@ export { default as DropdownBlankSelection } from './_dropdown_blank_selection.j
 export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
 export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
 export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
+export {default as DropdownWithSearch} from './_dropdown_with_search.jsx'

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

@@ -14,8 +14,8 @@
             <%= content.presence %>
             <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
         <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger") %>
-            <%= pb_rails("dropdown/dropdown_container") do %>
+            <%= pb_rails("dropdown/dropdown_trigger", props:{autocomplete: object.autocomplete}) %>
+            <%= pb_rails("dropdown/dropdown_container", props: {searchbar: object.searchbar}) do %>
                 <% if options_with_blank.present? %>
                     <% options_with_blank.each do |option| %>
                         <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>

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

@@ -18,6 +18,10 @@ module Playbook
                      default: "default"
       prop :separators, type: Playbook::Props::Boolean,
                         default: true
+      prop :autocomplete, type: Playbook::Props::Boolean,
+                          default: false
+      prop :searchbar, type: Playbook::Props::Boolean,
+                       default: false
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)

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

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen } from "../utilities/test-utils"
 
-import { Dropdown, Icon } from 'playbook-ui'
+import { Dropdown, Icon, IconCircle } from 'playbook-ui'
 
 
 const testId = 'dropdown'
@@ -219,4 +219,48 @@ test('show error message', () => {
 
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveTextContent(errorMessage)
+})
+
+test("autocomplete prop to render input", () => {
+  render (
+    <Dropdown
+        autocomplete
+        data={{ testid: testId }}
+        options={options}
+    />   
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('.dropdown_input')
+  expect(input).toBeInTheDocument()
+})
+
+test("searchbar prop to render TextInput in container", () => {  
+  render (
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+    >
+      <Dropdown.Trigger>
+          <IconCircle
+              cursor="pointer"
+              icon="flag"
+              variant="royal"
+          />
+      </Dropdown.Trigger>
+      <Dropdown.Container maxWidth="xs"
+          searchbar
+      >
+      {options.map((option) => (
+      <Dropdown.Option key={option.id} 
+          option={option}
+      /> 
+    ))}
+    </Dropdown.Container>
+    </Dropdown>
+  )
+
+  const kit = screen.getByTestId(testId)
+  const searchbar = kit.querySelector('.pb_text_input_kit')
+  expect(searchbar).toBeInTheDocument()
 })

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

@@ -1,4 +1,14 @@
 <%= pb_content_tag do %>
+    <% if object.searchbar %>
+        <%= pb_rails("text_input", props: {padding_top:"xs", padding_x:"xs"}) do %>
+            <input 
+            type="text"
+            placeholder="Search…"
+            data-dropdown-search
+            autocomplete="off"
+            />
+        <% end %>
+    <% end %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
             <% if content.present? %>
                 <%= content.presence %>

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

@@ -3,6 +3,9 @@
 module Playbook
   module PbDropdown
     class DropdownContainer < Playbook::KitBase
+      prop :searchbar, type: Playbook::Props::Boolean,
+                       default: false
+
       def classname
         generate_classname("pb_dropdown_container", "close", separator: " ")
       end

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

@@ -8,7 +8,7 @@
         align: "center",
         border_radius:"lg",
         classname: object.trigger_wrapper_classes,
-        cursor: "pointer",
+        cursor: object.autocomplete ? "text" : "pointer",
         justify: "between",
         padding_x:"sm",
         padding_y:"xs",
@@ -24,7 +24,17 @@
                         <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
                     <% end %>
                 <% else %>
-                <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
+                    <% if object.autocomplete %>
+                        <input
+                            data-dropdown-autocomplete
+                            class="dropdown_input"
+                            type="text"
+                            placeholder="<%= object.placeholder || 'Select…' %>"
+                            autocomplete="off"
+                        />
+                    <% else %>
+                        <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
+                    <% end %>
                 <% end %>
             <% end %>
         <% end %>

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

@@ -9,6 +9,8 @@ module Playbook
                 default: ""
       prop :placeholder, type: Playbook::Props::String
       prop :custom_display
+      prop :autocomplete, type: Playbook::Props::Boolean,
+                          default: false
 
       def data
         Hash(prop(:data)).merge(dropdown_trigger: true, dropdown_placeholder: default_display_placeholder)
@@ -23,7 +25,7 @@ module Playbook
       end
 
       def trigger_wrapper_classes
-        generate_classname("dropdown_trigger_wrapper", "select_only")
+        generate_classname("dropdown_trigger_wrapper", ("select_only" unless autocomplete))
       end
     end
   end

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

@@ -11,6 +11,8 @@ 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() {
@@ -25,9 +27,11 @@ 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() {
@@ -45,6 +49,53 @@ 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);
@@ -59,6 +110,7 @@ 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);
@@ -99,6 +151,11 @@ 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,4 +1,6 @@
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
+const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
+
 export class PbDropdownKeyboard {
   constructor(dropdown) {
     this.dropdown = dropdown;
@@ -7,6 +9,9 @@ export class PbDropdownKeyboard {
       this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
     );
     this.focusedOptionIndex = -1;
+    this.searchInput = this.dropdownElement.querySelector(
+      SEARCH_INPUT_SELECTOR
+    );
     this.init();
   }
 
@@ -15,6 +20,18 @@ 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) {
@@ -50,6 +67,15 @@ 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,7 +46,6 @@ const DropdownContainer = (props: DropdownContainerProps) => {
     inputRef,
     isDropDownClosed,
     setFocusedOptionIndex,
-    triggerRef
   } = useContext(DropdownContext);
 
   const ariaProps = buildAriaProps(aria);
@@ -67,7 +66,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
         id={id}
         onMouseEnter={() => setFocusedOptionIndex(-1)}
         ref={dropdownContainerRef}
-        style={triggerRef ? {} : { position: "absolute"}}
+        style={{ position: "absolute"}}
     >
       {searchbar && (
         <TextInput dark={dark}

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

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

data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss

@@ -35,10 +35,4 @@
     }
   }
 
-  &.dark {
-    [class*="pb_title_kit"],
-    [class*="pb_body_kit"],
-    [class*="pb_detail_kit"],
-    [class*="pb_button_kit_link"]:hover { color: $white; }
-  }
-}
+}

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

@@ -1,9 +1,5 @@
 examples:
-  rails:
-  - empty_state_default: Default
-  - empty_state_size: Size
-  - empty_state_orientation: Orientation
-  - empty_state_alignment: Alignment
+
 
   react:
   - empty_state_default: Default

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

@@ -78,7 +78,8 @@ $overlay_colors: (
   &.overlay-hide-scrollbar {
     & [class*="overflow_x_auto"],
     & [class*="overflow_y_auto"],
-    & [class*="overflow_auto"] {
+    & [class*="overflow_auto"],
+    .overlay_token_container {
       &::-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}>