playbook_ui 13.21.0.pre.alpha.PBNTR225advancedtablefeedback2438 → 13.21.0.pre.alpha.PLAY12582474

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f7cfb7021f51c07eb77a7166393965f50d634939c88a3d7b2a72890fc8f76aea
-  data.tar.gz: 4e0fd0437700056b9fcd95076dd5f700e89b616cf83f97ef9f96ae50c205352f
+  metadata.gz: 1cac7b0753d888ee1b718932bbbb638ebad8f37d7e3b30dfb683dd0a575cbcad
+  data.tar.gz: d9e47ec1c043e9358f3618c0510484ebfce1d346743377228ca016336072dd3f
 SHA512:
-  metadata.gz: '09e5b5458d55ae87b2f8ccd44d3f8dc9a95391b8e8ae5493fa5f05408acfe0bd5f2db7c84343fa450bbc05299a597fc8bf6ca48d9976eeac0b1720d353b0cba7'
-  data.tar.gz: e360ce6a4f2074667af1b2e8a9067fd28e8e7a6f30136d04a69c7f7e3f1dcda3835d4cf4663be4e816dd89909698b4c9b0ac8991ff779b3666e845239dd5afa8
+  metadata.gz: f07bcb349a1e387b6497cbc75fdc31fb39ee33c259515670723642d7484d8da526f20f6484c5beda1086e7d8aa36ecc0b25f0e1b6aa3e021095571949a839e07
+  data.tar.gz: b6c92cff8163105411b1d21bb9b065b725f775af4fea9f760ba945a04437e0f00da16b80cf346a37f5e681da3884f97c30cfa373621ab7409c277704daf2016a

data/app/pb_kits/playbook/pb_advanced_table/README.md

@@ -81,7 +81,7 @@ const MOCK_DATA = [
             graduatedStudents: "43",
             children: [
               {
-                year: "2011",
+                year: "2021",
                 quarter: "Q1",
                 month: "February",
                 day: "15",
@@ -173,7 +173,7 @@ const MOCK_DATA = [
             graduatedStudents: "43",
             children: [
               {
-                year: "2011",
+                year: "2022",
                 quarter: "Q1",
                 month: "May",
                 day: "2",

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx

@@ -16,42 +16,27 @@ export const updateExpandAndCollapseState = (
   expanded: Record<string, boolean>,
   targetParent: string
 ) => {
-  const updateExpandedRows: Record<string, boolean> = {}
-  const rows = tableRows.flatRows
-  // Variable checks if all rows in a section have same expansion state or not
-  let isExpansionConsistent = true
-  const areRowsExpanded = new Set<boolean>()
+  const updateExpandedRows: Record<string, boolean> = {};
+  const rows = tableRows.rows;
+
+  let isExpansionConsistent = true;
+  const areRowsExpanded = new Set<boolean>();
 
-  // Update isExpansionConsistent variable
   for (const row of rows) {
-    if (
-      targetParent === undefined
-        ? row.depth === 0
-        : targetParent === row.parentId
-    ) {
-      areRowsExpanded.add(row.getIsExpanded())
-      if (areRowsExpanded.size > 1) {
-        isExpansionConsistent = false
-        break
-      }
-    }
-  }
+    const shouldBeUpdated = targetParent === undefined ? row.depth === 0 : targetParent === row.parentId;
+    
+    if (shouldBeUpdated) {
+      const isExpanded = row.getIsExpanded();
+      areRowsExpanded.add(isExpanded);
 
-  // The if statement runs only for row depth 0, the else statement for the rest
-  if (targetParent === undefined) {
-    rows.forEach(row => {
-      if (row.depth === 0) {
-        updateExpandedRows[row.id] = !isExpansionConsistent
-          ? true
-          : !row.getIsExpanded()
-      }
-    })
-  } else {
-    for (const row of rows) {
-      if (targetParent === row.parentId) {
-        updateExpandedRows[row.id] = !isExpansionConsistent
-          ? true
-          : !row.getIsExpanded()
+      updateExpandedRows[row.id] = !isExpansionConsistent ? true : !isExpanded;
+
+      if (areRowsExpanded.size > 1) {
+        isExpansionConsistent = false;
+        // If expansion inconsistent, ensure all target rows are set to expand
+        for (const key in updateExpandedRows) {
+          updateExpandedRows[key] = true;
+        }
       }
     }
   }
@@ -59,5 +44,5 @@ export const updateExpandAndCollapseState = (
   return filterExpandableRows({
     ...(expanded as ExpandedStateObject),
     ...updateExpandedRows,
-  })
-}
+  });
+};

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -83,12 +83,17 @@
 
   // Vertical separator
   .table-header-cells:first-child,
-  td:first-child {
-    box-shadow: 1px 0px 0px 0px #e4e8f0 !important;
+  td:first-child,
+  .pb_table_td:first-child {
+    box-shadow: 1px 0px 0px 0px $border_light !important;
   }
 
   @include chrome_styles($border-color);
 
+  tr:hover {
+    position: relative;
+  }
+
   &.dark {
     .bg-white {
       background: $bg_dark_card;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -195,14 +195,13 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }
   }, [loading, updateLoadingStateRowCount])
 
-  const handleExpandOrCollapse = (row: Row<GenericObject>) => {
+  const handleExpandOrCollapse = async (row: Row<GenericObject>) => {
     onToggleExpansionClick && onToggleExpansionClick(row)
-
-    const expandedState = expanded
-    const targetParent = row?.parentId
-    return setExpanded(
-      updateExpandAndCollapseState(tableRows, expandedState, targetParent)
-    )
+  
+    const expandedState = expanded;
+    const targetParent = row?.parentId;
+    const updatedRows = await updateExpandAndCollapseState(tableRows, expandedState, targetParent)
+    setExpanded(updatedRows)
   }
 
   const ariaProps = buildAriaProps(aria)

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

@@ -0,0 +1,14 @@
+<%= 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/advanced_table.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbAdvancedTable
+    class AdvancedTable < Playbook::KitBase
+      prop :table_data, type: Playbook::Props::Array,
+                        default: []
+      prop :column_definitions, type: Playbook::Props::Array,
+                                default: []
+      prop :enable_toggle_expansion, type: Playbook::Props::Enum,
+                                     values: %w[all header none],
+                                     default: "header"
+
+      def classname
+        generate_classname("pb_advanced_table")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1,5 +1,5 @@
 import React, {useState} from "react"
-import { render, screen } from "../utilities/test-utils"
+import { render, screen, waitFor } from "../utilities/test-utils"
 
 import { AdvancedTable } from "../"
 
@@ -198,7 +198,7 @@ test("Row toggle button exists and toggles subrows open and closed", () => {
   expect(subRow).toBeInTheDocument()
 })
 
-test("toggleExpansionAll button exists and toggles subrows open and closed", () => {
+test("toggleExpansionAll button exists and toggles subrows open and closed", async () => {
   render(
     <AdvancedTable
         columnDefinitions={columnDefinitions}
@@ -207,16 +207,22 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", ()
     />
   )
 
-  const kit = screen.getByTestId(testId)
-  const toggleButton = kit.querySelector(".gray-icon.toggle-all-icon")
-  expect(toggleButton).toBeInTheDocument()
-  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
-  expect(subRow1).not.toBeInTheDocument()
-  toggleButton.click()
-  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
-  expect(subRow).toBeInTheDocument()
+  const kit = screen.getByTestId(testId);
+  const toggleButton = kit.querySelector(".gray-icon.toggle-all-icon");
+  expect(toggleButton).toBeInTheDocument();
+
+  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1");
+  expect(subRow1).not.toBeInTheDocument();
+
+  toggleButton.click();
+
+  await waitFor(() => {
+    const subRow = kit.querySelector(".bg-white.depth-sub-row-1");
+    expect(subRow).toBeInTheDocument();
+  })
 })
 
+
 test("loading state + initialLoadingRowCount prop", () => {
   render(
     <AdvancedTable

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

@@ -1,4 +1,6 @@
 examples:
+  # rails:
+  #   - advanced_table_default: Default (Required Props)
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State

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

@@ -0,0 +1,9 @@
+<%= 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_body.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbAdvancedTable
+    class TableBody < Playbook::KitBase
+      prop :table_data, type: Playbook::Props::Array,
+                        default: []
+      prop :column_definitions, type: Playbook::Props::Array,
+                                default: []
+
+      def render_row_and_children(row, column_definitions, current_depth = 0)
+        output = ActiveSupport::SafeBuffer.new
+
+        output << pb_rails("advanced_table/table_row", props: { row: row, column_definitions: column_definitions, depth: current_depth })
+
+        if row[:children].present?
+          row[:children].each do |child_row|
+            output << render_row_and_children(child_row, column_definitions, current_depth + 1)
+          end
+        end
+
+        output
+      end
+
+      def classname
+        generate_classname("pb_advanced_table_body", "pb_table_tbody", separator: " ")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<%= 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 %>
+                    <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align:"end" }) do %>
+                        <% if index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") %>
+                            <button class="gray-icon toggle-all-icon">
+                                <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right:"xs" }) %>
+                            </button>
+                        <% end %>
+                        <%= item[:label] %>
+                    <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+<% end %>

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbAdvancedTable
+    class TableHeader < Playbook::KitBase
+      prop :column_definitions, type: Playbook::Props::Array,
+                                default: []
+      prop :enable_toggle_expansion, type: Playbook::Props::Enum,
+                                     values: %w[all header none],
+                                     default: "header"
+
+      def classname
+        generate_classname("pb_advanced_table_header", "pb_table_thead", separator: " ")
+      end
+
+      def th_classname
+        generate_classname("table-header-cells", separator: " ")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,37 @@
+<%= 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 %>
+                    <div style="padding-left: <%= depth * 1.25 %>em">
+                        <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
+                            <% if index.zero? && object.row[:children].present? %>
+                                <button class="gray-icon expand-toggle-icon">
+                                    <%= pb_rails("icon", props: { icon: "circle-play", cursor: "pointer" }) %>
+                                </button>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
+                                <% if index.zero? %>
+                                    <% if object.depth.zero? %>
+                                        <%= object.row[column[:accessor].to_sym] %>
+                                    <% else %>
+                                        <% object.depth_accessors.each_with_index do |item, accessor_index| %>
+                                            <% if object.depth - 1 == accessor_index %>
+                                                <% key = item.to_sym %>
+                                                <%= object.row[key] %>
+                                            <% end %>
+                                        <% end %>
+                                    <% end %>
+                                <% else %>
+                                    <%= object.row[column[:accessor].to_sym] %>
+                                <% end %>
+                            <% end %>
+                        <% end %>
+                    </div>
+                <% end %>
+            <% end %>
+        <% end %>
+<% end %>

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

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbAdvancedTable
+    class TableRow < Playbook::KitBase
+      prop :column_definitions, type: Playbook::Props::Array,
+                                default: []
+      prop :row
+      prop :depth
+
+      def classname
+        generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
+      end
+
+      def td_classname
+        generate_classname("id-cell", "chrome-styles", separator: " ")
+      end
+
+      def depth_accessors
+        column_definitions.flat_map do |column|
+          column[:cellAccessors] if column.key?(:cellAccessors)
+        end.compact
+      end
+
+    private
+
+      def subrow_depth_classname
+        depth.positive? ? "depth-sub-row-#{depth}" : ""
+      end
+    end
+  end
+end

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

@@ -2,7 +2,8 @@
     id: object.id,
     data: object.data.merge(initials: object.initials),
     class: object.classname,
-    aria: object.aria) do %>
+    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

@@ -2,7 +2,8 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    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

@@ -7,7 +7,8 @@
       style: "background-image: url('#{object.image_url}');
               background-repeat: #{object.background_repeat};
               background-size: #{object.background_size};
-              background-position: #{object.background_position};"
+              background-position: #{object.background_position};",
+      **combined_html_options
   ) do %>
     <%= content.presence %>
   <% end %>

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

@@ -2,6 +2,7 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <span><%= object.text %></span>
 <% end %>

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

@@ -2,6 +2,7 @@
   aria: object.aria,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
   <%= object.content %>
 <% end %>

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss

@@ -1,4 +1,3 @@
-@import "../tokens/border_radius";
 @import "../tokens/colors";
 @import "../tokens/opacity";
 @import "../tokens/spacing";
@@ -10,11 +9,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: $border_rad_light;
   padding: 0 $space_xs/2;
-  border-width: 1px;
-  border-style: solid;
-  border-color: $card_light;
 
   svg {
    margin-right: 8px;
@@ -44,8 +39,6 @@
   }
 
   &.dark {
-    border-width: 0;
-
     @each $color_name, $color_value in $status_colors {
       &[class*=_#{$color_name}]  {
         background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);

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

@@ -2,7 +2,8 @@
     id: object.id,
     data: object.data,
     class: object.classname,
-    aria: object.aria) do%>
+    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

@@ -2,6 +2,7 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
       <%= content.presence %>
 <% end %>

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

@@ -1,5 +1,6 @@
 <%= content_tag(object.tag,
-    object.tag == "button" ? object.options : object.link_options) do %>
+                object.tag == "button" ? object.options : object.link_options,
+                **combined_html_options) do %>
     <% if object.variant === "reaction" %>
         <% if icon && object.valid_emoji(object.icon) %>
             <%= pb_rails("flex", props:{ align: "center" }) do %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -34,10 +34,8 @@ module Playbook
                               default: "far"
 
       def options
-        {
-          aria: aria,
+        options = {
           class: classname,
-          data: data,
           disabled: disabled,
           id: id,
           role: "button",
@@ -46,6 +44,7 @@ module Playbook
           value: value,
           form: form,
         }.compact
+        combined_html_options.merge!(options) if combined_html_options.present?
       end
 
       def target_attribute

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

@@ -2,6 +2,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
       <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_caption/caption.html.erb

@@ -2,6 +2,7 @@
   aria: object.aria,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
   <%= content.presence || object.text %>
 <% end %>

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

@@ -3,7 +3,8 @@
     data: object.data,
     class: object.classname,
     aria: object.aria,
-    dark: object.dark) do %>
+    dark: object.dark,
+    **combined_html_options) do %>
     <%= content.presence %>
 <% end %>
 

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

@@ -2,6 +2,7 @@
     id: object.id,
     data: object.data,
     class: object.classname,
-    aria: object.aria) do %>
+    aria: object.aria,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

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

@@ -2,6 +2,7 @@
     id: object.id,
     data: object.data,
     class: object.classname,
-    aria: object.aria) do %>
+    aria: object.aria,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,7 +1,9 @@
 <%= content_tag(:label, aria: object.aria,
                         id: object.id,
                         data: object.data,
-                        class: object.classname) do %>
+                        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

@@ -2,7 +2,8 @@
   aria: object.aria,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  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

@@ -2,6 +2,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

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

@@ -2,6 +2,7 @@
     id: object.id,
     data: object.data,
     class: object.classname,
-    aria: object.aria) do %>
+    aria: object.aria,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

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

@@ -2,7 +2,8 @@
     id: object.id,
     data: object.data,
     class: object.classname,
-    aria: object.aria) do %>
+    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

@@ -2,7 +2,8 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    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

@@ -2,7 +2,8 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    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}" %>>