playbook_ui_docs 15.3.0 → 15.4.0.pre.alpha.PLAY1541responsivefloorPOC12370

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.jsx

@@ -0,0 +1,113 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+import Caption from '../../pb_caption/_caption'
+
+const HorizontalNavDisabled = (props) => {
+  return (
+    <>
+    <Caption marginBottom="sm">Default Variant</Caption>
+    <Nav
+        link="#"
+        orientation="horizontal"
+        {...props}
+    >
+      <NavItem
+          link="#"
+          text="About"
+          {...props}
+      />
+      <NavItem
+          active
+          link="#"
+          text="Case Studies"
+          {...props}
+      />
+      <NavItem
+          disabled
+          link="#"
+          text="Service"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          text="Contacts"
+          {...props}
+      />
+      </Nav>
+      <Caption  
+          marginBottom="sm" 
+          marginTop="lg"
+      >
+        Subtle Variant
+      </Caption>
+      <Nav
+          link="#"
+          orientation="horizontal"
+          variant="subtle"
+          {...props}
+      >
+        <NavItem
+            link="#"
+            text="About"
+            {...props}
+        />
+        <NavItem
+            active
+            link="#"
+            text="Case Studies"
+            {...props}
+        />
+        <NavItem
+            disabled
+            link="#"
+            text="Service"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="Contacts"
+            {...props}
+        />
+      </Nav>
+      <Caption  
+          marginBottom="sm" 
+          marginTop="lg"
+      >
+        Bold Variant
+      </Caption>
+      <Nav
+          link="#"
+          orientation="horizontal"
+          variant="bold"
+          {...props}
+      >
+        <NavItem
+            link="#"
+            text="About"
+            {...props}
+        />
+        <NavItem
+            active
+            link="#"
+            text="Case Studies"
+            {...props}
+        />
+        <NavItem
+            disabled
+            link="#"
+            text="Service"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="Contacts"
+            {...props}
+        />
+      </Nav>
+    </>
+  )
+}
+
+export default HorizontalNavDisabled

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.md

@@ -0,0 +1 @@
+Use the `disabled` prop on a `navItem`/`nav_item` within a horizontal nav to set it as disabled. This will render the UI as disabled, prevent clicks and not allow for tabIndex to access the item. 

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.md

@@ -1 +1 @@
-All Nav variants' navItems accept our [global Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!
+All Nav variants' navItems accept our global Spacing ([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("flex", props: { justify: "between" }) do %>
+  <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
+    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Default Variant" }) %>
+    <%= pb_rails("nav") do %>
+      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+  <% end %>
+    <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
+    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Subtle Variant" }) %>
+    <%= pb_rails("nav", props:{variant: "subtle"}) do %>
+      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+  <% end %>
+    <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
+    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Bold Variant" }) %>
+    <%= pb_rails("nav", props:{variant: "bold"}) do %>
+      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+  <% end %>
+  
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.jsx

@@ -0,0 +1,117 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+import Caption from '../../pb_caption/_caption'
+import Flex from '../../pb_flex/_flex'
+
+const VerticalNavDisabled = (props) => {
+  return (
+    <Flex justify="between" 
+        wrap
+    >
+        <Flex orientation="column">
+            <Caption marginBottom="sm">Default Variant</Caption>
+            <Nav
+                link="#"
+                {...props}
+            >
+            <NavItem
+                link="#"
+                text="About"
+                {...props}
+            />
+            <NavItem
+                active
+                link="#"
+                text="Case Studies"
+                {...props}
+            />
+            <NavItem
+                disabled
+                link="#"
+                text="Service"
+                {...props}
+            />
+            <NavItem
+                link="#"
+                text="Contacts"
+                {...props}
+            />
+            </Nav>
+        </Flex>
+        <Flex orientation="column">
+            <Caption  
+                marginBottom="sm" 
+            >
+                Subtle Variant
+            </Caption>
+            <Nav
+                link="#"
+                variant="subtle"
+                {...props}
+            >
+            <NavItem
+                link="#"
+                text="About"
+                {...props}
+            />
+            <NavItem
+                active
+                link="#"
+                text="Case Studies"
+                {...props}
+            />
+            <NavItem
+                disabled
+                link="#"
+                text="Service"
+                {...props}
+            />
+            <NavItem
+                link="#"
+                text="Contacts"
+                {...props}
+            />
+            </Nav>
+        </Flex>
+        <Flex orientation="column">
+            <Caption  
+                marginBottom="sm" 
+            >
+                Bold Variant
+            </Caption>
+            <Nav
+                link="#"
+                variant="bold"
+                {...props}
+            >
+                <NavItem
+                    link="#"
+                    text="About"
+                    {...props}
+                />
+                <NavItem
+                    active
+                    link="#"
+                    text="Case Studies"
+                    {...props}
+                />
+                <NavItem
+                    disabled
+                    link="#"
+                    text="Service"
+                    {...props}
+                />
+                <NavItem
+                    link="#"
+                    text="Contacts"
+                    {...props}
+                />
+            </Nav>
+        </Flex>
+    </Flex>
+  )
+}
+
+export default VerticalNavDisabled

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.md

@@ -0,0 +1 @@
+Use the `disabled` prop on a `navItem`/`nav_item` within a vertical nav to set it as disabled. This will render the UI as disabled, prevent clicks and not allow for tabIndex to access the item. 

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

@@ -18,6 +18,8 @@ examples:
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
   - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
+  - horizontal_nav_disabled: Horizontal Nav With Disabled Item
+  - vertical_nav_disabled: Vertical Nav With Disabled Item
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
@@ -44,6 +46,8 @@ examples:
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
   - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
+  - horizontal_nav_disabled: Horizontal Nav With Disabled Item
+  - vertical_nav_disabled: Vertical Nav With Disabled Item
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab

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

@@ -20,4 +20,6 @@ export { default as NavWithFontControl } from "./_nav_with_font_control.jsx"
 export { default as NavWithSpacingControl } from "./_nav_with_spacing_control.jsx"
 export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_spacing.jsx"
 export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
-export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
+export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
+export { default as HorizontalNavDisabled } from './_horizontal_nav_disabled.jsx'
+export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md

@@ -2,4 +2,4 @@ The optional `layout` prop accepts the `position` and `size` of the overlay as a
 
 The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
 
-The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).
+The `size` value is `full` (100%) by default, but accepts our spacing tokens([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_description.md

@@ -1,3 +1,5 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
+
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.md

@@ -0,0 +1 @@
+In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb

@@ -36,7 +36,7 @@
 }
 %>
 
-<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+<%= pb_rails("title", props: {size: 4, text: "align | verticalAlign", padding_top: "sm", padding_bottom: "sm"})%>
 
 
 <%= pb_rails("pb_bar_graph", props: {options: chart_options_right}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.md

@@ -0,0 +1,11 @@
+Highcharts provides many options for customizing the legend display. This example showcases the following:
+
+`align` can be used to align the legend left, right or center (defaults to center)
+
+`verticalAlign` can be used to place the legend above the graph. Options are top, middle, bottom with default set to bottom
+
+`layout` determines the position of the legend items. Options are horizontal, vertical or proximate with default set to horizontal `layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
+
+`x` offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right (defaults to 0)
+
+`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down (defaults to 0)

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md

@@ -1,3 +1,5 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
+
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md

@@ -1,4 +1,5 @@
-Custom tooltip formatting is configured through the tooltip object in the options passed to the kit: 
+Tooltip options from Highcharts:
+
 `headerFormat` **Type**: String | when set to null will disable the header.
 `pointFormat` **Type**: String | defines the HTML template for each data point and supports custom HTML when `useHTML` is enabled.
 `useHTML` **Type**: boolean (default false) | enables HTML rendering in tooltips.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.md

@@ -0,0 +1 @@
+In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_description.md

@@ -1,3 +1,5 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
+
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.md

@@ -1,5 +1,5 @@
 Highcharts allows for any custom colors to be used. Custom data colors allow for color customization to match the needs of business requirements.
 
-For React, pass the prop `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. HEX colors are also available `eg: #CA0095`
+For React, pass the option `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. HEX colors are also available `eg: #CA0095`
 
-For Rails, the prop `plotOptions.solidgauge.borderColor` can only be used with HEX values as shown.
+For Rails, the option `plotOptions.solidgauge.borderColor` can only be used with HEX values as shown.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.md

@@ -0,0 +1 @@
+In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md

@@ -1,3 +1,5 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
+
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.md

@@ -0,0 +1 @@
+In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.html.erb

@@ -37,7 +37,7 @@
     },
   } %>
 
-<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+<%= pb_rails("title", props: {size: 4, text: "align | verticalAlign", padding_top: "sm", padding_bottom: "sm"})%>
 <%= pb_rails("pb_line_graph", props: {options: chartOptionsFirst}) %>
 
   <% chartOptionsSecond = {

data/app/pb_kits/playbook/pb_pill/docs/_description.md

@@ -1 +1 @@
-A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/global_props/colors" target="_blank">here</a>.

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

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
+
+const PopoverAppendTo = (props) => {
+  const [showParentPopover, setShowParentPopover] = useState(false);
+  const [showSelectorPopover, setShowSelectorPopover] = useState(false);
+
+  const parentPopoverReference = (
+    <CircleIconButton
+        icon="info"
+        onClick={() => setShowParentPopover(!showParentPopover)}
+        variant="secondary"
+    />
+  );
+
+  const selectorPopoverReference = (
+    <CircleIconButton
+        icon="info"
+        onClick={() => setShowSelectorPopover(!showSelectorPopover)}
+        variant="secondary"
+    />
+  );
+
+  return (
+    <>
+      <Flex
+          marginBottom="md"
+          orientation="row"
+          vertical="center"
+          {...props}
+      >
+        <Body text="Click info for more details" />
+        &nbsp;
+        <PbReactPopover
+            appendTo="parent"
+            offset
+            placement="top"
+            reference={parentPopoverReference}
+            show={showParentPopover}
+            {...props}
+        >
+          {'I\'m a popover. I have been appended to my parent element.'}
+        </PbReactPopover>
+      </Flex>
+
+      <Flex
+          orientation="row"
+          vertical="center"
+          {...props}
+      >
+        <Body text="Click info for more details" />
+        &nbsp;
+        <PbReactPopover
+            appendTo=".kit-show-wrapper"
+            offset
+            placement="top"
+            reference={selectorPopoverReference}
+            show={showSelectorPopover}
+            {...props}
+        >
+          {'I\'m a popover. I have been appended to the .kit-show-wrapper.'}
+        </PbReactPopover>
+      </Flex>
+    </>
+  );
+};
+
+export default PopoverAppendTo;

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

@@ -0,0 +1 @@
+By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `appendTo` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

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

@@ -15,3 +15,4 @@ examples:
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
+    - popover_append_to: Append To

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

@@ -4,3 +4,4 @@ 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'

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

@@ -1 +1 @@
-NOTE: All editors have a default max-width of "md". Use our [Max Width global prop](https://playbook.powerapp.cloud/visual_guidelines/max_width) to override this default, as necessary.
+NOTE: All editors have a default max-width of "md". Use our [Max Width global prop](https://playbook.powerapp.cloud/global_props/max_width) to override this default, as necessary.

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

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

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

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

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

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

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

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

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

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

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

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