RubyGems - playbook_ui_docs - Versions diffs - 16.3.0.pre.alpha.play284914770 → 16.3.0.pre.alpha.play285814889 - Mend

playbook_ui_docs 16.3.0.pre.alpha.play284914770 → 16.3.0.pre.alpha.play285814889

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8a9c4c55a34ed20163b96c3aed1180d4ff8e2f1335ccca59b59091a3a384495c
-  data.tar.gz: ef35842aa2b6ee61e13302c8370d911e618d4d11fec735473d670edac10656e3
+  metadata.gz: 22e0f89223c61e36588232c3bb4007f762fa5b2744b84968a842126baeee495b
+  data.tar.gz: 11f02cbe0dfb6e47296421e1a2ca123d8433844bc92fd105ce0774f100c3b79e
 SHA512:
-  metadata.gz: 2da2f955fd09b23d85d645a3f7b8c8b958643750e1bb02d1fe2b9f4e1e82f34594040081f61b459a6474c9216d197a0b1f656391f480924e8dab7001a30993f4
-  data.tar.gz: 7bd6b76a659154e6a2e1ec1e53961d7b29bd17d8a189f98cf64f7d1e9013069cc362aef60556106783837e1e1f86bfa673ef6f86715e66531dd9f5aba55e6d94
+  metadata.gz: 25cd200a848064e0c3f74fcbd1f864d7340930397c64f8e84b05d5735554945b8bfa5e2fb3d2ffec3a52d38a2aa2caa84c39fdd94404eb3325caac0363ae69af
+  data.tar.gz: b8dd1bc01692c1f5f9422b1f898bf2d09ee02a443f6b8d0747d625ed58ea88cc2d4f4942ea5cf2de13140c2d4ca4c7c3b24b7ea568efb6d3cc89f966ddf7c584

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb CHANGED Viewed

@@ -28,7 +28,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("textarea", props: {id: "default"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx CHANGED Viewed

@@ -4,7 +4,7 @@ import Body from '../../pb_body/_body'
 import Button from '../../pb_button/_button'
 import Caption from '../../pb_caption/_caption'
 import Dialog from '../../pb_dialog/_dialog'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Textarea from '../../pb_textarea/_textarea'
 import Typeahead from '../../pb_typeahead/_typeahead'
 const DialogCompound = () => {
@@ -25,8 +25,11 @@ const DialogCompound = () => {
           <Body>{'What do you need us to take care of?'}</Body>
         </Dialog.Header>
         <Dialog.Body>
-          <Caption marginBottom="xs">{'Description'}</Caption>
-          <RichTextEditor />
+          <Textarea
+              id="default-example-1"
+              label="Description"
+              rows={4}
+          />
           <br />
           <Caption>
             {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb CHANGED Viewed

@@ -1,11 +1,20 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-1"} }) %>
-<%= pb_rails("dialog", props: {
-    id:"dialog-1",
-    size: "sm",
-    title: "Header Title is the Title Prop",
-    text: "Hello Body Text, Nice to meet ya.",
-    cancel_button: "Cancel Button",
-    confirm_button: "Okay",
-    confirm_button_id: "confirm-button-1"
-}) %>
+<%= pb_rails("dialog", props: {
+        id:"dialog-1",
+        size: "md",
+        title: "Header Title is the Title Prop"
+}) do %>
+    <%= pb_rails("dialog/dialog_body") do %>
+        <%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg", text: "Button Primary" }) %>
+        <div style="height: 800px; background-color: lightgray;"></div>
+        <%= pb_rails("button", props: { loading: true, text: "Loading..." }) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_footer") do %>
+        <%= pb_rails("flex", props: { spacing: "between", padding_x: "md", padding_bottom: "md", padding: "sm" }) do %>
+            <%= pb_rails("button", props: { loading: true, text: "Send My Issue" }) %>
+            <%= pb_rails("button", props: { text: "Back", variant: "link", data: {"close-dialog": "dialog-1"} }) %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx CHANGED Viewed

@@ -12,16 +12,35 @@ const DialogDefault = () => {
     <>
       <Button onClick={open}>{'Open Dialog'}</Button>
       <Dialog
-          cancelButton="Cancel Button"
-          confirmButton="Okay"
           onCancel={close}
           onClose={close}
           onConfirm={close}
           opened={isOpen}
-          size="sm"
-          text="Hello Body Text, Nice to meet ya."
+          size="md"
           title="Header Title is the Title Prop"
-      />
+      >
+        <Dialog.Body>
+            <Button
+                aria={{ label: 'Loading' }}
+                loading
+                text="Button Primary"
+            />
+            <div style={{height: '800px', backgroundColor: 'lightgray'}} />
+            <Button
+                loading
+                text="Loading..."
+            />
+          </Dialog.Body>
+          <Dialog.Footer>
+            <Button
+                loading
+                text="Send My Issue"
+            />
+            <Button  variant="link">
+              {"Back"}
+            </Button>
+          </Dialog.Footer>
+        </Dialog>
     </>
   )
 }

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb CHANGED Viewed

@@ -12,7 +12,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("textarea", props: {id: "default-7"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
@@ -31,7 +31,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-8"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
@@ -49,7 +49,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-9"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx CHANGED Viewed

@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
 import Dialog from '../../pb_dialog/_dialog'
 import Flex from '../../pb_flex/_flex'
 import Caption from '../../pb_caption/_caption'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Textarea from '../../pb_textarea/_textarea'
 import Typeahead from '../../pb_typeahead/_typeahead'
 const useDialog = (visible = false) => {
@@ -77,8 +77,11 @@ const DialogFullHeight = () => {
               <Body>{title}</Body>
             </Dialog.Header>
             <Dialog.Body>
-              <Caption marginBottom="xs">{"Description"}</Caption>
-              <RichTextEditor />
+              <Textarea
+                  id="default-example-1"
+                  label="Description"
+                  rows={4}
+              />
               <br />
               <Caption>
                 {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb CHANGED Viewed

@@ -13,7 +13,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("textarea", props: {id: "default-2"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
     <% end %>
@@ -32,7 +32,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-3"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <% end %>
@@ -50,7 +50,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-4"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx CHANGED Viewed

@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
 import Dialog from '../../pb_dialog/_dialog'
 import Flex from '../../pb_flex/_flex'
 import Caption from '../../pb_caption/_caption'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Textarea from "../../pb_textarea/_textarea";
 import Typeahead from '../../pb_typeahead/_typeahead'
 const useDialog = (visible = false) => {
@@ -76,8 +76,11 @@ const DialogFullHeightPlacement = () => {
               <Body>{title}</Body>
             </Dialog.Header>
             <Dialog.Body>
-              <Caption marginBottom="xs">{"Description"}</Caption>
-              <RichTextEditor />
+              <Textarea
+                  id={`default-example-2-${index}`}
+                  label="Description"
+                  rows={4}
+              />
               <br />
               <Caption>
                 {

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.html.erb ADDED Viewed

@@ -0,0 +1,16 @@
+<%
+  options = [
+    { label: "United States", value: "unitedStates", id: "us" },
+    { label: "Canada", value: "canada", id: "ca" },
+    { label: "Pakistan", value: "pakistan", id: "pk" },
+  ]
+%>
+<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Any" }) %>
+<%= pb_rails("dropdown", props: { options: options, close_on_click: "any", margin_bottom: "md" }) %>
+<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outside" }) %>
+<%= pb_rails("dropdown", props: { options: options, close_on_click: "outside", margin_bottom: "md" }) %>
+<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Inside" }) %>
+<%= pb_rails("dropdown", props: { options: options, close_on_click: "inside" }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.md ADDED Viewed

@@ -0,0 +1 @@

+ The `close_on_click` prop allows you to control when the Dropdown closes in response to click interactions. The value `any` reflects the default behavior, where the dropdown will close after any click. Set it to `outside` to ensure interactive elements as dropdown options are able to be interacted with or modified. Set it to `inside` for a dropdown that only closes when the input or dropdown menu is clicked.

data/app/pb_kits/playbook/pb_dropdown/docs/example.yml CHANGED Viewed

@@ -25,6 +25,7 @@ examples:
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_clearable: Clearable
   - dropdown_with_constrain_height_rails: Constrain Height
+  - dropdown_closing_options_rails: Closing Options
   - dropdown_quickpick_rails: Quick Pick Variant
   - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
@@ -32,7 +33,6 @@ examples:
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
   - dropdown_required_indicator: Required Indicator
-  - dropdown_custom_event_type: Custom Event Type
   react:
   - dropdown_default: Default

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx CHANGED Viewed

@@ -1,5 +1,10 @@
 import React, { useState } from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Caption from '../../pb_caption/_caption'
+// The TrixEditor and Trix imports are required for the Legacy RichTextEditor to work
+// They are passed as props to the RichTextEditor kit
+import { TrixEditor } from 'react-trix'
+import Trix from 'trix'
 const RichTextEditorDefault = (props) => {
   const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
@@ -7,11 +12,62 @@ const RichTextEditorDefault = (props) => {
   return (
     <div>
+      <Caption marginBottom="xs"
+          text="Default"
+      />
       <RichTextEditor
+          TrixEditor={TrixEditor}
           onChange={handleOnChange}
+          trixInstance={Trix}
           value={value}
           {...props}
       />
+      <br/>
+      <Caption marginBottom="xs"
+          text="Simple"
+      />
+      <RichTextEditor
+          TrixEditor={TrixEditor}
+          simple
+          trixInstance={Trix}
+          {...props}
+      />
+      <br/>
+      <Caption marginBottom="xs"
+          text="Focus"
+      />
+      <RichTextEditor
+          TrixEditor={TrixEditor}
+          focus
+          trixInstance={Trix}
+          {...props}
+      />
+      <br/>
+      <Caption marginBottom="xs"
+          text="Inline"
+      />
+      <RichTextEditor
+          TrixEditor={TrixEditor}
+          id="inline"
+          inline
+          toolbarBottom
+          trixInstance={Trix}
+          value="Try hovering over this text. Then try modifying it or adding more of your own text."
+          {...props}
+      />
+      <br/>
+      <Caption marginBottom="xs"
+          text="Sticky"
+      />
+      <RichTextEditor
+          TrixEditor={TrixEditor}
+          id="sticky"
+          sticky
+          trixInstance={Trix}
+          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."
+          {...props}
+    />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ IMPORTANT: The Trix version of the RichTextEditor is a Legacy kit and no longer being actively maintained. Please use the advanced Editor above.

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

@@ -1,40 +1,32 @@
 examples:
   rails:
-  - rich_text_editor_default: Default
-  - rich_text_editor_simple: Simple
-  - rich_text_editor_attributes: Attributes
-  - rich_text_editor_focus: Focus
-  - rich_text_editor_sticky: Sticky
-  - rich_text_editor_templates: Templates
-  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
-  - rich_text_editor_inline: Inline
-  - rich_text_editor_required_indicator: Required Indicator
-  - rich_text_editor_preview: Preview
   react:
-  - rich_text_editor_default: Default
   - rich_text_editor_advanced_default: Advanced Default
   - rich_text_editor_more_extensions: Advanced (Extra Extensions)
   - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
-  - rich_text_editor_simple: Simple
   - rich_text_editor_advanced_simple: Advanced (Simple)
-  - rich_text_editor_attributes: Attributes
   - rich_text_editor_advanced_attributes: Advanced (Attributes)
-  - rich_text_editor_focus: Focus
   - rich_text_editor_advanced_focus: Advanced (Focus)
-  - rich_text_editor_sticky: Sticky
   - rich_text_editor_advanced_sticky: Advanced (Sticky)
-  - rich_text_editor_templates: Templates
   - rich_text_editor_advanced_templates: Advanced (Templates)
-  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
-  - rich_text_editor_inline: Inline
   - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_advanced_height: Advanced Height
   - rich_text_editor_advanced_min_height: Advanced Min Height
-  - rich_text_editor_label: Label
   - rich_text_editor_advanced_label: Advanced (Label)
-  - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
-  - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview
+  - rich_text_editor_default: Legacy Default (Trix)

data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js CHANGED Viewed

@@ -1,12 +1,4 @@
 export { default as RichTextEditorDefault } from './_rich_text_editor_default.jsx'
-export { default as RichTextEditorSimple } from './_rich_text_editor_simple.jsx'
-export { default as RichTextEditorAttributes } from './_rich_text_editor_attributes.jsx'
-export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
-export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
-export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'
-export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
-export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
-export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
 export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
 export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
 export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
@@ -19,7 +11,5 @@ export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_adv
 export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
 export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
 export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
-export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
 export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'
-export { default as RichTextEditorLabel } from './_rich_text_editor_label.jsx'
 export { default as RichTextEditorAdvancedLabel } from './_rich_text_editor_advanced_label.jsx'

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.3.0.pre.alpha.play284914770
+  version: 16.3.0.pre.alpha.play285814889
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-03-03 00:00:00.000000000 Z
+date: 2026-03-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -861,8 +861,8 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb
@@ -1972,31 +1972,10 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md
+- 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_preview.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx
 - 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

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.html.erb DELETED Viewed

@@ -1,224 +0,0 @@
-<%
-  default_options = [
-    { label: 'United States', value: 'unitedStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'Mexico', value: 'Mexico', id: 'mx' },
-  ]
-  multi_options = [
-    { label: 'United States', value: 'unitedStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
-    { label: 'India', value: 'india', id: 'in' },
-    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
-  ]
-  autocomplete_options = [
-    { label: "United States", value: "unitedStates", areaCode: "+1", icon: "🇺🇸", id: "us" },
-    { label: "United Kingdom", value: "unitedKingdom", areaCode: "+44", icon: "🇬🇧", id: "gb" },
-    { label: "Pakistan", value: "pakistan", areaCode: "+92", icon: "🇵🇰", id: "pk" },
-  ]
-  custom_display_options = [
-    { label: "Strong Bad", value: "strongBad", id: "strong-bad", status: "Offline" },
-    { label: "Strong Mad", value: "strongMad", id: "strong-mad", status: "Online" },
-    { label: "Strong Sad", value: "strongSad", id: "strong-sad", status: "Away" },
-  ]
-  custom_display_content = capture do
-    pb_rails("flex", props: { align: "center" }) do
-      concat(pb_rails("avatar", props: { name: "", size: "xs", id: "cet-dropdown-avatar" }))
-      concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "cet-dropdown-avatar-name" }))
-      concat(pb_rails("badge", props: { text: "", id: "cet-dropdown-avatar-status" }))
-    end
-  end
-%>
-<!-- Example 1: Default dropdown -->
-<%= pb_rails("dropdown", props: {
-  custom_event_type: "form:submitted,pb:dropdown:clearRequest",
-  id: "dropdown-default-cet",
-  label: "Default dropdown",
-  margin_bottom: "sm",
-  options: default_options,
-}) %>
-<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
-  <%= pb_rails("button", props: { id: "clear-default-cet", text: "Clear", variant: "primary" }) %>
-  <%= pb_rails("button", props: { id: "select-default-cet", text: "Select Canada", variant: "secondary" }) %>
-  <%= pb_rails("button", props: { id: "simulate-default-cet", text: "Simulate form submit", variant: "secondary" }) %>
-<% end %>
-<script>
-  (function() {
-    var id = "dropdown-default-cet";
-    document.getElementById("clear-default-cet").addEventListener("click", function() {
-      document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
-    });
-    document.getElementById("select-default-cet").addEventListener("click", function() {
-      document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "ca" } }));
-    });
-    document.getElementById("simulate-default-cet").addEventListener("click", function() {
-      document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
-    });
-  })();
-</script>
-<!-- Example 2: Multi select -->
-<%= pb_rails("dropdown", props: {
-  custom_event_type: "form:submitted,pb:dropdown:clearRequest",
-  id: "dropdown-multi-cet",
-  label: "Multi select dropdown",
-  margin_bottom: "sm",
-  multi_select: true,
-  options: multi_options,
-}) %>
-<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
-  <%= pb_rails("button", props: { id: "clear-multi-cet", text: "Clear", variant: "primary" }) %>
-  <%= pb_rails("button", props: { id: "select-multi-cet", text: "Select US + UK", variant: "secondary" }) %>
-  <%= pb_rails("button", props: { id: "simulate-multi-cet", text: "Simulate form submit", variant: "secondary" }) %>
-<% end %>
-<script>
-  (function() {
-    var id = "dropdown-multi-cet";
-    document.getElementById("clear-multi-cet").addEventListener("click", function() {
-      document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
-    });
-    document.getElementById("select-multi-cet").addEventListener("click", function() {
-      document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionIds: ["us", "uk"] } }));
-    });
-    document.getElementById("simulate-multi-cet").addEventListener("click", function() {
-      document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
-    });
-  })();
-</script>
-<!-- Example 3: Autocomplete -->
-<%= pb_rails("dropdown", props: {
-  autocomplete: true,
-  custom_event_type: "form:submitted,pb:dropdown:clearRequest",
-  id: "dropdown-autocomplete-cet",
-  label: "Autocomplete dropdown",
-  margin_bottom: "sm",
-  options: autocomplete_options,
-}) %>
-<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
-  <%= pb_rails("button", props: { id: "clear-autocomplete-cet", text: "Clear", variant: "primary" }) %>
-  <%= pb_rails("button", props: { id: "select-autocomplete-cet", text: "Select Pakistan", variant: "secondary" }) %>
-  <%= pb_rails("button", props: { id: "simulate-autocomplete-cet", text: "Simulate form submit", variant: "secondary" }) %>
-<% end %>
-<script>
-  (function() {
-    var id = "dropdown-autocomplete-cet";
-    document.getElementById("clear-autocomplete-cet").addEventListener("click", function() {
-      document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
-    });
-    document.getElementById("select-autocomplete-cet").addEventListener("click", function() {
-      document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "pk" } }));
-    });
-    document.getElementById("simulate-autocomplete-cet").addEventListener("click", function() {
-      document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
-    });
-  })();
-</script>
-<!-- Example 4: Quick pick (Date Range) -->
-<%= pb_rails("dropdown", props: {
-  custom_event_type: "form:submitted,pb:dropdown:clearRequest",
-  id: "dropdown-quickpick-cet",
-  label: "Quickpick dropdown",
-  margin_bottom: "sm",
-  variant: "quickpick",
-}) %>
-<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
-  <%= pb_rails("button", props: { id: "clear-quickpick-cet", text: "Clear", variant: "primary" }) %>
-  <%= pb_rails("button", props: { id: "select-quickpick-cet", text: "Select This Week", variant: "secondary" }) %>
-  <%= pb_rails("button", props: { id: "simulate-quickpick-cet", text: "Simulate form submit", variant: "secondary" }) %>
-<% end %>
-<script>
-  (function() {
-    var id = "dropdown-quickpick-cet";
-    document.getElementById("clear-quickpick-cet").addEventListener("click", function() {
-      document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
-    });
-    document.getElementById("select-quickpick-cet").addEventListener("click", function() {
-      document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "quickpick-this-week" } }));
-    });
-    document.getElementById("simulate-quickpick-cet").addEventListener("click", function() {
-      document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
-    });
-  })();
-</script>
-<!-- Example 5: Custom display -->
-<%= pb_rails("dropdown", props: {
-  custom_event_type: "form:submitted,pb:dropdown:clearRequest",
-  id: "dropdown-custom-display-cet",
-  label: "Custom display (Subcomponent) dropdown",
-  margin_bottom: "sm",
-  options: custom_display_options,
-}) do %>
-  <%= pb_rails("dropdown/dropdown_trigger", props: { placeholder: "Select a User", custom_display: custom_display_content }) %>
-  <%= pb_rails("dropdown/dropdown_container") do %>
-    <% custom_display_options.each do |option| %>
-      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
-        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
-          <%= pb_rails("flex/flex_item") do %>
-            <%= pb_rails("user", props: { name: option[:label], align: "left", avatar: true, orientation: "horizontal" }) %>
-          <% end %>
-          <%= pb_rails("flex/flex_item") do %>
-            <%= pb_rails("badge", props: { rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
-  <%= pb_rails("button", props: { id: "clear-custom-display-cet", text: "Clear", variant: "primary" }) %>
-  <%= pb_rails("button", props: { id: "select-custom-display-cet", text: "Select Strong Sad", variant: "secondary" }) %>
-  <%= pb_rails("button", props: { id: "simulate-custom-display-cet", text: "Simulate form submit", variant: "secondary" }) %>
-<% end %>
-<script>
-  (function() {
-    var id = "dropdown-custom-display-cet";
-    document.getElementById("clear-custom-display-cet").addEventListener("click", function() {
-      document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
-    });
-    document.getElementById("select-custom-display-cet").addEventListener("click", function() {
-      document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "strong-sad" } }));
-    });
-    document.getElementById("simulate-custom-display-cet").addEventListener("click", function() {
-      document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
-    });
-    document.addEventListener("pb:dropdown:selected", function(e) {
-      if (e.target && e.target.id === id && e.detail) {
-        var display = e.target.querySelector("[data-dropdown-trigger-custom-display]");
-        if (!display) return;
-        var nameEl = display.querySelector("#cet-dropdown-avatar-name");
-        if (nameEl) nameEl.textContent = e.detail.label;
-        var avatarEl = display.querySelector("#cet-dropdown-avatar");
-        if (avatarEl) {
-          var wrapper = avatarEl.querySelector(".avatar_wrapper");
-          if (wrapper) {
-            var initials = (e.detail.label[0] + (e.detail.label.split(" ").pop() || "")[0]).toUpperCase();
-            wrapper.dataset.name = e.detail.label;
-            wrapper.setAttribute("data-initials", initials);
-          }
-        }
-        var badgeEl = display.querySelector("#cet-dropdown-avatar-status");
-        if (badgeEl && e.detail.status) {
-          var variant = e.detail.status === "Online" ? "success" : e.detail.status === "Offline" ? "neutral" : "warning";
-          badgeEl.querySelector("span").textContent = e.detail.status;
-          badgeEl.className = "pb_badge_kit_" + variant;
-        }
-      }
-    });
-  })();
-</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.md DELETED Viewed

@@ -1,7 +0,0 @@
-The `custom_event_type` prop lets the dropdown clear when specific events are dispatched. Set it to a comma-separated list of event names (e.g. Turbo or app-specific); when any of those events fire with optional `detail: { dropdownId }`, the matching dropdown clears. You can also listen for selection changes (`pb:dropdown:selected`), clear by dispatching `pb:dropdown:clear`, or set the selection by dispatching `pb:dropdown:select` with `detail: { dropdownId, optionId }` (or `optionIds` for multi-select).
-The examples show five distinct variants (default, multi select, autocomplete, quick pick, custom display). In each example, the first button clears the dropdown by dispatching a custom event that the dropdown listens for via `custom_event_type`. The second button sets the selection by dispatching `pb:dropdown:select`. The third button simulates a form submit by dispatching another custom event in `custom_event_type`, so the dropdown clears as it would after a real form submission.
-Turbo events (e.g. `turbo:frame-load`, `turbo:frame-render`, `turbo:submit-end`) often fire for many actions or across the page, so using them as `custom_event_type` can clear the dropdown more often than intended. Use them when that scope is what you want; otherwise use app-specific event names and dispatch with `detail: { dropdownId }` when the action happens, or dispatch `pb:dropdown:clear` from your own handler.
-Dropdowns with subcomponent structures that show custom displays (e.g. custom trigger or custom display) require a `pb:dropdown:selected` listener to update the visible UI from `event.detail` when a selection is made; clear is handled by the kit.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb DELETED Viewed

@@ -1,5 +0,0 @@
-<%= pb_rails("rich_text_editor", props: {
-  aria: { label: "rich-textarea" },
-  data: { key: "value", key2: "value2" },
-  name: "textarea-label",
-}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx DELETED Viewed

@@ -1,15 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-const RichTextEditorAttributes = (props) => (
-  <div>
-    <RichTextEditor
-        aria={{ label: 'rich textarea' }}
-        data={{ key: 'value', key2: 'value2' }}
-        name="name-attribute"
-        {...props}
-    />
-  </div>
-)
-export default RichTextEditorAttributes

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb DELETED Viewed

	@@ -1 +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_focus.html.erb DELETED Viewed

@@ -1,3 +0,0 @@
-<%= pb_rails("rich_text_editor", props: {focus: true}) %>
-<br>
-<%= pb_rails("rich_text_editor", props: {focus: true}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx DELETED Viewed

@@ -1,17 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-const RichTextEditorFocus = (props) => (
-  <>
-    <RichTextEditor
-        focus
-        {...props}
-    />
-    <br />
-    <RichTextEditor
-        focus
-        {...props}
-    />
-  </>
-)
-export default RichTextEditorFocus

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb DELETED Viewed

@@ -1,6 +0,0 @@
-<%= pb_rails("rich_text_editor", props: {
-  id: "inline",
-  inline: true,
-  toolbar_bottom: true,
-  value: "Try hovering over this text. Then try modifying it or adding more of your own text."
-}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx DELETED Viewed

@@ -1,16 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-const RichTextEditorInline = (props) => (
-  <div>
-    <RichTextEditor
-        id="inline"
-        inline
-        toolbarBottom
-        value="Try hovering over this text. Then try modifying it or adding more of your own text."
-        {...props}
-    />
-  </div>
-)
-export default RichTextEditorInline

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx DELETED Viewed

@@ -1,28 +0,0 @@
-import React, { useState } from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-const RichTextEditorLabel = (props) => {
-  const [value, setValue] = useState(''),
-  handleOnChange = (html) => setValue(html)
-  return (
-    <div>
-      <RichTextEditor
-          id="example"
-          label="Example Label"
-          onChange={handleOnChange}
-          value={value}
-          {...props}
-      />
-      <br/>
-      <RichTextEditor
-          label="Example Label No ID"
-          onChange={handleOnChange}
-          value={value}
-          {...props}
-      />
-    </div>
-  )
-}
-export default RichTextEditorLabel

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md DELETED Viewed

	@@ -1 +0,0 @@
1	- The optional `label` prop adds a visible label to the editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.

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

@@ -1,35 +0,0 @@
-<%= 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>
-  <% 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() {
-      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 || ''
-      const previewArea = document.getElementById('content-preview')
-      const cardDiv = document.getElementById('card-obfuscation')
-      if (previewArea && cardDiv) {
-        previewArea.innerHTML = editorContent
-        cardDiv.style.display = 'block'
-      }
-    }
-    document.getElementById('preview-button')?.addEventListener('click', handleButtonClick)
-  })
-</script>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx DELETED Viewed

@@ -1,45 +0,0 @@
-import React, { useState } from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Button from '../../pb_button/_button'
-import Card from '../../pb_card/_card'
-const RichTextEditorPreview = (props) => {
-  const [showPreview, setShowPreview] = useState(false)
-  const [previewText, setPreviewText] = useState(<div />)
-  const handleChange = (event) => setPreviewText(event)
-  const handleClick = () => {
-    setShowPreview(true)
-  }
-  return (
-    <div>
-      <RichTextEditor
-          id="content-preview-editor"
-          onChange={handleChange}
-          {...props}
-      />
-      {showPreview && (
-        <Card marginTop="md">
-          <div
-              className="trix-content"
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{ __html: previewText }}
-              id="preview-content"
-          />
-        </Card>
-      )}
-      {!showPreview && (
-        <div />
-      )}
-      <Button
-          id="preview-button"
-          marginTop="md"
-          onClick={handleClick}
-          text="Preview Output"
-          variant="secondary"
-      />
-    </div>
-  )
-}
-export default RichTextEditorPreview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb DELETED Viewed

@@ -1,10 +0,0 @@
-<%= pb_rails("rich_text_editor", props: {
-  id: "required-indicator",
-  input_options: {
-    id: 'hidden_input_id',
-    name: "hidden_input_name"
-  },
-  label: "Label",
-  required_indicator: true,
-  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_required_indicator.jsx DELETED Viewed

@@ -1,22 +0,0 @@
-import React, { useState } from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-const RichTextEditorRequiredIndicator = (props) => {
-  const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
-  handleOnChange = (html) => setValue(html)
-  return (
-    <div>
-      <RichTextEditor
-          inputOptions = {{ id: "required" }}
-          label="Label"
-          onChange={handleOnChange}
-          requiredIndicator
-          value={value}
-          {...props}
-      />
-    </div>
-  )
-}
-export default RichTextEditorRequiredIndicator

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md DELETED Viewed

@@ -1,3 +0,0 @@
-The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
-You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

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

	@@ -1 +0,0 @@
1	- <%= pb_rails("rich_text_editor", props: {simple: true, id: "simple"}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx DELETED Viewed

@@ -1,13 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-const RichTextEditorSimple = (props) => (
-  <div>
-    <RichTextEditor
-        simple
-        {...props}
-    />
-  </div>
-)
-export default RichTextEditorSimple

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

@@ -1 +0,0 @@

- <%= 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."}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx DELETED Viewed

@@ -1,15 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-const RichTextEditorSticky = (props) => (
-  <div>
-    <RichTextEditor
-        id="sticky"
-        sticky
-        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."
-        {...props}
-    />
-  </div>
-)
-export default RichTextEditorSticky

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.html.erb DELETED Viewed

@@ -1,115 +0,0 @@
-<% changelog = "<div>
-    <strong>Changelog:<br></strong>
-    [INSERT LINK]<br><br>
-    You can test the normal spots of Playbook rails and react on
-    dev docs plus the following:
-  </div>
-  <div>
-    <br>
-  </div>" %>
-<% release = "<div>
-    <div>
-      <strong>Story Background</strong>
-    </div>
-    <div>
-      Follow the{' '}
-      <a href='https://github.com/powerhome/playbook/wiki/Release-Team-Guide'>
-        release process
-      </a>{' '}
-      to create a new version, create a gem, and package. Create a Ninja testing
-      plan, then update Nitro with the new version.
-    </div>
-    <div>
-      <br />
-    </div>
-    <div>
-      <strong>Timeline / Due Date</strong>
-    </div>
-    <div>
-      <em>Release End of business Thursday</em>
-    </div>
-    <div>
-      <em>Testing on Nitro End of business Friday</em>
-    </div>
-    <div>
-      <br />
-    </div>
-    <div>
-      <strong>Definition of done</strong>
-    </div>
-    <ol>
-      <li>Merge all PR’s</li>
-      <li>Update the final CHANGELOG</li>
-      <li>Version up and generate NPM, and RubyGem</li>
-      <li>Create next version branch and milestone</li>
-      <li>Update default branch and branch protection rules&nbsp;</li>
-      <li>Notify Everyone of new version</li>
-      <li>
-        Generate testing plan and pages to test for Ninjas (update runway
-        ticket)
-      </li>
-      <li>Update version on Nitro and get on Demo</li>
-      <li>Send Ninjas demo and runway ticket for testing</li>
-      <li>Ninja Approved + PR Approved</li>
-    </ol>
-    <div>
-      <br />
-    </div>
-    <div>
-      <strong>Stakeholders / Sign-off</strong>
-    </div>
-    <ul>
-      <li>Code Owners</li>
-    </ul>
-    <div>
-      <br />
-      <strong>Cadence</strong>
-      <br />
-      Jason, Jon, Stephen, Jasper, Brendan, Cole
-    </div>
-  </div>" %>
-<%= pb_rails("select", props: {
-  id: "rails-select-dropdown",
-  label: "",
-  name: "",
-  blank_selection: "Select a template",
-  options: [
-    {
-      value: release,
-      value_text: "Playbook Release",
-    },
-    {
-      value: changelog,
-      value_text: "Changelog",
-    },
-  ]
-}) %>
-<%= pb_rails("rich_text_editor", props: {classname: 'template-test', id: "template", template: '' }) %>
-<script>
-  const updateContent = (template) => {
-    const trix   = document.querySelector('.template-test trix-editor');
-    const editor = trix.editor;
-    console.log(editor)
-    editor.loadHTML("")
-    editor.setSelectedRange([0, 0])
-    editor.insertHTML(template)
-  }
-  window.addEventListener('DOMContentLoaded', () => {
-    const editor = document.querySelector("#rails-select-dropdown")
-    editor.addEventListener('change', function() {
-        console.log('You selected: ', this.value);
-        const template = this.value
-        updateContent(template);
-    });
-  });
-</script>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx DELETED Viewed

@@ -1,42 +0,0 @@
-import React, { useState } from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Select from '../../pb_select/_select'
-import { changelog, release } from './templates.js'
-const RichTextEditorTemplates = (props) => {
-  const [editorContent, setEditorContent] = useState('')
-  const handleChange = (event) => {
-    setEditorContent(event.target.value)
-  }
-  const options = [
-    {
-      value: release,
-      text: 'Playbook Release',
-    },
-    {
-      value: changelog,
-      text: 'Changelog',
-    },
-  ]
-  return (
-    <div>
-      <Select
-          blankSelection="Select a template..."
-          label="Template"
-          onChange={handleChange}
-          options={options}
-          {...props}
-      />
-      <RichTextEditor
-          id="template"
-          template={editorContent}
-          {...props}
-      />
-    </div>
-  )
-}
-export default RichTextEditorTemplates

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb DELETED Viewed

@@ -1,4 +0,0 @@
-<%= pb_rails("rich_text_editor", props: {
-  id: "toolbar-bottom",
-  toolbar_bottom: true
-}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx DELETED Viewed

@@ -1,14 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-const RichTextEditorToolbarBottom = (props) => (
-  <div>
-    <RichTextEditor
-        id="bottom-toolbar"
-        toolbarBottom
-        {...props}
-    />
-  </div>
-)
-export default RichTextEditorToolbarBottom