playbook_ui 13.28.0.pre.alpha.PLAY1209fixformgroupdatepickerborderradiusreact2953 → 13.28.0.pre.alpha.PLAY1343fixTooltiprunwayissue2986

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bf1ef5aa4f13d490c2feff561c4b8c1af473211075188cfe1e49fa4615f03d25
-  data.tar.gz: 16aaf7c3503105d1cb8bdb65ab004d17152e7b23e84dc41ab53749544657316c
+  metadata.gz: 19e565c2d797080aa62e49298c4b5c6d5580c9f31390f391954a206912027f21
+  data.tar.gz: decab155499cd1ad89ff26576d562648b0b51fe054c3782fd6b0a1ea952fbdc0
 SHA512:
-  metadata.gz: be40f2d6569f259456c1ef342e1b42afd680f62b9575d4e19d20e44624354abc48f238f4925ac8b4f21780362efdd4612840fc4a238f010802d094b1a53abbe4
-  data.tar.gz: 72d60c35ef30ddb6f3872c0ec52d7eeff032b1ea9fbd0bce34f76b93a7800af56e0a2a14f5470b8ecd69c9bb3fe443946a06e7f306361a53ee72c7b4f52be9dd
+  metadata.gz: 24788a8ee04e95b468bb3fa8aca56ee3c84b2f047e13b3ada1ad1f1d3ca8d69b0db1c593c08227c0a05f206b39d4ee6c821403c5ec6c6f0e23c9ae838ccce9dc
+  data.tar.gz: 69aa8d314bef2890e6c9d55af1c53ca899645d8286b082d1578ae4f932bbb266960e6bb4b679ecc0111b7a54888a688aaacb77d947d5a5868388ef17bdaba8af

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

@@ -3,8 +3,8 @@
           <% 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}) %>
+            <%= 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 %>
 <% end %>

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

@@ -0,0 +1,40 @@
+<% 
+  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",
+    }
+  ]
+
+  subrow_headers = ["Quarter", "Month", "Day"]
+%>
+
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md

@@ -0,0 +1,3 @@
+`subrow_headers` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
+
+`enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md

@@ -1,3 +1,3 @@
 `subRowHeaders` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
 
-`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all', 'header" or "none". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'header' by default.
+`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.

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

@@ -1,6 +1,7 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
+  - advanced_table_beta_subrow_headers: SubRow Headers
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
@@ -12,4 +13,3 @@ examples:
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: inline Row Loading
-

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

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
         <% object.table_data.each do |row| %>
-          <%= render_row_and_children(row, object.column_definitions) %>
+          <%= render_row_and_children(row, object.column_definitions, 0, false) %>
         <% end %>
 <% end %>

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

@@ -3,20 +3,30 @@
 module Playbook
   module PbAdvancedTable
     class TableBody < Playbook::KitBase
+      prop :id, type: Playbook::Props::String,
+                default: ""
       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"
+      prop :subrow_headers, type: Playbook::Props::Array,
+                            default: []
 
-      def render_row_and_children(row, column_definitions, current_depth = 0)
+      def render_row_and_children(row, column_definitions, current_depth, first_parent_child)
         output = ActiveSupport::SafeBuffer.new
+        is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
 
-        output << pb_rails("advanced_table/table_row", props: { row: row, column_definitions: column_definitions, depth: current_depth })
+        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1] }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth })
 
         if row[:children].present?
-          output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id }) do
+          output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id.to_s + id }) do
             row[:children].map do |child_row|
-              render_row_and_children(child_row, column_definitions, current_depth + 1)
+              render_row_and_children(child_row, column_definitions, current_depth + 1, row.children.first == child_row)
             end.join.html_safe
           end
         end

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

@@ -4,7 +4,7 @@
                 <%= 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">
+                            <button class="gray-icon toggle-all-icon" onclick="expandAllRows(this)">
                                 <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right:"xs" }) %>
                             </button>
                         <% end %>
@@ -13,4 +13,12 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>
+
+<script type="text/javascript">
+    var expandAllRows = (element) => {
+        element.closest('.pb_table').querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]').forEach((button) => {
+            button.dispatchEvent(new Event('click'));
+        });
+    };
+</script>

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

@@ -5,7 +5,7 @@
                     <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 id="<%= object.row.object_id %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
+                                <button id="<%= object.row.object_id.to_s + object.id %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %> 
                                     <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
                                 </button>

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

@@ -3,6 +3,8 @@
 module Playbook
   module PbAdvancedTable
     class TableRow < Playbook::KitBase
+      prop :id, type: Playbook::Props::String,
+                default: ""
       prop :column_definitions, type: Playbook::Props::Array,
                                 default: []
       prop :row

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

@@ -0,0 +1,34 @@
+<%= 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: "start" }) 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 toggle-all-icon" onclick="expandAllSubRows(this, <%= depth %>)">
+                                    <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right:"xs" }) %>
+                                </button>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <% if index.zero? %>
+                                    <%= pb_rails("caption", props: { margin_left: object.row[:children].present? ? "none" : "xs", text: object.subrow_header }) %>
+                                <% end %>
+                            <% end %>
+                        <% end %>
+                    </div>
+                <% end %>
+            <% end %>
+        <% end %>
+<% end %>
+
+<script type="text/javascript">
+    var expandAllSubRows = (element, rowDepth) => {
+        element.closest(".toggle-content").querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]').forEach((button) => {
+            button.dispatchEvent(new Event('click'));
+        });
+    };
+</script>

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbAdvancedTable
+    class TableSubrowHeader < Playbook::KitBase
+      prop :column_definitions, type: Playbook::Props::Array,
+                                default: []
+      prop :depth
+      prop :row
+      prop :enable_toggle_expansion, type: Playbook::Props::Enum,
+                                     values: %w[all header none],
+                                     default: "header"
+      prop :subrow_header, type: Playbook::Props::String,
+                           default: ""
+
+      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
+
+    private
+
+      def subrow_depth_classname
+        depth.positive? ? "depth-sub-row-#{depth}" : ""
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -20,7 +20,6 @@ $transition: $transition_cubic;
     border: solid $border_light 2px;
     border-radius: $border_rad_light;
     height: 22px;
-    position: relative;
     transition: background $transition_default ease, box-shadow $transition_default ease;
     width: 22px;
     .check_icon,
@@ -28,8 +27,8 @@ $transition: $transition_cubic;
       color: $white;
       height: 16px;
       left: 1px;
-      position: relative;
       display: flex;
+      margin: auto;
       opacity: 0;
       width: 16px;
       &.hidden {

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -13,6 +13,15 @@
   ]
 %>
 
+<% 
+  example_dropdown_options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
@@ -23,6 +32,7 @@
   <%= form.password_field :example_password_field, props: { label: true } %>
   <%= form.url_field :example_url_field, props: { label: true } %>
   <%= form.text_area :example_text_area, props: { label: true } %>
+  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox,

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -107,7 +107,7 @@
   }
 
   & > [class^=pb_date_picker_kit]:not(:last-child) {
-    .input_wrapper input, [class^=pb_text_input_kit] .date_picker_input_wrapper .flatpickr-wrapper {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
@@ -115,7 +115,7 @@
   }
 
   & > [class^=pb_date_picker_kit]:not(:first-child) {
-    .input_wrapper input, [class^=pb_text_input_kit] .date_picker_input_wrapper .flatpickr-wrapper {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }

data/app/pb_kits/playbook/pb_pill/docs/_description.md

@@ -1 +1 @@
-A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color here: https://playbook.powerapp.cloud/utilities
+A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -127,7 +127,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
             }
           }}
           role="tooltip_trigger"
-          style={{ display: "inline-block" }}
+          style={{ display: "inline-flex" }}
           {...ariaProps}
           {...dataProps}
           {...htmlProps}

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -58,6 +58,7 @@ export default class PbTooltip extends PbEnhancedElement {
 
     this.popper = createPopper(trigger, this.tooltip, {
       placement: this.position,
+      strategy: 'fixed',
       modifiers: [
         {
           name: 'offset',