playbook_ui 16.0.0.pre.alpha.PLAY2722advancedtableinlinerowloadingrails13598 → 16.0.0.pre.alpha.PLAY2744dropdownquickpickpt113758

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ad5a72672942b10c55a459ee056b0b5adebb0a967fe978116869a1d874d1671b
-  data.tar.gz: c9a3b651ae3a916c2ccb06a629d7ac35a840ef96dc24adb65dc4529cd8f7782d
+  metadata.gz: 77d2aa38ac1c38d9be4fa1b827ac346255f9742aa6e4c4569845b3f8335c57cd
+  data.tar.gz: e1034bf5c9ea8bc54b2e4c606f68dc0c0beea877674ac459aa767232bbdab299
 SHA512:
-  metadata.gz: 3745bb4d7dc1afdfedc43625d2ae41ac2d9c9a03ae357e9f7670ac3de0bb6340e58167f8da8bba19a393fb887b2ecd79b505af94583dd54e182ea62d2e301778
-  data.tar.gz: 475688418a55f76517357a17d0052df9e467f6190b3ec54a6d5128fd541ce04bd06e11e78f54f964dfc710b9132abdf068ca336299787ee60b662e8e9b71c85a
+  metadata.gz: fa2c94e31f5bacca5366fcf5c4438b0f740d85df8cf642af32b63ff588bf4f8c5b31b3016e981a44143068349b3ef833d1bd0a72c920d67d6fce157c11378cce
+  data.tar.gz: f2a531ff9faca9f3524227c518482938e6c0ae648582befe352fcdfd3a11220c315b9a873e505ba8fd7bf4265b3d671c42d413606204405b76a74e35aa4dc4cb

data/app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import Background from '../../pb_background/_background'
+
+const BackgroundResponsive = (props) => (
+  <>
+    <Background
+        alt="colorful background"
+        backgroundColor={{ xs: "primary", sm: "warning", md: "success", lg: "error", xl: "category_1" }}
+        className="background lazyload"
+        padding="xl"
+        {...props}
+    />
+    <br/>
+    <Background
+        alt="colorful background"
+        className="background lazyload"
+        imageUrl={{
+          xs: "https://unsplash.it/500/400/?image=633",
+          sm: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
+          md: "https://unsplash.it/500/400/?image=633",
+          lg: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
+          xl: "https://unsplash.it/500/400/?image=633"
+        }}
+        padding="xl"
+        {...props}
+    />
+  </>
+)
+
+export default BackgroundResponsive

data/app/pb_kits/playbook/pb_background/docs/_background_responsive.md

@@ -0,0 +1 @@
+The `backgroundColor`, `backgroundSize`, `backgroundPosition`, `backgroundRepeat`, and `imageUrl` props support responsive sizes. To use them, pass an object to the prop containing your values relative to responsive break points. To test this here, resize your browser window to responsively change these Backgrounds' `backgroundColor` and `imageUrl`.

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

@@ -20,3 +20,4 @@ examples:
   - background_category: Category
   - background_size: Size
   - background_overlay: Overlay
+  - background_responsive: Responsive

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

@@ -7,3 +7,4 @@ export { default as BackgroundStatusSubtle } from './_background_status_subtle.j
 export { default as BackgroundCategory } from './_background_category.jsx'
 export { default as BackgroundSize } from './_background_size.jsx'
 export { default as BackgroundOverlay } from './_background_overlay.jsx'
+export { default as BackgroundResponsive } from './_background_responsive.jsx'

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -68,7 +68,9 @@
     .pb_dropdown_container {
       position: absolute;
       background-color: $white;
-      overflow: hidden;
+      overflow-y: auto;
+      overflow-x: hidden;
+      max-height: 18em;
       box-shadow: $shadow_deep;
       border-radius: $border_rad_heavier;
       border: 1px solid $border_light;

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -36,6 +36,7 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
+    clearable?: boolean;
     customQuickPickDates?: CustomQuickPickDates;
     formPillProps?: GenericObject;
     dark?: boolean;
@@ -49,6 +50,7 @@ type DropdownProps = {
     multiSelect?: boolean;
     onSelect?: (arg: GenericObject) => null;
     options?: GenericObject;
+    placeholder?: string;
     separators?: boolean;
     variant?: "default" | "subtle" | "quickpick";
     rangeEndsToday?: boolean;
@@ -74,6 +76,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
+        clearable = true,
         customQuickPickDates,
         dark = false,
         data = {},
@@ -87,6 +90,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         formPillProps,
         onSelect,
         options,
+        placeholder,
         rangeEndsToday = false,
         controlsStartId,
         controlsEndId,
@@ -211,6 +215,34 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         }
     }, [isDropDownClosed]);
 
+    // Auto-position dropdown above/below based on available space
+    useEffect(() => {
+        if (!isDropDownClosed && dropdownContainerRef.current) {
+            const container = dropdownContainerRef.current;
+            const wrapper = container.closest('.dropdown_wrapper') as HTMLElement;
+            if (!wrapper) return;
+
+            const wrapperRect = wrapper.getBoundingClientRect();
+            const h = container.getBoundingClientRect().height || container.scrollHeight;
+            const spaceBelow = window.innerHeight - wrapperRect.bottom;
+            const spaceAbove = wrapperRect.top;
+
+            // If not enough space below but enough space above, position above
+            if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
+                container.style.top = "auto";
+                container.style.bottom = "calc(100% + 5px)";
+                container.style.marginTop = "0";
+                container.style.marginBottom = "0";
+            } else {
+                // Default: position below
+                container.style.top = "";
+                container.style.bottom = "";
+                container.style.marginTop = "";
+                container.style.marginBottom = "";
+            }
+        }
+    }, [isDropDownClosed, dropdownContainerRef]);
+
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setFilterItem(e.target.value);
@@ -375,6 +407,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                 value={{
                     activeStyle,
                     autocomplete,
+                    clearable,
                     dropdownContainerRef,
                     filteredOptions,
                     filterItem,
@@ -426,7 +459,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                         </>
                     ) : (
                         <>
-                            <DropdownTrigger />
+                            <DropdownTrigger placeholder={placeholder} />
                             <DropdownContainer>
                                 {optionsWithBlankSelection &&
                                     optionsWithBlankSelection?.map((option: GenericObject) => (

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

@@ -0,0 +1,3 @@
+The `blank_selection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
+
+The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.

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

@@ -0,0 +1,3 @@
+The `blankSelection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
+
+The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.

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

@@ -0,0 +1,52 @@
+<% 
+  options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: {
+  id: "date-range-quickpick-reset-closeable",
+  label: "Quick Pick",
+  variant: "quickpick",
+  clearable: false
+}) %>
+
+<%= pb_rails("button", props: {
+  margin_y: "md",
+  text: "Reset",
+  html_options: {
+    onclick: "handleReset()"
+  }
+}) %>
+
+<%= pb_rails("dropdown", props: {
+  id: "closeable-default",
+  options: options,
+  clearable: false,
+  default_value: options.last,
+  margin_bottom: "md",
+  label: "Default"
+}) %>
+
+<%= pb_rails("dropdown", props: {
+  id: "closeable-subtle",
+  options: options,
+  clearable: false,
+  default_value: options.second,
+  variant: "subtle",
+  separators: false,
+  label: "Subtle"
+}) %>
+
+<script>
+  function handleReset() {
+    const dropdown = document.querySelector("#date-range-quickpick-reset-closeable[data-pb-dropdown]");
+    const instance = dropdown?._pbDropdownInstance;
+    
+    if (instance) {
+      instance.clearSelection();
+    }
+  }
+</script>

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

@@ -0,0 +1,72 @@
+import React, { useRef } from 'react'
+
+import Button from '../../pb_button/_button'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownWithClearable = (props) => {
+    const dropdownRef = useRef(null)
+
+    const options = [
+        {
+            label: "United States",
+            value: "unitedStates",
+            id: "us"
+        },
+        {
+            label: "Canada",
+            value: "canada",
+            id: "ca"
+        },
+        {
+            label: "Pakistan",
+            value: "pakistan",
+            id: "pk"
+        }
+    ]
+
+    const handleReset = () => {
+        if (dropdownRef.current) {
+            dropdownRef.current.clearSelected()
+        }
+    }
+
+    return (
+        <>
+            <Dropdown
+                clearable={false}
+                label="Quick Pick"
+                onSelect={() => {}}
+                ref={dropdownRef}
+                variant="quickpick"
+                {...props}
+            />
+            <Button
+                marginY="md"
+                onClick={handleReset}
+                text="Reset"
+            />
+
+            <Dropdown
+                clearable={false}
+                defaultValue={options[options.length - 1]}
+                label="Default"
+                marginBottom="md"
+                options={options}
+                variant="default"
+                {...props}
+            />
+
+            <Dropdown
+                clearable={false}
+                defaultValue={options[1]}
+                label="Subtle"
+                options={options}
+                separators={false}
+                variant="subtle"
+                {...props}
+            />
+        </>
+    )
+}
+
+export default DropdownWithClearable

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

@@ -0,0 +1,5 @@
+The `clearable` prop controls whether the clear (X) button appears in the dropdown. When set to `false`, the clear button is hidden.
+
+This is useful in two scenarios:
+1. When you have a separate "Reset" or "Defaults" button that handles clearing the selection (as shown in the Quick Pick example)
+2. When you don't want to provide any way to clear the selection (as shown in the Default and Subtle examples)

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

@@ -0,0 +1,9 @@
+<% 
+  options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: { options: options, placeholder: "Choose a country" }) %>

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

@@ -0,0 +1,33 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownWithPlaceholder = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ];  
+
+  return (
+    <Dropdown
+        options={options}
+        placeholder="Choose a country"
+        {...props}
+    />
+  )
+}
+
+export default DropdownWithPlaceholder

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

@@ -0,0 +1,3 @@
+The `placeholder` prop allows you to customize the placeholder text that appears when no option is selected in the dropdown.
+
+The placeholder prop works with all dropdown variants (`default`, `subtle`, and `quickpick`). When no option is selected, the placeholder text is displayed. When an option is selected, the placeholder is replaced by the selected option's label. The default placeholder text is "Select..." if no placeholder is provided.

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

@@ -21,7 +21,9 @@ examples:
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_with_placeholder: Placeholder
   - dropdown_separators_hidden: Separators Hidden
+  - dropdown_with_clearable: Clearable
   - 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)
@@ -52,7 +54,9 @@ examples:
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_with_placeholder: Placeholder
   - dropdown_clear_selection: Clear Selection
+  - dropdown_with_clearable: Clearable
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
   - dropdown_quickpick: Quick Pick Variant

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

@@ -11,6 +11,7 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
 export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
+export { default as DropdownWithPlaceholder } from './_dropdown_with_placeholder.jsx'
 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'
@@ -27,4 +28,5 @@ export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
 export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
 export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
 export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
-export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
+export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
+export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx'

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

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

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

@@ -36,6 +36,8 @@ module Playbook
                              default: ""
       prop :controls_start_id, type: Playbook::Props::String,
                                default: ""
+      prop :clearable, type: Playbook::Props::Boolean,
+                       default: true
       prop :start_date_id, type: Playbook::Props::String,
                            default: "start_date_id"
       prop :start_date_name, type: Playbook::Props::String,
@@ -44,12 +46,14 @@ module Playbook
                          default: "end_date_id"
       prop :end_date_name, type: Playbook::Props::String,
                            default: "end_date_name"
+      prop :placeholder, type: Playbook::Props::String
 
       def data
         Hash(prop(:data)).merge(
           pb_dropdown: true,
           pb_dropdown_multi_select: multi_select,
           pb_dropdown_variant: variant,
+          pb_dropdown_clearable: clearable,
           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,

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

@@ -122,6 +122,80 @@ test('generated placeholder prop', () => {
 
 })
 
+test('placeholder prop passed directly to Dropdown', () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+        placeholder="Choose a country"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  expect(trigger).toHaveTextContent('Choose a country')
+})
+
+test('placeholder works with default variant', () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+        placeholder="Select an option"
+        variant="default"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  expect(trigger).toHaveTextContent('Select an option')
+})
+
+test('placeholder works with subtle variant', () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+        placeholder="Pick an option"
+        separators={false}
+        variant="subtle"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_dropdown_subtle_separators_hidden')
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  expect(trigger).toHaveTextContent('Pick an option')
+})
+
+test('placeholder works with quickpick variant', () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        placeholder="Select a date range"
+        variant="quickpick"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_dropdown_quickpick')
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  expect(trigger).toHaveTextContent('Select a date range')
+})
+
+test('placeholder shows default "Select..." when not provided', () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  expect(trigger).toHaveTextContent('Select...')
+})
+
 test('generated label prop', () => { 
   render (
     <Dropdown
@@ -466,7 +540,27 @@ test("quickpick clears selection when clicking X icon", () => {
   expect(trigger).toHaveTextContent("Select...")
 })
 
+test("quickpick hides clear icon when clearable is false", () => {
+  render(
+    <Dropdown
+        clearable={false}
+        data={{ testid: testId }}
+        defaultValue="This Week"
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  
+  expect(trigger).toHaveTextContent("This Week")
+  
+  const clearIcon = kit.querySelector('[aria-label="times icon"]')
+  expect(clearIcon).not.toBeInTheDocument()
+})
+
 test("quickpick returns date array values when option selected", () => {
+  // eslint-disable-next-line react/no-multi-comp
   const TestComponent = () => {
     const [selected, setSelected] = useState(null)
     return (

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

@@ -48,6 +48,7 @@ export default class PbDropdown extends PbEnhancedElement {
     this.updatePills();
 
     this.clearBtn = this.element.querySelector(CLEAR_ICON_SELECTOR);
+    this.isClearable = this.element.dataset.pbDropdownClearable !== "false";
     if (this.clearBtn) {
       this.clearBtn.style.display = "none";
       this.clearBtn.addEventListener("click", (e) => {
@@ -60,6 +61,10 @@ export default class PbDropdown extends PbEnhancedElement {
 
   updateClearButton() {
     if (!this.clearBtn) return;
+    if (!this.isClearable) {
+      this.clearBtn.style.display = "none";
+      return;
+    }
     const hasSelection = this.isMultiSelect
       ? this.selectedOptions.size > 0
       : Boolean(this.element.querySelector(DROPDOWN_INPUT).value);
@@ -111,13 +116,43 @@ export default class PbDropdown extends PbEnhancedElement {
       const el = this.target;
       el.style.height = "auto";
       requestAnimationFrame(() => {
-        const newHeight = el.scrollHeight + "px";
+        // Calculate 18em in pixels (matches SCSS max-height: 18em)
+        const fontSize = parseFloat(getComputedStyle(el).fontSize) || 16;
+        const maxHeight = fontSize * 18;
+        const scrollHeight = el.scrollHeight;
+        const newHeight = Math.min(scrollHeight, maxHeight);
         el.offsetHeight; // force reflow
-        el.style.height = newHeight;
+        el.style.height = newHeight + "px";
       });
     }
   }
 
+  adjustDropdownPosition(container) {
+    if (!container) return;
+
+    const wrapper = this.element.querySelector(".dropdown_wrapper");
+    if (!wrapper) return;
+
+    const wrapperRect = wrapper.getBoundingClientRect();
+    const h = container.getBoundingClientRect().height || container.scrollHeight;
+    const spaceBelow = window.innerHeight - wrapperRect.bottom;
+    const spaceAbove = wrapperRect.top;
+
+    // If not enough space below but enough space above, position above
+    if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
+      container.style.top = "auto";
+      container.style.bottom = "calc(100% + 5px)";
+      container.style.marginTop = "0";
+      container.style.marginBottom = "0";
+    } else {
+      // Default: position below
+      container.style.top = "";
+      container.style.bottom = "";
+      container.style.marginTop = "";
+      container.style.marginBottom = "";
+    }
+  }
+
   handleSearch(term = "") {
     const lcTerm = term.toLowerCase();
     let hasMatch = false
@@ -365,7 +400,16 @@ export default class PbDropdown extends PbEnhancedElement {
   showElement(elem) {
     elem.classList.remove("close");
     elem.classList.add("open");
-    elem.style.height = elem.scrollHeight + "px";
+    
+    // Calculate height respecting max-height constraint (18em)
+    const fontSize = parseFloat(getComputedStyle(elem).fontSize) || 16;
+    const maxHeight = fontSize * 18; // matches SCSS max-height: 18em
+    const scrollHeight = elem.scrollHeight;
+    const height = Math.min(scrollHeight, maxHeight);
+    elem.style.height = height + "px";
+    
+    // Auto-position dropdown above if not enough space below
+    this.adjustDropdownPosition(elem);
   }
 
   hideElement(elem) {

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

@@ -44,6 +44,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
 
   const {
     autocomplete,
+    clearable,
     filterItem,
     handleBackspace,
     handleChange,
@@ -225,7 +226,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
                   > 
                   {
-                    selectedArray.length > 0 && (
+                    clearable !== false && selectedArray.length > 0 && (
                       <div onClick={(e)=>{e.stopPropagation();handleBackspace()}}>
                         <Icon
                             cursor="pointer"

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

@@ -1,6 +1,8 @@
 <%= 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.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.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 } %>
@@ -11,4 +13,4 @@
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
   <% end %>
-<% end %>
+<% end %>