playbook_ui 14.12.0.pre.alpha.PLAY1602lightboxoverlapnitrobug5655 → 14.12.0.pre.alpha.advancedtablealignmentfixes5693

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e4e36bc39d271fc8c5799f840523e24a02597aec41b0191a8aeca562b4ed325b
-  data.tar.gz: 3e057e647fb29b4c367d1508292b5ae7a9c923c0aaa02e771c24a33173375c84
+  metadata.gz: 8e4dc3d2e5a79486ca82c7d90654b0cf1db86bdb42cc9c0540ffb9635c373174
+  data.tar.gz: cb9d6f1a2680e4ac81dc637ec1984efa4368d5b0739c44f6134ec44f214dccd2
 SHA512:
-  metadata.gz: 9e4cd81b8cd28c013f41856ad9033d11f3cf2cf9e1c4db7cfbec611401dd9d8c3842a44c6a2be3f2030979f8bf52ebfdb236b3b8a4ca32ba928bd7b896cf93fe
-  data.tar.gz: c8d25c303eb65eef3ba5d59502429fbaf9d9220bbe798395fd48ed02dc90fa296cf78607294db601be3a0eae591236d46c15908544799c4c825308e2b630b0f0
+  metadata.gz: 77ec944b74d30f62a35b54bb1138fa97dd7b4635a67375336fd6c4fd6d3d2875abb8338d271a874688c22f562e126c49387d2ce5ca1d9610a3b12d077f5efb7a
+  data.tar.gz: dfbf55ff877f9c17064e58ee45b72a24adf289238e3b06cac9b27f4fa3492dec18d7d6b756cd5053b954d1142de84942468d8b794e2f3432dc8c88e16c19a3c7

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -47,7 +47,7 @@ export const CustomCell = ({
       <Flex 
           alignItems="center" 
           columnGap="xs"
-          justify={!hasAnySubRows ? "end" : "start"}
+          justify={!hasAnySubRows && !inlineRowLoading ? "end" : "start"}
           orientation="row"
       >
         {

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -39,7 +39,7 @@ export const TableHeaderCell = ({
   sortIcon,
   table
 }: TableHeaderCellProps) => {
-  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar } =
+  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar, inlineRowLoading } =
     useContext(AdvancedTableContext);
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
@@ -91,7 +91,7 @@ const isToggleExpansionEnabled =
 
   let justifyHeader:justifyTypes;
 
-  if (header?.index === 0 && hasAnySubRows) {
+  if (header?.index === 0 && hasAnySubRows || (header?.index === 0 && inlineRowLoading)) {
     justifyHeader = enableSorting ? "between" : "start";
   } else {
     justifyHeader = isLeafColumn ? "end" : "center";

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

@@ -1,10 +1,15 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }.merge(object.table_props)) 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: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions }) %>
-          <% end %>
-        <% end %>
+  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive: "none", dark: dark }.merge(object.table_props)) 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,
+                                                            responsive: object.responsive }) %>
+      <%= pb_rails("advanced_table/table_body", props: { id: object.id,
+                                                         table_data: object.table_data,
+                                                         column_definitions: object.column_definitions,
+                                                         responsive: object.responsive }) %>
+    <% end %>
+  <% end %>
 <% end %>

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

@@ -12,7 +12,7 @@ module Playbook
                                      default: "header"
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
-                        default: "none"
+                        default: "scroll"
       prop :table_props, type: Playbook::Props::HashProp,
                          default: {}
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb

@@ -0,0 +1,38 @@
+
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+] %>
+
+<%= pb_rails("title", props: { size: 4 })  do %> Not Responsive <% end %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table_non_responsive", table_data: @table_data, column_definitions: column_definitions, responsive: "none" }) %>
+
+<%= pb_rails("title", props: { padding_top: "sm", size: 4 })  do %> Responsive as Default <% end %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table_responsive", table_data: @table_data, column_definitions: column_definitions }) %>

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

@@ -5,6 +5,7 @@ examples:
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
   - advanced_table_beta_sort: Enable Sorting
+  - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)

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

@@ -16,6 +16,9 @@ module Playbook
                             default: []
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "scroll"
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -46,12 +49,12 @@ module Playbook
           row_parent: "#{id}_#{ancestor_ids.last}",
         }
         # Subrow header if applicable
-        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
         current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes })
+        output << pb_rails("advanced_table/table_row", props: { id: 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 })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -74,7 +77,16 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_advanced_table_body", separator: " ")
+        additional_classes = []
+        additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
+
+        generate_classname("pb_advanced_table_body", *additional_classes, separator: " ")
+      end
+
+      def pinned_cell_class(index)
+        return "pinned-left" if index.zero? && responsive == "scroll"
+
+        ""
       end
 
     private

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

@@ -3,17 +3,17 @@
     <%= pb_rails("table/table_row") do %>
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
-        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname, ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
-                <%= pb_rails("flex", props:{ align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
-                    <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
-                        <button
-                            class="gray-icon toggle-all-icon"
-                            onclick="expandAllRows(this); event.preventDefault();">
-                            <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
-                        </button>
-                    <% end %>
-                    <%= cell[:label] %>
-                <% end %>
+        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
+          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
+            <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
+              <button
+                class="gray-icon toggle-all-icon"
+                onclick="expandAllRows(this); event.preventDefault();">
+                <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+              </button>
+            <% end %>
+            <%= cell[:label] %>
+          <% end %>
         <% end %>
       <% end %>
     <% end %>

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

@@ -8,13 +8,22 @@ module Playbook
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "scroll"
 
       def classname
-        generate_classname("pb_advanced_table_header", "pb_table_thead", separator: " ")
+        additional_classes = []
+        additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
+
+        generate_classname("pb_advanced_table_header", "pb_table_thead", *additional_classes, separator: " ")
       end
 
-      def th_classname
-        generate_classname("table-header-cells", separator: " ")
+      def th_classname(is_first_column: false)
+        additional_classes = []
+        additional_classes << "pinned-left" if is_first_column && responsive == "scroll"
+
+        generate_classname("table-header-cells", *additional_classes, separator: " ")
       end
 
       def header_rows

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

@@ -1,7 +1,7 @@
 <%= pb_content_tag(:tr) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
             <% next unless column[:accessor].present? %>
-            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column)}) do %>
+            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>

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

@@ -13,6 +13,11 @@ module Playbook
                                default: true
       prop :table_data_attributes, type: Playbook::Props::HashProp,
                                    default: {}
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "scroll"
+      prop :is_pinned_left, type: Playbook::Props::Boolean,
+                            default: false
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -22,9 +27,10 @@ module Playbook
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
       end
 
-      def td_classname(column)
+      def td_classname(column, index)
         classes = %w[id-cell chrome-styles]
         classes << "last-cell" if column[:is_last_in_group]
+        classes << "pinned-left" if index.zero? && is_pinned_left && responsive == "scroll"
         classes.join(" ")
       end
 

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

@@ -1,6 +1,6 @@
 <%= pb_content_tag(:tr) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
-            <%= pb_rails("table/table_cell", props: { classname: "id-cell chrome-styles"}) do %>
+            <%= pb_rails("table/table_cell", props: { classname: object.td_classname(index) }) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>

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

@@ -16,6 +16,9 @@ module Playbook
                                default: true
       prop :subrow_data_attributes, type: Playbook::Props::HashProp,
                                     default: {}
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[none scroll],
+                        default: "scroll"
 
       def data
         Hash(prop(:data)).merge(subrow_data_attributes)
@@ -25,6 +28,12 @@ module Playbook
         generate_classname("pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname, separator: " ")
       end
 
+      def td_classname(index)
+        classes = %w[id-cell chrome-styles]
+        classes << "pinned-left" if index.zero? && responsive == "scroll"
+        classes.join(" ")
+      end
+
     private
 
       def subrow_depth_classname

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

@@ -1,5 +1,24 @@
-<%= pb_content_tag(object.tag) do %>
-    <%= content.presence %>
+<% if object.draggable_item %>
+    <%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id}) do %>
+        <%= pb_content_tag(object.tag) do %>
+            <% if object.draggable_item %>
+                <%= pb_rails("flex", props: { align: "center" }) do %>
+                    <% if object.drag_handle %>
+                        <span classname="card_draggable_handle">
+                            <%= pb_rails("icon", props: { icon: "grip-dots-vertical", padding_right: "xs" }) %>
+                        </span>
+                    <% end %>
+                    <div style="width: 100%">
+                        <%= content.presence %>
+                    </div>
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% else %>
+    <%= pb_content_tag(object.tag) do %>
+        <%= content.presence %>
+    <% end %>
 <% end %>
 
 

data/app/pb_kits/playbook/pb_card/card.rb

@@ -17,6 +17,13 @@ module Playbook
       prop :background, type: Playbook::Props::Enum,
                         values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
                         default: "none"
+      prop :drag_id, type: Playbook::Props::String
+      prop :draggable_item, type: Playbook::Props::Boolean,
+                            default: false
+      prop :drag_handle, type: Playbook::Props::Boolean,
+                         default: true
+      prop :items, type: Playbook::Props::Array,
+                   default: []
 
       def classname
         generate_classname("pb_card_kit",

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb

@@ -7,8 +7,7 @@
 <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
   <%= pb_rails("draggable/draggable_container") do %>
     <% initial_items.each do |item| %>
-      <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %>
+        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs", drag_id: item[:id], draggable_item: true }) do %>
           <%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %>
             <%= pb_rails("flex", props:{gap: "xs"}) do %>
               <%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %>
@@ -32,7 +31,6 @@
             <% end %>
           <% end %>
         <% end %>
-      <% end %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md

@@ -0,0 +1,7 @@
+For a simplified version of the Draggable API for the Card kit, you can do the following:
+
+Use the `draggable` kit and manage state as shown.
+
+`draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
+
+The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.

data/app/pb_kits/playbook/pb_lightbox/lightbox.scss

@@ -2,7 +2,6 @@
 @import "../tokens/screen_sizes";
 
 $slides-margin: $space-md;
-$lightbox-z-index-floor: 9999900;
 
  .carousel {
 
@@ -14,7 +13,7 @@ $lightbox-z-index-floor: 9999900;
     top: 0;
     left: 0;
     right: 0;
-    z-index: $lightbox-z-index-floor + 99;
+    z-index: 9999999;
     align-items: center;
     transition: all .5s;
 
@@ -56,7 +55,7 @@ $lightbox-z-index-floor: 9999900;
   justify-content: space-between;
   flex-direction: column;
   background-color: black;
-  z-index: $lightbox-z-index-floor + 1;
+  z-index: 1;
   overflow: hidden;
 }
 
@@ -64,7 +63,7 @@ $lightbox-z-index-floor: 9999900;
   display: flex;
   height: calc(100% - 120px);
   width: 100%;
-  z-index: $lightbox-z-index-floor + 1;
+  z-index: 1;
 
   [class^="react-transform-wrapper"] {
     flex-shrink: 0;
@@ -88,7 +87,7 @@ $lightbox-z-index-floor: 9999900;
   .carousel-arrow-left {
     display: block;
     position: absolute;
-    z-index: $lightbox-z-index-floor + 4;
+    z-index: 4;
     top: 50%;
     @media only screen and (max-width: $screen-xs-max) {
       display: none;
@@ -98,7 +97,7 @@ $lightbox-z-index-floor: 9999900;
   .carousel-arrow-right {
     display: block;
     position: absolute;
-    z-index: $lightbox-z-index-floor + 4;
+    z-index: 4;
     top: 50%;
     right: 0;
     @media only screen and (max-width: $screen-xs-max) {
@@ -141,7 +140,7 @@ $lightbox-z-index-floor: 9999900;
   width: 100vw;
   padding: 3px;
   overflow: scroll;
-  z-index: $lightbox-z-index-floor + 20;
+  z-index: 20;
   &.centered {
     justify-content: center;
   }

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx

@@ -8,27 +8,31 @@ const TableWithCollapsibleWithCustomContent = (props) => {
       <Card 
           borderNone
           borderRadius="none"
-          color="light" 
+          color="light"
           paddingX="xl"
           paddingY="md"
           {...props}
       >
-         <Body paddingBottom="sm" 
+         <Body paddingBottom="sm"
              text="Expanded Custom Layout"
              {...props}
          />
          <Flex justify="between">
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
            <Image
-               url="https://via.placeholder.com/150"
+               size="sm"
+               url="https://unsplash.it/500/400/?image=634"
            />
           </Flex>
       </Card>
@@ -52,7 +56,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
 
       </Table.Head>
       <Table.Body>
-        <Table.Row collapsible 
+        <Table.Row collapsible
             collapsibleContent={<Content/>}
             {...props}
         >
@@ -61,7 +65,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
           <Table.Cell>{'Value 3'}</Table.Cell>
           <Table.Cell>{'Value 4'}</Table.Cell>
           <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell textAlign="right">{ 
+          <Table.Cell textAlign="right">{
             <Icon
                 color="primary"
                 fixedWidth

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb

@@ -0,0 +1,52 @@
+<% content = capture do %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
+        <%= pb_rails("body", props: { text: "Expanded Custom Layout", padding_bottom: "sm" }) %>
+        <%= pb_rails("flex", props: { justify: "between" }) do %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, id: "2" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb

@@ -0,0 +1,52 @@
+<% content = capture do %>
+    <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
+        <%= pb_rails("background", props: { tag: "tr" }) do %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "3" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md

@@ -0,0 +1,3 @@
+The `collapsible_content` can display any content, including nested Table Rows.
+
+Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.