playbook_ui 14.21.1 → 14.22.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a0737c92ce3c158f4a4d593ab763d9a708bf1ea647fdaea8476164b892b257b5
-  data.tar.gz: b7eadcb56f9e3082b04d22e91e8da3576141e9e84651a5081399dde83de8eac5
+  metadata.gz: 3237dbe64cf5d35651426b51605fc0a29d2774ace25902df2d835d3ba397cf45
+  data.tar.gz: 17dffcc35b1c8dc359a5f2e8496122e888f0981a8694642cf4b6f9b80db47095
 SHA512:
-  metadata.gz: 51d6ccdd8b41cf5109dfe7b357c3c839889980d69116018901ae974629aaa96178f9622698e0f331310137b8437b2e3ad82936e1df193829ba613af6aeefeec6
-  data.tar.gz: d03ea7ef7a82b1caa0f1eed79e107cfa287a9d4e47559c562f27958532ccde311c75158d7635f6163357937836185123cdcdaee68a093f9aad35d316d9dbeb5d
+  metadata.gz: 5a17f0e817d78b24d5ba66cc346f107818a57cc657134501c1062adaee813936d1a22f86dbd6ba7fc57aeb72a6bd41a3d44b11a42e4df5e3aa996c4a557e594b
+  data.tar.gz: fd82408a056f7a0fdcfeff8c9d909f07eee2a76ad9a0ecb4de81ac333eee51a5d29262f7a331737390b29c497c85dcb303b96119eeeda81e6c406910d77b66a7

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -39,7 +39,7 @@
       }
 
       -ms-overflow-style: none !important;
-      scrollbar-width: thin !important;
+      scrollbar-width: thin;
       scrollbar-color: #00000033 transparent !important;
   }
 
@@ -410,7 +410,6 @@
 
   // Make sure all horizontal borders use the default border color
   tr, th, td {
-    border-top-color: $border_light !important;
     border-bottom-color: $border_light !important;
   }
 
@@ -633,7 +632,6 @@
 
     // Make sure all horizontal borders use the default border color in dark mode
     tr, th, td {
-      border-top-color: $border_dark !important;
       border-bottom-color: $border_dark !important;
     }
 

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -18,13 +18,30 @@ module Playbook
                       default: false
       prop :form_spacing, type: Playbook::Props::Boolean,
                           default: false
+      prop :hidden_input, type: Playbook::Props::Boolean,
+                          default: false
+      prop :hidden_value
 
       def classname
         generate_classname("pb_checkbox_kit", checked_class) + error_class
       end
 
       def input
-        check_box_tag(name, value, checked, input_options.merge(disabled: disabled))
+        inputs = []
+        effective_name = name || input_options[:name]
+        effective_value = value || input_options[:value] || "1"
+        is_checked = checked || input_options[:checked]
+
+        inputs << hidden_field_tag(effective_name, hidden_value || "0") if hidden_input && effective_name.present?
+
+        inputs << check_box_tag(
+          effective_name,
+          effective_value,
+          is_checked,
+          input_options.merge(disabled: disabled)
+        )
+
+        safe_join(inputs)
       end
 
       def checkbox_label_status

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_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.