playbook_ui_docs 14.20.0.pre.alpha.PLAY22297981 → 14.20.0.pre.alpha.PLAY22408048

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 76821ec674d30495cfd6a88a187c8dfaf3b389fd67544bbfe64bdd6217423506
-  data.tar.gz: 2596c60c522ba4f25ec249477fb8f0528a6db11f56ed5788044fafe6bb66d305
+  metadata.gz: 3423d32d235b8a14a9982ee1cc7eb1627d39b359344ca2ec4450c513721a9c9b
+  data.tar.gz: 11305b467c629b24e2292800f75712e99567e4839da5f4699487062f796b3768
 SHA512:
-  metadata.gz: 8a188e51fe531731f9d852f52f35516392de7034590be59519338c00d46496c1b0e9ae0b54c027aa114bd13a937a014e1a81b3dd6428e9e6e336cc99c3a2bafa
-  data.tar.gz: 6cd9d3268d174e033c3b428947b34649b4045c01a69a0ae2f0f93fea66aa8669167868a3eca6b8c8641b6169b8b8bc469ff16897ad522117cc183dba6cee9191
+  metadata.gz: 87245e0f2bff5dbe295c95448d7c7727fe42b6b11e31015bf02e1a272047fa5729a29f2ad5ac828fe30b6647c6a8ac83a7f844440491b15bc5f6b55df3529eeb
+  data.tar.gz: 1af9857ab64fd1338b67a5d51fa2c45c44fd63de213ee2b0f0b1e436651b089a6c6fb85ba3d931db032b00fa2f0a318e54a899e67ca98f7c8ddf3795bcea7fe1

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react"
+import AdvancedTable from '../_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
+
+const AdvancedTableRowPinning = (props) => {
+  const columnDefinitions = [
+    {
+      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",
+    },
+  ]
+
+  const [pinnedRows, setPinnedRows] = useState({top: ["8", "9", "10", "11", "12", "13", "14"]})
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          maxHeight="xs"
+          pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
+          tableData={MOCK_DATA}
+          tableProps={{sticky: true}}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableRowPinning

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

@@ -0,0 +1,5 @@
+Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and reorganizing via sorting.
+
+**NOTE:** This prop is in Beta. Current Requirements for V1:
+- Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
+- Row ids required: Pass an array of row ids to the `top` property. For expandable rows, both parent and all its child row ids must be included individually

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

@@ -52,4 +52,5 @@ examples:
   - advanced_table_column_visibility: Column Visibility Control
   - advanced_table_column_visibility_with_state: Column Visibility Control With State
   - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
-  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
+  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
+  - advanced_table_pinned_rows: Pinned Rows

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

@@ -31,4 +31,5 @@ export { default as AdvancedTableColumnBorderColor} from './_advanced_table_colu
 export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
 export { default as AdvancedTableColumnVisibilityCustom } from './_advanced_table_column_visibility_custom.jsx'
 export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table_column_visibility_multi.jsx'
-export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
+export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
+export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -9,11 +9,10 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
-          checked: true,
           text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
-          indeterminate: true,
+          indeterminate_main: true,
           id: "indeterminate-checkbox"
         }) %>
       </th>
@@ -30,55 +29,10 @@
             value: checkbox[:id],
             name: "#{checkbox[:id]}-indeterminate-checkbox",
             id: "#{checkbox[:id]}-indeterminate-checkbox",
+            indeterminate_parent: "indeterminate-checkbox",
           }) %>
         </td>
       </tr>
     <% end %>
   </tbody>
 <% end %>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
-    const mainCheckbox = document.getElementsByName("main-checkbox")[0];
-    const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
-
-    const updateMainCheckbox = () => {
-      // Count the number of checked child checkboxes
-      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
-      // Determine if the main checkbox should be in an indeterminate state
-      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
-      
-      // Set the main checkbox states
-      mainCheckbox.indeterminate = indeterminate;
-      mainCheckbox.checked = checkedCount > 0;
-
-      // Determine the main checkbox label based on the number of checked checkboxes
-      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
-
-      // Determine the icon class to add and remove based on the number of checked checkboxes
-      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
-      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
-
-      // Update main checkbox label
-      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
-      
-      // Add and remove the icon class to the main checkbox wrapper
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
-      
-      // Toggle the visibility of the checkbox icon based on the indeterminate state
-      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
-      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
-    };
-
-    mainCheckbox.addEventListener('change', function() {
-      childCheckboxes.forEach(cb => cb.checked = this.checked);
-      updateMainCheckbox();
-    });
-
-    childCheckboxes.forEach(cb => {
-      cb.addEventListener('change', updateMainCheckbox);
-    });
-  });
-</script>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md

@@ -0,0 +1 @@
+If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.

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

@@ -0,0 +1,42 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownCloseOnSelect = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];
+
+
+  return (
+  <div>
+    <Dropdown
+        closeOnSelection={false}
+        label="Default"
+        options={options}
+        {...props}
+    />
+    <br />
+    <Dropdown
+        closeOnSelection={false}
+        label="Multi Select"
+        multiSelect
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownCloseOnSelect

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

@@ -0,0 +1 @@
+By default, the dropdown menu will close when a selection is made. You can prevent this behavior by using the `closeOnSelection` prop, which will leave the menu open after a selection is made when set to 'false'.

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

@@ -44,4 +44,6 @@ examples:
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
+  - dropdown_close_on_select: Close On Selection
+
 

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

@@ -19,4 +19,5 @@ export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
 export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
 export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
 export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
-export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
+export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
+export { default as DropdownCloseOnSelect } from './_dropdown_close_on_select.jsx'

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

@@ -18,7 +18,7 @@
                     checked: true,
                     value: "checkbox-value",
                     name: "main-checkbox-selectable",
-                    indeterminate: true,
+                    indeterminate_main: true,
                     id: "checkbox-selectable"
                 }) %>
             <% end %>
@@ -33,7 +33,7 @@
         <% checkboxes.each_with_index do |checkbox, index| %>
             <%= pb_rails("table/table_row") do %>
                 <%= pb_rails("table/table_cell") do %>
-                    <%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value" }) %>
+                    <%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value", indeterminate_parent: "checkbox-selectable" }) %>
                 <% end %>
                 <%= pb_rails("table/table_cell") do %>
                     <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
@@ -45,52 +45,4 @@
             <% end %>
         <% end %>
     <% end %>
-<% end %>
-
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-        const mainCheckboxWrapper = document.getElementById('checkbox-selectable');
-        const mainCheckbox = document.getElementsByName("main-checkbox-selectable")[0];
-        const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="selectable-checkbox"]');
-        const deleteButton = document.getElementById('delete-button');
-
-        const updateDeleteButton = () => {
-            const anyChecked = Array.from(childCheckboxes).some(checkbox => checkbox.checked);
-            deleteButton.style.display = anyChecked ? 'block' : 'none';
-        };
-    
-        const updateMainCheckbox = () => {
-          // Count the number of checked child checkboxes
-          const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
-          // Determine if the main checkbox should be in an indeterminate state
-          const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
-          
-          // Set the main checkbox states
-          mainCheckbox.indeterminate = indeterminate;
-          mainCheckbox.checked = checkedCount > 0;
-    
-          // Determine the icon class to add and remove based on the number of checked checkboxes
-          const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
-          const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
-          
-          // Add and remove the icon class to the main checkbox wrapper
-          mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
-          mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
-          
-          // Toggle the visibility of the checkbox icon based on the indeterminate state
-          mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
-          mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
-
-          updateDeleteButton();
-        };
-    
-        mainCheckbox.addEventListener('change', function() {
-          childCheckboxes.forEach(cb => cb.checked = this.checked);
-          updateMainCheckbox();
-        });
-    
-        childCheckboxes.forEach(cb => {
-          cb.addEventListener('change', updateMainCheckbox);
-        });
-    });
-</script>
+<% end %>