playbook_ui 15.5.0.pre.alpha.draggablefix12589 → 15.5.0.pre.rc.0

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx

@@ -6,6 +6,7 @@ import ProgressStepItem from '../_progress_step_item.tsx'
 const ProgressStepDefault = (props) => (
   <div>
     <ProgressStep
+        icon
         {...props}
     >
       <ProgressStepItem status="complete" />
@@ -18,24 +19,12 @@ const ProgressStepDefault = (props) => (
 
     <ProgressStep {...props}>
       <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
-      <ProgressStepItem status="complete">{'Step 2'}</ProgressStepItem>
-      <ProgressStepItem status="active">{'Step 3'}</ProgressStepItem>
-      <ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
-      <ProgressStepItem status="inactive">{'Step 5'}</ProgressStepItem>
+      <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
+      <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
     </ProgressStep>
 
     <br />
     <br />
-
-    <ProgressStep 
-        icon
-        {...props}
-    >
-      <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
-      <ProgressStepItem status="complete">{'Step 2'}</ProgressStepItem>
-      <ProgressStepItem status="active">{'Step 3'}</ProgressStepItem>
-      <ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
-    </ProgressStep>
   </div>
 )
 

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb

@@ -25,7 +25,13 @@
     Child
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
-    Child
+    <%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
+  Card content
+<% end %>
+<br>
+<%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
+  Card content
+<% end %>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
     Child

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

@@ -3,7 +3,6 @@ examples:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
-  - progress_step_color: Color
   - progress_step_custom_icon: Custom Icon
   - progress_step_tooltip: Tooltip
 
@@ -11,6 +10,4 @@ examples:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
-  - progress_step_color: Color
-  - progress_step_custom_icon: Custom Icon
   - progress_step_tracker_click_events: Using State

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

@@ -2,5 +2,3 @@ export { default as ProgressStepDefault } from './_progress_step_default.jsx'
 export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
 export { default as ProgressStepTracker } from './_progress_step_tracker.jsx'
 export { default as ProgressStepTrackerClickEvents } from './_progress_step_tracker_click_events.jsx'
-export { default as ProgressStepColor } from './_progress_step_color.jsx'
-export { default as ProgressStepCustomIcon } from './_progress_step_custom_icon.jsx'

data/app/pb_kits/playbook/pb_progress_step/progress_step.test.js

@@ -107,44 +107,3 @@ test('should render the children elements', () => {
   expect(step2Kit).toHaveClass('pb_progress_step_item_active')
   expect(step3Kit).toHaveClass('pb_progress_step_item_inactive')
 })
-
-test('should render info color', () => {
-render( 
-        <ProgressStep
-            aria={{ label: testId }}
-            color="info"
-            data={{ testid: testId }} 
-            variant="tracker"
-        >
-          <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
-          <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
-          <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
-        </ProgressStep> 
-        )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_progress_step_kit_horizontal_tracker_info')
-})
-
-test('should render custom icon', () => {
-render( 
-        <ProgressStep
-            aria={{ label: testId }}
-            data={{ testid: testId }} 
-            variant="tracker"
-        >
-          <ProgressStepItem icon="exclamation-triangle" 
-              status="complete"
-          >
-            {'Step 1'}
-          </ProgressStepItem>
-          <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
-          <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
-        </ProgressStep> 
-        )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_progress_step_kit_horizontal_tracker')
-  const icon = kit.getAttribute('aria-label', "exclamation-triangle-icon")
-  expect(icon).toBeDefined()
-})

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx

@@ -1,8 +1,6 @@
 import React from "react"
 import { useForm } from "react-hook-form"
-import Radio from "../_radio"
-import Body from "../../pb_body/_body"
-import Flex from "../../pb_flex/_flex"
+import { Radio, Flex, Body } from "playbook-ui"
 
 const RadioReactHook = () => {
   const { register, watch } = useForm({

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -96,7 +96,7 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
             <SectionSeparator orientation="vertical" />
             <ToolbarNodes editor={editor} />
             {
-              extensions && (
+              extensions && extensions.length > 0 && (
                 <>
                   <MoreExtensionsDropdown extensions={extensions}/>
                 </>

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

@@ -2,6 +2,10 @@ import React, { useEffect, useState, useRef } from 'react'
 import classnames from 'classnames'
 import { TrixEditor } from 'react-trix'
 
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import Link from '@tiptap/extension-link'
+
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
@@ -48,7 +52,8 @@ type RichTextEditorProps = {
   sticky?: boolean,
   template: string,
   value?: string,
-  maxWidth?: string
+  maxWidth?: string,
+  railsEditor?: boolean
 } & GlobalProps
 
 const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
@@ -81,6 +86,27 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     [showToolbarOnFocus, setShowToolbarOnFocus] = useState(false),
     containerRef = useRef<HTMLDivElement>(null)
 
+  const isRails = !advancedEditor && props.railsEditor === true
+
+  // TipTap editor for Rails (hook always runs per React rules, but only used when isRails is true)
+  const railsTipTapEditor = useEditor({
+    extensions: [StarterKit, Link],
+    content: value || '',
+    onUpdate: ({ editor }) => {
+      if (!isRails) return
+      
+      const html = editor.getHTML()
+      const text = editor.getText()
+      onChange(html, text)
+      
+      // Update hidden input for TipTap Rails form submission
+      const hiddenInput = document.getElementById(`hidden-input-${props.id || 'rich-text-editor'}`)
+      if (hiddenInput) {
+        (hiddenInput as HTMLInputElement).value = html ?? ''
+      }
+    },
+  }, [isRails, value])
+
   const htmlProps = buildHtmlProps(htmlOptions)
   
   const handleOnEditorReady = (editorInstance: Editor) => {
@@ -140,7 +166,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   }
 
   useEffect(() => {
-    if (!advancedEditor || !focus) return
+    const tiptapEditor = advancedEditor || railsTipTapEditor
+    if (!tiptapEditor || !focus) return
 
     const handleFocus = () => setShowToolbarOnFocus(true)
     
@@ -149,7 +176,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       setShowToolbarOnFocus(false)
     }
 
-    const editorElement = advancedEditor?.view?.dom
+    const editorElement = tiptapEditor?.view?.dom
     if (editorElement) {
       editorElement.addEventListener('focus', handleFocus)
     }
@@ -162,7 +189,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       }
       document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, [advancedEditor, focus])
+  }, [advancedEditor, railsTipTapEditor, focus])
 
   //============= end focus prop with advanced editor=================
 
@@ -173,6 +200,17 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     editor.insertHTML(template)
   }, [editor, template])
 
+  // Handle value prop changes for Rails TipTap editor
+  useEffect(() => {
+    if (!railsTipTapEditor) return
+    const currentContent = railsTipTapEditor.getHTML()
+    const newValue = value || ''
+
+    if (currentContent !== newValue) {
+      railsTipTapEditor.commands.setContent(newValue)
+    }
+  }, [railsTipTapEditor, value])
+
   useEffect(() => {
     if (!editor?.element) return
     editor.element.addEventListener('click', ({ target }: Event) => {
@@ -200,8 +238,11 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     className
   )
 
+  // Get the TipTap editor instance (either passed from React or auto-initialized for Rails)
+  const tipTapEditor = advancedEditor || (isRails ? railsTipTapEditor : null)
+
   // Determine if toolbar should be shown
-  const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
+  const shouldShowToolbar = focus && tipTapEditor ? showToolbarOnFocus : advancedEditorToolbar
 
   return (
     <div
@@ -212,20 +253,32 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         ref={focus ? containerRef : undefined}
     >
       {
-        advancedEditor ? (
+        // Render TipTap editor if indicated (React with advancedEditor or Rails by default (railsEditor is true), otherwise Trix
+        tipTapEditor ? (
           <div 
               className={classnames("pb_rich_text_editor_advanced_container", { 
               ["toolbar-active"]: shouldShowToolbar,
               })}
           >
             {shouldShowToolbar && (
-              <EditorToolbar editor={advancedEditor}
+              <EditorToolbar editor={tipTapEditor}
                   extensions={extensions}
                   simple={simple}
                   sticky={sticky}
               />
             )}
-          { children }
+            {/* EditorContent for Rails railsTipTapEditor, children for React TipTap advancedEditor */}
+            {railsTipTapEditor ? <EditorContent editor={tipTapEditor} /> : <>{children}</>}
+            
+            {/* Set up hidden input for TipTap Rails form submission */}
+            {railsTipTapEditor && (
+              <input 
+                  id={`hidden-input-${props.id || 'rich-text-editor'}`}
+                  name={name || 'content'}
+                  type="hidden" 
+                  value={tipTapEditor?.getHTML() ?? ''}
+              />
+            )}
           </div>
         ) : (
           <TrixEditor

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

@@ -0,0 +1,7 @@
+The Rails RichTextEditor is a React-Rendered-Rails component that uses [Tiptap](https://tiptap.dev/) and requires the following packages to be installed in your project:
+
+- `@tiptap/react`
+- `@tiptap/starter-kit`
+- `@tiptap/extension-link`
+
+Once installed, the editor is initialized automatically when you use the component. Unlike the [React Advanced RichTextEditor](https://playbook.powerapp.cloud/kits/rich_text_editor/react#advanced-default) variant, [custom extensions](https://playbook.powerapp.cloud/kits/rich_text_editor/react#advanced-extra-extensions) are not currently supported. The doc examples below showcase some preset prop-enabled Rails RichTextEditor customizations.

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

@@ -1,3 +1,11 @@
-<%= pb_rails("rich_text_editor", props: {focus: true}) %>
+<%= pb_rails("rich_text_editor", props: {
+    id: "focus-editor-1",
+    focus: true,
+    value: "Click inside to see the toolbar. Click outside to hide it."
+}) %>
 <br>
-<%= pb_rails("rich_text_editor", props: {focus: true}) %>
+<%= pb_rails("rich_text_editor", props: {
+    id: "focus-editor-2",
+    focus: true,
+    value: "When the optional focus prop is set to true, the toolbar will only show once you click in to the RichTextEditor."
+}) %>

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

@@ -0,0 +1 @@
+When the optional `inline` prop is set to true, the editor borders and the toolbar will only be visible when hovered or focused on. 

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

@@ -1,30 +1,38 @@
+<%= pb_rails("rich_text_editor", props: { 
+  id: "content-preview-editor",
+  margin_bottom: "md",
+  value: "Add text here, format it, and press \"Preview Output\" to see what your stylized output will look like on the page."
+}) %>
+
+<%= pb_rails("button", props: { id: "preview-button", text: "Preview Output", variant: "secondary" }) %>
 
-<%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
 <div id="card-obfuscation" style="display:none">
   <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
-   <div id="content-preview" class="trix-content">
+   <div id="content-preview" class="tiptap-content">
    </div>
   <% end %>
 </div>
-<%= pb_rails("button", props: { id: "preview-button", variant: "secondary", margin_top: "md" }) do %>
-  <span>Preview Output</span>
-<% end %>
 
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     function handleButtonClick() {
+      // Find the specific TipTap editor container by ID
       const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
         .find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"content-preview-editor"'))
 
-      const editorElement = editorContainer?.querySelector('trix-editor')
-      const inputId = editorElement?.getAttribute('input')
-      const inputElement = inputId && document.getElementById(inputId)
-      
-      const editorContent = inputElement?.value || '' 
+      if (!editorContainer) {
+        console.log('Editor container not found')
+        return
+      }
+
+      // Find the TipTap editor content
+      const tiptapEditor = editorContainer.querySelector('.ProseMirror')
       const previewArea = document.getElementById('content-preview')
       const cardDiv = document.getElementById('card-obfuscation')
 
-      if (previewArea && cardDiv) {
+      if (tiptapEditor && previewArea && cardDiv) {
+        // Get the HTML content from the TipTap editor
+        const editorContent = tiptapEditor.innerHTML || ''
         previewArea.innerHTML = editorContent 
         cardDiv.style.display = 'block'
       }

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

@@ -1 +1,5 @@
-<%= pb_rails("rich_text_editor", props: {simple: true, id: "simple"}) %>
+<%= pb_rails("rich_text_editor", props: {
+    id: "simple-editor",
+    simple: true,
+    value: "Add your text here. Use the simple toolbar above to format your text." 
+}) %>

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

@@ -1 +1 @@
-<%= pb_rails("rich_text_editor", props: {id: "sticky", sticky: true, value: "In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis."}) %>
+<%= pb_rails("rich_text_editor", props: {id: "sticky-editor", sticky: true, value: "In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis."}) %>

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

@@ -0,0 +1 @@
+Use the optional `sticky` prop to make the toolbar sticky on scroll.

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

@@ -3,10 +3,10 @@ examples:
   rails:
   - rich_text_editor_default: Default
   - rich_text_editor_simple: Simple
-  - rich_text_editor_attributes: Attributes
+  # - rich_text_editor_attributes: Attributes
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
-  - rich_text_editor_templates: Templates
+  # - rich_text_editor_templates: Templates
   # - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview

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

@@ -18,9 +18,15 @@ module Playbook
                             default: false
 
       prop :value
-      prop :template
       prop :placeholder
       prop :input_options
+      prop :advanced_editor_toolbar, type: Playbook::Props::Boolean,
+                                     default: true
+      prop :extensions, type: Playbook::Props::HashArray,
+                        default: []
+      prop :max_width, type: Playbook::Props::Enum,
+                       values: %w[xs sm md lg xl],
+                       default: "md"
 
       def classname
         generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
@@ -40,17 +46,20 @@ module Playbook
 
       def rich_text_options
         {
-          id: id,
-          inline: inline,
+          advancedEditorToolbar: advanced_editor_toolbar,
           className: classname,
+          extensions: extensions,
           focus: focus,
+          id: id,
+          inline: inline,
+          inputOptions: input_options,
+          maxWidth: max_width,
+          placeholder: placeholder,
+          railsEditor: true,
           simple: simple,
           sticky: sticky,
           toolbarBottom: toolbar_bottom,
-          value: value,
-          template: template,
-          placeholder: placeholder,
-          inputOptions: input_options,
+          value: value || "",
         }
       end
     end

data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx

@@ -1,8 +1,6 @@
 import React, { useState } from "react"
 import { useForm } from "react-hook-form"
-import Select from "../_select"
-import Body from "../../pb_body/_body"
-import Button from "../../pb_button/_button"
+import { Button, Body, Select } from "playbook-ui"
 
 const SelectReactHook = (props) => {
   const { register, handleSubmit, formState: { errors } } = useForm({

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -119,22 +119,21 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.add('sticky-left-shadow');
                     }
 
-                    const headerWidth = (header as HTMLElement).offsetWidth;
-                    accumulatedWidth += headerWidth;
+                    accumulatedWidth += (header as HTMLElement).offsetWidth;
+                }
 
-                    cells.forEach((cell) => {
-                        cell.classList.add('sticky');
-                        (cell as HTMLElement).style.left = `${accumulatedWidth - headerWidth}px`;
+                cells.forEach((cell) => {
+                    cell.classList.add('sticky');
+                    (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
-                        if (!isLastColumn) {
-                            cell.classList.add('with-border-right');
-                            cell.classList.remove('sticky-left-shadow');
-                        } else {
-                            cell.classList.remove('with-border-right');
-                            cell.classList.add('sticky-left-shadow');
-                        }
-                    });
-                }
+                    if (!isLastColumn) {
+                        cell.classList.add('with-border-right');
+                        cell.classList.remove('sticky-left-shadow');
+                    } else {
+                        cell.classList.remove('with-border-right');
+                        cell.classList.add('sticky-left-shadow');
+                    }
+                });
             });
         };
 
@@ -171,22 +170,21 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.add('sticky-right-shadow');
                     }
 
-                    const headerWidth = (header as HTMLElement).offsetWidth;
-                    accumulatedWidth += headerWidth;
+                    accumulatedWidth += (header as HTMLElement).offsetWidth;
+                }
 
-                    cells.forEach((cell) => {
-                        cell.classList.add('sticky');
-                        (cell as HTMLElement).style.right = `${accumulatedWidth - headerWidth}px`;
+                cells.forEach((cell) => {
+                    cell.classList.add('sticky');
+                    (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
-                        if (!isLastColumn) {
-                            cell.classList.add('with-border-left');
-                            cell.classList.remove('sticky-right-shadow');
-                        } else {
-                            cell.classList.remove('with-border-left');
-                            cell.classList.add('sticky-right-shadow');
-                        }
-                    });
-                }
+                    if (!isLastColumn) {
+                        cell.classList.add('with-border-left');
+                        cell.classList.remove('sticky-right-shadow');
+                    } else {
+                        cell.classList.remove('with-border-left');
+                        cell.classList.add('sticky-right-shadow');
+                    }
+                });
             });
         };
 

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -8,25 +8,6 @@
       border-right: 1px solid $border_light !important;
     }
 
-    // **Advanced Table** specific rules to eliminate double borders when vertical-border is active
-    .pb_advanced_table &,
-    &[data-vertical-border="true"] {
-      // Remove first column box-shadow (preserve border-right in Chrome and use CSS var to respect column group border colors)
-      .table-header-cells:first-child,
-      .table-header-cells-custom:first-child,
-      td:first-child,
-      .pb_table_td:first-child,
-      .checkbox-cell.checkbox-cell-header:first-child {
-        box-shadow: none !important;
-        border-right: 1px solid var(--column-border-color, #{$border_light}) !important;
-      }
-
-      .pb_table_td:nth-child(2) {
-        box-shadow: none !important;
-      }
-    }
-    // --- End Advanced Table First Column Code Section ---
-
     @media screen and (min-width: $screen-xs-min) {
       tr:hover, .pb_table_tr:hover {
         td:last-child, .pb_table_td:last-child {
@@ -82,35 +63,5 @@
         }
       }
     }
-
-    // Dark mode support for advanced tables
-    .pb_advanced_table.dark & {
-      td, th, .pb_table_td, .pb_table_th {
-        border-right: 1px solid $border_dark !important;
-      }
-
-      thead tr th {
-        border-right: 1px solid $border_dark !important;
-      }
-
-      &[data-vertical-border="true"] {
-        .table-header-cells:first-child,
-        .table-header-cells-custom:first-child,
-        td:first-child,
-        .pb_table_td:first-child,
-        .checkbox-cell.checkbox-cell-header:first-child {
-          border-right: 1px solid var(--column-border-color, #{$border_dark}) !important;
-        }
-      }
-
-      @media screen and (min-width: $screen-xs-min) {
-        tr:hover, .pb_table_tr:hover {
-          td:last-child, .pb_table_td:last-child {
-            border-right-color: darken($border_dark, 10%) !important;
-          }
-        }
-      }
-    }
-    // --- End Advanced Table Dark Mode Code Section ---
   }
 }

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-import Tooltip from '../_tooltip'
-import Button from '../../pb_button/_button'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
 
 const TooltipSizing = (props) => {
 

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -161,10 +161,6 @@
   .typeahead-plus-icon {
     color: $text_lt_lighter;
   }
-  .pb_badge_kit_primary {
-    margin-bottom: 2px;
-    margin-top: 2px;
-  }
   .pb_badge_kit_primary span {
     line-height: 16.5px;
     letter-spacing: normal;

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -62,7 +62,6 @@ const MultiValue = (props: Props) => {
             className={pillClassName}
             closeProps={removeProps}
             htmlOptions={{onKeyDown:handleKeyDown}}
-            marginRight="xs"
             removeIcon
             tabIndex={0}
             text={label}