playbook_ui_docs 16.3.0.pre.rc.5 → 16.4.0.pre.alpha.PLAY2864circleiconbuttonloadingalignrails15138

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 609929ced90bed39a700140bfe530a920b227125e000eedd65ec90d4ae2f6ac4
-  data.tar.gz: 78aab6584f2034b79ecae36b9d1bc08aaaf8e1e47afdde0d1a8bdddebf74f2d7
+  metadata.gz: 5f445aa174e5279062b03dd04f87872fea3d366d1d46bc7c5516408593336fdc
+  data.tar.gz: 723c15f2f7680a9424bc92c95e8c6af1386d1a880260b4096b62cb020138465d
 SHA512:
-  metadata.gz: 65097e1e70b270c305185148e461ec22187f368b4cd56141c0b92d9c93dea5c22044cbefb5ea90cc28812fb8b7879b5c164360b0724703e16a6139a279f63fc4
-  data.tar.gz: afc8dde99e26f8f999f5de4656bde7ae208d18a552fc0d9bc1a099ce280d05ea9ecdfeeefc92cafcae31d0e19ac0bb315d80d65cc0ec635eedac0ce48646cf9f
+  metadata.gz: 348b84bc7491f38e7cdb75822ec1c829fdce88f790d8102f294a918bb1e6d07b45a0b0b715b068db6b79ffc93ef3a1ea2743e15b294ddf00769566f0ab2027cb
+  data.tar.gz: 927be562b1b02541a7ea79d2143d30bb37797e8470846d628e0a9f1b808f07925147241d60b9eadd2d1bd4e45a5a6e60a926d7ccee3225041cac5e441b213d7c

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

@@ -0,0 +1,50 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableCascadeCollapse = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          cascadeCollapse
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableCascadeCollapse

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

@@ -0,0 +1 @@
+`cascadeCollapse` is an optional prop that is set to 'false' by default. If set to 'true', collapsing any parent row itself or by using the toggle exapansion buttons in any header or subheader row also collapses all descendants and clears their expansion state. Re-expanding then shows only direct children until the user expands deeper levels again.

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

@@ -0,0 +1,57 @@
+<%# Example sort method for demonstration purposes %>
+<% if params["sort"] %>
+  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
+  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
+  <% @table_data_with_id.sort! do |a, b|
+    value_a = a[sort_param] || a[sort_param.to_sym]
+    value_b = b[sort_param] || b[sort_param.to_sym]
+
+    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
+    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
+
+    sort_direction * (value_a <=> value_b)
+  end %>
+<% end %>
+
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      sort_menu: [
+        { item: "Year", link: "?sort=year_asc#pinned_rows_table", active: params["sort"] == "year_asc", direction: "asc" },
+        { item: "Year", link: "?sort=year_desc#pinned_rows_table", active: params["sort"] == "year_desc", direction: "desc" }
+      ],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<% pinned_rows = { top: ["8"] } %>
+
+<%= pb_rails("advanced_table", props: { id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_table", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
+<% end %>

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

@@ -0,0 +1,7 @@
+Use the `pinned_rows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
+
+**NOTE:**
+- Sticky header required: Pinned rows must be used with `sticky: true` via `table_props` (works with both responsive and non-responsive tables)
+- Row ids required: Each object within the `table_data` array must contain a unique `id` in order to attach an id to all Rows for this to function.
+- `pinned_rows` takes a hash with a `top` key containing an array of row ids, as shown in the code snippet below.
+- For expandable rows, use the parent id in `pinned_rows[:top]`; all its children will automatically be pinned with it. If a child id is passed without the parent being pinned, nothing will be pinned.

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

@@ -0,0 +1,175 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+import Caption from "../../pb_caption/_caption"
+
+const sharedColumnDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+  },
+  {
+    accessor: "completedClasses",
+    label: "Completed Classes",
+  },
+  {
+    accessor: "classCompletionRate",
+    label: "Class Completion Rate",
+  },
+  {
+    accessor: "graduatedStudents",
+    label: "Graduated Students",
+  },
+]
+
+const sortByColumnDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+    enableSort: true,
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+    enableSort: true,
+  },
+  {
+    accessor: "completedClasses",
+    label: "Completed Classes",
+  },
+  {
+    accessor: "classCompletionRate",
+    label: "Class Completion Rate",
+  },
+  {
+    accessor: "graduatedStudents",
+    label: "Graduated Students",
+  },
+]
+
+const sortByColumnMultiDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+            enableSort: true,
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+            enableSort: true,
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const AdvancedTableSortParentOnly = (props) => {
+  return (
+    <div>
+      <Caption text="Enable Sorting (first column) + sortParentOnly" />
+      <AdvancedTable
+          columnDefinitions={sharedColumnDefinitions}
+          sortParentOnly
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+      <Caption marginTop="md" 
+          text="Sort by column + sortParentOnly"
+      />
+      <AdvancedTable
+          columnDefinitions={sortByColumnDefinitions}
+          enableSortingRemoval
+          sortParentOnly
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+      <Caption marginTop="md" 
+          text="Sort by column (multi-column) + sortParentOnly"
+      />
+      <AdvancedTable
+          columnDefinitions={sortByColumnMultiDefinitions}
+          enableSortingRemoval
+          sortParentOnly
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableSortParentOnly

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

@@ -0,0 +1,5 @@
+The `sortParentOnly` prop is a boolean set to `false` by default. When set to `true`, only parent (depth-0) rows are re-ordered when sorting; children and grandchildren stay grouped under their parent and keep their original order.
+
+`sortParentOnly` works with every sorting mode: `enableSorting` on the header, per-column `enableSort: true`, and sortable leaf columns in the multi-header variant. Sort indicators behave as usual.
+
+When omitted or `false`, sorting applies to all levels.

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

@@ -7,6 +7,7 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
+  - advanced_table_pinned_rows_rails: Pinned Rows
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
@@ -39,9 +40,11 @@ examples:
   - advanced_table_sort_per_column: Enable Sort By Column
   - advanced_table_sort_per_column_for_multi_column: Enable Sort By Column (Multi-Column)
   - advanced_table_custom_sort: Custom Sort
+  - advanced_table_sort_parent_only: Sort Parent Only
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
+  - advanced_table_cascade_collapse: Cascade Collapse
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props

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

@@ -48,4 +48,6 @@ export { default as AdvancedTablePaddingControl } from './_advanced_table_paddin
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
 export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
-export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
+export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.html.erb

@@ -27,3 +27,28 @@
   icon: "user",
   loading: true
 }) %>
+
+
+<%= pb_rails("button", props: { margin_top: "md", text: "Open Dialog to confirm PLAY-2837 fix still works", 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" }) %>
+        <%= pb_rails("circle_icon_button", props: { loading: true, icon: "plus" }) %>
+        <div style="height: 800px; background-color: lightgray;"></div>
+        <%= pb_rails("button", props: { loading: true, text: "Loading..." }) %>
+        <%= pb_rails("circle_icon_button", props: { loading: true, icon: "plus" }) %>
+    <% 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("circle_icon_button", props: { loading: true, icon: "plus" }) %>
+            <%= pb_rails("button", props: { text: "Back", variant: "link", data: {"close-dialog": "dialog-1"} }) %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.jsx

@@ -1,43 +1,102 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import CircleIconButton from '../_circle_icon_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Button from '../../pb_button/_button'
 
-const CircleIconButtonLoading = (props) => (
-  <div>
-    <CircleIconButton
-        icon="plus"
-        loading
-        variant="primary"
-        {...props}
-    />
-
-    <br />
-
-    <CircleIconButton
-        icon="pen"
-        loading
-        variant="secondary"
-        {...props}
-    />
-
-    <br />
-
-    <CircleIconButton
-        disabled
-        icon="times"
-        loading
-        {...props}
-    />
-
-    <br />
-
-    <CircleIconButton
-        icon="user"
-        loading
-        variant="link"
-        {...props}
-    />
-  </div>
-)
+const CircleIconButtonLoading = (props) => {
+
+
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => setIsOpen(false)
+  const open = () => setIsOpen(true)
+
+  return (
+    <div>
+      <CircleIconButton
+          icon="plus"
+          loading
+          variant="primary"
+          {...props}
+      />
+
+      <br />
+
+      <CircleIconButton
+          icon="pen"
+          loading
+          variant="secondary"
+          {...props}
+      />
+
+      <br />
+
+      <CircleIconButton
+          disabled
+          icon="times"
+          loading
+          {...props}
+      />
+
+      <br />
+
+      <CircleIconButton
+          icon="user"
+          loading
+          variant="link"
+          {...props}
+      />
+          <>
+        <Button marginTop="md"
+            onClick={open}
+        >
+          {'Open Dialog to confirm PLAY-2837 fix still works for circle icon buttons'}
+        </Button>
+        <Dialog
+            onCancel={close}
+            onClose={close}
+            onConfirm={close}
+            opened={isOpen}
+            size="md"
+            title="Header Title is the Title Prop"
+        >
+          <Dialog.Body>
+              <Button
+                  aria={{ label: 'Loading' }}
+                  loading
+                  text="Button Primary"
+              />
+              <CircleIconButton
+                  icon="plus"
+                  loading
+              />
+              <div style={{height: '800px', backgroundColor: 'lightgray'}} />
+              <Button
+                  loading
+                  text="Loading..."
+              />
+              <CircleIconButton
+                  icon="plus"
+                  loading
+              />
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Button
+                  loading
+                  text="Send My Issue"
+              />
+              <CircleIconButton
+                  icon="plus"
+                  loading
+              />
+              <Button  variant="link">
+                {"Back"}
+              </Button>
+            </Dialog.Footer>
+          </Dialog>
+      </>
+    </div> 
+  )
+}
 
 export default CircleIconButtonLoading

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

@@ -28,7 +28,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("textarea", props: {id: "default"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>

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

@@ -4,7 +4,7 @@ import Body from '../../pb_body/_body'
 import Button from '../../pb_button/_button'
 import Caption from '../../pb_caption/_caption'
 import Dialog from '../../pb_dialog/_dialog'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Textarea from '../../pb_textarea/_textarea'
 import Typeahead from '../../pb_typeahead/_typeahead'
 
 const DialogCompound = () => {
@@ -25,8 +25,11 @@ const DialogCompound = () => {
           <Body>{'What do you need us to take care of?'}</Body>
         </Dialog.Header>
         <Dialog.Body>
-          <Caption marginBottom="xs">{'Description'}</Caption>
-          <RichTextEditor />
+          <Textarea
+              id="default-example-1"
+              label="Description"
+              rows={4}
+          />
           <br />
           <Caption>
             {

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

@@ -12,7 +12,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("textarea", props: {id: "default-7"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
 
@@ -31,7 +31,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-8"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
     
@@ -49,7 +49,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-9"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
     

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.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 RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Textarea from '../../pb_textarea/_textarea'
 import Typeahead from '../../pb_typeahead/_typeahead'
 
 const useDialog = (visible = false) => {
@@ -77,8 +77,11 @@ const DialogFullHeight = () => {
               <Body>{title}</Body>
             </Dialog.Header>
             <Dialog.Body>
-              <Caption marginBottom="xs">{"Description"}</Caption>
-              <RichTextEditor />
+              <Textarea
+                  id="default-example-1"
+                  label="Description"
+                  rows={4}
+              />
               <br />
               <Caption>
                 {

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

@@ -13,7 +13,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("textarea", props: {id: "default-2"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
     <% end %>
@@ -32,7 +32,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-3"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <% end %>
@@ -50,7 +50,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-4"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <% end %>

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