playbook_ui 16.7.0.pre.alpha.PLAY2868datadefaultvalues16201 → 16.7.0.pre.alpha.PLAY2928removetrix16285

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e8c942a94d890b530f5708a65f5fc6472d55b0b716f6ae45c236431d2750075d
-  data.tar.gz: 479a54d947ce814bd8e939e63f73852edbd50f00130add31cb58391fcb2479b1
+  metadata.gz: 2239e69de7aee5cd1e20d3f9748fefbae1816ef4ba9853a3007da8d4d07fb506
+  data.tar.gz: ab819b0915d49393d5a302fc53f661f1b8b637ae6234c7682731d11703241fd7
 SHA512:
-  metadata.gz: 597698fe69a18cb562969c3210cc2bec6c6453d81eb2e80609a08c3faef3ab58b8c6671f4544c8fbfe4689b405615ad55ce5dc5c350cda708a2ffcc25de062df
-  data.tar.gz: 45c0cf03a2219898bab6cc3776bb220df91532eb03f8f78db98f7bb943f6824c89a5c430e6a4d9873b6962b3145ada1b79fe42d126b4e2bfe9f919a4f8be0041
+  metadata.gz: a738c39d91590b9e35bfb3c451878d718c11fb33c36a5f8d2bd4e8996870cacd791f775ab5d741631545f350895417c3f5ab870c839d5808293404a3f623f42c
+  data.tar.gz: 612c1c751828492b8bdbaed69d40f49a5da93e17e7ca69e6178b1d72d253bf4a445ba5f9975a5dbf82c794da1e3d2d8e4b0fbc947dcfa377f608a209089e3f0a

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

@@ -198,6 +198,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     //@ts-ignore
     globalProps(filteredProps),
     error ? 'error' : null,
+    inLine && 'inline-date-picker',
     className
   )
 
@@ -280,7 +281,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
               }
             </div>
 
-            {!hideIcon &&
+            {!hideIcon && !inLine &&
               <div
                   className={iconWrapperClass()}
                   id={`cal-icon-${pickerId}`}
@@ -292,7 +293,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
               </div>
             }
 
-            {hideIcon && inLine ?
+            {inLine ?
               <div>
                 <div
                     className={`${iconWrapperClass()} date-picker-inline-icon-plus`}

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

@@ -42,7 +42,7 @@
       <input type="hidden" id="<%= "#{object.end_date_id}" %>" name="<%= "#{object.end_date_name}" %>">
     <% end %>
 
-    <% if !object.hide_icon %>
+    <% if !object.hide_icon && !object.inline %>
       <div
           class="<%= object.icon_wrapper_class %>"
           id="cal-icon-<%= object.picker_id %>"
@@ -55,7 +55,7 @@
     <% end %>
 
     <!-- Inline -->
-    <% if object.hide_icon && object.inline %>
+    <% if object.inline %>
       <!-- Plus Icon -->
       <div
           class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -92,7 +92,8 @@ module Playbook
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
-        generate_classname("pb_date_picker_kit") + default_margin_bottom
+        inline_class = inline ? " inline-date-picker" : ""
+        generate_classname("pb_date_picker_kit") + default_margin_bottom + inline_class
       end
 
       def date_picker_config

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -66,6 +66,37 @@ describe('DatePicker Kit', () => {
     expect(kit).not.toHaveAttribute('data-default-value')
   })
 
+  test('inLine alone adds inline-date-picker class and inline control icons, not the calendar icon', () => {
+    const testId = 'datepicker-inline-only'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          inLine
+          pickerId="date-picker-inline-only"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('inline-date-picker')
+    expect(kit.querySelector('#cal-icon-date-picker-inline-only')).not.toBeInTheDocument()
+    expect(kit.querySelector('#date-picker-inline-only-icon-plus')).toBeInTheDocument()
+    expect(kit.querySelector('#date-picker-inline-only-angle-down')).toBeInTheDocument()
+  })
+
+  test('hideIcon without inLine does not render inline control icons', () => {
+    const testId = 'datepicker-hide-icon-only'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          hideIcon
+          pickerId="date-picker-hide-icon-only"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit.querySelector('#date-picker-hide-icon-only-icon-plus')).not.toBeInTheDocument()
+  })
+
   test('shows DatePicker date format m/d/Y', async () => {
     const testId = 'datepicker-date'
     render(

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -1,6 +1,4 @@
 <%= pb_rails("date_picker", props: {
-  classname: "inline-date-picker",
-  hide_icon: true,
   inline: true,
   picker_id: "date-picker-inline"
 }) %>

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

@@ -6,8 +6,6 @@ const DatePickerInline = (props) => {
   return (
     <div>
       <DatePicker
-          className="inline-date-picker"
-          hideIcon
           inLine
           pickerId="date-picker-inline"
           {...props}

data/app/pb_kits/playbook/pb_date_picker/docs/_playground.json

@@ -113,9 +113,7 @@
         "name": "inline_date",
         "pickerId": "playground-date-inline",
         "label": "Inline",
-        "className": "inline-date-picker",
-        "inLine": true,
-        "hideIcon": true
+        "inLine": true
       }
     },
     {

data/app/pb_kits/playbook/pb_date_picker/docs/_playground.overrides.json

@@ -88,9 +88,7 @@
         "name": "inline_date",
         "pickerId": "playground-date-inline",
         "label": "Inline",
-        "className": "inline-date-picker",
-        "inLine": true,
-        "hideIcon": true
+        "inLine": true
       }
     },
     {

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -142,7 +142,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   // Determine if toolbar should be shown
   const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
 
-  const labelFor = advancedEditor ? fieldId : (id ? id : (inputOptions.id ? `${inputOptions.id}_trix` : undefined))
+  const labelFor = advancedEditor ? fieldId : (id ? id : (inputOptions?.id ? `${inputOptions.id}_trix` : undefined))
 
   return (
     <div

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

@@ -8,38 +8,53 @@
 @import "../tokens/transition";
 @import "previewer_mixin";
 
-[class^="pb_rich_text_editor_kit"] {
-    &.inline {
-        .toolbar {
-          opacity: 0;
-          transition: all 0.3s ease-in-out 0s;
-        }
-    
-        &:focus-within .toolbar {
-          opacity: 100;
-        }
-    
-        .ProseMirror {
-          border: 1px solid transparent;
-          transition: all 0.3s ease-in-out 0s;
-        }
-    
-        &:focus-within .ProseMirror {
-          border: 1px solid $input_border_default;
-          border-top: none;
-        }
-    
-        &:hover {
-          .toolbar {
-            opacity: 100;
-          }
-    
-          .ProseMirror {
-            border: 1px solid $input_border_default;
-            border-top: none;
-          }
-        }
+// Rails TipTap root: flex/grid children default to min-width: auto, so the toolbar’s
+// intrinsic width can force horizontal page/dialog scroll. Pin the kit to the parent width.
+[data-pb-rte-tiptap="true"] {
+  box-sizing: border-box;
+  display: block;
+  max-width: 100%;
+  min-width: 0;
+  width: 100%;
+}
+
+.pb_rich_text_editor_kit {
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+
+  &.inline {
+    .toolbar {
+      opacity: 0;
+      transition: all 0.3s ease-in-out 0s;
+    }
+
+    &:focus-within .toolbar {
+      opacity: 100;
+    }
+
+    .ProseMirror {
+      border: 1px solid transparent;
+      transition: all 0.3s ease-in-out 0s;
+    }
+
+    &:focus-within .ProseMirror {
+      border: 1px solid $input_border_default;
+      border-top: none;
+    }
+
+    &:hover {
+      .toolbar {
+        opacity: 100;
+      }
+
+      .ProseMirror {
+        border: 1px solid $input_border_default;
+        border-top: none;
       }
+    }
+  }
+
   .toolbar_button {
     display: flex;
     align-items: center;
@@ -73,18 +88,76 @@
     }
   }
 
+  // Active state for toolbar (Rails kit uses pb_button_kit pb_button_link; override link variant when active)
+  .toolbar button.pb_button_kit.is-active {
+    color: $primary;
+    background-color: $bg_light;
+  }
+
   .pb_rich_text_editor_tiptap_toolbar_sticky {
     position: sticky;
     top: 0;
     z-index: 10;
   }
+
+  .rte-editor-wrap {
+    box-sizing: border-box;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .pb_rich_text_editor_advanced_container {
+    max-width: 100%;
+    min-width: 0;
+  }
+
   .toolbar {
     border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
     border: 1px solid $input_border_default;
     overflow-x: auto;
+    // Single horizontal row + scroll in narrow modals/sidebars (wrap used to stack controls vertically).
     &_block {
+      align-items: center;
+      display: flex;
+      flex-wrap: nowrap;
       gap: $space_xs;
+      min-width: 0;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    // React: keep one horizontal scroll on .toolbar (avoid nested scroll + trailing history cluster).
+    &:not(.rte-rails-toolbar-layout) {
+      > .pb_flex_kit.pb_flex_kit_justify_content_between {
+        box-sizing: border-box;
+        column-gap: $space_sm;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        min-width: 100%;
+        width: max-content;
+      }
+
+      > .pb_flex_kit > .pb_flex_item_kit.toolbar_block {
+        flex: 0 0 auto;
+        min-width: 0;
+        overflow-x: visible;
+      }
+
+      > .pb_flex_kit > .pb_flex_item_kit:last-child {
+        flex: 0 0 auto;
+      }
     }
+
+    // Vertical section separators use ::before/::after with height: 100%. With
+    // align-items: center on .toolbar_block the kit’s cross size was 0, so the
+    // lines disappeared (master only had gap on .toolbar_block, default stretch).
+    .pb_section_separator_kit.pb_section_separator_vertical {
+      align-self: center;
+      flex-shrink: 0;
+      height: $space_xl;
+    }
+
+    // React ToolbarDropdown — match master (fixed width trigger; prod playbook.cloud).
     .editor-dropdown-button {
       background: transparent;
       border: none;
@@ -93,23 +166,115 @@
       font-weight: $light;
       padding: ($space_xs - 1) 0px;
       width: $space_xl * 3;
+
       &:focus-visible {
         box-shadow: unset;
       }
     }
+
+    &.rte-rails-toolbar-layout {
+      max-width: 100%;
+      min-width: 0;
+
+      .rte-rails-toolbar-row {
+        align-items: center;
+        box-sizing: border-box;
+        column-gap: $space_sm;
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        min-width: 100%;
+        padding: $space_xxs $space_sm;
+        width: max-content;
+      }
+
+      .rte-toolbar-left {
+        align-items: center;
+        display: flex;
+        flex: 0 0 auto;
+        flex-wrap: nowrap;
+        gap: $space_xs;
+        min-width: 0;
+        overflow-x: visible;
+      }
+
+      .rte-toolbar-right {
+        align-items: center;
+        display: flex;
+        flex: 0 0 auto;
+        gap: $space_xs;
+      }
+
+      // Align dropdown trigger with icon row (React wraps Popover + SectionSeparator in one flex line).
+      .pb_popover_reference_wrapper {
+        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;
     height: 100%;
-    padding: 1rem 1.5rem 1.5rem 1.5rem;
     line-height: $lh_loose;
+    padding: 1rem 1.5rem 1.5rem 1.5rem;
     @include transition_default;
-    :first-child {
-      margin-top: 0;
-    }
 
     h4,
     h5,
@@ -161,9 +326,32 @@
     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).
+  // Avoid relying on a wrapper-only frame — partial deploys then looked “borderless” because
+  // ProseMirror had been forced to border: none.
+  .pb_rich_text_editor_advanced_container.toolbar-active {
+    .ProseMirror {
+      border-top: none;
+      border-top-left-radius: initial;
+      border-top-right-radius: initial;
+    }
   }
 }
 
+// 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 {
@@ -188,20 +376,51 @@
     }
   }
 }
-.pb_rich_text_editor_advanced_container {
+
+// Rails RTE: block-style menu uses Nav (popover) instead of React NavItem class hook.
+.pb_rich_text_editor_kit .pb_popover_tooltip .pb_nav_list_item_link.is-active {
+  background-color: $bg_light;
+  border-radius: unset !important;
+  color: $primary;
+
+  .pb_nav_list_item_text,
+  .pb_nav_list_item_icon_left {
+    color: $primary !important;
+  }
+}
+
+.pb_rich_text_editor_kit .pb_popover_tooltip .pb_nav_list_kit_item:hover .pb_nav_list_item_link:not(.is-active) {
+  background-color: $neutral_subtle;
+  border-radius: unset !important;
+
+  .pb_nav_list_item_text,
+  .pb_nav_list_item_icon_left {
+    background-color: unset;
+    color: $text_lt_light !important;
+  }
+}
+
+// No toolbar: ring the whole control.
+.pb_rich_text_editor_advanced_container:not(.toolbar-active) {
   transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
   &:focus-visible,
   &:focus-within {
-    outline: unset;
-    box-shadow: 0 0 0 1px $input_border_state;
     border-radius: $border_rad_heaviest;
+    box-shadow: 0 0 0 1px $input_border_state;
+    outline: unset;
     transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
   }
-  &.toolbar-active {
-    .ProseMirror { 
-      border-top: none;
-      border-top-left-radius: initial;
-      border-top-right-radius: initial;
+}
+
+// Toolbar + editor: use border color (not an outer box-shadow) so the bottom isn’t doubled.
+.pb_rich_text_editor_advanced_container.toolbar-active {
+  &:focus-within {
+    .toolbar {
+      border-color: $input_border_state;
+    }
+
+    .ProseMirror {
+      border-color: $input_border_state;
     }
   }
 }

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’s module script (`rich_text_editor_rails.js`) uses `import()` with **full URLs** on [esm.sh](https://esm.sh) (e.g. `@tiptap/core@2.8.0`). esm.sh resolves dependencies server-side, so **no `<script type="importmap">`** is required—this avoids conflicts when the host page already has an import map (e.g. Vite in dev, or another app map) because Firefox only applies one native map.
+- You do not need TipTap in your app’s npm dependencies or Gemfile for this kit; the browser loads modules from esm.sh when the page runs.
+- Ensure **CSP** allows loading scripts from `https://esm.sh` (and esm.sh’s redirected module URLs) if you use a strict `script-src` / `connect-src`.
+
+### 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_rich_text_editor/kit.schema.json

@@ -3,7 +3,8 @@
   "name": "RichTextEditor",
   "description": "RichTextEditor component",
   "platforms": [
-    "react"
+    "react",
+    "rails"
   ],
   "props": {
     "advancedEditor": {
@@ -33,7 +34,8 @@
     "inputOptions": {
       "type": "GenericObject",
       "platforms": [
-        "react"
+        "react",
+        "rails"
       ]
     },
     "inline": {
@@ -45,7 +47,8 @@
     "label": {
       "type": "string",
       "platforms": [
-        "react"
+        "react",
+        "rails"
       ]
     },
     "extensions": {
@@ -69,7 +72,8 @@
     "placeholder": {
       "type": "string",
       "platforms": [
-        "react"
+        "react",
+        "rails"
       ]
     },
     "inputHeight": {
@@ -97,14 +101,18 @@
     "requiredIndicator": {
       "type": "boolean",
       "platforms": [
-        "react"
-      ]
+        "react",
+        "rails"
+      ],
+      "default": false
     },
     "simple": {
       "type": "boolean",
       "platforms": [
-        "react"
-      ]
+        "react",
+        "rails"
+      ],
+      "default": false
     },
     "sticky": {
       "type": "boolean",
@@ -121,7 +129,8 @@
     "value": {
       "type": "string",
       "platforms": [
-        "react"
+        "react",
+        "rails"
       ]
     },
     "maxWidth": {