playbook_ui_docs 14.21.1 → 14.21.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2b23c654b3afbbaabd2b378685ce9fd0d8597f51a5f93d338e759d347a811f5a
-  data.tar.gz: cb4ee9bfdc717177802741592f6a9c8c3925d0fda7b90eda0a9de71e0c11f2f0
+  metadata.gz: 9405f31a27844f27804b22e9f155bedd90ad625774877f925a3c02b461930d6e
+  data.tar.gz: 1de767071ea6b45fedd73e4e73d9bd701fc2ee6c29332cd20a6bdc1514ea5a7c
 SHA512:
-  metadata.gz: c54936d98e127ae630ed40d4cd85390b54ddef12fcff327da914c98e90f5c19ae1137c478bf5f4b57e6b0f4feead83b9b8a394c63b2baca83c8194c3851d689d
-  data.tar.gz: f3fb7cff9115d70644d8d72f6d4fd75716231d58009a7bd6faaae3d3c4c92fa846e2e7b1a8fc005449b5c3ef5b352cf6c25c7d7ec611140ad12e25f42b595747
+  metadata.gz: 91d5c6d8364aa43ac0bc697ae7ee82d99f03d564b21c4318a17bf96b7b56ecb6a18cec06dcbdb94a420a7208995d8e94f43cade2ddcb84e6ac7c90a8bf52a0d2
+  data.tar.gz: 91f13104947d7ef99ddfe3794de30919b2f95c8e8b73a10fbfa7f126e656e6daa90ef7aab24219ad031b42ea0f292e524d849784719a2d973a1517307aefb117

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_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/example.yml

@@ -44,6 +44,4 @@ 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,5 +19,4 @@ 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 DropdownCloseOnSelect } from './_dropdown_close_on_select.jsx'
+export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.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_section_separator/docs/_description.md

@@ -1 +1,3 @@
-Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds. This should only be used on light backgrounds (with our variable `$bg_light`).
+Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
+
+To ensure that the section separator is properly rendered, please be sure to use our global  `width` prop to set width to 100%. [See here](https://playbook.powerapp.cloud/visual_guidelines/width) for more information on the global width prop.