playbook_ui_docs 16.3.0 → 16.4.0.pre.alpha.PLAY2846reactadvancedtablecalcheaderpinnedrows15356

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'

data/app/pb_kits/playbook/pb_table/docs/_sections.yml

@@ -55,6 +55,7 @@ sections:
       - table_with_clickable_rows
       - table_with_selectable_rows
       - table_with_filter_variant
+      - table_with_filter_variant_external_filter_rails
       - table_with_filter_variant_with_pagination
       - table_disable_hover
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.html.erb

@@ -0,0 +1,45 @@
+<%# External filter: capture any filter markup and pass it via the filter prop.
+    Use your own helper (e.g. a search/filter form) or pb_rails("filter") as shown here. %>
+<% users = [
+  { name: "Alex", role: "Engineer" },
+  { name: "Sam", role: "Designer" },
+  { name: "Jordan", role: "Manager" },
+] %>
+
+<% filter_output = capture do %>
+  <%= pb_rails("filter", props: {
+    id: "external-filter-demo",
+    template: "single",
+    results: 3,
+    background: false,
+    sort_menu: [
+      { item: "Name", link: "#", active: true, direction: "asc" },
+      { item: "Role", link: "#", active: false },
+    ],
+  }) do %>
+    <%= pb_rails("text_input", props: { label: "Name", placeholder: "Search by name" }) %>
+    <%= pb_rails("text_input", props: { label: "Role", placeholder: "e.g. Engineer, Designer" }) %>
+    <%= pb_rails("button", props: { text: "Apply" }) %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("table", props: {
+  variant: "with_filter",
+  title: "Table with External Filter",
+  filter: filter_output,
+}) do %>
+  <%= pb_rails("table/table_head") do %>
+    <%= pb_rails("table/table_row") do %>
+      <%= pb_rails("table/table_header", props: { text: "Name" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Role" }) %>
+    <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+    <% users.each do |user| %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_cell") { user[:name] } %>
+        <%= pb_rails("table/table_cell") { user[:role] } %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.md

@@ -0,0 +1,39 @@
+Use the **"with_filter"** variant with an **external filter** (Option B): pass pre-rendered filter markup via the `filter` prop. Same layout as Variant with Filter (card, title, separator, flex); only the filter slot is supplied by you. Use this when you need:
+
+- **Manual filter submission** – Apply / Filter button instead of automatic application
+- **Full control** – Over filter props, template, sort menu, and submission
+- **Custom or app-specific filter helpers** – Any helper that returns filter markup (e.g. search/filter forms)
+
+#### Required props
+
+- `variant: "with_filter"`
+- `filter` – Pre-rendered filter HTML (e.g. from `capture { ... }`)
+
+When `filter` is present, `filter_content` and `filter_props` are ignored.
+
+#### How to do it
+
+1. **Render your filter** (e.g. `pb_rails("filter", ...)` or any helper that returns filter markup).
+2. **Capture the output** with `capture do ... end`.
+3. **Pass it to the Table** as the `filter` prop.
+
+**Example (generic pattern):**
+
+```erb
+<% filter_output = capture do %>
+  <%= pb_rails("filter", props: { template: "single", results: 10, background: false }) do %>
+    <%= pb_rails("text_input", props: { label: "Name", placeholder: "Search by name" }) %>
+    <%= pb_rails("button", props: { text: "Apply" }) %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("table", props: {
+  variant: "with_filter",
+  title: "My Table",
+  filter: filter_output,
+}) do %>
+  <%# table_head / table_body ... %>
+<% end %>
+```
+
+For Nitro apps that use a shared search/filter pattern, reference the example on Alpha for implementation details.

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.md

@@ -26,8 +26,9 @@ The Table kit automatically sets these Filter defaults (which you can override v
 - `min_width: "xs"`
 - `popover_props: { width: "350px" }`
 
+Alternatively, you can pass pre-rendered filter markup via the `filter` prop (e.g. for manual submission or custom filter helpers)—scroll down for that approach.
 
 **IMPORTANT NOTE**: 
 The purpose of this variant is to provide an easy way to set up a Table with a Filter with Design standards applied by default.
 
-If you are looking for more customization than this embedded variant provides, you may be better served by using the individual kits as demonstrating in our Table Filter Card Building Block as seen [here](https://playbook.powerapp.cloud/building_blocks/table_filter_card/rails).
+If you are looking for more customization than this embedded variant provides, you may be better served by using the individual kits as demonstrated in our Table Filter Card Building Block as seen [here](https://playbook.powerapp.cloud/building_blocks/table_filter_card/rails).