playbook_ui 13.21.0.pre.alpha.PBNTR225advancedtablefeedback2438 → 13.21.0.pre.alpha.PLAY120322465

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f7cfb7021f51c07eb77a7166393965f50d634939c88a3d7b2a72890fc8f76aea
-  data.tar.gz: 4e0fd0437700056b9fcd95076dd5f700e89b616cf83f97ef9f96ae50c205352f
+  metadata.gz: 117440357a4a8da3b129606a534928188bd41545fd804f1afcf2417447d31f5a
+  data.tar.gz: 004f12658cd004016f41ea6d4a1cc37c2674925a9cb2a499162dfb50318ee8f1
 SHA512:
-  metadata.gz: '09e5b5458d55ae87b2f8ccd44d3f8dc9a95391b8e8ae5493fa5f05408acfe0bd5f2db7c84343fa450bbc05299a597fc8bf6ca48d9976eeac0b1720d353b0cba7'
-  data.tar.gz: e360ce6a4f2074667af1b2e8a9067fd28e8e7a6f30136d04a69c7f7e3f1dcda3835d4cf4663be4e816dd89909698b4c9b0ac8991ff779b3666e845239dd5afa8
+  metadata.gz: c6075298f25053220515fed141fb0a1f4593fc19222b3a9e2d701d4d59e0d1320f9822749b447289ffd74b1d9fa4ea849f380252497009e959b5308d4bfcc8bc
+  data.tar.gz: 795e0618d31b6e7675f8948725c29429aadce68bddb25a6970b1d53e3af99245750f31c09c031dcc13ba3a45a5b9ae852a740718cab3dc882a10f3dc70ef6bd3

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/_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.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/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}" %>>

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

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

@@ -2,7 +2,8 @@
     id: object.id,
     data: object.data,
     class: object.classname,
-    aria: object.aria) do %>
+    aria: object.aria,
+    **combined_html_options) do %>
 
   <% if object.unstyled %>
     <!-- icon -->

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -10,7 +10,6 @@
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {
-    margin-bottom: $space_sm;
     position: relative;
 
     .flatpickr-wrapper {
@@ -76,4 +75,4 @@
   &:after {
     content: none;
   }
-}
+}

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -135,6 +135,9 @@ useEffect(() => {
   }, scrollContainer)
 })
   const filteredProps = {...props}
+  if (filteredProps.marginBottom === undefined) {
+    filteredProps.marginBottom = "sm"
+  } 
   delete filteredProps?.position
 
   const classes = classnames(

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname + object.error_class,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>
@@ -16,6 +17,7 @@
         error: object.error,
         id: object.picker_id,
         label: object.hide_label ? nil : object.label,
+        margin_bottom: "none",
         name: object.name,
         placeholder: object.placeholder,
         required: object.required,
@@ -80,4 +82,4 @@
       }
     })
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -75,7 +75,8 @@ module Playbook
                         default: [1900, 2100]
 
       def classname
-        generate_classname("pb_date_picker_kit")
+        default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
+        generate_classname("pb_date_picker_kit") + default_margin_bottom
       end
 
       def date_picker_config

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -37,7 +37,7 @@ describe('DatePicker Kit', () => {
     )
 
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_date_picker_kit')
+    expect(kit).toHaveClass('pb_date_picker_kit mb_sm')
   })
 
   test('shows DatePicker date format m/d/Y', async () => {

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -1,4 +1,5 @@
 import flatpickr from 'flatpickr'
+import { Instance } from "flatpickr/dist/types/instance"
 import { BaseOptions } from 'flatpickr/dist/types/options'
 import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
@@ -165,9 +166,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 
   // two way binding
-  const initialDropdown = document.querySelector<HTMLElement & { [x: string]: any }>(`#year-${pickerId}`)
-  const yearChangeHook = () => {
-    initialDropdown.value = initialPicker.currentYear
+  const yearChangeHook = (fp: Instance) => {
+      const yearInput = document.querySelector(`#year-${fp.input.id}`) as HTMLInputElement
+      yearInput.value = fp.currentYear?.toString()
   }
 
   // ===========================================================
@@ -199,11 +200,12 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
       onClose(selectedDates, dateStr)
     }],
-    onChange: [(selectedDates, dateStr) => {
+    onChange: [(selectedDates, dateStr, fp) => {
+      yearChangeHook(fp)
       onChange(dateStr, selectedDates)
     }],
-    onYearChange: [() => {
-      yearChangeHook()
+    onYearChange: [(_selectedDates, _dateStr, fp) => {
+      yearChangeHook(fp)
     }],
     plugins: setPlugins(thisRangesEndToday, customQuickPickDates),
     position,
@@ -248,7 +250,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
         /* Reset date picker to default value on form.reset() */
         if (defaultDate){
           picker.setDate(defaultDate)
-          yearChangeHook()
+          yearChangeHook(picker)
         }
       }, 0)
     })