playbook_ui 18.2.0.pre.rc.1 → 18.2.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5db309b02e5dd780da0f53f519c006634be2dd50e13553ce229ddd8be84a5527
-  data.tar.gz: dd7da084d43bf1060792d5dcc88dcc5fe2eaabe30d143f262083c80bef7f0a90
+  metadata.gz: fbc2a1ba01cca1bd4a5b48488fafecee3697e273fd940d942a9de5de93a76921
+  data.tar.gz: e8cf1cc4ec63bd1957d455ed4766db51865e0f42b9369ae59065f89bb7d78946
 SHA512:
-  metadata.gz: fcc52f997e3940eae2b3c00d36620ab00d2f44fddbce652671a6a3f6223877ce3cce1310d994e405dffad6fa92629727c8b1651a777cf379dd198a810ba1c93d
-  data.tar.gz: 18cd7637fe9d879a22a4df5505afda151de2e0a8f6bb02dc742016efe4bf4692bc2d08b50c88f078be99b0ea95c95e543dea5061489c4ffe9eada2799900a509
+  metadata.gz: f5af4f9cf873c44ba0c76176e17130f0cf77fbd9c526ccea6041a70b0e1da2951a16da702259a01d16df03628a30402bcc1fdc47f32675af28aaf16f1fdb8ffb
+  data.tar.gz: 598126c77b37bd8885bfeb8fa1ebcc30d5f30adab8dcd92b46ea71ce8b038314dda4e774d3fea789ba3e7462ff5ea83276bd10229ce43efaa767e33fe5c430c4

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

@@ -491,12 +491,10 @@
     }
   }
 
-  // First column separator/border
+  // First data column separator/border (Year when no separate checkbox column)
   .table-header-cells:first-child,
-  .table-header-cells-custom:first-child,
-  td:first-child,
-  .pb_table_td:first-child,
-  .checkbox-cell.checkbox-cell-header:first-child {
+  td:first-child:not(.checkbox-cell),
+  .pb_table_td:first-child:not(.checkbox-cell) {
     box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
@@ -504,6 +502,14 @@
     box-shadow: inset 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
+  // Separate checkbox column (Rails + React): separator on the first data column
+  .table-header-cells-custom + th[colspan="1"],
+  .table-header-cells-custom + .table-header-cells[colspan="1"],
+  td.checkbox-cell + td,
+  td.checkbox-cell + .pb_table_td {
+    box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
+  }
+
   // Color for collapsible trail
   .collapsible-trail {
     background-color: $border_light !important;
@@ -715,6 +721,12 @@
         box-shadow: 0 0 0 0 !important;
       }
 
+      // Re-apply after the nth-child(2) clear above (checkbox column layouts)
+      td.checkbox-cell + td,
+      td.checkbox-cell + .pb_table_td {
+        box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
+      }
+
       .pb_advanced_table_header,
       .pb_advanced_table_body {
         th.sticky-left,
@@ -816,10 +828,15 @@
     }
 
     .table-header-cells:first-child,
-    .table-header-cells-custom:first-child,
-    td:first-child,
-    .pb_table_td:first-child,
-    .checkbox-cell.checkbox-cell-header:first-child {
+    td:first-child:not(.checkbox-cell),
+    .pb_table_td:first-child:not(.checkbox-cell) {
+      box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
+    }
+
+    .table-header-cells-custom + th[colspan="1"],
+    .table-header-cells-custom + .table-header-cells[colspan="1"],
+    td.checkbox-cell + td,
+    td.checkbox-cell + .pb_table_td {
       box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
     }
 

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -1,14 +1,19 @@
 <%= pb_content_tag(:thead) do %>
   <% object.header_rows.each_with_index do |header_row, row_index| %>
+    <% is_lowest_header_row = row_index == header_rows.size - 1 %>
     <%= pb_rails("table/table_row") do %>
-      <% if row_index == 0 && object.selectable_rows && object.enable_toggle_expansion == "none" %>
-        <%= object.render_select_all_header %>
+      <% if object.selectable_rows && object.enable_toggle_expansion == "none" %>
+        <% if is_lowest_header_row %>
+          <%= object.render_select_all_header %>
+        <% else %>
+          <%= object.render_select_all_header_spacer %>
+        <% end %>
       <% end %>
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_component = object.header_component_info(cell, cell_index, row_index) %>
         <%= pb_rails(header_component[:name], props: header_component[:props]) do %>
           <%= pb_rails("flex", props: { align: "center", justify: object.header_flex_justify(cell, cell_index, row_index), text_align: object.header_flex_text_align(cell) }) do %>
-            <% if cell_index.zero? && row_index === header_rows.size - 1 %>
+            <% if cell_index.zero? && is_lowest_header_row %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
                 <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
                   <%= object.render_select_all_checkbox %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -58,13 +58,8 @@ module Playbook
       # Selectable Rows No Subrows - checkboxes in their own first cell
       def render_select_all_header
         if selectable_rows
-          additional_classes = []
-          additional_classes << "table-header-cells-custom"
-          additional_classes << "header-cells-with-actions" if show_actions_bar
-          additional_classes << "checkbox-cell-header"
-          additional_classes << "pinned-left" if responsive == "scroll"
           pb_rails("table/table_header", props: {
-                     classname: additional_classes.join(" "),
+                     classname: select_all_header_classname,
                    }) do
             pb_rails("checkbox", props: {
                        id: "#{table_id ? "#{table_id}-" : ''}select-all-rows",
@@ -76,6 +71,15 @@ module Playbook
         end
       end
 
+      # Empty checkbox-column cell for upper multi-header rows so columns stay aligned
+      def render_select_all_header_spacer
+        if selectable_rows
+          pb_rails("table/table_header", props: {
+                     classname: select_all_header_classname,
+                   })
+        end
+      end
+
       # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
       def render_select_all_checkbox
         if selectable_rows
@@ -212,6 +216,15 @@ module Playbook
 
     private
 
+      def select_all_header_classname
+        additional_classes = []
+        additional_classes << "table-header-cells-custom"
+        additional_classes << "header-cells-with-actions" if show_actions_bar
+        additional_classes << "checkbox-cell-header"
+        additional_classes << "pinned-left" if responsive == "scroll"
+        additional_classes.join(" ")
+      end
+
       def header_layout_styles(cell)
         original_def = find_original_column_def_for_cell(cell)
         return {} unless original_def

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -189,7 +189,7 @@ module Playbook
 
           pb_rails("checkbox", props: {
                      id: "#{prefix}select-row-#{row_id || row.object_id}",
-                     indeterminate_main: !last_row,
+                     indeterminate_main: row_children.present?,
                      indeterminate_main_labels: ["", ""],
                      indeterminate_parent: indeterminate_parent,
                      name: "#{prefix}select-row-#{row_id || row.object_id}",

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -16,6 +16,10 @@
       display: block;
     }
 
+    .date_picker_input_container {
+      position: relative;
+    }
+    
     @import "./sass_partials/calendar_input_icon";
   }
 

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -297,19 +297,57 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
         )}
           <>
             <div className="date_picker_input_wrapper">
-              <input
-                  aria-describedby={errorId}
-                  aria-invalid={!!error}
-                  autoComplete="off"
-                  className="date_picker_input"
-                  disabled={disableInput}
-                  id={pickerId}
-                  name={name}
-                  onChange={inputOnChange}
-                  placeholder={placeholder}
-                  style={{ cursor: getCursorStyle(filteredProps.cursor) }}
-                  value={inputValue}
-              />
+              <div className="date_picker_input_container">
+                <input
+                    aria-describedby={errorId}
+                    aria-invalid={!!error}
+                    autoComplete="off"
+                    className="date_picker_input"
+                    disabled={disableInput}
+                    id={pickerId}
+                    name={name}
+                    onChange={inputOnChange}
+                    placeholder={placeholder}
+                    style={{ cursor: getCursorStyle(filteredProps.cursor) }}
+                    value={inputValue}
+                />
+
+                {!hideIcon && !inLine &&
+                  <div
+                      className={iconWrapperClass()}
+                      id={`cal-icon-${pickerId}`}
+                  >
+                    <Icon
+                        className="cal_icon"
+                        icon="calendar-alt"
+                    />
+                  </div>
+                }
+
+                {inLine ?
+                  <div>
+                    <div
+                        className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
+                        id={`${pickerId}-icon-plus`}
+                    >
+                      <Icon
+                          className="date-picker-plus-icon"
+                          icon="plus"
+                      />
+                    </div>
+                    <div
+                        className={`${iconWrapperClass()} date-picker-inline-angle-down`}
+                        id={`${pickerId}-angle-down`}
+                    >
+                      <Icon
+                          className="angle_down_icon svg-inline--fa"
+                          customIcon={angleDown}
+                      />
+                    </div>
+                  </div>
+                  : null
+                }
+              </div>
 
               {error &&
                   <Body
@@ -322,42 +360,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
                   />
               }
             </div>
-
-            {!hideIcon && !inLine &&
-              <div
-                  className={iconWrapperClass()}
-                  id={`cal-icon-${pickerId}`}
-              >
-                <Icon
-                    className="cal_icon"
-                    icon="calendar-alt"
-                />
-              </div>
-            }
-
-            {inLine ?
-              <div>
-                <div
-                    className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
-                    id={`${pickerId}-icon-plus`}
-                >
-                  <Icon
-                      className="date-picker-plus-icon"
-                      icon="plus"
-                  />
-                </div>
-                <div
-                    className={`${iconWrapperClass()} date-picker-inline-angle-down`}
-                    id={`${pickerId}-angle-down`}
-                >
-                  <Icon
-                      className="angle_down_icon svg-inline--fa"
-                      customIcon={angleDown}
-                  />
-                </div>
-              </div>
-              : null
-            }
           </>
       </div>
     </div>

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -18,66 +18,66 @@
         <% end %>
       </label>
     <% end %>
-    <% if content.present? %>
-      <%= content %>
-    <% else %>
-    <%= pb_rails("text_input", props: {
-      aria: object.input_aria,
-      autocomplete: false,
-      cursor: object.cursor,
-      dark: object.dark,
-      data: object.input_data,
-      disabled: object.disable_input,
-      error: object.error,
-      id: object.picker_id,
-      margin_bottom: "none",
-      name: object.name,
-      placeholder: object.placeholder,
-      required: object.required,
-      validation: object.validation_message.present? ? { message: object.validation_message } : {},
-    }) %>
-    <% end %>
+    <div class="date_picker_input_container">
+      <% if content.present? %>
+        <%= content %>
+      <% else %>
+        <%= pb_rails("text_input", props: {
+          aria: object.input_aria,
+          autocomplete: false,
+          cursor: object.cursor,
+          dark: object.dark,
+          data: object.input_data,
+          disabled: object.disable_input,
+          error: object.error,
+          id: object.picker_id,
+          margin_bottom: "none",
+          name: object.name,
+          placeholder: object.placeholder,
+          required: object.required,
+          validation: object.validation_message.present? ? { message: object.validation_message } : {},
+        }) %>
+      <% end %>
+      <% if !object.hide_icon && !object.inline %>
+        <div
+          class="<%= object.icon_wrapper_class %>"
+          id="cal-icon-<%= object.picker_id %>"
+        >
+          <%= pb_rails("icon", props: {
+            classname: "cal_icon",
+            icon: "calendar-alt"
+          }) %>
+        </div>
+      <% end %>
+       <!-- Inline -->
+      <% if object.inline %>
+        <!-- Plus Icon -->
+        <div
+            class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
+            id="<%= object.picker_id %>-icon-plus"
+        >
+          <%= pb_rails("icon", props: {
+            classname: "plus-icon",
+            icon: "plus"
+          }) %>
+        </div>
+
+        <!-- Angle Down Icon -->
+        <div
+            class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
+            id="<%= object.picker_id %>-angle-down"
+        >
+          <%= pb_rails("icon", props: {
+            classname: "angle_down_icon",
+            custom_icon: Playbook::Engine::root.join(angle_down_path)
+          }) %>
+        </div>
+      <% end %>
+    </div>
     <% if object.selection_type == "quickpick" %>
       <input type="hidden" id="<%= "#{object.start_date_id}" %>" name="<%= "#{object.start_date_name}" %>">
       <input type="hidden" id="<%= "#{object.end_date_id}" %>" name="<%= "#{object.end_date_name}" %>">
     <% end %>
-
-    <% if !object.hide_icon && !object.inline %>
-      <div
-          class="<%= object.icon_wrapper_class %>"
-          id="cal-icon-<%= object.picker_id %>"
-      >
-        <%= pb_rails("icon", props: {
-          classname: "cal_icon",
-          icon: "calendar-alt"
-        }) %>
-      </div>
-    <% end %>
-
-    <!-- Inline -->
-    <% if object.inline %>
-      <!-- Plus Icon -->
-      <div
-          class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
-          id="<%= object.picker_id %>-icon-plus"
-      >
-        <%= pb_rails("icon", props: {
-          classname: "plus-icon",
-          icon: "plus"
-        }) %>
-      </div>
-
-      <!-- Angle Down Icon -->
-      <div
-          class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
-          id="<%= object.picker_id %>-angle-down"
-      >
-        <%= pb_rails("icon", props: {
-          classname: "angle_down_icon",
-          custom_icon: Playbook::Engine::root.join(angle_down_path)
-        }) %>
-      </div>
-    <% end %>
   </div>
 
   <%= javascript_tag do %>

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss

@@ -3,7 +3,7 @@
 .cal_icon_wrapper {
   pointer-events: none;
   position: absolute;
-  top: $space_md + 2;
+  top: 0;
   right: 0;
   border-left: 1px solid $input_border_default;
   width: $space_xl + $space_xs;

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -15,6 +15,9 @@
             <% if input_default_value.present? %>
             data-default-value="<%= input_default_value %>"
             <% end %>
+            <% if object.validation_message.present? %>
+            data-message="<%= object.validation_message %>"
+            <% end %>
             data-dropdown-selected-option
             name="<%= object.name %><%= '[]' if object.multi_select %>"
             style="display: none"

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -13,6 +13,8 @@ module Playbook
       prop :id, type: Playbook::Props::String
       prop :required, type: Playbook::Props::Boolean,
                       default: false
+      prop :validation_message, type: Playbook::Props::String,
+                                default: ""
       prop :default_value
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""

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

@@ -1670,6 +1670,10 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   clearFormValidation(input) {
+    // PbFormValidation may have setCustomValidity from data-message; clear it
+    // before checkValidity so a filled value can pass constraint validation.
+    input.setCustomValidity("");
+
     if (this.isMultiSelect) {
       if (this.selectedOptions.size > 0) {
         const dropdownWrapperElement = input.closest(".dropdown_wrapper");
@@ -2084,6 +2088,7 @@ export default class PbDropdown extends PbEnhancedElement {
     if (this.selectedOptions.size > 0) {
       baseInput.value = "";
       baseInput.removeAttribute("required");
+      baseInput.setCustomValidity("");
     } else {
       baseInput.value = "";
       if (this.wasOriginallyRequired) {

data/app/pb_kits/playbook/pb_dropdown/kit.schema.json

@@ -278,6 +278,13 @@
       "type": "boolean",
       "default": false
     },
+    "validationMessage": {
+      "platforms": [
+        "rails"
+      ],
+      "type": "string",
+      "default": ""
+    },
     "searchTermMinimumLength": {
       "platforms": [
         "rails"

data/app/pb_kits/playbook/pb_form/docs/_form_validation.html.erb

@@ -89,7 +89,11 @@
                     validation: { message: "Website is required" },
                   } %>
             <% when "textarea" %>
-              <%= form.text_area :bio, props: { label: "Bio", required: true } %>
+              <%= form.text_area :bio, props: {
+                    label: "Bio",
+                    required: true,
+                    validation: { message: "Bio is required" },
+                  } %>
             <% when "select" %>
               <%= form.select :favorite_color, select_choices,
                     props: {
@@ -108,7 +112,12 @@
                     } %>
             <% when "dropdown" %>
               <%= form.dropdown_field "validation[country]",
-                    props: { label: "Country", options: dropdown_options, required: true } %>
+                    props: {
+                      label: "Country",
+                      options: dropdown_options,
+                      required: true,
+                      validation_message: "Please select a country",
+                    } %>
             <% when "multi_select" %>
               <%= form.dropdown_field "validation[countries]",
                     props: {
@@ -116,10 +125,16 @@
                       options: dropdown_options,
                       multi_select: true,
                       required: true,
+                      validation_message: "Please select at least one country",
                     } %>
             <% when "checkbox" %>
               <%= form.check_box :newsletter,
-                    props: { text: "Subscribe to newsletter", label: "Checkbox", required: true },
+                    props: {
+                      text: "Subscribe to newsletter",
+                      label: "Checkbox",
+                      required: true,
+                      validation_message: "Please subscribe to continue",
+                    },
                     checked_value: "yes",
                     unchecked_value: "no" %>
             <% when "date_picker" %>
@@ -142,6 +157,7 @@
                       label: "Time Zone",
                       blank_selection: "Select a Time Zone...",
                       required: true,
+                      validation_message: "Please select a time zone",
                     } %>
             <% when "typeahead_default" %>
               <%= form.typeahead "validation[color_search_single]",
@@ -167,10 +183,16 @@
               <%= form.phone_number_field "validation[phone]", props: {
                     label: "Phone Number",
                     required: true,
+                    validation_message: "Phone number is required",
                   } %>
             <% when "star_rating" %>
               <%= form.star_rating_field "validation[rating]",
-                    props: { variant: "interactive", label: "Rating", required: true } %>
+                    props: {
+                      variant: "interactive",
+                      label: "Rating",
+                      required: true,
+                      validation_message: "Please provide a rating",
+                    } %>
             <% when "multi_level_select" %>
               <%= form.multi_level_select "validation[department]",
                     props: {
@@ -179,6 +201,7 @@
                       margin_bottom: "sm",
                       label: "Department",
                       required: true,
+                      validation_message: "Please select a department",
                     } %>
             <% end %>
           </div>

data/app/pb_kits/playbook/pb_form/docs/_form_validation.md

@@ -4,21 +4,21 @@ For `typeahead`, `phone_number_field`, and `dropdown_field`, pass a scoped strin
 
 ### Custom validation messages
 
-Not every form builder field accepts a custom validation message. Where supported, there are two props:
+All form builder fields support a custom required-field message when `validate: true` is set on the form. There are two props, depending on the field:
 
-**Text-based inputs** (`text_field`, `email_field`, `number_field`, `search_field`, `password_field`, `url_field`, and `typeahead`) use `validation` with a `message` key (optional `pattern` for format checks):
+**Text-based inputs** (`text_field`, `email_field`, `number_field`, `search_field`, `password_field`, `url_field`, `telephone_field`, `text_area`, and `typeahead`) use `validation` with a `message` key (optional `pattern` for format checks):
 
 ```ruby
 validation: { message: "Please enter a valid email address." }
 ```
 
-**Selection-based inputs** (`select`, `collection_select`, `date_picker`, `time_picker`, and `time_zone_select_field`) use `validation_message`:
+**Selection-based and other inputs** (`select`, `collection_select`, `date_picker`, `time_picker`, `time_zone_select_field`, `dropdown_field`, `check_box`, `phone_number_field`, `intl_telephone`, `star_rating_field`, and `multi_level_select`) use `validation_message`:
 
 ```ruby
 validation_message: "Please select an option."
 ```
 
-Other builder fields (for example `dropdown_field`, `check_box`, `phone_number_field`, `text_area`, `star_rating_field`, and `multi_level_select`) can still use `required: true` with `validate: true` on the form, but they do not take these custom message props.
+`phone_number_field` and `intl_telephone` own their validation UI. `validation_message` replaces the default required empty-field copy (`"Missing phone number"`); format errors remain kit-owned.
 
 ### Required indicator
 

data/app/pb_kits/playbook/pb_form/docs/snippets/validation_checkbox.txt

@@ -1,4 +1,9 @@
   <%= form.check_box :newsletter,
-        props: { text: "Subscribe to newsletter", label: "Checkbox", required: true },
+        props: {
+          text: "Subscribe to newsletter",
+          label: "Checkbox",
+          required: true,
+          validation_message: "Please subscribe to continue",
+        },
         checked_value: "yes",
         unchecked_value: "no" %>

data/app/pb_kits/playbook/pb_form/docs/snippets/validation_dropdown.txt

@@ -4,4 +4,9 @@
      { label: "Pakistan", value: "Pakistan", id: "pk" },
    ] %>
 <%= form.dropdown_field "validation[country]",
-      props: { label: "Country", options: dropdown_options, required: true } %>
+      props: {
+        label: "Country",
+        options: dropdown_options,
+        required: true,
+        validation_message: "Please select a country",
+      } %>

data/app/pb_kits/playbook/pb_form/docs/snippets/validation_multi_level_select.txt

@@ -22,4 +22,5 @@
           margin_bottom: "sm",
           label: "Department",
           required: true,
+          validation_message: "Please select a department",
         } %>

data/app/pb_kits/playbook/pb_form/docs/snippets/validation_multi_select.txt

@@ -8,4 +8,5 @@
         options: dropdown_options,
         multi_select: true,
         required: true,
+        validation_message: "Please select at least one country",
       } %>

data/app/pb_kits/playbook/pb_form/docs/snippets/validation_phone_number.txt

@@ -1,4 +1,5 @@
   <%= form.phone_number_field "validation[phone]", props: {
         label: "Phone Number",
         required: true,
+        validation_message: "Phone number is required",
       } %>

data/app/pb_kits/playbook/pb_form/docs/snippets/validation_star_rating.txt

@@ -1,2 +1,7 @@
 <%= form.star_rating_field "validation[rating]",
-      props: { variant: "interactive", label: "Rating", required: true } %>
+      props: {
+        variant: "interactive",
+        label: "Rating",
+        required: true,
+        validation_message: "Please provide a rating",
+      } %>

data/app/pb_kits/playbook/pb_form/docs/snippets/validation_textarea.txt

@@ -1 +1,5 @@
-  <%= form.text_area :bio, props: { label: "Bio", required: true } %>
+  <%= form.text_area :bio, props: {
+        label: "Bio",
+        required: true,
+        validation: { message: "Bio is required" },
+      } %>

data/app/pb_kits/playbook/pb_form/docs/snippets/validation_time_zone_select.txt

@@ -4,4 +4,5 @@
         label: "Time Zone",
         blank_selection: "Select a Time Zone...",
         required: true,
+        validation_message: "Please select a time zone",
       } %>