playbook_ui 13.27.0.pre.alpha.PLAY1342DRYcontenttagRailssimplekits2896 → 13.27.0.pre.alpha.PLAY11782916

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 86010ce79177c236d7f8407fa85ab4204e2b1828a406d3be849f8015d83bc473
-  data.tar.gz: eb445cf16692e00d7969def69849d916bd7fba5a2106aa1f987dc3114f9146eb
+  metadata.gz: 2ab90f7ab88ce3c08dab648348d07d1d0d7d3371e0505fba524e33a7b1b0ab63
+  data.tar.gz: 6a1e8caa7ed0789d8ea721a2bed9e5607dfd79eef8c69630c685ef92bc871431
 SHA512:
-  metadata.gz: 1e8b4eff3ba718fe73cc04f6dcf5f072f47d5d3fab4e408de793bcd4ad62542ddc7de30044be5a31a4b54a21af8b6de366f51384762eaf87c98ba327227811c7
-  data.tar.gz: 8aee0c92d46a1c6c885beb73a791beeac13449d7b8dbbf70f15dcadbeea8f3e0f384268270769906078606a92ae0411079c55dd694952e48024b35332e752876
+  metadata.gz: 0256e512d2e19f5f8dbec2e12b36221df30d57a53b11f4fd6f07c67d7a1dc9c32dd3758f7f8a3f8d871fe7de064148ec0b084c3899bd3720cf68683e539c335f
+  data.tar.gz: 60e3ef6787a0a5fe6508845dbac95c077d68421b9b9df186084f739fbfbf7b57e0ea94b6e144750e67f9ddca48031468541a6558fce0c3f5d8c6b912f2d88d9f

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

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
         <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
           <% if content.present? %>
             <% content.presence %>

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

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
         <% object.table_data.each do |row| %>
           <%= render_row_and_children(row, object.column_definitions) %>
         <% end %>

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

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
         <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
             <% object.column_definitions.each_with_index do |item, index| %>
                 <%= pb_rails("table/table_header", props: { tag:"div", id:item[:accessor], classname:object.th_classname}) do %>

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

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
             <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>

data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <% if object.tooltip_text.present? %>
         <%= pb_rails("tooltip", props: {
           trigger_element_id: object.tooltip_id,

data/app/pb_kits/playbook/pb_badge/badge.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <span><%= object.text %></span>
 <% end %>

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
       <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <%= pb_rails("button", props: {type: object.type, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do %>
 
     <%= pb_rails("flex", props: {vertical: "center", spacing: "between", cursor: "pointer"}) do %>
       <%= pb_rails("flex/flex_item") do %>

data/app/pb_kits/playbook/pb_contact/contact.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("body", props: { 
         tag: "span", 
         classname: "pb_contact_kit", 

data/app/pb_kits/playbook/pb_currency/currency.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("caption", props: object.caption_props) %>
 
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>

data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.stat_label.present? %>
     <%= pb_rails("body", props: { color: "light", text: object.stat_label } ) %>
   <% end %>

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do %>
 
   <% if object.unstyled %>
     <!-- icon -->

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <div class="pb_date_range_inline_wrapper">
     <% if object.icon == true %>
       <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: object.size, classname: "pb_date_range_inline_icon" }) }) %>

data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("flex", props: {vertical: "center"}) do %>
       <%= pb_rails("flex/flex_item") do %>

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <% if object.bold == false %>
 

data/app/pb_kits/playbook/pb_date_time/date_time.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("flex", props: {
       orientation: "row",

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do %>
 
   <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: { text: object.day_month, size: 4, dark: object.dark }) %>
   <%= pb_rails("body", props: { text: object.year, size: 4, color: "light", dark: object.dark }) %>
 <% end %>

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

@@ -1 +1 @@
-The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.
+This kit's `options` prop requires an array of objects, each of which will be used as the selectable options within the dropdown. Each option object can support any number of key-value pairs, but each must contain `label` and `value`.

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

@@ -1,7 +1,6 @@
-The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
+The dropdown is built using all of the following subcomponents:
 
-`Dropdown. Trigger` / `dropdown/dropdown_trigger`
-`Dropdown.Container`/ `dropdown/dropdown_container`
-`Dropdown.Option` / `dropdown/dropdown_option`
-
-See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props. 
+`Dropdown.Trigger` is the UI component that users interact with to toggle the dropdown. 
+`Dropdown.Container` is the floating container that wraps the list of dropdown options. 
+`Dropdown.Option` renders options that are passed to the container. 
+Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.

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

@@ -0,0 +1,6 @@
+The dropdown is built using all of the following required subcomponents:
+
+`dropdown/dropdown_trigger` is the UI component that users interact with to toggle the dropdown. 
+`dropdown/dropdown_container` is the floating container that wraps the list of dropdown options.
+`dropdown/dropdown_option` renders options that are passed to the container. 
+Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.

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

@@ -1,5 +1,5 @@
-The `customDisplay` prop can be used to customize the display of the selected item by allowing devs to pass in a component that will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
 
-The `placeholder` prop can also be used to customize the placeholder text for the default Trigger. 
+The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`. 
 
-The `onSelect` prop is a function that gives the dev one argument: the selected option. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.
+The `onSelect` prop returns the selected option as an object to be utilized by the dev. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.

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

@@ -0,0 +1,5 @@
+Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+
+The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`. 
+
+The dropdown follows the typical rails pattern of utilizing hidden inputs for form submission. The hidden input value is the selected options' id.

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

@@ -1 +1 @@
-The Dropdown also allows for custom options that can be passed in as children to the `Dropdown.Option` subcomponent. If no children are passed to `Dropdown.Option`, the kit will render each option as text within a Body kit by default. 
+`Dropdown.Option` subcomponent accepts any child components to customize the options' contents and display. By default, options are Body kit text that is set by the `label` value from the `option` object.

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

@@ -0,0 +1 @@
+`dropdown/dropdown_option` subcomponent accepts any child components to customize the options' contents and display. By default, options are Body kit text that is set by the `label` value from the `option` object.

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

@@ -1 +1 @@
-By default, the padding on each option in the dropdown is set to `xs`. The `padding` Global Props however can be used to override this default. In this example, we are setting padding to `sm`.
+By default, dropdown option padding is set to `xs`, but this padding can be overridden using our global prop spacing token. In this example we are increasing the option padding to `sm`.

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

@@ -1 +1 @@
-The Dropdown can also be given a custom Trigger by passing children to the `Dropdown.Trigger` subcomponent as shown in this example. Here we are using the IconCircle kit. 
+Optionally replace the default trigger's select element by passing child components directly to the `Dropdown.Trigger`.

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

@@ -0,0 +1 @@
+Optionally replace the default trigger's select element by passing child components directly to the `dropdown/dropdown_trigger`.

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

@@ -1 +1 @@
-The optional `label` prop takes a string value that if present will render that string as the label for the Dropdown.
+The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.

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

@@ -1,12 +1,12 @@
 examples:
   rails:
   - dropdown_default: Default
-  - dropdown_subcomponent_structure: Subcomponent Structure
+  - dropdown_subcomponent_structure_rails: 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_custom_padding: Custom Padding for Dropdown Options
+  - dropdown_with_custom_options_rails: Custom Options
+  - dropdown_with_custom_display_rails: Custom Display
+  - dropdown_with_custom_trigger_rails: Custom Trigger
+  - dropdown_with_custom_padding: Custom Option Padding
 
   react:
   - dropdown_default: Default
@@ -15,7 +15,7 @@ examples:
   - dropdown_with_custom_options: Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
-  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
+  - dropdown_with_custom_padding: Custom Option Padding
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

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

@@ -3,7 +3,7 @@
 module Playbook
   module PbDropdown
     class DropdownOption < Playbook::KitBase
-      prop :option, type: Playbook::Props::String
+      prop :option, type: Playbook::Props::HashProp
       prop :id, type: Playbook::Props::String
 
       def data

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
 
     <% if content %>

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -19,7 +19,7 @@ export type IconSizes = "lg"
 | "10x"
 | ""
 
-type IconProps = {
+export type IconProps = {
   aria?: {[key: string]: string},
   border?: string,
   className?: string,

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
     <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,

data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id,
+  **combined_html_options) do %>
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
     <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true }) %>
     <%= object.text %>

data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("caption", props: { text: object.label, classname: "pb_label_pill_label"}) %>
       <%= pb_rails("pill", props: { text: object.pill_value, variant: object.variant, classname: "pb_label_pill_pill" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_label_value/label_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     <% if object.variant == "details" %>
         <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
     <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>

data/app/pb_kits/playbook/pb_message/message_mention.html.erb

@@ -1,8 +1,8 @@
 <%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
-        <%= content %>
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  aria: object.aria,
+  **combined_html_options) do %>
+    <%= content %>
 <% end %>

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
     <% object.users.take(object.display_count).each do |user| %>
       <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark}) ) %>
     <% end %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id,
+  **combined_html_options) do %>
   <%= pb_rails("avatar", props: object.users[0].merge({size: "xs", classname: "pb_multiple_users_stacked_item", dark: object.dark}) ) %>
 
   <% unless object.only_one %>

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
      <%= will_paginate object.model, renderer: Playbook::Pagination::Rails %>
 <% end %>

data/app/pb_kits/playbook/pb_person/person.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("body", props: {
         tag: "span",
         classname: "pb_person_first" }) { object.first_name } %>

data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <%= pb_rails("person", props: {
       first_name: object.first_name,
       last_name: object.last_name,

data/app/pb_kits/playbook/pb_pill/pill.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: { text: object.display_text, tag: "div", size: 4, classname: "pb_pill_text" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <% if object.orientation === 'horizontal' %>
         <% if content %>
             <%= content %>

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -7,7 +7,7 @@ import type { InputCallback } from '../types'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
-import Icon from '../pb_icon/_icon'
+import Icon, { IconProps } from '../pb_icon/_icon'
 
 type SelectOption = {
   value: string,
@@ -25,6 +25,7 @@ type SelectProps = {
   disabled?: boolean,
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  iconProps?: IconProps,
   id?: string,
   includeBlank?: string,
   inline?: boolean,
@@ -36,6 +37,7 @@ type SelectProps = {
   onChange: InputCallback<HTMLSelectElement>,
   options: SelectOption[],
   required?: boolean,
+  selectProps?: GlobalProps & { [key: string]: any },
   showArrow?: boolean,
   value?: string,
 } & GlobalProps
@@ -59,6 +61,7 @@ const Select = ({
   data = {},
   disabled = false,
   error,
+  iconProps,
   label,
   htmlOptions = {},
   inline = false,
@@ -67,6 +70,7 @@ const Select = ({
   onChange = () => undefined,
   options = [],
   required = false,
+  selectProps = {},
   showArrow = false,
   value,
   ...props
@@ -90,6 +94,12 @@ const Select = ({
     compactClass
   );
 
+  const selectClasses = classnames(
+    buildCss('pb_html_select'),
+    globalProps(selectProps), 
+    selectProps.className 
+  )
+
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
   const selectBody =(() =>{
     if (children) return children
@@ -97,6 +107,7 @@ const Select = ({
       <select
           {...htmlOptions}
           {...domSafeProps(props)}
+          className={selectClasses}
           disabled={disabled}
           id={name}
           multiple={multiple}
@@ -137,6 +148,7 @@ const Select = ({
               className="pb_select_kit_caret"
               fixedWidth
               icon="angle-down"
+              {...iconProps}
           />
           :
           null

data/app/pb_kits/playbook/pb_source/source.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <div class="pb__source_layout">
     <% if !object.hide_icon %>
       <% if object.show_icon? %>

data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("body", props: { status: object.status }) do %>
         <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
         <%= "#{object.value}%" if object.value %>

data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <div class="pb_stat_value_wrapper">
     <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <div class="pb_time_range_inline_wrapper">
         <% if object.icon == true %>
           <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "clock", dark: object.dark, classname:"pb_time_range_inline_icon", fixed_width: true, size: object.size }) }) %>

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
       <time>

data/app/pb_kits/playbook/pb_timeline/item.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
 
   <div class="pb_timeline_item_left_block">
     <% if object.date.present? %>

data/app/pb_kits/playbook/pb_timeline/timeline.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
 
   <% if object.unstyled %>
     <div><%= object.timestamp_text %></div>

data/app/pb_kits/playbook/pb_title_count/title_count.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: {
     dark: object.dark,
     size: object.title_size,

data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: { text: object.title, size: 4 }) %>
   <%= pb_rails("body", props: { text: object.detail, color: "light" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
     <%= pb_rails("caption", props: {dark: object.dark, text: object.day_of_week}) %>
     <%= pb_rails("title", props: {dark: object.dark, size: 4, tag: "span", text: object.formatted_month_and_day}) %>
 <% end %>

data/dist/menu.yml

@@ -255,9 +255,9 @@ kits:
         description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
         status: "stable"
       - name: dropdown
-        platforms: *react_only
+        platforms: *web
         description: ""
-        status: "beta"
+        status: "stable"
       - name: "multi_level_select"
         platforms: *web
         description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user. 

data/lib/playbook/kit_base.rb

@@ -81,7 +81,7 @@ module Playbook
     end
 
     # rubocop:disable Style/OptionalBooleanParameter
-    def pb_content_tag(name = :div, content_or_options_with_block = {}, options = {}, escape = true, &block)
+    def pb_content_tag(name, content_or_options_with_block = nil, options = {}, escape = true, &block)
       combined_options = options
                          .merge(combined_html_options)
                          .merge(default_options.merge(content_or_options_with_block))

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.27.0"
-  VERSION = "13.27.0.pre.alpha.PLAY1342DRYcontenttagRailssimplekits2896"
+  VERSION = "13.27.0.pre.alpha.PLAY11782916"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.27.0.pre.alpha.PLAY1342DRYcontenttagRailssimplekits2896
+  version: 13.27.0.pre.alpha.PLAY11782916
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-05-13 00:00:00.000000000 Z
+date: 2024-05-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1049,25 +1049,29 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb