playbook_ui 16.5.0.pre.alpha.RTEPOC15747 → 16.5.0.pre.alpha.RTEPOC15779

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e22a1c2088938459e3efb880b3d4e820b0c19aeddd957a828eb585eca3ec45d8
-  data.tar.gz: c4d23d3f4c261089c3fe9f6a592596d698ad9c767e7c85287a8b06177043471d
+  metadata.gz: a2c36115f459754d15420a726ab66d5aef94d010e98cccf7cb900c7f181a926e
+  data.tar.gz: 065a216cb80347d860b96b44a0d7fcc57bc588a1168f771c9cb2ab1960d49e4f
 SHA512:
-  metadata.gz: 4cd4c8e1c3c86d08e9348ff45eaafb1b1f0f1ee111ec95b0f10d7bcbbfe46f412c7938ac53b71667aea8618460b8e783829aa628f23f082e5125620e7348669f
-  data.tar.gz: 69e7c97110e36ac166a46f84f57651be2de4304097940a24dee7f6210b1167742ffa34c65ec14c50c43f0ef1ae85e17ce07f8d75629604cc7dfae0a8bfe416a9
+  metadata.gz: 9948221496986eedce4addad128d3991d441e2d06e0f0fbdfd69630f748771276e74ee3ad532550972b8467a3f175a3cb04719b6811aa4847d79721dd987f0ad
+  data.tar.gz: 47ec682ffc0fae5d065c1d5636d21a6d288e3b54e7091fc49fed4180ee95aafd67db4282d0bc700f6af98e7de5428407222080f0305ea3599aacd88eb3573ee6

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

@@ -31,6 +31,7 @@
       name: object.name,
       placeholder: object.placeholder,
       required: object.required,
+      validation: object.validation_message.present? ? { message: object.validation_message } : {},
     }) %>
     <% end %>
     <% if object.selection_type == "quickpick" %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { Button, Dialog, DatePicker } from "playbook-ui";
+
+const DatePickerDialogSubmission = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [dateFixed, setDateFixed] = useState("");
+    const [pickerInstance, setPickerInstance] = useState(0);
+
+    const close = (clearDate = false) => {
+        if (clearDate) setDateFixed("");
+        setIsOpen(false);
+    };
+
+    const open = () => {
+        setPickerInstance((current) => current + 1);
+        setIsOpen(true);
+    };
+
+    const handleSubmit = () => {
+        if (!dateFixed.trim()) return;
+        close();
+    };
+
+    return (
+        <>
+            <Button 
+                onClick={open} 
+                text="Open Dialog" 
+            />
+            <Dialog
+                onClose={() => close(true)}
+                opened={isOpen}
+                size="md"
+                title="Date Picker: Dialog Submission Example"
+            >
+                <Dialog.Body>
+                    <DatePicker
+                        defaultDate={dateFixed || undefined}
+                        key={`fixed-${pickerInstance}`}
+                        label="Date"
+                        onChange={(dateStr) => setDateFixed(dateStr || "")}
+                        pickerId={`datePickerFixed-${pickerInstance}`}
+                        staticPosition={false}
+                    />
+                </Dialog.Body>
+                <Dialog.Footer>
+                    <Button 
+                        onClick={handleSubmit}
+                        text="Submit"
+                    />
+                    <Button 
+                        onClick={() => close(true)} 
+                        text="Cancel" 
+                        variant="link" 
+                    />
+                </Dialog.Footer>
+            </Dialog>
+        </>
+    );
+};
+
+export default DatePickerDialogSubmission;

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.md

@@ -0,0 +1 @@
+Use this pattern when a DatePicker lives inside a Dialog and needs to submit a selected value before closing. A unique `key` and `pickerId` will force the datePicker to remount each time the dialog opens.  

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

@@ -66,3 +66,4 @@ examples:
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
   - date_picker_required_indicator: Required Indicator
+  - date_picker_dialog_submission: Dialog Form Submission

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -29,3 +29,4 @@ export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_
 export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
 export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
 export { default as DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";
+export { default as DatePickerDialogSubmission } from "./_date_picker_dialog_submission.jsx";

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

@@ -97,8 +97,8 @@
 }] %>
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
-  <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
-  <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
+  <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true } %>
+  <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= form.typeahead :example_typeahead_validation_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
   <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
@@ -110,14 +110,14 @@
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
   <%= 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.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= 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_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.date_picker :example_date_picker_2, props: { label: true, required: true, 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 } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
-  <%= form.time_picker :example_time_picker_validation, props: { label: true, required: true, validation_message: "Please select a time." } %>
+  <%= form.time_picker :example_time_picker_validation, props: { label: true, required: true } %>
  
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -0,0 +1,90 @@
+<%
+  example_collection = [
+    OpenStruct.new(name: "Alabama", value: 1),
+    OpenStruct.new(name: "Alaska", value: 2),
+    OpenStruct.new(name: "Arizona", value: 3),
+    OpenStruct.new(name: "Arkansas", value: 4),
+    OpenStruct.new(name: "California", value: 5),
+    OpenStruct.new(name: "Colorado", value: 6),
+    OpenStruct.new(name: "Connecticut", value: 7),
+    OpenStruct.new(name: "Delaware", value: 8),
+    OpenStruct.new(name: "Florida", value: 9),
+    OpenStruct.new(name: "Georgia", value: 10),
+  ]
+%>
+
+
+<%
+  example_typeahead_options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+
+<%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
+  <%= form.text_field :example_text_field_validation_msg, props: { label: "Text Field With Validation Message", required: true, validation: { message: "I am a custom validation message for text field." } } %>
+  <%= form.typeahead :example_typeahead_validation_msg, props: { data: { typeahead_example_msg: true, user: {} }, label: "Typeahead With Validation Message", placeholder: "Search for a user", required: true, validation: { message: "I am a custom validation message for typeahead." } } %>
+  <%= form.typeahead :example_typeahead_validation_react_msg, props: { options: example_typeahead_options, pills: true, label: "Typeahead With Validation Message (React Rendered)", placeholder: "Search for a color", required: true, validation: { message: "I am a custom validation message for React typeahead." } } %>
+  <%= form.select :example_select_validation_msg, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "I am a custom validation message for select." } %>
+  <%= form.collection_select :example_collection_select_validation_msg, example_collection, :value, :name, props: { label: "Collection Select With Validation Message", blank_selection: "Select a State...", required: true, validation_message: "I am a custom validation message for collection select." } %>
+  <%= form.date_picker :example_date_picker_validation_msg, props: { label: "Date Picker With Validation Message", required: true, validation_message: "I am a custom validation message for date picker.", allow_input: true } %>
+  <%= form.time_picker :example_time_picker_validation_msg, props: { label: "Time Picker With Validation Message", required: true, validation_message: "I am a custom validation message for time picker." } %>
+
+  <%= form.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>
+
+<!-- form.typeahead user results example template -->
+<template data-typeahead-example-result-option>
+  <%= pb_rails("user", props: {
+    name: tag(:slot, name: "name"),
+    orientation: "horizontal",
+    align: "left",
+    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
+    avatar: true
+    }) %>
+</template>
+
+<!-- form.typeahead JS example implementation -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-search", function(event) {
+    if (!event.target.dataset || !event.target.dataset.typeaheadExampleMsg) return
+
+    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
+      .then(response => response.json())
+      .then((result) => {
+        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
+
+        event.detail.setResults((result.items || []).map((user) => {
+          const wrapper = resultOptionTemplate.content.cloneNode(true)
+          wrapper.children[0].dataset.user = JSON.stringify(user)
+          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
+          wrapper.querySelector('img').dataset.src = user.avatar_url
+          return wrapper
+        }))
+      })
+  })
+
+
+  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
+    if (!event.target.dataset.typeaheadExampleMsg) return
+
+    const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
+    const selectedUserData = JSON.parse(selectedUserJSON)
+
+    // set the input field's value
+    event.target.querySelector('input[name=example_typeahead_validation_msg]').value = selectedUserData.login
+
+    // log the selected option's dataset
+    console.log('The selected user data:')
+    console.dir(selectedUserData)
+
+    // do even more with the data later - TBD
+    event.target.dataset.user = selectedUserJSON
+  })
+<% end %>

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

@@ -0,0 +1,13 @@
+Custom validation messages allow you to override the browser's default validation text with your own messaging. This provides a better user experience by giving specific, actionable feedback.
+
+**Text-based inputs** (TextInput, Typeahead) use the `validation` prop with a `message` key:
+```ruby
+validation: { message: "Please enter a valid email address." }
+```
+
+**Selection-based inputs** (Select, DatePicker, TimePicker) use the `validation_message` prop:
+```ruby
+validation_message: "Please select an option."
+```
+
+When a required field is left empty or fails validation, your custom message will display instead of the generic browser default.

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

@@ -3,5 +3,6 @@ examples:
   rails:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
+  - form_form_with_validation_msg: Validation + Custom Validation Message
   - form_form_with_loading: Default + Loading
   - form_with_required_indicator: With Optional Required Indicator

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -121,4 +121,6 @@ class PbFormValidation extends PbEnhancedElement {
   }
 }
 
-window.PbFormValidation = PbFormValidation
+window.PbFormValidation = PbFormValidation
+
+export default PbFormValidation

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -134,61 +134,15 @@
       height: $space_xl;
     }
 
-    // Match React ToolbarDropdown: secondary trigger flattened to text-style control.
+    // React ToolbarDropdown — match master (fixed width trigger; prod playbook.cloud).
     .editor-dropdown-button {
       background: transparent;
       border: none;
       color: $text_lt_light;
       cursor: pointer;
       font-weight: $light;
-      letter-spacing: normal;
-      line-height: 1;
-      min-height: unset;
-      max-width: 100%;
-      // Plain length only — SassC cannot compile CSS min(%, px). Narrow modals rely on kit/root min-width: 0 above.
-      min-width: $space_xl * 5;
-      padding: ($space_xs - 1) $space_xs;
-      width: auto;
-
-      // Undo Playbook .pb_button_kit defaults that throw off icon vs label (line-height 1.5, min-height 40px).
-      .pb_button_content {
-        align-items: center;
-        display: inline-flex;
-        line-height: 1;
-      }
-
-      // React: single Flex row inside the button.
-      .pb_button_content > .pb_flex_kit {
-        align-items: center;
-      }
-
-      // Rails: block-style trigger row (spans + icons).
-      .rte-block-style-trigger-inner {
-        align-items: center;
-      }
-
-      .rte-block-style-trigger-icon,
-      .rte-block-style-chevron {
-        display: inline-flex;
-        flex-shrink: 0;
-        line-height: 0;
-
-        .pb_icon_kit {
-          align-items: center;
-          display: flex;
-          line-height: 0;
-        }
-
-        svg {
-          display: block;
-        }
-      }
-
-      .rte-block-style-trigger-label {
-        align-items: center;
-        display: inline-flex;
-        line-height: 1.2;
-      }
+      padding: ($space_xs - 1) 0px;
+      width: $space_xl * 3;
 
       &:focus-visible {
         box-shadow: unset;
@@ -196,6 +150,12 @@
     }
 
     // Rails TipTap toolbar: mirror React Toolbar.tsx — <Flex paddingX="sm" paddingY="xxs" justify="between">.
+    &.rte-rails-toolbar-layout--simple {
+      .rte-toolbar-left {
+        overflow-x: visible;
+      }
+    }
+
     &.rte-rails-toolbar-layout {
       max-width: 100%;
       min-width: 0;
@@ -237,23 +197,71 @@
         align-items: center;
         display: inline-flex;
       }
+
+      // Override master’s fixed-width React trigger: Rails block-style label + icons needs flexible width.
+      .editor-dropdown-button {
+        justify-content: flex-start;
+        letter-spacing: normal;
+        line-height: 1;
+        max-width: 100%;
+        min-height: unset;
+        padding: ($space_xs - 1) $space_xs;
+        text-align: left;
+        width: auto;
+
+        .pb_button_content {
+          align-items: center;
+          display: inline-flex;
+          line-height: 1;
+        }
+
+        .pb_button_content > .pb_flex_kit {
+          align-items: center;
+        }
+
+        .rte-block-style-trigger-inner {
+          align-items: center;
+        }
+
+        .rte-block-style-trigger-icon,
+        .rte-block-style-chevron {
+          display: inline-flex;
+          flex-shrink: 0;
+          line-height: 0;
+
+          .pb_icon_kit {
+            align-items: center;
+            display: flex;
+            line-height: 0;
+          }
+
+          svg {
+            display: block;
+          }
+        }
+
+        .rte-block-style-trigger-label {
+          align-items: center;
+          display: inline-flex;
+          line-height: 1.2;
+        }
+
+        &:focus-visible {
+          box-shadow: unset;
+        }
+      }
     }
   }
 
+  // TipTap content — match master (prod playbook React tab).
   .ProseMirror {
     background: $white;
     border: 1px solid $input_border_default;
     border-radius: $border_rad_heaviest;
-    box-sizing: border-box;
     height: 100%;
     line-height: $lh_loose;
-    overflow-wrap: anywhere;
-    padding: 1.25rem 1.5rem 1.5rem 1.5rem;
-    word-break: break-word;
+    padding: 1rem 1.5rem 1.5rem 1.5rem;
     @include transition_default;
-    :first-child {
-      margin-top: 0;
-    }
 
     h4,
     h5,
@@ -305,6 +313,11 @@
     ul {
       @include preview_tiptap_ul;
     }
+
+    // After heading mixins: first block should not pick up extra top margin (wins over `p { margin-top: 1rem }`).
+    > :first-child {
+      margin-top: 0;
+    }
   }
 
   // Toolbar + editor stack: toolbar keeps its border; editor has no top stroke (classic layout).
@@ -319,6 +332,13 @@
   }
 }
 
+// Rails-only: outer kit sets `data-pb-rte-tiptap` — roomier padding + wrapping for vanilla TipTap in forms/dialogs.
+[data-pb-rte-tiptap="true"] .pb_rich_text_editor_kit .ProseMirror {
+  overflow-wrap: anywhere;
+  padding: 1.25rem 1.5rem 1.5rem 1.5rem;
+  word-break: break-word;
+}
+
 .pb_tiptap_toolbar_dropdown_list_item {
   &.is-active,
   &:active {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_default.md

@@ -10,3 +10,7 @@ The Rails rich text editor is a TipTap surface with no React. The UI (toolbar, b
 
 - Same core: both use TipTap v2 on top of ProseMirror; styling lives in Playbook SCSS (`_tiptap_styles.scss`) so the editor chrome lines up between platforms.
 - Different shell: Rails uses ERB + Playbook Rails components + inline module script. React uses `RichTextEditor` / `_tiptap_editor.tsx` and TipTap wired through the bundled Playbook React package—see Advanced Default for that stack and when you need TipTap installed in your JavaScript bundle.
+
+### Simple toolbar (`simple: true`)
+
+**Bold**, **Italic**, **Undo**, and **Redo** only (no block dropdown / Popover). See the **Rails (TipTap — Simple toolbar)** example.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_simple.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("rich_text_editor", props: {
+  simple: true,
+  label: "Notes",
+  input_options: {
+    id: "rails_rte_simple_demo",
+    name: "content",
+  },
+  value: "<p>Use <strong>Bold</strong> and <em>Italic</em> from the toolbar.</p>",
+}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_simple.md

@@ -0,0 +1,12 @@
+### Simple toolbar (`simple: true`)
+
+Pass **`simple: true`** for a compact toolbar: **Bold**, **Italic**, **Undo**, and **Redo** (same history controls as the full toolbar—plain buttons, not popovers).
+
+- No block-style dropdown (no “Paragraph” / headings / lists in the menu).
+- No **`pb_popover`** on the toolbar—useful in **native `<dialog>`** modals, turbo-loaded panels, or other tight layouts where the full block menu is awkward to position.
+
+The underlying TipTap document still accepts the same HTML as the default Rails editor; `simple` only changes which **toolbar controls** are shown.
+
+### When to use the default instead
+
+Keep the **default** toolbar (omit `simple` or pass `simple: false`) when you need the block-style menu, strikethrough, code block, and link actions in the chrome.

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

@@ -2,6 +2,7 @@ examples:
 
   rails:
   - rich_text_editor_rails_default: "Rails (TipTap)"
+  - rich_text_editor_rails_simple: "Rails (TipTap — Simple toolbar)"
 
   react:
   - rich_text_editor_advanced_default: Advanced Default

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

@@ -109,8 +109,10 @@
     "simple": {
       "type": "boolean",
       "platforms": [
-        "react"
-      ]
+        "react",
+        "rails"
+      ],
+      "default": false
     },
     "sticky": {
       "type": "boolean",

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb

@@ -68,7 +68,38 @@
     </label>
   <% end %>
   <input type="hidden" name="<%= object.input_name %>" id="<%= object.input_id %>" value="" />
-  <div class="pb_rich_text_editor_advanced_container toolbar-active">
+  <div class="pb_rich_text_editor_advanced_container toolbar-active<%= " pb_rich_text_editor_rte--simple" if object.simple %>">
+    <% if object.simple %>
+    <%# Compact toolbar: Bold/Italic + Undo/Redo — no block-style Popover (avoids dialog positioning issues). %>
+    <div class="pb_background_kit pb_background_color_white toolbar rte-rails-toolbar-layout rte-rails-toolbar-layout--simple" id="<%= object.toolbar_id %>">
+      <div class="rte-rails-toolbar-row">
+        <div class="toolbar_block rte-toolbar-left">
+          <button type="button" class="toolbar_button" data-action="bold" title="Bold" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "bold", size: "lg" }) %>
+            <% end %>
+          </button>
+          <button type="button" class="toolbar_button" data-action="italic" title="Italic" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "italic", size: "lg" }) %>
+            <% end %>
+          </button>
+        </div>
+        <div class="toolbar_block rte-toolbar-right">
+          <button type="button" class="toolbar_button" data-action="undo" title="Undo" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "undo", size: "lg" }) %>
+            <% end %>
+          </button>
+          <button type="button" class="toolbar_button" data-action="redo" title="Redo" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "redo", size: "lg" }) %>
+            <% end %>
+          </button>
+        </div>
+      </div>
+    </div>
+    <% else %>
     <% block_style_options = [
       { value: "paragraph", text: "Paragraph", icon: "paragraph" },
       { value: "heading-1", text: "Heading 1", icon: "h1" },
@@ -174,6 +205,7 @@
         </span>
       <% end %>
     </div>
+    <% end %>
     <div class="rte-editor-wrap">
       <div id="<%= object.editor_node_id %>"></div>
     </div>
@@ -193,8 +225,9 @@
   const hiddenInput = document.getElementById(inputId);
   const editorNode = document.getElementById("<%= object.editor_node_id %>");
   const toolbar = document.getElementById("<%= object.toolbar_id %>");
+  const rteSimple = <%= object.simple ? "true" : "false" %> === "true";
   const blockTooltipId = "<%= object.rte_block_style_tooltip_id %>";
-  const iconTemplatesRoot = document.getElementById("<%= object.container_id %>-block-icon-templates");
+  const iconTemplatesRoot = rteSimple ? null : document.getElementById("<%= object.container_id %>-block-icon-templates");
   if (!editorNode || !hiddenInput || !toolbar) return;
 
   function syncToHiddenInput(editor) {
@@ -239,6 +272,7 @@
   }
 
   function syncBlockTrigger() {
+    if (rteSimple) return;
     const current = getCurrentBlockValue();
     const triggerRoot = toolbar.querySelector("[data-rte-block-trigger]");
     let tpl = iconTemplatesRoot && [...iconTemplatesRoot.children].find(
@@ -276,18 +310,20 @@
     else if (value === "blockquote") chain.toggleBlockquote().run();
   }
 
-  const blockStyleTooltip = document.getElementById(blockTooltipId);
-  if (blockStyleTooltip) {
-    blockStyleTooltip.addEventListener("click", (e) => {
-      const a = e.target.closest("a[href^='#']");
-      if (!a || !blockStyleTooltip.contains(a)) return;
-      e.preventDefault();
-      const href = a.getAttribute("href") || "";
-      const v = href.startsWith("#") ? href.slice(1) : "";
-      if (!v) return;
-      applyBlockType(v);
-      updateActiveStates();
-    });
+  if (!rteSimple) {
+    const blockStyleTooltip = document.getElementById(blockTooltipId);
+    if (blockStyleTooltip) {
+      blockStyleTooltip.addEventListener("click", (e) => {
+        const a = e.target.closest("a[href^='#']");
+        if (!a || !blockStyleTooltip.contains(a)) return;
+        e.preventDefault();
+        const href = a.getAttribute("href") || "";
+        const v = href.startsWith("#") ? href.slice(1) : "";
+        if (!v) return;
+        applyBlockType(v);
+        updateActiveStates();
+      });
+    }
   }
 
   function updateActiveStates() {

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -9,6 +9,9 @@ module Playbook
       prop :input_options, type: Playbook::Props::HashProp, default: {}
       prop :label
       prop :required_indicator, type: Playbook::Props::Boolean, default: false
+      # When true, TipTap toolbar matches React `simple`: Bold + Italic only (no block-style Popover).
+      # Use in modals or narrow layouts where the block dropdown misbehaves.
+      prop :simple, type: Playbook::Props::Boolean, default: false
 
       # Match React default (globalProps maxWidth "md").
       def max_width

data/app/pb_kits/playbook/pb_select/select.rb

@@ -43,9 +43,16 @@ module Playbook
           multiple: multiple,
           onchange: onchange,
           include_blank: include_blank,
+          data: validation_data,
         }.merge(attributes).merge(input_options)
       end
 
+      def validation_data
+        fields = input_options[:data] || {}
+        fields[:message] = validation_message unless validation_message.blank?
+        fields
+      end
+
       # Same resolved id as the native +<select>+ (+all_attributes[:id]+) for label +for+.
       def select_input_id
         all_attributes[:id].presence