playbook_ui_docs 16.5.0.pre.rc.5 → 16.6.0.pre.alpha.RTEPOC15801

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 14ee4cf626c396a0645dd7991233183003e6c8008873abe1803d0695f909ef97
-  data.tar.gz: 1c4506b341d3b03078861a16a5e7c452e53c9d6bb4875ccf4fcc920561f5572e
+  metadata.gz: d14ea2a71d5d146173907999dea08fb898f880c1b5761fbe6f1c6ca1a9d7533b
+  data.tar.gz: 5293a0f97723a83ac0d989e578fd96363ab587c86f543b2704a9d912530bb0f6
 SHA512:
-  metadata.gz: d0cc1729abe5dcdccf6ced75afeaf948f3a314b04b336a8c306291299ad3c44e84eb40ab77ce52d3a0f084006a19bbaee10eb3159112447770eeba0444941c19
-  data.tar.gz: 7eccb6967a0a00b25b170147db83c8222eca93d78b4b41cf5eada37ba84b77884ba0e74d37f2c66cd42b6fb153941d4b94f2933977b331f11e6456e4ba78ee57
+  metadata.gz: 119cc36000b349187af3d486eb28e5b1156054a56cddfbf2b55fc1167ef5d76c4082e24c472f65be6a9767285d96bb1f180344259d4077699b7ab37f86d38913
+  data.tar.gz: 41a756a6db3f323db459a31bd632e93352561d11284510d568dc3added1fd238e561935466cf8d60862451c3ccf79269fe9c04307e30f41e0864d45bc8f79f68

data/app/pb_kits/playbook/pb_button/docs/{_button_loading.html.erb → _button_loading_rails.html.erb}

@@ -1,7 +1,7 @@
 <%= pb_rails("caption", props: { margin_y: "md", text: "Button variants with loading" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "secondary", loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "link", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, text: "Loading", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "secondary", loading: true, text: "Loading", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "link", loading: true, text: "Loading", margin_right: "lg" }) %>
 <%= pb_rails("caption", props: { margin_y: "md", text: "Button sizes with loading" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "sm", margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "lg", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "sm", text: "Loading", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "lg", text: "Loading", margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_loading_rails.md

@@ -0,0 +1,3 @@
+Used when a button will take a little while to load. The spinner lets the user know that the button has worked and it is in the process of loading. 
+
+**NOTE**: In Rails, both the button text and loading spinner are rendered at the same time, and visibility is toggled between them. Even though the text prop is not required, providing it ensures the button maintains its correct shape during loading.

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

@@ -4,7 +4,7 @@ examples:
   - button_reaction: Reaction Button
   - button_full_width: Button Full Width
   - button_link: Button Links
-  - button_loading: Button Loading
+  - button_loading_rails: Button Loading
   - button_block_content: Button Block Content
   - button_icon_options: Button Icon Options
   - button_accessibility: Button Accessibility Options

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_rich_text_editor/docs/_rich_text_editor_rails_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("rich_text_editor", props: { input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets." }) %>

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

@@ -0,0 +1,12 @@
+The Rails rich text editor is a TipTap surface with no React. The UI (toolbar, block-style menu, formatting actions) is rendered with Playbook Rails kits (`pb_rails`). The editor document is a vanilla TipTap `Editor` instance; HTML is synced to a hidden `<input>` so standard Rails forms can submit the value.
+
+### How TipTap is loaded (Rails)
+
+- The kit ships an `importmap` in the ERB template that maps `@tiptap/*` and ProseMirror packages to ES module URLs on a CDN (see `rich_text_editor.html.erb`). A small `type="module"` script `import()`s `@tiptap/core`, `@tiptap/starter-kit`, `@tiptap/extension-link`, and related modules at runtime.
+- You do not need to add TipTap to your app’s npm dependencies or Gemfile for this kit to work out of the box—the browser loads those modules from the CDN when the page runs.
+- Your app must support import maps and ES modules in the browser (modern browsers; ensure CSP allows the CDN if you lock scripts down).
+
+### Relation to the React implementation
+
+- 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.

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,8 @@
+### 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.

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

@@ -1,6 +1,8 @@
 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_typeahead/docs/_typeahead_createable.html.erb

@@ -0,0 +1,29 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-creatable",
+    placeholder: "All Colors",
+    options: options,
+    label: "Colors",
+    name: :foo,
+    createable: true,
+    pills: true,
+  })
+%>
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-creatable-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-creatable-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.md

@@ -0,0 +1 @@
+The `createable` prop allows users to create new options by typing a value that doesn't exist in the options list. 

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

@@ -11,6 +11,7 @@ examples:
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
+    - typeahead_createable: Createable
     - typeahead_error_state: Error State
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.5.0.pre.rc.5
+  version: 16.6.0.pre.alpha.RTEPOC15801
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-04-02 00:00:00.000000000 Z
+date: 2026-04-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -328,9 +328,10 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_link.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_link.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_link.md
-- app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_loading.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_loading.md
+- app/pb_kits/playbook/pb_button/docs/_button_loading_rails.html.erb
+- app/pb_kits/playbook/pb_button/docs/_button_loading_rails.md
 - app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md
 - app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb
@@ -599,6 +600,8 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
@@ -1118,6 +1121,8 @@ files:
 - app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md
 - app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb
 - app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.md
+- app/pb_kits/playbook/pb_form/docs/_form_form_with_validation_msg.html.erb
+- app/pb_kits/playbook/pb_form/docs/_form_form_with_validation_msg.md
 - app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb
 - app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.md
 - app/pb_kits/playbook/pb_form/docs/example.yml
@@ -1997,6 +2002,10 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_default.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_default.md
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_simple.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_simple.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
@@ -2622,7 +2631,9 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_description.md
 - app/pb_kits/playbook/pb_typeahead/docs/_footer.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.jsx