playbook_ui 16.1.0.pre.alpha.play264213818 → 16.1.0.pre.alpha.play276813969

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

@@ -1,6 +1,8 @@
 <%= pb_content_tag do %>
     <% if object.label.present? %>
-        <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
+        <label for="<%= object.select_id %>" data-dropdown="pb-dropdown-label">
+            <%= pb_rails("caption", props: { text: object.label, margin_bottom: "xs", classname: "pb_dropdown_kit_label", dark: object.dark }) %>
+        </label>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
         <input
@@ -16,10 +18,12 @@
         <% end %>
         <% if content.present? %>
             <%= content.presence %>
-            <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
+            <% if object.error.present? %>
+                <%= pb_rails("body", props: { status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }, dark: object.dark }) %>
+            <% end %>
         <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger", props:{ autocomplete: object.autocomplete, multi_select:object.multi_select }) %>
-            <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar }) do %>
+            <%= pb_rails("dropdown/dropdown_trigger", props: { autocomplete: object.autocomplete, multi_select: object.multi_select, placeholder: object.placeholder, select_id: object.select_id, label: object.label, error_id: object.error_id, error: object.error }) %>
+            <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar, constrain_height: object.constrain_height }) do %>
                 <% if options_with_blank.present? %>
                     <% options_with_blank.each do |option| %>
                         <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
@@ -27,7 +31,9 @@
                 <% end %>
             <% end %>
 
-            <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
+            <% if object.error.present? %>
+                <%= pb_rails("body", props: { status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }, dark: object.dark }) %>
+            <% end %>
         <% end %>
     </div>
 <% end %>

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

@@ -10,6 +10,7 @@ module Playbook
       prop :label, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
       prop :error, type: Playbook::Props::String
+      prop :id, type: Playbook::Props::String
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :default_value
@@ -36,6 +37,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 +47,16 @@ module Playbook
                          default: "end_date_id"
       prop :end_date_name, type: Playbook::Props::String,
                            default: "end_date_name"
+      prop :placeholder, type: Playbook::Props::String
+      prop :constrain_height, type: Playbook::Props::Boolean,
+                              default: false
 
       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,
@@ -62,6 +69,14 @@ module Playbook
         generate_classname("pb_dropdown", variant, separators_class)
       end
 
+      def select_id
+        id.presence || (label.present? ? label.downcase.gsub(/\s+/, "_").gsub(/[^a-z0-9_]/, "") : nil)
+      end
+
+      def error_id
+        error.present? ? "#{select_id || 'dropdown_trigger'}-error" : nil
+      end
+
     private
 
       def error_class

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/dropdown_container.rb

@@ -5,9 +5,13 @@ module Playbook
     class DropdownContainer < Playbook::KitBase
       prop :searchbar, type: Playbook::Props::Boolean,
                        default: false
+      prop :constrain_height, type: Playbook::Props::Boolean,
+                              default: false
 
       def classname
-        generate_classname("pb_dropdown_container", "close", separator: " ")
+        classes = %w[pb_dropdown_container close]
+        classes << "constrain_height" if constrain_height
+        generate_classname(*classes, separator: " ")
       end
 
       def data

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

@@ -1,6 +1,10 @@
 <%= pb_content_tag do %>
     <% if content.present? %>
-        <div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
+        <div style="display: inline-block" tabindex="0" data-dropdown="pb-dropdown-trigger" data-dropdown-custom-trigger aria-invalid="<%= object.error.present? %>"
+            <% if object.label.present? %> aria-label="<%= [object.label, object.default_display_placeholder].join(', ') %>"<% end %>
+            <% if object.select_id.present? %> id="<%= object.select_id %>"<% end %>
+            <% if object.error_id.present? %> aria-describedby="<%= object.error_id %>"<% end %>
+        >
           <%= content.presence %>
         </div>
     <% else %>
@@ -9,10 +13,11 @@
         border_radius:"lg",
         classname: object.trigger_wrapper_classes,
         cursor: object.autocomplete ? "text" : "pointer",
+        id: object.select_id,
         justify: "between",
         padding_x:"sm",
         padding_y:"xs",
-        html_options: {tabindex:"0"}
+        html_options: { tabindex: "0", "aria-label": object.label.present? ? [object.label, object.default_display_placeholder].join(", ") : nil, "aria-describedby": object.error_id, "aria-invalid": object.error.present?, "data-dropdown": "pb-dropdown-trigger" }
         }) do %>
         <%= pb_rails("flex/flex_item", props: { fixed_size: object.multi_select ? "85%" : "" }) do %>
             <%= pb_rails("flex", props: {align: "center"}) do %>

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

@@ -13,6 +13,10 @@ module Playbook
                           default: false
       prop :multi_select, type: Playbook::Props::Boolean,
                           default: false
+      prop :select_id, type: Playbook::Props::String
+      prop :label, type: Playbook::Props::String
+      prop :error_id, type: Playbook::Props::String
+      prop :error, type: Playbook::Props::String
 
       def data
         Hash(prop(:data)).merge(dropdown_trigger: true, dropdown_placeholder: default_display_placeholder)