playbook_ui_docs 15.3.0.pre.alpha.PLAY2601advancedtablecustomcellmultiheaderrails12030 → 15.3.0.pre.alpha.PLAY2622richtexteditortiptaponlyrails12127

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d824bd157d14a8643cbc18f9ec7676b45fe90e949315e96e191ce66503a6aff7
-  data.tar.gz: a64fe3d7ce447ca068d90e46f1ab54a36e07f5f917efd8cb5092ff2c14c20c48
+  metadata.gz: ff2286b21c48390fcd124440d69de83db038fd23a3b5f74039c819c588a738ad
+  data.tar.gz: 3acf15022a6ba95552cc03b78c4d87ffbea1d376354c720b380cdf9398f594c8
 SHA512:
-  metadata.gz: 0c7d7dae90ec02263d91fa228845fbe3cd46769a9906be99e0055adacf327486f670e143517d360cc1691f9e2d0c47a8b101c85f54fa9713a35263f5a1621613
-  data.tar.gz: da4b5f29eec7b56ff02ba76f154f25182b5d02f9da670f2e211482b6eb856ebf0d665c7d133de8069e46f7c6baa5df02e0c7c2f253ac6cb1a0e86d96670732c2
+  metadata.gz: '08ccd564a6ac7694fbc53edc0ab5dae7e1cab9a8679ace8bc9bb015ea30f48e831b108fc682e68421126d97cf0e0cbca7af2adbdaf373bcd2378f55ad7741466'
+  data.tar.gz: 58acd298938164bf9b9eab73ad0696544ec96bb3d7ba30580457f14e42d89a400460906d46246ce4a99fc5b3dbe4d2e1f2509ba48f644bf107388d2feff71434

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb

@@ -26,6 +26,10 @@
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
+      column_styling: { 
+        cell_background_color: "category_1",
+        font_color: "white"
+      }
     },
     {
       accessor: "graduatedStudents",

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md

@@ -1 +1 @@
-`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here.
+`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here. Use `font_color` to achieve better contrast between cell content and background for darker backgrounds.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx

@@ -1,7 +1,8 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable, colors } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
+
 const AdvancedTableColumnStyling = (props) => {
   const columnDefinitions = [
     {
@@ -34,6 +35,7 @@ const AdvancedTableColumnStyling = (props) => {
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
+      columnStyling:{fontColor: colors.data_8},
     },
   ]
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md

@@ -4,4 +4,6 @@ The `columnStyling` prop is an optional item that can be used within `columnDefi
 
 2) `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
 
+3) `fontColor`: This will allow you to control the font color for a given column.
+
 `columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import AdvancedTable from '../../pb_advanced_table/_advanced_table';
+import { AdvancedTable } from "playbook-ui";
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnStylingColumnHeaders = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb

@@ -29,6 +29,7 @@
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
+      column_styling: { font_color: "red" }
     }
 ] %>
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md

@@ -4,4 +4,6 @@ The `column_styling` prop is an optional item that can be used within `column_de
 
 2) `cell_alignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
 
+3) `font_color`: This will allow you to control the font color for a given column.
+
 `column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx

@@ -22,7 +22,6 @@ const AdvancedTablePaddingControl = (props) => {
          {value}
         </Background>
       ), 
-
     },
     {
       accessor: "scheduledMeetings",
@@ -39,6 +38,15 @@ const AdvancedTablePaddingControl = (props) => {
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
+      columnStyling:{cellPadding: "none", fontColor: "white"},
+      customRenderer: (row, value) => (
+        <Background 
+            backgroundColor={"category_1"}
+            padding="xs" 
+        >
+         {value}
+        </Background>
+      ), 
     },
     {
       accessor: "graduatedStudents",

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md

@@ -1,3 +1,3 @@
 `columnStyling` can also be used to control padding on all cells in a given column via the use of the `cellPadding` key/value pair. `cellPadding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.  
 
-This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here. 
+This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here. Use `fontColor` to achieve better contrast between cell content and background for darker backgrounds.

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -7,7 +7,7 @@
 }) %>
 
 <%= pb_rails("currency", props: {
-  amount: "342",
+  amount: 342,
   label: "Light",
   margin_bottom: "md",
   size: "sm",

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -14,7 +14,7 @@ const CurrencyVariants = (props) => {
           {...props}
       />
       <Currency
-          amount="342"
+          amount={342}
           label="Light"
           marginBottom="md"
           size="sm"

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.md

@@ -0,0 +1 @@
+**NOTE:** The value passed into the `amount` prop can be either a string or numeric value.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_and_dropdown_range.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Dropdown from "../../pb_dropdown/_dropdown";
+import DatePicker from "../../pb_date_picker/_date_picker";
+
+const DatePickerAndDropdownRange = (props) => {
+  return (
+    <>
+      <Dropdown
+          controlsEndId="end-date-picker1"
+          controlsStartId="start-date-picker1"
+          id="dropdown-as-quickpick"
+          label="Date Range"
+          marginBottom="sm"
+          placeholder="Select a Date Range"
+          variant="quickpick"
+          {...props}
+      /> 
+
+      <DatePicker
+          label="Start Date"
+          pickerId="start-date-picker1"
+          placeholder="Select a Start Date"
+          syncStartWith="dropdown-as-quickpick"
+          {...props}
+      />
+
+      <DatePicker
+          label="End Date"
+          pickerId="end-date-picker1"
+          placeholder="Select an End Date"
+          syncEndWith="dropdown-as-quickpick"
+          {...props}
+      />
+    </>
+  );
+};
+
+export default DatePickerAndDropdownRange;

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_and_dropdown_range.md

@@ -0,0 +1,14 @@
+You can link a Dropdown (`quickpick` variant) to standard DatePickers using the following props:
+
+**For the Dropdown**:
+`controlsStartId`: ID of the DatePicker that should receive the start date.
+
+`controlsEndId`: ID of the DatePicker that should receive the end date.
+
+When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
+
+**For the Start/End DatePickers**:
+`syncStartWith`: ID of the quickpick this start date is synced to.
+`syncEndWith`: ID of the quickpick this end date is synced to.
+
+When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.

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

@@ -48,7 +48,8 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
-  - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
+  # - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
+  - date_picker_and_dropdown_range: Range with Dropdown and 2 Date Pickers
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -26,4 +26,5 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
 export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
-export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
+export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
+export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownQuickpick = (props) => {
+
+  return (
+    <div>
+      <Dropdown
+          label="Date Range"
+          onSelect={(selectedItem) => console.log(selectedItem)}
+          variant="quickpick"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DropdownQuickpick

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

@@ -0,0 +1,4 @@
+The QuickPick variant provides predefined date based options when `variant="quickpick"` is used. 
+
+Open the Dropdown above to see the default options.
+

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownQuickpickDefaultDates = (props) => {
+
+  return (
+    <div>
+      <Dropdown
+          defaultValue="This Year"
+          label="Date Range"
+          variant="quickpick"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DropdownQuickpickDefaultDates

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

@@ -0,0 +1 @@
+To set a default value for the Dropdown, you can use the label of the range you want set as default, for example "This Year", "Today", etc. 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownQuickpickRangeEnd = (props) => {
+
+  return (
+    <div>
+      <Dropdown
+          label="Date Range"
+          onSelect={(selectedItem) => console.log(selectedItem)}
+          rangeEndsToday
+          variant="quickpick"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DropdownQuickpickRangeEnd

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

@@ -0,0 +1 @@
+The optional `rangeEndsToday` prop can be used with the quickpick variant to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if `rangeEndsToday` prop is used, end date on that range will be today's date.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Dropdown from "../../pb_dropdown/_dropdown";
+import DatePicker from "../../pb_date_picker/_date_picker";
+
+const DropdownQuickpickWithDatePickers = (props) => {
+  return (
+    <>
+      <Dropdown
+          controlsEndId="end-date-picker"
+          controlsStartId="start-date-picker"
+          id="dropdown-quickpick"
+          label="Range"
+          marginBottom="sm"
+          placeholder="Select a Date Range"
+          variant="quickpick"
+          {...props}
+      /> 
+
+      <DatePicker
+          label="Start Date"
+          pickerId="start-date-picker"
+          placeholder="Select a Start Date"
+          syncStartWith="dropdown-quickpick"
+          {...props}
+      />
+
+      <DatePicker
+          label="End Date"
+          pickerId="end-date-picker"
+          placeholder="Select an End Date"
+          syncEndWith="dropdown-quickpick"
+          {...props}
+      />
+    </>
+  );
+};
+
+export default DropdownQuickpickWithDatePickers;

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

@@ -0,0 +1,14 @@
+You can link a Dropdown (`quickpick` variant) to standard DatePickers using the following props:
+
+**For the Dropdown**:
+`controlsStartId`: ID of the DatePicker that should receive the start date.
+
+`controlsEndId`: ID of the DatePicker that should receive the end date.
+
+When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
+
+**For the Start/End DatePickers**:
+`syncStartWith`: ID of the quickpick this start date is synced to.
+`syncEndWith`: ID of the quickpick this end date is synced to.
+
+When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.

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

@@ -49,4 +49,9 @@ examples:
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
+  - dropdown_quickpick: Quick Pick Variant
+  - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
+  - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
+
 

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

@@ -22,4 +22,8 @@ export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_sel
 export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
 export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
 export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
-export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
+export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
+export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
+export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
+export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
+export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb

@@ -22,13 +22,27 @@
 }) %>
 
 <script>
+// Hide toasts immediately
+const hideAutoToasts = () => {
+  const toastAuto = document.getElementById('toast-auto-close');
+  const toastAutoCloseable = document.getElementById('toast-auto-close-closeable');
+  if (toastAuto) toastAuto.style.display = 'none';
+  if (toastAutoCloseable) toastAutoCloseable.style.display = 'none';
+}
+hideAutoToasts();
+
+// Handle various page load/restore events
+window.addEventListener('pageshow', hideAutoToasts)
+document.addEventListener('turbolinks:load', hideAutoToasts)
+document.addEventListener('turbo:load', hideAutoToasts)
+
 document.addEventListener('DOMContentLoaded', () => {
   // Initialize toast elements and buttons
   const toasts = {
     '#toast-auto-close': document.querySelector("#toast-auto-close"),
     '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
   }
-  
+
   const buttons = {
     '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
     '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -24,7 +24,6 @@
   horizontal: "center"
 }) %>
 
-
 <script type="text/javascript">
   const multitoasts = document.querySelectorAll(".multitoast-to-hide")
   const multibuttons = document.querySelectorAll("button[data-multitoast]")
@@ -35,6 +34,15 @@
     })
   }
 
+  // Hide toasts immediately
+  hideMultiToasts()
+
+  // Handle various page load/restore events
+  window.addEventListener('pageshow', hideMultiToasts)
+  document.addEventListener('DOMContentLoaded', hideMultiToasts)
+  document.addEventListener('turbolinks:load', hideMultiToasts)
+  document.addEventListener('turbo:load', hideMultiToasts)
+
   multibuttons.forEach((button) => {
     button.onclick = () => {
       hideMultiToasts()
@@ -46,10 +54,3 @@
     }
   })
 </script>
-
-<!-- hiding toast on page load -->
-<style>
-  #toast-long, #toast-short {
-    display: none;
-  }
-</style>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb

@@ -69,27 +69,28 @@
   const toasts = document.querySelectorAll(".toast-to-hide")
   const buttons = document.querySelectorAll("button[data-toast]")
 
-  const hideToasts = () => {
+  const hidePositionToasts = () => {
     toasts.forEach((toast) => {
       toast.style.display = "none"
     })
   }
 
+  // Hide toasts immediately
+  hidePositionToasts()
+
+  // Handle various page load/restore events
+  window.addEventListener('pageshow', hidePositionToasts)
+  document.addEventListener('DOMContentLoaded', hidePositionToasts)
+  document.addEventListener('turbolinks:load', hidePositionToasts)
+  document.addEventListener('turbo:load', hidePositionToasts)
+
   buttons.forEach((button) => {
     button.onclick = () => {
-      hideToasts()
+      hidePositionToasts()
       let toast = document.querySelector(button.getAttribute("data-toast"))
-
       if (toast) {
         toast.style.display = "flex"
       }
     }
   })
 </script>
-
-<!-- hiding toast on page load -->
-<style>
-  #toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
-    display: none;
-  }
-</style>

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

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

@@ -0,0 +1 @@
+Use the optional `sticky` prop to make the toolbar sticky on scroll.

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

@@ -3,10 +3,10 @@ examples:
   rails:
   - rich_text_editor_default: Default
   - rich_text_editor_simple: Simple
-  - rich_text_editor_attributes: Attributes
+  # - rich_text_editor_attributes: Attributes
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
-  - rich_text_editor_templates: Templates
+  # - rich_text_editor_templates: Templates
   # - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview