playbook_ui 12.38.0.pre.alpha.playbook123801077 → 12.39.0.pre.alpha.PLAY966collapsiblenav41115

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -1,6 +1,6 @@
 <%= content_tag(:div,
-  data: object.data,
   aria: object.aria,
+  data: object.data,
   class: object.classnames) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
@@ -19,17 +19,13 @@
           selected: object.selected,
           disabled: object.disabled_options,
         ),
-        id: object.id,
-        prompt: object.blank_selection,
-        disabled: object.disabled,
-        required: object.required,
-        multiple: object.multiple,
-        onchange: object.onchange,
-        include_blank: object.include_blank,
+        object.all_attributes
       )
       %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
     <% end %>
-    <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
+    <% if object.multiple != true %>
+      <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
+    <% end %>
   </label>
 <% end %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -6,6 +6,8 @@ require "action_view"
 module Playbook
   module PbSelect
     class Select < Playbook::KitBase
+      prop :attributes, type: Playbook::Props::Hash,
+                        default: {}
       prop :blank_selection
       prop :compact, type: Playbook::Props::Boolean, default: false
       prop :disabled, type: Playbook::Props::Boolean, default: false
@@ -23,6 +25,18 @@ module Playbook
         classname + inline_class + compact_class
       end
 
+      def all_attributes
+        {
+          id: id,
+          prompt: blank_selection,
+          disabled: disabled,
+          required: required,
+          multiple: multiple,
+          onchange: onchange,
+          include_blank: include_blank,
+        }.merge(attributes)
+      end
+
       def classname
         generate_classname("pb_select", select_margin_bottom, separator: " ")
       end

data/app/pb_kits/playbook/pb_select/select.test.js

@@ -49,3 +49,20 @@ test('returns dark class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark`)
 })
+
+test('returns multiple variant', () => {
+  render(
+    <Select
+        data={{ testid: "selectMultiple" }}
+        label="Favorite Food"
+        multiple
+        name="food"
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId("selectMultiple");
+  const selectElement = kit.querySelector('select');
+
+  expect(selectElement).toHaveAttribute('multiple', '');
+});