playbook_ui_docs 16.3.0 → 16.4.0.pre.alpha.displaybreakpoints15091

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

@@ -0,0 +1,7 @@
+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_dropdown/docs/example.yml

@@ -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,6 +33,7 @@ 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_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin.html.erb

@@ -0,0 +1,46 @@
+<%= pb_rails("button", props: { text: "Top Nav Toast", variant: "secondary", data: { toast: "#top-nav" } }) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  classname: "top-nav-margin",
+  closeable: true,
+  id: "top-nav",
+  multi_line: true,
+  text: "Top nav Margin.",
+  status: "tip",
+  vertical: "top",
+  horizontal: "center",
+  nav_margin_top: true
+}) %>
+
+
+
+<script type="text/javascript">
+  const navtoast = document.querySelectorAll(".top-nav-margin")
+  const navbutton = document.querySelectorAll("button[data-toast]")
+
+  const hideNavToast = () => {
+    navtoast.forEach((toast) => {
+      toast.style.display = "none"
+    })
+  }
+
+  // Hide toasts immediately
+  hideNavToast()
+
+  // Handle various page load/restore events
+  window.addEventListener('pageshow', hideNavToast)
+  document.addEventListener('DOMContentLoaded', hideNavToast)
+  document.addEventListener('turbolinks:load', hideNavToast)
+  document.addEventListener('turbo:load', hideNavToast)
+
+  navbutton.forEach((button) => {
+    button.onclick = () => {
+      hideNavToast()
+      let toast = document.querySelector(button.getAttribute("data-toast"))
+
+      if (toast) {
+        toast.style.display = "flex"
+      }
+    }
+  })
+</script>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin.jsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+
+import Button from '../../pb_button/_button'
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+
+const FixedConfirmationToastNavMargin = (props) => {
+  const [openToast, setOpenToast] = useState(false)
+
+
+  const handleClickShort = () => {
+    setOpenToast(true)
+  }
+
+  const handleCloseShort = () => {
+    setOpenToast(false)
+  }
+
+  return (
+    <div>
+      <Button
+          onClick={handleClickShort}
+          text="Top Nav Margin"
+          variant="secondary"
+          {...props}
+      />
+
+      <FixedConfirmationToast
+          closeable
+          horizontal='center'
+          navMarginTop
+          onClose={handleCloseShort}
+          open={openToast}
+          status="tip"
+          text="Top nav Margin."
+          vertical='top'
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FixedConfirmationToastNavMargin

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin_rails.md

@@ -0,0 +1 @@
+Use the `nav_margin_top` prop to position the toast lower on the page. This is useful for cases where we want to position the toast below a header or nav.

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin_react.md

@@ -0,0 +1 @@
+Use the `navMarginTop` prop to position the toast lower on the page. This is useful for cases where we want to position the toast below a header or nav.

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

@@ -2,6 +2,7 @@ examples:
   
   rails:
   - fixed_confirmation_toast_default: Default
+  - fixed_confirmation_toast_nav_margin: Nav Margin Top
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
@@ -12,6 +13,7 @@ examples:
   
   react:
   - fixed_confirmation_toast_default: Default
+  - fixed_confirmation_toast_nav_margin: Nav Margin Top
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions

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

@@ -5,4 +5,5 @@ export { default as FixedConfirmationToastPositions } from './_fixed_confirmatio
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
 export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'
-export { default as FixedConfirmationToastNoIcon } from './_fixed_confirmation_toast_no_icon.jsx'
+export { default as FixedConfirmationToastNoIcon } from './_fixed_confirmation_toast_no_icon.jsx'
+export { default as FixedConfirmationToastNavMargin } from './_fixed_confirmation_toast_nav_margin.jsx'

data/app/pb_kits/playbook/pb_popover/docs/_popover_placement.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+
+import Button from '../../pb_button/_button'
+import Flex from '../../pb_flex/_flex'
+import PbReactPopover from '../../pb_popover/_popover'
+
+const ROWS = [
+  [
+    { placement: 'top', label: 'Top' },
+    { placement: 'top-start', label: 'Top start' },
+    { placement: 'top-end', label: 'Top end' },
+  ],
+  [
+    { placement: 'bottom', label: 'Bottom' },
+    { placement: 'bottom-start', label: 'Bottom start' },
+    { placement: 'bottom-end', label: 'Bottom end' },
+  ],
+  [
+    { placement: 'left', label: 'Left' },
+    { placement: 'left-start', label: 'Left start' },
+    { placement: 'left-end', label: 'Left end' },
+  ],
+  [
+    { placement: 'right', label: 'Right' },
+    { placement: 'right-start', label: 'Right start' },
+    { placement: 'right-end', label: 'Right end' },
+  ],
+]
+
+const PopoverPlacement = (props) => {
+  const [open, setOpen] = useState({})
+
+  const isOpen = (placement) => open[placement] === true
+  const setOpenFor = (placement) => (value) => setOpen((prev) => ({ ...prev, [placement]: value }))
+  const toggle = (placement) => setOpenFor(placement)(!isOpen(placement))
+  const handleShouldClose = (placement) => (shouldClose) => {
+    if (shouldClose) setOpenFor(placement)(false)
+  }
+
+  return (
+    <>
+      {ROWS.map((placements, rowIndex) => (
+        <Flex
+            justify="around"
+            key={placements[0].placement}
+            marginBottom={rowIndex < ROWS.length - 1 ? 'sm' : undefined}
+            orientation="row"
+            wrap
+            {...props}
+        >
+          {placements.map(({ placement, label }) => {
+            const trigger = (
+              <Button
+                  key={placement}
+                  onClick={() => toggle(placement)}
+                  text={label}
+                  variant="secondary"
+              />
+            )
+            return (
+              <PbReactPopover
+                  closeOnClick="outside"
+                  key={placement}
+                  offset
+                  placement={placement}
+                  reference={trigger}
+                  shouldClosePopover={handleShouldClose(placement)}
+                  show={isOpen(placement)}
+                  {...props}
+              >
+                {`Popover: ${label.toLowerCase()}`}
+              </PbReactPopover>
+            )
+          })}
+        </Flex>
+      ))}
+    </>
+  )
+}
+
+export default PopoverPlacement

data/app/pb_kits/playbook/pb_popover/docs/_popover_placement_react.md

@@ -0,0 +1 @@
+Use the `placement` prop to control where the popover appears relative to its trigger. Valid values include `top`, `bottom`, `left`, `right`, and aligned variants such as `top-start`, `top-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end`, `right-start`, and `right-end`.

data/app/pb_kits/playbook/pb_popover/docs/_popover_position.html.erb

@@ -0,0 +1,128 @@
+<%= pb_rails("flex", props: { justify: "around", margin_bottom: "sm", orientation: "row", wrap: true }) do %>
+    <%= pb_rails("button", props: { text: "Top", variant: "secondary", id: "placement-popover-top" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-top",
+      tooltip_id: "placement-tooltip-top",
+      position: "top",
+      offset: true
+    }) do %>
+      Popover: top
+    <% end %>
+    <%= pb_rails("button", props: { text: "Top start", variant: "secondary", id: "placement-popover-top-start" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-top-start",
+      tooltip_id: "placement-tooltip-top-start",
+      position: "top-start",
+      offset: true
+    }) do %>
+      Popover: top start
+    <% end %>
+    <%= pb_rails("button", props: { text: "Top end", variant: "secondary", id: "placement-popover-top-end" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-top-end",
+      tooltip_id: "placement-tooltip-top-end",
+      position: "top-end",
+      offset: true
+    }) do %>
+      Popover: top end
+    <% end %>
+<% end %>
+<%= pb_rails("flex", props: { justify: "around", margin_bottom: "sm", orientation: "row", wrap: true }) do %>
+    <%= pb_rails("button", props: { text: "Bottom", variant: "secondary", id: "placement-popover-bottom" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-bottom",
+      tooltip_id: "placement-tooltip-bottom",
+      position: "bottom",
+      offset: true
+    }) do %>
+      Popover: bottom
+    <% end %>
+    <%= pb_rails("button", props: { text: "Bottom start", variant: "secondary", id: "placement-popover-bottom-start" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-bottom-start",
+      tooltip_id: "placement-tooltip-bottom-start",
+      position: "bottom-start",
+      offset: true
+    }) do %>
+      Popover: bottom start
+    <% end %>
+    <%= pb_rails("button", props: { text: "Bottom end", variant: "secondary", id: "placement-popover-bottom-end" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-bottom-end",
+      tooltip_id: "placement-tooltip-bottom-end",
+      position: "bottom-end",
+      offset: true
+    }) do %>
+      Popover: bottom end
+    <% end %>
+<% end %>
+<%= pb_rails("flex", props: { justify: "around", margin_bottom: "sm", orientation: "row", wrap: true }) do %>
+    <%= pb_rails("button", props: { text: "Left", variant: "secondary", id: "placement-popover-left" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-left",
+      tooltip_id: "placement-tooltip-left",
+      position: "left",
+      offset: true
+    }) do %>
+      Popover: left
+    <% end %>
+    <%= pb_rails("button", props: { text: "Left start", variant: "secondary", id: "placement-popover-left-start" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-left-start",
+      tooltip_id: "placement-tooltip-left-start",
+      position: "left-start",
+      offset: true
+    }) do %>
+      Popover: left start
+    <% end %>
+    <%= pb_rails("button", props: { text: "Left end", variant: "secondary", id: "placement-popover-left-end" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-left-end",
+      tooltip_id: "placement-tooltip-left-end",
+      position: "left-end",
+      offset: true
+    }) do %>
+      Popover: left end
+    <% end %>
+<% end %>
+<%= pb_rails("flex", props: { justify: "around", orientation: "row", wrap: true }) do %>
+    <%= pb_rails("button", props: { text: "Right", variant: "secondary", id: "placement-popover-right" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-right",
+      tooltip_id: "placement-tooltip-right",
+      position: "right",
+      offset: true
+    }) do %>
+      Popover: right
+    <% end %>
+    <%= pb_rails("button", props: { text: "Right start", variant: "secondary", id: "placement-popover-right-start" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-right-start",
+      tooltip_id: "placement-tooltip-right-start",
+      position: "right-start",
+      offset: true
+    }) do %>
+      Popover: right start
+    <% end %>
+    <%= pb_rails("button", props: { text: "Right end", variant: "secondary", id: "placement-popover-right-end" }) %>
+    <%= pb_rails("popover", props: {
+      close_on_click: "outside",
+      trigger_element_id: "placement-popover-right-end",
+      tooltip_id: "placement-tooltip-right-end",
+      position: "right-end",
+      offset: true
+    }) do %>
+      Popover: right end
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_position_rails.md

@@ -0,0 +1 @@
+Use the `position` prop to control where the popover appears relative to its trigger. Valid values include `top`, `bottom`, `left`, `right`, and aligned variants such as `top-start`, `top-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end`, `right-start`, and `right-end`.

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

@@ -7,6 +7,7 @@ examples:
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
     - popover_append_to: Append To
+    - popover_position: Position
 
   react:
     - popover_default: Default
@@ -16,3 +17,4 @@ examples:
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
     - popover_append_to: Append To
+    - popover_placement: Placement

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

@@ -4,4 +4,5 @@ export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
 export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'
-export { default as PopoverAppendTo } from './_popover_append_to.jsx'
+export { default as PopoverAppendTo } from './_popover_append_to.jsx'
+export { default as PopoverPlacement } from './_popover_placement.jsx'

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

@@ -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

@@ -0,0 +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

@@ -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

@@ -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'