playbook_ui_docs 16.3.0.pre.alpha.fixdatepickermonthsdropdownreset14888 → 16.3.0.pre.alpha.play274314771

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e7529b1b3805c065b3babf542bb5dc1bfe9f124c8aec975be1c699bc7922efca
-  data.tar.gz: 5873653cd818ea9f9375f8495dee3dd1a2ca9b44a42613b0e9105399a317e12e
+  metadata.gz: be9e73acaad8c3203bdb586084555f7f1a81c7a2a02d36efd6781a0de8f53812
+  data.tar.gz: 3cbd5073fc8a4a4148883671d1988f4ae66d913f9c1c7afcac1d4423c1554f0f
 SHA512:
-  metadata.gz: eec564be94a0adadc025e36a2de79175b8ba7109a8daa3b2907a3556c73c9fa36dbc50f63598a56f43935cc9991d9566d5d595f0520f07ec9ac4ba11a63ca711
-  data.tar.gz: e6c1fee448d316623f460cbca08c143db21d7871d4477afa69294ad883001aa2ba1f14fc0c610ab2a3fa7a1ff2962cfbf1ff5adc522d710eaae5a27e30ef8841
+  metadata.gz: c64136d8969d6ca543f996c02b21d93d15dfbc674379f8dce835f4fa12b7809675ef275d7ac737662e7e1f6409b0d71db16f773eca44d02cb5e4391aaf69b181
+  data.tar.gz: 21f760b33e2ba803eb7f29d570801382966532283b29daa69c5601dceec4552c88059dd928423d84c1077fadd8551de4004b75bdcbd05e31b865dccf746375be

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

@@ -30,6 +30,7 @@ const DialogCompound = () => {
               label="Description"
               rows={4}
           />
+          <Caption marginBottom="xs">{'Description'}</Caption>
           <br />
           <Caption>
             {

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

@@ -1,20 +1,11 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-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 %>
+<%= 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"
+}) %>

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

@@ -12,35 +12,16 @@ const DialogDefault = () => {
     <>
       <Button onClick={open}>{'Open Dialog'}</Button>
       <Dialog
+          cancelButton="Cancel Button"
+          confirmButton="Okay"
           onCancel={close}
           onClose={close}
           onConfirm={close}
           opened={isOpen}
-          size="md"
+          size="sm"
+          text="Hello Body Text, Nice to meet ya."
           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_placement.jsx

@@ -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 Textarea from "../../pb_textarea/_textarea";
+import Textarea from "../../pb_textarea";
 import Typeahead from '../../pb_typeahead/_typeahead'
 
 const useDialog = (visible = false) => {
@@ -77,7 +77,7 @@ const DialogFullHeightPlacement = () => {
             </Dialog.Header>
             <Dialog.Body>
               <Textarea
-                  id={`default-example-2-${index}`}
+                  id="default-example-2"
                   label="Description"
                   rows={4}
               />

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

@@ -25,7 +25,6 @@ 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)

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

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

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

@@ -1,8 +1,5 @@
 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'
 
@@ -12,9 +9,6 @@ const RichTextEditorDefault = (props) => {
 
   return (
     <div>
-      <Caption marginBottom="xs" 
-          text="Default"
-      />
       <RichTextEditor
           TrixEditor={TrixEditor}
           onChange={handleOnChange}
@@ -22,52 +16,6 @@ const RichTextEditorDefault = (props) => {
           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_focus.jsx

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

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { TrixEditor } from 'react-trix'
+import Trix from 'trix'
+
+const RichTextEditorInline = (props) => (
+  <div>
+    <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}
+    />
+  </div>
+)
+
+export default RichTextEditorInline

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

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

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

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

@@ -0,0 +1,49 @@
+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'
+import { TrixEditor } from 'react-trix'
+// eslint-disable-next-line no-unused-vars
+import Trix from 'trix'
+
+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
+          TrixEditor={TrixEditor}
+          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.jsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { TrixEditor } from 'react-trix'
+import Trix from 'trix'
+
+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
+          TrixEditor={TrixEditor}
+          inputOptions = {{ id: "required" }}
+          label="Label"
+          onChange={handleOnChange}
+          requiredIndicator
+          trixInstance={Trix}
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default RichTextEditorRequiredIndicator

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

@@ -0,0 +1,3 @@
+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.jsx

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

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

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

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

@@ -0,0 +1,46 @@
+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'
+import { TrixEditor } from 'react-trix'
+import Trix from 'trix'
+
+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
+          TrixEditor={TrixEditor}
+          id="template"
+          template={editorContent}
+          trixInstance={Trix}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default RichTextEditorTemplates

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

@@ -18,6 +18,15 @@ examples:
   - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
   - rich_text_editor_advanced_preview: Advanced Preview
   - rich_text_editor_default: Legacy Default (Trix)
+  # - rich_text_editor_simple: Legacy Simple (Trix)
+  # - rich_text_editor_attributes: Legacy Attributes (Trix)
+  # - rich_text_editor_focus: Legacy Focus (Trix)
+  # - rich_text_editor_sticky: Legacy Sticky (Trix)
+  # - rich_text_editor_templates: Legacy Templates (Trix)
+  # - rich_text_editor_inline: Legacy Inline (Trix)
+  # - rich_text_editor_label: Legacy Label (Trix)
+  # - rich_text_editor_required_indicator: Legacy Required Indicator (Trix)
+  # - rich_text_editor_preview: Legacy Preview (Trix)
 
 
 

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

@@ -1,4 +1,11 @@
 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 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'
@@ -11,5 +18,7 @@ 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

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.3.0.pre.alpha.fixdatepickermonthsdropdownreset14888
+  version: 16.3.0.pre.alpha.play274314771
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-03-10 00:00:00.000000000 Z
+date: 2026-03-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -861,8 +861,6 @@ 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_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,10 +1970,21 @@ 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.jsx
 - 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_default.md
+- 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.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_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.jsx
+- 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.jsx
+- 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.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_closing_options_rails.html.erb

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

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