playbook_ui_docs 14.20.0.pre.alpha.PLAY2178advancedtablerowpinning7978 → 14.20.0.pre.alpha.PLAY2214checkboxhiddeninput8052

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e1460a4c220e0f8c10e8e6e44ebd87a67dab3807879747f43526159d2873fcc5
-  data.tar.gz: 996dcd6ce2289dfb29e3ac0b0e98b60c27702f275e81f577b77ad51a5dd1f1ab
+  metadata.gz: 1f3218c35e8634460f531a5ec901105a2f2a4b71da0f90bca466def14ed29b72
+  data.tar.gz: 7af0cd726230f611174116707be74dca42f8209dbdbd57dd7b0c1692de227162
 SHA512:
-  metadata.gz: b10c714897e8e82852274333a489ba6263f587f0222c26d6f823a572231a8f941f1acafa3525095f2d867ce9d0281a476e785d444e2e8b0122cf0747ff342170
-  data.tar.gz: 0f21b458af8251d7cb33007f3935e2ca1e13b05330b88e6721125b1829d3297f99191b1224d36f16b997100c76a7fcd2ef7d6f42f4a293a325a68521cdcdc1ce
+  metadata.gz: 3add2e5c13da822a9d2c8e7c83b6a449f7b861567ea3e6fc14337d8fe8163df65f9684d9464aebcf4319f4dd9b03875382fb3ee66101d207b483497e9febdd21
+  data.tar.gz: 95a659f716b7a3ad8fc9ab67d813e1242e389947f37537edb6e4bbf03370a494c5e87cf5798664e8d8e4380a6cc0a356fa87c4962a8745bbc532f14b1f428e7f

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

@@ -1,3 +1,4 @@
 <%= pb_rails("checkbox", props: {text: "Custom Checkbox"}) do%>
+    <input type="hidden" name="custom-name" value="0" />
     <input type="checkbox" name="custom-name" value="custom-value"/>
 <% end %>

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

@@ -0,0 +1 @@
+When using a custom checkbox wrapped in the Checkbox kit, hidden inputs are not automatically included and cannot be prop enabled. Manually add a hidden input before the checkbox if necessary to submit a value when the checkbox is unchecked (as is standard in Rails forms).

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

@@ -0,0 +1,22 @@
+
+<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
+  <%=pb_rails("flex", props: { gap: "sm", orientation: "column"}) do %>
+    <%= pb_rails("checkbox" , props: {
+      text: "1. pb_rails(\"checkbox\") Checkbox from kit",
+      value: "checkbox-value",
+      name: "checkbox-name",
+      hidden_input: true
+      }) %>
+    <%= form.check_box :example_checkbox,
+      data: { field1: "value1", field2: "value2" },
+      props: { text: "2. form.check_box Checkbox from Form Builder" },
+      unchecked_value: "no",
+      id: "checkbox-id",
+      name: "checkbox-name",
+      class: "checkbox-class"
+    %>
+    <%= form.actions do |action| %>
+      <%= action.button props: { type: "submit", text: "Submit", variant: "primary" } %>
+    <% end %>   
+  <% end %>
+<% end %>

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

@@ -0,0 +1,5 @@
+The way to access hidden inputs for form submission depends on which version of the kit being used within the form context.
+
+If using the Rails Checkbox version of the kit, set `hidden_input: true`. Inspect Checkbox #1 in the example above to see the hidden input in the DOM. 
+
+If using the Form Builder version of the kit (reference the [Form kit page](https://playbook.powerapp.cloud/kits/form) for more on these), the hidden input will appear if the input has a set `unchecked_value`. Inspect Checkbox #2 in the example above (and the two checkbox examples on the Form kit page) to see the hidden input in the DOM. See the [Rails check_box FormHelper docs](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-check_box) for more.

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_checkbox/docs/_checkbox_options.html.erb

@@ -1,5 +1,6 @@
 <%= pb_rails("checkbox" , props: {
   text: "Checkbox with Options",
+  hidden_input: true,
   input_options: {
     id: "checkbox-id",
     name: "checkbox-name",

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

@@ -7,6 +7,7 @@ examples:
     - checkbox_options: Checkbox w/ Options
     - checkbox_indeterminate: Indeterminate Checkbox
     - checkbox_disabled: Disabled Checkbox
+    - checkbox_form: Form and Hidden Input
 
   react:
   - checkbox_default: Default

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_form/docs/_form_form_with_validate.html.erb

@@ -101,7 +101,7 @@
   <%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
   <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
-  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
+  <%= form.check_box :example_checkbox_validation, props: { text: "Example Checkbox Validation", label: true, required: true }, checked_value: "1", unchecked_value: "0" %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>

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 %>