playbook_ui 13.24.0.pre.alpha.play1305drycontenttag2689 → 13.24.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c9fd50c8a90b4a615fce245543e5668f8b30db6d34a415f8b5a75c3a3d7c3145
-  data.tar.gz: 98b7e0f546d36137d2806c0101abea334b0f6722d0d90b99367acea8a16fb609
+  metadata.gz: 1111185a0ba8189b593aac01cc00c8e0e25665e52023c6dae98205d0a8292c97
+  data.tar.gz: '08738c3ea661ac56922035b3e069885ea4b6233d7f7e6704d441e728a1c64aed'
 SHA512:
-  metadata.gz: 53f10ca101d6898a3fe39f89b85df6f449c79534d2c983547c0ade5dcbbe2131d42a6e405dfd3ce0cc5c4db24ac2595046983763b072f1c50025ecde65c36725
-  data.tar.gz: 434818b51714ce97871413c231ed01fd810b544fd7efed8a697520eca886232587dd877689882aa0ece09222288e3075891c0178197cb188b53ef0f45423cbb1
+  metadata.gz: 339c41e64df36a935e6bdd362dae6b6260faae9c524ea9f0aad8bd73ea26d9fd3c63fd69ce1234f97839794cd60c020120e583f814ea80b96654aa6771c3384c
+  data.tar.gz: b86306732da6f9f96493f2c0b9bdef887aff78f0de2b2aeb7ba9d0a64aff1cd198021c55acf36fcd9bee75f68e3fbf457a95f43dfd1be203eb9943de53ae5065

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

@@ -1,10 +1,14 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
-  <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
-    <% if content.present? %>
-      <% content.presence %>
-    <% else %>
-      <%= pb_rails("advanced_table/table_header", props: {column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
-      <%= pb_rails("advanced_table/table_body", props: {table_data: object.table_data, column_definitions: object.column_definitions}) %>
-    <% end %>
-  <% end %>
-<% end %>
+<%= 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 %>
+          <% else %>
+            <%= pb_rails("advanced_table/table_header", props: {column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
+            <%= pb_rails("advanced_table/table_body", props: {table_data: object.table_data, column_definitions: object.column_definitions}) %>
+          <% end %>
+        <% end %>
+<% end %>

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

@@ -1,5 +1,9 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
-  <% object.table_data.each do |row| %>
-    <%= render_row_and_children(row, object.column_definitions) %>
-  <% end %>
-<% end %>
+<%= 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 %>
+<% end %>

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

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) 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 %>
@@ -13,4 +17,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>

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

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) 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 %>
@@ -30,4 +34,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_avatar/avatar.html.erb

@@ -1,4 +1,9 @@
-<%= object.pb_content_tag(:div, data: object.data.merge(initials: object.initials)) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data.merge(initials: object.initials),
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do %>
   <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
     <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
   <% end %>

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

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, **combined_html_options) 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_background/background.html.erb

@@ -1,5 +1,9 @@
 <% if object.image_url.present? %>
-  <%= pb_content_tag(object.tag,
+  <%= content_tag(object.tag,
+      aria: object.aria,
+      data: object.data,
+      id: object.id,
+      class: object.classname,
       style: "background-image: url('#{object.image_url}');
               background-repeat: #{object.background_repeat};
               background-size: #{object.background_size};
@@ -9,7 +13,11 @@
     <%= content.presence %>
   <% end %>
 <% else %>
-  <%= pb_content_tag(object.tag,
+  <%= content_tag(object.tag,
+      aria: object.aria,
+      data: object.data,
+      id: object.id,
+      class: object.classname,
       style: object.custom_background_color
   ) do %>
     <%= content.presence %>

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

@@ -1,3 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) 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_bar_graph/_bar_graph.tsx

@@ -13,12 +13,12 @@ import classnames from "classnames";
 
 type BarGraphProps = {
   align?: "left" | "right" | "center";
-  axisTitle: { name: string; }[] | string;
+  axisTitle: string;
   dark?: boolean;
   xAxisCategories: [];
   yAxisMin: number;
   yAxisMax: number;
-  chartData: { name: string; data: number[], yAxis: number }[];
+  chartData: { name: string; data: number[] }[];
   className?: string;
   customOptions?: Partial<Highcharts.Options>;
   id: string;
@@ -37,8 +37,6 @@ type BarGraphProps = {
   y?: number;
   aria?: { [key: string]: string };
   data?: { [key: string]: string };
-  stacking?: "normal" | "percent" 
-  axisFormat?: { format: string; }[] | string;
 };
 
 
@@ -53,10 +51,8 @@ const BarGraph = ({
   colors,
   htmlOptions = {},
   customOptions = {},
-  axisFormat,
   id,
   pointStart,
-  stacking,
   subTitle,
   type = "column",
   title = "Title",
@@ -71,7 +67,7 @@ const BarGraph = ({
   x = 0,
   y = 0,
   ...props
-}: BarGraphProps): React.ReactElement => { 
+}: BarGraphProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);
@@ -93,23 +89,13 @@ const BarGraph = ({
     subtitle: {
       text: subTitle,
     },
-    yAxis: [{
-      labels: {
-        format: typeof axisFormat === 'string' ? axisFormat : (axisFormat && axisFormat[0] ? axisFormat[0].format : "")
-
-      },
+    yAxis: {
       min: yAxisMin,
       max: yAxisMax,
-      opposite: false,
       title: {
-        text: typeof axisTitle === 'string' ? axisTitle : axisTitle[0].name,
+        text: axisTitle,
       },
-      plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
-        value: 0,
-        zIndex: 10,
-        color: "#E4E8F0"
-    }],
-    }],
+    },
     xAxis: {
       categories: xAxisCategories,
     },
@@ -127,9 +113,7 @@ const BarGraph = ({
         : highchartsTheme.colors,
     plotOptions: {
       series: {
-        stacking: stacking,
         pointStart: pointStart,
-        borderWidth: stacking ? 0 : "",
         events: {},
         dataLabels: {
           enabled: false,
@@ -140,25 +124,6 @@ const BarGraph = ({
     credits: false,
   };
 
-if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
-  staticOptions.yAxis.push({
-    labels: {
-      format: typeof axisFormat === 'string' ? axisFormat : axisFormat[1].format,
-    },
-    min: yAxisMin,
-    max: yAxisMax,
-    opposite: true,
-    title: {
-      text: axisTitle[1].name,
-    }, 
-    plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
-      value: 0,
-      zIndex: 10,
-      color: "#E4E8F0"
-  }],
-  });
-}
-
   if (!toggleLegendClick) {
     staticOptions.plotOptions.series.events = { legendItemClick: () => false };
   }

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -7,7 +7,6 @@ module Playbook
                    values: %w[left right center],
                    default: "center"
       prop :axis_title
-      prop :axis_format
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
       prop :custom_options, default: {}
@@ -15,7 +14,6 @@ module Playbook
                          values: %w[vertical horizontal],
                          default: "vertical"
       prop :point_start, type: Playbook::Props::Numeric
-      prop :stacking
       prop :subtitle
       prop :title
       prop :x_axis_categories, type: Playbook::Props::Array,
@@ -51,10 +49,8 @@ module Playbook
           dark: dark ? "dark" : "",
           type: chart_type,
           title: title,
-          stacking: stacking,
           subTitle: subtitle,
           axisTitle: axis_title,
-          axisFormat: axis_format,
           pointStart: point_start,
           xAxisCategories: x_axis_categories,
           yAxisMin: y_axis_min,

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

@@ -9,9 +9,6 @@ examples:
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
   - bar_graph_custom: Custom Overrides
-  - bar_graph_stacked: Stacked
-  - bar_graph_negative_numbers: Negative Numbers
-  - bar_graph_secondary_y_axis: Secondary Y-Axis
 
 
   react:
@@ -23,6 +20,3 @@ examples:
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
   - bar_graph_custom: Custom Overrides
-  - bar_graph_stacked: Stacked
-  - bar_graph_negative_numbers: Negative Numbers
-  - bar_graph_secondary_y_axis: Secondary Y-Axis

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

@@ -6,6 +6,3 @@ export { default as BarGraphHeight } from './_bar_graph_height.jsx'
 export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
 export { default as BarGraphColors } from './_bar_graph_colors.jsx'
 export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
-export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
-export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
-export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -19,7 +19,7 @@
     }
   }
   b, strong {
-    font-weight: $bold;
+    @include pb_title_4
   }
 
   a {
@@ -29,8 +29,8 @@
     }
   }
 
-  em, i {
-    font-style: italic;
+  em {
+    font-weight: $bold;
   }
 
   small {

data/app/pb_kits/playbook/pb_body/body.html.erb

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

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do%>
 <%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
     <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb

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

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,4 +1,4 @@
-<%= pb_content_tag(object.tag,
+<%= content_tag(object.tag,
                 object.tag == "button" ? object.options : object.link_options,
                 **combined_html_options) do %>
     <% if object.variant === "reaction" %>

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

@@ -1,3 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) do %>
-  <%= content.presence || object.text %>
+<%= 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_caption/caption.html.erb

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

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -1,4 +1,10 @@
-<%= pb_content_tag(object.tag, **combined_html_options) do %>
+<%= content_tag(object.tag,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    dark: object.dark,
+    **combined_html_options) do %>
     <%= content.presence %>
 <% end %>
 

data/app/pb_kits/playbook/pb_card/card_body.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) 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_card/card_header.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) 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_checkbox/checkbox.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:label, **combined_html_options) do %>
+<%= content_tag(:label, aria: object.aria,
+                        id: object.id,
+                        data: object.data,
+                        class: object.classname,
+                        **combined_html_options
+                ) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
     <span class="pb_checkbox_indeterminate">

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

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div, **combined_html_options) 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(:div, **combined_html_options) 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(:div, **combined_html_options) 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(:div, **combined_html_options) 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(:div, **combined_html_options) 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(:div, **combined_html_options) 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(:div, **combined_html_options) 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(:div, **combined_html_options) 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_picker/date_picker.html.erb

@@ -1,5 +1,8 @@
-<%= pb_content_tag(:div,
+<%= content_tag(:div,
+    aria: object.aria,
     class: object.classname + object.error_class,
+    data: object.data,
+    id: object.id,
     **combined_html_options) do %>
   <div class="input_wrapper">
     <% if content.present? %>

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

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) 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(:div, **combined_html_options) 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(:div, **combined_html_options) 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(:div, **combined_html_options) 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,10 @@
-<%= pb_content_tag(:div, **combined_html_options) 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 %>
         <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>

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

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div, **combined_html_options) 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_detail/detail.html.erb

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

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -1,5 +1,10 @@
 <div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
-    <%= pb_content_tag(:dialog, **combined_html_options) do %>
+    <%= content_tag(:dialog,
+        aria: object.aria,
+        data: object.data,
+        id: object.id,
+        class: object.classname,
+        **combined_html_options) do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
             <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb

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