playbook_ui 16.7.0 → 16.8.0.pre.alpha.PLAY2935formbuilderrequiredindicatorbug16780

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.jsx

@@ -0,0 +1,100 @@
+import React from "react";
+import PbCircleChart from "../_pb_circle_chart";
+
+const data = [
+  {
+    name: "EV",
+    y: 23.9,
+  },
+  {
+    name: "Hybrids",
+    y: 12.6,
+  },
+  {
+    name: "Diesel",
+    y: 37.0,
+  },
+  {
+    name: "Petrol",
+    y: 26.4,
+  },
+];
+
+const total = data.reduce((sum, point) => sum + point.y, 0);
+const subtitleRows = data.map((point) => `${point.name}: ${point.y}%`).join("<br>");
+
+const chartOptions = {
+  chart: {
+    type: "pie",
+  },
+  accessibility: {
+    point: {
+      valueSuffix: "%",
+    },
+  },
+  title: {
+    text: "2023 Norway car registrations",
+    floating: true,
+    align: "center",
+    verticalAlign: "top",
+    y: 8,
+  },
+  subtitle: {
+    text: `Total<br><strong>${total.toFixed(1)}</strong><br><br>${subtitleRows}`,
+    useHTML: true,
+    floating: true,
+    align: "center",
+    verticalAlign: "middle",
+    y: 8,
+    style: {
+      textAlign: "center",
+    },
+  },
+  tooltip: {
+    pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>",
+  },
+  legend: {
+    enabled: false,
+  },
+  plotOptions: {
+    series: {
+      allowPointSelect: true,
+      cursor: "pointer",
+      borderRadius: 8,
+      dataLabels: [
+        {
+          enabled: true,
+          distance: 20,
+          format: "{point.name}",
+        },
+        {
+          enabled: true,
+          distance: -15,
+          format: "{point.percentage:.0f}%",
+          style: {
+            fontSize: "0.9em",
+          },
+        },
+      ],
+      showInLegend: true,
+    },
+  },
+  series: [
+    {
+      name: "Registrations",
+      colorByPoint: true,
+      center: ["50%", "50%"],
+      innerSize: "75%",
+      data,
+    },
+  ],
+};
+
+const PbCircleChartCenteredData = (props) => (
+  <PbCircleChart
+      options={chartOptions}
+      {...props}
+  />
+);
+
+export default PbCircleChartCenteredData;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.md

@@ -0,0 +1 @@
+This example shows how to achieve centered data. This data will remain in the center of all screen sizes.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx

@@ -30,4 +30,4 @@ const PbCircleChartDefault = (props) => (
   </div>
 );
 
-export default PbCircleChartDefault;
+export default PbCircleChartDefault;

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

@@ -11,6 +11,7 @@ examples:
   - pb_circle_chart_with_title: With Title
   - pb_circle_chart_inner_sizes: Inner Circle Size Options
   - pb_circle_chart_custom_tooltip: Tooltip Customization
+  - pb_circle_chart_centered_data: Centered Data
 
   
   react:
@@ -25,5 +26,6 @@ examples:
   - pb_circle_chart_with_title: With Title
   - pb_circle_chart_inner_sizes: Inner Circle Size Options
   - pb_circle_chart_custom_tooltip: Tooltip Customization
+  - pb_circle_chart_centered_data: Centered Data
   
   

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

@@ -8,4 +8,5 @@ export { default as PbCircleChartDataWithLegend } from './_pb_circle_chart_data_
 export { default as PbCircleChartDataLegendPosition } from './_pb_circle_chart_data_legend_position.jsx'
 export { default as PbCircleChartWithTitle } from './_pb_circle_chart_with_title.jsx'
 export { default as PbCircleChartInnerSizes } from './_pb_circle_chart_inner_sizes.jsx'
-export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'
+export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'
+export { default as PbCircleChartCenteredData } from './_pb_circle_chart_centered_data.jsx'

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

@@ -13,7 +13,8 @@
     "value": "",
     "formatAsYouType": false,
     "strictMode": false,
-    "countrySearch": false
+    "countrySearch": false,
+    "showPlaceholder": false
   },
   "groups": [
     {
@@ -37,7 +38,8 @@
         "value",
         "formatAsYouType",
         "strictMode",
-        "countrySearch"
+        "countrySearch",
+        "showPlaceholder"
       ]
     }
   ],

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: full-width row with history on the far right; horizontal scroll stays on .toolbar.
+    &: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: space-between;
+        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: space-between;
+        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": {