playbook_ui 16.0.0.pre.alpha.PLAY2744dropdownquickpickpt113758 → 16.0.0.pre.alpha.PLAY267213608

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 77d2aa38ac1c38d9be4fa1b827ac346255f9742aa6e4c4569845b3f8335c57cd
-  data.tar.gz: e1034bf5c9ea8bc54b2e4c606f68dc0c0beea877674ac459aa767232bbdab299
+  metadata.gz: e6176ee8cfd1936b6e7b79e5716d8b099a74331977e5f3fcaba072943590ebd9
+  data.tar.gz: 7c2e3b2a2d0a7ee10c52de21dd6e66be1997f144dfb97e1cef4f653f6591e3ff
 SHA512:
-  metadata.gz: fa2c94e31f5bacca5366fcf5c4438b0f740d85df8cf642af32b63ff588bf4f8c5b31b3016e981a44143068349b3ef833d1bd0a72c920d67d6fce157c11378cce
-  data.tar.gz: f2a531ff9faca9f3524227c518482938e6c0ae648582befe352fcdfd3a11220c315b9a873e505ba8fd7bf4265b3d671c42d413606204405b76a74e35aa4dc4cb
+  metadata.gz: 5a362e44b418ef2a19d8861af43fe7671872d5396faa1cc04ee4b252ef59b29d7c46661175ecaec7a046924b280d4a29c2d1f6bbc605fe6dd026081362d74635
+  data.tar.gz: 1c8d077d1c087fcde6fb5c3da59580f3e674bdbf0fb26068c8c41be95bb1c8bdb92fb046e956f64ce16fd7c4cb6531ef3af07ade73010ec68ace747935a81b4c

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -11,8 +11,8 @@
     <% if content.present? %>
       <% content.presence %>
     <% else %>
-      <%= pb_rails("advanced_table/table_header", props: { table_id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar, inline_row_loading: object.inline_row_loading, persist_toggle_expansion_button: object.persist_toggle_expansion_button, table_data: object.table_data }) %>
-      <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling, inline_row_loading: object.inline_row_loading }) %>
+      <%= pb_rails("advanced_table/table_header", props: { table_id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
+      <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling }) %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -33,10 +33,6 @@ module Playbook
                              default: false
       prop :row_styling, type: Playbook::Props::Array,
                          default: []
-      prop :inline_row_loading, type: Playbook::Props::Boolean,
-                                default: false
-      prop :persist_toggle_expansion_button, type: Playbook::Props::Boolean,
-                                             default: false
 
       def classname
         additional_classes = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md

@@ -6,9 +6,9 @@ In the first Advanced Table in this code example, 2021 has an empty children arr
 This prop is set to `false` by default. 
 
 
-### persistToggleExpansionButton
+### persistToggleExpansion
 The `persistToggleExpansionButton` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
 
 In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persistToggleExpansionButton` in place. The third Advanced Table shows the toggle all button due to `persistToggleExpansionButton`. 
 
-This prop is set to `false` by default and should only be used in conjunction with `inlineRowLoading`.
+This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.

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

@@ -29,7 +29,6 @@ examples:
   - advanced_table_background_control_rails: Column Styling Background Color
   - advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
   - advanced_table_column_border_color_rails: Column Group Border Color
-  - advanced_table_inline_row_loading_rails: Inline Row Loading
 
 
   react:

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -25,8 +25,6 @@ module Playbook
                              default: false
       prop :row_styling, type: Playbook::Props::Array,
                          default: []
-      prop :inline_row_loading, type: Playbook::Props::Boolean,
-                                default: false
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -71,24 +69,7 @@ module Playbook
                                   end
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { table_id: table_id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id, inline_row_loading: inline_row_loading })
-
-        # Render inline loading row when inline_row_loading is enabled and row has empty children
-        if inline_row_loading
-          children = row_children_for(row)
-          if children.is_a?(::Array) && children.empty?
-            max_depth = cell_accessors_length(column_definitions)
-            if current_depth < max_depth
-              loading_row_data_attributes = {
-                advanced_table_content: "#{new_ancestor_ids.join('-')}-loading",
-                row_depth: current_depth + 1,
-                row_parent: "#{table_id}_#{row.object_id}",
-                inline_loading_row: true,
-              }
-              output << render_inline_loading_row(leaf_columns.length, current_depth, loading_row_data_attributes)
-            end
-          end
-        end
+        output << pb_rails("advanced_table/table_row", props: { table_id: table_id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -123,37 +104,6 @@ module Playbook
         ""
       end
 
-      # 3 helper methods for inline row loading
-      def render_inline_loading_row(column_count, depth, data_attributes)
-        padding_left = depth.zero? ? "0.5em" : "#{(depth + 1) * 2}em"
-
-        content_tag(:tr, class: "toggle-content inline-loading-row", data: data_attributes) do
-          content_tag(:td, colspan: column_count, style: "padding-left: #{padding_left}") do
-            pb_rails("loading_inline")
-          end
-        end
-      end
-
-      def row_children_for(row)
-        if row.respond_to?(:children)
-          row.children
-        elsif row.respond_to?(:[])
-          row[:children] || row["children"]
-        end
-      end
-
-      def cell_accessors_length(col_defs)
-        first_col = col_defs.first
-        return 0 unless first_col
-
-        accessors = if first_col.respond_to?(:cellAccessors)
-                      first_col.cellAccessors
-                    elsif first_col.respond_to?(:[])
-                      first_col[:cellAccessors] || first_col["cellAccessors"]
-                    end
-        accessors&.length || 0
-      end
-
     private
 
       def has_grouped_headers?

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -14,7 +14,7 @@
                   <%= object.render_select_all_checkbox %>
                 <% end %>
               <% end %>
-              <% if object.show_toggle_all_button? %>
+              <% if object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all" %>
                 <% if loading %>
                   <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
                 <% else %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -19,12 +19,6 @@ module Playbook
                              default: false
       prop :show_actions_bar, type: Playbook::Props::Boolean,
                               default: true
-      prop :inline_row_loading, type: Playbook::Props::Boolean,
-                                default: false
-      prop :persist_toggle_expansion_button, type: Playbook::Props::Boolean,
-                                             default: false
-      prop :table_data, type: Playbook::Props::Array,
-                        default: []
 
       def classname
         additional_classes = []
@@ -141,20 +135,6 @@ module Playbook
         original_def.dig(:column_styling, :header_font_color)
       end
 
-      # Check if any row in the table has children
-      def has_any_sub_rows?
-        return false if table_data.blank?
-
-        table_data.any? { |row| row_has_children?(row) }
-      end
-
-      # Determines if the toggle-all button should be shown in the header based on inline row loading and persist toggle expansion button props
-      def show_toggle_all_button?
-        return false unless enable_toggle_expansion == "header" || enable_toggle_expansion == "all"
-
-        has_any_sub_rows? || (inline_row_loading && persist_toggle_expansion_button)
-      end
-
       # Check if header has custom background color
       def has_custom_header_background_color?(cell)
         cell[:header_background_color].present?
@@ -337,20 +317,6 @@ module Playbook
         end
         nil
       end
-
-      # 2 inline row loading helper methods
-      def row_has_children?(row)
-        children = row_children_for(row)
-        children.present? && children.is_a?(::Array) && !children.empty?
-      end
-
-      def row_children_for(row)
-        if row.respond_to?(:children)
-          row.children
-        elsif row.respond_to?(:[])
-          row[:children] || row["children"]
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -32,7 +32,7 @@
                                     <%= object.render_row_checkbox %>
                                 <% end %>
                             <% end %>
-                            <% if object.show_expand_button? %>
+                            <% if object.row[:children].present? %>
                                 <button
                                     id="<%= "#{object.table_id}_#{object.row.object_id}" %>"
                                     class="gray-icon expand-toggle-icon"

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -33,8 +33,6 @@ module Playbook
                       default: false
       prop :immediate_parent_row_id, type: Playbook::Props::String,
                                      default: ""
-      prop :inline_row_loading, type: Playbook::Props::Boolean,
-                                default: false
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -188,23 +186,6 @@ module Playbook
         end
       end
 
-      # Determines if the row should show an expand button (true if row has children or inline_row_loading true and row has empty children array)
-      def show_expand_button?
-        children = row_children
-        return true if children.present?
-        return true if inline_row_loading && children.is_a?(::Array) && children.empty?
-
-        false
-      end
-
-      def row_children
-        if row.respond_to?(:children)
-          row.children
-        elsif row.respond_to?(:[])
-          row[:children] || row["children"]
-        end
-      end
-
     private
 
       def custom_renderer_value(column, index)

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

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

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

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

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

@@ -36,7 +36,6 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
-    clearable?: boolean;
     customQuickPickDates?: CustomQuickPickDates;
     formPillProps?: GenericObject;
     dark?: boolean;
@@ -50,7 +49,6 @@ type DropdownProps = {
     multiSelect?: boolean;
     onSelect?: (arg: GenericObject) => null;
     options?: GenericObject;
-    placeholder?: string;
     separators?: boolean;
     variant?: "default" | "subtle" | "quickpick";
     rangeEndsToday?: boolean;
@@ -76,7 +74,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
-        clearable = true,
         customQuickPickDates,
         dark = false,
         data = {},
@@ -90,7 +87,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         formPillProps,
         onSelect,
         options,
-        placeholder,
         rangeEndsToday = false,
         controlsStartId,
         controlsEndId,
@@ -215,34 +211,6 @@ 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);
@@ -407,7 +375,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                 value={{
                     activeStyle,
                     autocomplete,
-                    clearable,
                     dropdownContainerRef,
                     filteredOptions,
                     filterItem,
@@ -459,7 +426,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                         </>
                     ) : (
                         <>
-                            <DropdownTrigger placeholder={placeholder} />
+                            <DropdownTrigger />
                             <DropdownContainer>
                                 {optionsWithBlankSelection &&
                                     optionsWithBlankSelection?.map((option: GenericObject) => (

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

@@ -21,9 +21,7 @@ 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)
@@ -54,9 +52,7 @@ 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,7 +11,6 @@ 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'
@@ -28,5 +27,4 @@ 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 DropdownWithClearable } from './_dropdown_with_clearable.jsx'
+export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.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, placeholder: object.placeholder }) %>
+            <%= pb_rails("dropdown/dropdown_trigger", props:{ autocomplete: object.autocomplete, multi_select:object.multi_select }) %>
             <%= 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,8 +36,6 @@ 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,
@@ -46,14 +44,12 @@ 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,80 +122,6 @@ 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
@@ -540,27 +466,7 @@ 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,7 +48,6 @@ 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) => {
@@ -61,10 +60,6 @@ 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);
@@ -116,43 +111,13 @@ export default class PbDropdown extends PbEnhancedElement {
       const el = this.target;
       el.style.height = "auto";
       requestAnimationFrame(() => {
-        // 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);
+        const newHeight = el.scrollHeight + "px";
         el.offsetHeight; // force reflow
-        el.style.height = newHeight + "px";
+        el.style.height = newHeight;
       });
     }
   }
 
-  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
@@ -400,16 +365,7 @@ export default class PbDropdown extends PbEnhancedElement {
   showElement(elem) {
     elem.classList.remove("close");
     elem.classList.add("open");
-    
-    // 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);
+    elem.style.height = elem.scrollHeight + "px";
   }
 
   hideElement(elem) {

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

@@ -44,7 +44,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
 
   const {
     autocomplete,
-    clearable,
     filterItem,
     handleBackspace,
     handleChange,
@@ -226,7 +225,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
                   > 
                   {
-                    clearable !== false && selectedArray.length > 0 && (
+                    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,8 +1,6 @@
 <%= 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 } %>
@@ -13,4 +11,4 @@
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
   <% end %>
-<% end %>
+<% end %>