playbook_ui_docs 14.20.0.pre.alpha.PLAY22297981 → 14.20.0.pre.alpha.play2168firstcolumnborderbug7988

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 76821ec674d30495cfd6a88a187c8dfaf3b389fd67544bbfe64bdd6217423506
-  data.tar.gz: 2596c60c522ba4f25ec249477fb8f0528a6db11f56ed5788044fafe6bb66d305
+  metadata.gz: 9881bd0d2b90496f7d0cd85fafa10059f1b8dfcccb05da6d0d3b696c2e291859
+  data.tar.gz: 2ed9e32df1d19220a3b4976a5adc50818284d5c4fa28cad324d43c5a9f65abab
 SHA512:
-  metadata.gz: 8a188e51fe531731f9d852f52f35516392de7034590be59519338c00d46496c1b0e9ae0b54c027aa114bd13a937a014e1a81b3dd6428e9e6e336cc99c3a2bafa
-  data.tar.gz: 6cd9d3268d174e033c3b428947b34649b4045c01a69a0ae2f0f93fea66aa8669167868a3eca6b8c8641b6169b8b8bc469ff16897ad522117cc183dba6cee9191
+  metadata.gz: bceafc0e9d7b98e21090e0ad93b0dee6aa3af4fdea70d583d21f6719320ab1e7d58c2f5e247b66a31646b6272830f23509d25795b8ada3eb5c783d07c079b225
+  data.tar.gz: efee90f6ad279c094c725ee55d2c3b0ed0895445cdea10c65cd64d4307295e9e13a826d61bca3c5db1f9d0dadfb0626c683a4230d3b2bfbaade5d5d542989b5d

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

@@ -39,9 +39,13 @@ const AdvancedTableDefault = (props) => {
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
+          maxHeight="xs"
+          overflow="auto"
+          responsive="scroll"
+          scrollBarNone
           tableData={MOCK_DATA}
           {...props}
-      />
+          />
     </div>
   )
 }

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

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions responsive }) %>

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.