playbook_ui 14.19.0.pre.alpha.PLAY2033atactionbarrails7730 → 14.19.0.pre.alpha.PLAY2033atactionbarrails7751

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 654590a50901aacde66d35bd4be201e411e132b400b2914cc5e037d3429caded
-  data.tar.gz: 8d0e41a47e517cf306c76815921ff9aa1f994491a7596b3f259fedd4e0d6e865
+  metadata.gz: 17e10404283155ad2d2767e2acdf52c0bfae50af100e565e31adf7f403b3ac9a
+  data.tar.gz: fb8e75bd6a39e92574e9755db531c9bc09fa1c79d3a33537458535c57613b329
 SHA512:
-  metadata.gz: e2016cd384a81cd7d9f3d4f93e474f4bb5843d3f199b9e1989dfefd41eaa2cd943aee4823e70fde27d2c503f2e4c90e7a3503f176b5d7d5e07f0fa194d866454
-  data.tar.gz: 7be919bf509875aeb4beb91b4f25f6b163c2b2c5a20a7a510df6204216592e33c6d512991c2c73eec9a5c462b40bd29417c335c497269b13b582db3938445a52
+  metadata.gz: e1779f126d2b890116939dcb70297381a7a470f1c2fdc6e5efbc628d196ac4316c25d7ea1da587fe6b70f12ddb5d075b026622f812bf96e98079a49356d3d6be
+  data.tar.gz: bb1ef7cb05876677bc259b0efb1801415d2c0d288550142e1e59af0a81a1b12bc5e49e2b0646e891a4b2224221780a37b288a8fbc34a90d2117648b893320dec

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

@@ -1,21 +1,18 @@
 <%= pb_content_tag do %>
-  <% table_id = object.id || "table-#{SecureRandom.hex(8)}" %>
-  <div id="<%= table_id %>" class="<%= object.classname %>">
-    <% if object.selectable_rows && object.show_actions_bar %>
-      <%= pb_rails("advanced_table/table_action_bar", props: { 
-        actions: object.actions,
-        is_visible: false,
-        selected_count: 0
-      }) %>
+  <% if object.selectable_rows && object.show_actions_bar %>
+    <%= pb_rails("advanced_table/table_action_bar", props: {
+      actions: object.actions,
+      is_visible: false,
+      selected_count: 0
+    }) %>
+  <% end %>
+
+  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.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, loading: object.loading, selectable_rows: object.selectable_rows }) %>
+      <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
     <% end %>
-    
-    <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.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, loading: object.loading, selectable_rows: object.selectable_rows }) %>
-        <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
-      <% end %>
-    <% end %>
-  </div>
+  <% end %>
 <% end %>

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

@@ -26,7 +26,7 @@ module Playbook
       prop :selectable_rows, type: Playbook::Props::Boolean,
                              default: false
       prop :show_actions_bar, type: Playbook::Props::Boolean,
-                              default: false
+                              default: true
       prop :actions, type: Playbook::Props::Array,
                      default: []
 

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

@@ -1,6 +1,4 @@
-<%
-# Define column definitions
-column_definitions = [
+<% column_definitions = [
   {
     accessor: "year",
     label: "Year",
@@ -32,15 +30,22 @@ column_definitions = [
   }
 ]
 
-# Define actions for the selection bar
 actions = [
   pb_rails("circle_icon_button", props: {
     icon: "file-csv",
-    variant: "link"
+    variant: "link",
+    id: "export-selected-rows-btn",
+    data: {
+      action_type: "export"
+    }
   }),
   pb_rails("circle_icon_button", props: {
     icon: "trash-alt",
-    variant: "link"
+    variant: "link",
+    id: "delete-selected-rows-btn",
+    data: {
+      action_type: "delete"
+    }
   })
 ]
 %>
@@ -54,3 +59,80 @@ actions = [
   actions: actions,
   show_actions_bar: true
 }) %>
+
+<script>
+  // Handle action clicks using the data-selected-rows attribute
+  window.handleActionClick = function(actionType) {
+    const tableContainer = document.getElementById('selectable_rows_with_actions');
+    if (!tableContainer) return;
+
+    // Get selected rows from the data attribute
+    const selectedRowsJSON = tableContainer.getAttribute('data-selected-rows');
+    let selectedRowIds = [];
+
+    try {
+      // Parse the JSON string from the data attribute
+      if (selectedRowsJSON) {
+        selectedRowIds = JSON.parse(selectedRowsJSON);
+      }
+    } catch (e) {
+      // Fallback if JSON parsing fails
+      const checkboxes = tableContainer.querySelectorAll('input[type="checkbox"]:checked');
+      const selectedCheckboxes = Array.from(checkboxes).filter(checkbox =>
+        checkbox.id !== 'select-all-rows' &&
+        !checkbox.closest('#select-all-rows')
+      );
+      selectedRowIds = selectedCheckboxes.map(checkbox => checkbox.id);
+    }
+
+    // Show appropriate message
+    if (!selectedRowIds || selectedRowIds.length === 0) {
+      alert('No Selection Made');
+    } else {
+      if (actionType === 'export') {
+        alert(`Row ids ${selectedRowIds.join(', ')} will be exported!`);
+      } else if (actionType === 'delete') {
+        alert(`Row ids ${selectedRowIds.join(', ')} will be deleted!`);
+      }
+    }
+  };
+
+  // Add event listeners when the DOM is ready
+  document.addEventListener('DOMContentLoaded', function() {
+    // Get the buttons
+    const exportBtn = document.getElementById('export-selected-rows-btn');
+    const deleteBtn = document.getElementById('delete-selected-rows-btn');
+
+    // Add click event listeners
+    if (exportBtn) {
+      exportBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        window.handleActionClick('export');
+      });
+    }
+
+    if (deleteBtn) {
+      deleteBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        window.handleActionClick('delete');
+      });
+    }
+
+    // Optional: Event delegation through the action bar
+    const actionBar = document.querySelector('.row-selection-actions-card');
+    if (actionBar) {
+      actionBar.addEventListener('click', function(e) {
+        const exportButton = e.target.closest('#export-selected-rows-btn');
+        const deleteButton = e.target.closest('#delete-selected-rows-btn');
+
+        if (exportButton) {
+          e.preventDefault();
+          window.handleActionClick('export');
+        } else if (deleteButton) {
+          e.preventDefault();
+          window.handleActionClick('delete');
+        }
+      });
+    }
+  });
+</script>

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

@@ -0,0 +1,3 @@
+Custom actions content can be rendered within the Actions Bar as shown in this doc example. The component passed to `actions` will be rendered on the right of the actionsBar.
+
+You can utilize script tags with your actions to provide your buttons with any clickable events needed.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.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",
+  }
+] %>
+
+<%= pb_rails("advanced_table", props: {
+  id: "selectable_rows_with_actions",
+  table_data: @table_data_no_subrows,
+  column_definitions: column_definitions,
+  selectable_rows: true,
+  enable_toggle_expansion: "none",
+  show_actions_bar: false
+}) %>

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

@@ -0,0 +1 @@
+`show_actions_bar` is an optional prop that renders the header at the top showing the row count. This is set to `true` by default but can be toggled off by setting it to `false`

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

@@ -16,6 +16,7 @@ examples:
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
+  - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
 
   react:
   - advanced_table_default: Default (Required Props)

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

@@ -95,6 +95,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     actionBar.style.height = height;
     actionBar.classList.add("is-visible");
     actionBar.classList.add("show-action-card");
+    actionBar.classList.replace("p_none", "p_xs");
+    // This is for keeping the border around the card when showing the action bar
+    actionBar.classList.replace("pb_card_kit_deselected_border_none", "pb_card_kit_deselected");
     actionBar.style.overflow = "hidden";
 
     // Complete animation after delay
@@ -124,10 +127,15 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     window.setTimeout(() => {
       actionBar.classList.remove("is-visible");
       actionBar.classList.remove("show-action-card");
+      actionBar.classList.replace("p_xs", "p_none");
+      // This is for removing the border when hiding the action bar
+      actionBar.classList.replace( "pb_card_kit_deselected", "pb_card_kit_deselected_border_none");
     }, 300);
   }
 
-  // Check if row is expanded
+  // Check if the row is expanded or collapsed
+  // This is used to determine the background color of the row
+  // when the checkbox is checked or unchecked
   isRowExpanded(rowEl) {
     const closeIcon = rowEl.querySelector(UP_ARROW_SELECTOR);
     return closeIcon?.style.display === "none" || !closeIcon;
@@ -355,7 +363,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       });
 
       // Remove visibility classes
-      actionBar.classList.remove("is-visible", "show-action-card");
+      actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
+      actionBar.classList.add("p_none");
 
       // Add CSS rules
       const styleId = `action-bar-styles-${tableId}`;
@@ -388,7 +397,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
             actionBar.style.height = 'auto';
             actionBar.style.overflow = 'visible';
             actionBar.style.opacity = '1';
-            actionBar.classList.add("is-visible", "show-action-card");
+            actionBar.classList.remove("p_none");
+            actionBar.classList.add("p_xs", "is-visible", "show-action-card");
 
             // Update the count
             const countElement = actionBar.querySelector(".selected-count");
@@ -400,7 +410,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
             actionBar.style.height = '0px';
             actionBar.style.overflow = 'hidden';
             actionBar.style.opacity = '0';
-            actionBar.classList.remove("is-visible", "show-action-card");
+            actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
+            actionBar.classList.add("p_none");
           }
         });
       });
@@ -696,21 +707,31 @@ document.addEventListener('DOMContentLoaded', () => {
       });
 
       // Remove any visibility classes
-      actionBar.classList.remove("is-visible", "show-action-card");
+      actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
+      actionBar.classList.add("p_none");
 
-      // Direct DOM manipulation for checkboxes
+      // Direct DOM manipulation for checkboxes - exclude select-all checkbox
       const checkboxes = table.querySelectorAll('input[type="checkbox"]');
       checkboxes.forEach(checkbox => {
         checkbox.addEventListener('change', function() {
-          // Count selected checkboxes
-          const selectedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
+          // Get all checked checkboxes
+          const allCheckedCheckboxes = Array.from(checkboxes).filter(cb => cb.checked);
+
+          // Filter out the select-all checkbox
+          const selectedRowCheckboxes = allCheckedCheckboxes.filter(cb => {
+            return cb.id !== 'select-all-rows' && !cb.closest('#select-all-rows');
+          });
+
+          // Get the selected count (excluding select-all)
+          const selectedCount = selectedRowCheckboxes.length;
 
           if (selectedCount > 0) {
             // Show action bar directly
             actionBar.style.height = 'auto';
             actionBar.style.overflow = 'visible';
             actionBar.style.opacity = '1';
-            actionBar.classList.add("is-visible", "show-action-card");
+            actionBar.classList.remove("p_none");
+            actionBar.classList.add("p_xs", "is-visible", "show-action-card");
 
             // Update the count
             const countElement = actionBar.querySelector(".selected-count");
@@ -722,7 +743,8 @@ document.addEventListener('DOMContentLoaded', () => {
             actionBar.style.height = '0px';
             actionBar.style.overflow = 'hidden';
             actionBar.style.opacity = '0';
-            actionBar.classList.remove("is-visible", "show-action-card");
+            actionBar.classList.add("p_none");
+            actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
           }
         });
       });

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx

@@ -6,6 +6,7 @@ import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
 import Avatar from '../../pb_avatar/_avatar'
 import User from '../../pb_user/_user'
+import Body from '../../pb_body/_body'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();
@@ -50,10 +51,20 @@ const DropdownWithCustomDisplay = (props) => {
       <>
       {
         selectedOption && (
+          <Flex align="center">
             <Avatar
                 name={selectedOption.label}
                 size="xs"
             />
+            <Body 
+                marginX="xs"
+                text={selectedOption.label} 
+            />
+            <Badge 
+                text={selectedOption.status} 
+                variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
+            />
+          </Flex>
         )
       }
     </>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md

@@ -1,4 +1,4 @@
-Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `customDisplay` will display as the selected option.
 
 The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`. 
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -38,7 +38,11 @@
 
 <%
   custom_display = capture do
-    pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
+    pb_rails("flex", props: { align: "center" }) do
+      concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
+      concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
+      concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
+    end
   end
 %>
 
@@ -62,4 +66,31 @@
             <% end %>
         <% end %>
     <% end %>
-<% end %>
+<% end %>
+
+
+<script>
+  document.addEventListener("pb:dropdown:selected", (e) => {
+    const option   = e.detail;
+    const dropdown = e.target;
+
+    const display = dropdown.querySelector("#dropdown_trigger_custom_display");
+    if (!display) return;
+
+    const nameEl = display.querySelector("#dropdown-avatar-name");
+    if (nameEl) nameEl.textContent = option.label;
+
+    const avatarEl = display.querySelector("#dropdown-avatar").querySelector(".avatar_wrapper");
+    const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
+    if (avatarEl) {
+      avatarEl.dataset.name = option.label;
+      avatarEl.setAttribute("data-initials", initials);
+    }
+    const badgeEl   = display.querySelector("#dropdown-avatar-status");
+    const variant = option.status === "Online"  ? "success" : option.status === "Offline" ? "neutral" : "warning";
+    if (badgeEl) {
+      badgeEl.querySelector("span").textContent = option.status;
+      badgeEl.className = 'pb_badge_kit_' + variant;
+    }
+  });
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md

@@ -1,4 +1,6 @@
-Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `custom_display` will display as the selected option.
+
+Make use of a script to help set the custom_display with the correct value. By using the pb:dropdown:selected event listener, you can target the kits with a querySelector and update them dynamically with the values needed to match the selected option. Make sure to add an ID to the kits being passed in.
 
 The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`. 
 

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

@@ -142,9 +142,22 @@ export default class PbDropdown extends PbEnhancedElement {
     const customDisplayElement = this.element.querySelector(
       "#dropdown_trigger_custom_display"
     );
+
     if (triggerElement) {
       const selectedLabel = JSON.parse(value).label;
-      triggerElement.textContent = selectedLabel;
+      if (customDisplayElement) {
+        triggerElement.textContent = ""
+        this.element.setAttribute("data-option-selected", value);
+        const selectedObj = JSON.parse(value);
+        this.element.dispatchEvent(
+          new CustomEvent("pb:dropdown:selected", {
+            detail: selectedObj,
+            bubbles: true,
+          })
+        );
+      } else {
+        triggerElement.textContent = selectedLabel
+      }
       if (customDisplayElement) {
         customDisplayElement.style.display = "block";
         customDisplayElement.style.paddingRight = "8px";

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
   );
 
   const customDisplayPlaceholder = selected?.label ? (
-    <b>{selected.label}</b>
+    ""
   ) : autocomplete ? (
     ""
   ) : placeholder ? (