playbook_ui 15.7.0.pre.alpha.PLAY2675dropdownquickpickcustomquickpickdates13330 → 15.7.0.pre.alpha.play2607setheightofeditor13370

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b48fc113950407e6045ecd779bef70a624758ae4d2c9b542c38130a31a35c68f
-  data.tar.gz: fcd6bf8c37129585b0acca7a0d00e6ce54de65bb68fdba3395608883f7ae9011
+  metadata.gz: f960f22bca9b3635502362441b26a13583eb183fcdebab46ebbca3f5b2b64d33
+  data.tar.gz: 37dd6c333df8bc2149be578ef208c32fea70e3ebdec053a8ab180ec5bf56e1d7
 SHA512:
-  metadata.gz: c0af7f993a8f9b64c9fd73d264e7aba87f692387c5c79a798728608c9c487e106270f5e7d1352f074b34bd0523fc15a127cfad5b13c2d6349e30d63fe4e65932
-  data.tar.gz: bb66651f32b7e9b18f83fb47086580b168691b3000f23f98996a564f37f41d8d3012c5e516ab51cd8cc8843aff71a701a3d0dedf0765e5d939e5f11125bab045
+  metadata.gz: 694f79e8ddf8ab1bd308e0d0f85faacbd856f66dfbb52f728074ff1721d673b0d4d32513c0aa5dd4c05f652aeb73d1ae4f5c77258fedbdb26b17f80fdcbf1e3d
+  data.tar.gz: b8cb5e6390f7a57b562a29dfa341ec33860bdee17c24df89ead92d06d01ae82bf9283600c0d0f4aedcf9b6dafc1b0cddb2eebd4bebdf5118b4fd10a356e65004

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -20,23 +20,12 @@ import {
     handleClickOutside,
 } from "./utilities";
 
-type CustomQuickPickDate = {
-    label: string;
-    value: string[] | { timePeriod: string; amount: number };
-};
-
-type CustomQuickPickDates = {
-    override?: boolean;
-    dates: CustomQuickPickDate[];
-};
-
 type DropdownProps = {
     aria?: { [key: string]: string };
     autocomplete?: boolean;
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
-    customQuickPickDates?: CustomQuickPickDates;
     formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
@@ -74,7 +63,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
-        customQuickPickDates,
         dark = false,
         data = {},
         defaultValue = {},
@@ -107,7 +95,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     // ------------- Quick Pick ---------------------------------
     // Use QuickPick options when variant is "quickpick"
     const dropdownOptions = variant === "quickpick" 
-        ? getQuickPickOptions(rangeEndsToday, customQuickPickDates) 
+        ? getQuickPickOptions(rangeEndsToday) 
         : (options || []);
     // ----------------------------------------------------------
 

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

@@ -25,7 +25,6 @@ examples:
   - dropdown_quickpick_rails: Quick Pick Variant
   - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
-  - dropdown_quickpick_custom_rails: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
 
@@ -58,7 +57,6 @@ examples:
   - 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_custom: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
 
 

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

@@ -26,5 +26,4 @@ export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_
 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'
-export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
+export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -15,8 +15,6 @@ module Playbook
       prop :default_value
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
-      prop :custom_quick_pick_dates, type: Playbook::Props::HashProp,
-                                     default: {}
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default subtle quickpick],
                      default: "default"
@@ -96,10 +94,7 @@ module Playbook
       end
 
       def quickpick_options
-        QuickpickHelper.get_quickpick_options(
-          range_ends_today: range_ends_today,
-          custom_quick_pick_dates: custom_quick_pick_dates
-        )
+        QuickpickHelper.get_quickpick_options(range_ends_today: range_ends_today)
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -539,125 +539,4 @@ test("quickpick option values are Date objects", () => {
   expect(endDate.getTime()).not.toBeNaN()
   
   expect(endDate.getTime()).toBeGreaterThanOrEqual(startDate.getTime())
-})
-
-test("customQuickPickDates overrides default options when override is true or undefined", () => {
-  render(
-    <Dropdown
-        customQuickPickDates={{
-          dates: [
-            {
-              label: "Last 15 months",
-              value: { timePeriod: "months", amount: 15 }
-            },
-            {
-              label: "Custom Range",
-              value: ["06/01/2022", "06/07/2022"]
-            }
-          ]
-        }}
-        data={{ testid: testId }}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const options = kit.querySelectorAll('.pb_dropdown_option_list')
-  
-  expect(options.length).toBe(2)
-  expect(options[0]).toHaveTextContent("Last 15 months")
-  expect(options[1]).toHaveTextContent("Custom Range")
-})
-
-test("customQuickPickDates appends to defaults when override is false", () => {
-  render(
-    <Dropdown
-        customQuickPickDates={{
-          override: false,
-          dates: [
-            {
-              label: "Custom Option",
-              value: { timePeriod: "days", amount: 30 }
-            }
-          ]
-        }}
-        data={{ testid: testId }}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const options = kit.querySelectorAll('.pb_dropdown_option_list')
-  
-  expect(options.length).toBe(11)
-  expect(options[0]).toHaveTextContent("Today")
-  expect(options[10]).toHaveTextContent("Custom Option")
-})
-
-test("customQuickPickDates with explicit date array returns correct values", () => {
-  const onSelectMock = jest.fn()
-  
-  render(
-    <Dropdown
-        customQuickPickDates={{
-          dates: [
-            {
-              label: "First Week of June 2022",
-              value: ["06/01/2022", "06/07/2022"]
-            }
-          ]
-        }}
-        data={{ testid: testId }}
-        onSelect={onSelectMock}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const option = kit.querySelector('.pb_dropdown_option_list')
-  
-  fireEvent.click(option)
-  
-  const selectedItem = onSelectMock.mock.calls[0][0]
-  
-  expect(selectedItem.label).toBe("First Week of June 2022")
-  expect(Array.isArray(selectedItem.value)).toBe(true)
-  expect(selectedItem.value.length).toBe(2)
-})
-
-test("customQuickPickDates with timePeriod calculates dates correctly", () => {
-  const onSelectMock = jest.fn()
-  
-  render(
-    <Dropdown
-        customQuickPickDates={{
-          dates: [
-            {
-              label: "Last 7 days",
-              value: { timePeriod: "days", amount: 7 }
-            }
-          ]
-        }}
-        data={{ testid: testId }}
-        onSelect={onSelectMock}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const option = kit.querySelector('.pb_dropdown_option_list')
-  
-  fireEvent.click(option)
-  
-  const selectedItem = onSelectMock.mock.calls[0][0]
-  
-  expect(selectedItem.label).toBe("Last 7 days")
-  expect(Array.isArray(selectedItem.value)).toBe(true)
-  
-  const [startDate, endDate] = selectedItem.value
-  expect(startDate instanceof Date).toBe(true)
-  expect(endDate instanceof Date).toBe(true)
-  
-  const today = new Date()
-  expect(endDate.toDateString()).toBe(today.toDateString())
 })

data/app/pb_kits/playbook/pb_dropdown/quickpick/index.ts

@@ -11,78 +11,8 @@ type QuickPickOption = {
   id?: string;
 };
 
-type CustomQuickPickDate = {
-  label: string;
-  value: string[] | { timePeriod: string; amount: number };
-};
-
-type CustomQuickPickDates = {
-  override?: boolean;
-  dates: CustomQuickPickDate[];
-};
-
-// Helper function to calculate date range from timePeriod and amount
-const calculateDateRange = (timePeriod: string, amount: number): Date[] => {
-  const endDate = new Date();
-  const startDate = new Date();
-
-  switch (timePeriod) {
-    case 'days':
-      startDate.setDate(endDate.getDate() - amount);
-      break;
-    case 'weeks':
-      startDate.setDate(endDate.getDate() - (amount * 7));
-      break;
-    case 'months':
-      startDate.setMonth(endDate.getMonth() - amount);
-      break;
-    case 'quarters':
-      startDate.setMonth(endDate.getMonth() - (amount * 3));
-      break;
-    case 'years':
-      startDate.setFullYear(endDate.getFullYear() - amount);
-      break;
-    default:
-      throw new Error('Invalid time period');
-  }
-  return [startDate, endDate];
-};
-
-// Helper to format date for display
-const formatDate = (date: Date) => {
-  const day = String(date.getDate()).padStart(2, "0");
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const year = date.getFullYear();
-
-  return `${month}/${day}/${year}`;
-};
-
-// Helper to create a QuickPickOption from a custom date
-const createOptionFromCustomDate = (customDate: CustomQuickPickDate): QuickPickOption => {
-  let dateRange: Date[];
-  
-  if (Array.isArray(customDate.value)) {
-    // Explicit date range as string array
-    dateRange = customDate.value.map((dateStr: string) => new Date(dateStr));
-  } else {
-    // Calculate from timePeriod and amount
-    dateRange = calculateDateRange(
-      customDate.value.timePeriod,
-      customDate.value.amount
-    );
-  }
-
-  return {
-    label: customDate.label,
-    value: dateRange,
-    formattedStartDate: formatDate(dateRange[0]),
-    formattedEndDate: formatDate(dateRange[1]),
-    id: `quickpick-${customDate.label.toLowerCase().replace(/\s+/g, '-')}`,
-  };
-};
-
 // Helper to get QuickPick options with date ranges
-const getQuickPickOptions = (rangeEndsToday = false, customQuickPickDates?: CustomQuickPickDates): QuickPickOption[] => {
+const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
   const today = new Date();
   const yesterday = DateTime.getYesterdayDate(new Date());
 
@@ -106,7 +36,14 @@ const getQuickPickOptions = (rangeEndsToday = false, customQuickPickDates?: Cust
   const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date());
   const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date());
 
-  const defaultOptions: QuickPickOption[] = [
+  const formatDate = (date: Date) => {
+  const day = String(date.getDate()).padStart(2, "0")
+  const month = String(date.getMonth() + 1).padStart(2, "0")
+  const year = date.getFullYear()
+
+  return `${month}/${day}/${year}`
+}
+  return [
     { label: 'Today', value: [today, today], id: 'quickpick-today' },
     { label: 'Yesterday', value: [yesterday, yesterday], formattedStartDate: `${formatDate(yesterday)}`, formattedEndDate: `${formatDate(yesterday)}`, id: 'quickpick-yesterday' },
     { label: 'This Week', value: [thisWeekStartDate, thisWeekEndDate], formattedStartDate: `${formatDate(thisWeekStartDate)}`, formattedEndDate: `${formatDate(thisWeekEndDate)}`, id: 'quickpick-this-week' },
@@ -118,19 +55,6 @@ const getQuickPickOptions = (rangeEndsToday = false, customQuickPickDates?: Cust
     { label: 'Last Quarter', value: [lastQuarterStartDate, lastQuarterEndDate], formattedStartDate: `${formatDate(lastQuarterStartDate)}`, formattedEndDate: `${formatDate(lastQuarterEndDate)}`, id: 'quickpick-last-quarter' },
     { label: 'Last Year', value: [lastYearStartDate, lastYearEndDate], formattedStartDate: `${formatDate(lastYearStartDate)}`, formattedEndDate: `${formatDate(lastYearEndDate)}`, id: 'quickpick-last-year' },
   ];
-
-  // Handle customQuickPickDates and override logic
-  if (customQuickPickDates && customQuickPickDates.dates && customQuickPickDates.dates.length > 0) {
-    const customOptions = customQuickPickDates.dates.map(createOptionFromCustomDate);
-    
-    if (customQuickPickDates.override === false) {
-      return [...defaultOptions, ...customOptions];
-    }
-    
-    return customOptions;
-  }
-
-  return defaultOptions;
 };
 
 export default getQuickPickOptions

data/app/pb_kits/playbook/pb_dropdown/quickpick_helper.rb

@@ -4,31 +4,7 @@ module Playbook
   module PbDropdown
     module QuickpickHelper
       class << self
-        def get_quickpick_options(range_ends_today: false, custom_quick_pick_dates: {})
-          default_options = build_default_options(range_ends_today)
-
-          # Handle custom_quick_pick_dates
-          return default_options if custom_quick_pick_dates.blank?
-
-          dates = custom_quick_pick_dates[:dates] || custom_quick_pick_dates["dates"]
-          return default_options if dates.blank?
-
-          custom_options = dates.map { |date_config| build_custom_option(date_config) }
-
-          # Override logic
-          override = custom_quick_pick_dates[:override]
-          override = custom_quick_pick_dates["override"] if override.nil?
-
-          if override == false
-            default_options + custom_options
-          else
-            custom_options
-          end
-        end
-
-      private
-
-        def build_default_options(range_ends_today)
+        def get_quickpick_options(range_ends_today: false)
           today = Date.today
           yesterday = today - 1.day
 
@@ -66,64 +42,7 @@ module Playbook
           ]
         end
 
-        def build_custom_option(date_config)
-          label = date_config[:label] || date_config["label"]
-          value = date_config[:value] || date_config["value"]
-
-          date_range = calculate_date_range(value)
-          start_date = date_range[0]
-          end_date = date_range[1]
-
-          {
-            id: "quickpick-#{label.downcase.gsub(/\s+/, '-')}",
-            label: label,
-            value: [start_date.to_s, end_date.to_s],
-            formatted_start_date: format_date(start_date),
-            formatted_end_date: format_date(end_date),
-          }
-        end
-
-        def calculate_date_range(value)
-          # Parse date strings if value is an array
-          if value.is_a?(Array)
-            [parse_date_string(value[0]), parse_date_string(value[1])]
-          else
-            # Calculate date range from time_period and amount
-            time_period = value[:time_period] || value["time_period"] || value[:timePeriod] || value["timePeriod"]
-            amount = value[:amount] || value["amount"]
-
-            end_date = Date.today
-            start_date = calculate_start_date(time_period, amount, end_date)
-
-            [start_date, end_date]
-          end
-        end
-
-        def parse_date_string(date_str)
-          # Handle US date format (MM/DD/YYYY) because Ruby's Date.parse defaults to European format (DD/MM/YYYY)
-          if date_str.include?("/")
-            Date.strptime(date_str, "%m/%d/%Y")
-          else
-            Date.parse(date_str)
-          end
-        end
-
-        def calculate_start_date(time_period, amount, end_date)
-          case time_period.to_s
-          when "days"
-            end_date - amount.days
-          when "weeks"
-            end_date - amount.weeks
-          when "months"
-            end_date - amount.months
-          when "quarters"
-            end_date - (amount * 3).months
-          when "years"
-            end_date - amount.years
-          else
-            raise ArgumentError, "Invalid time period: #{time_period}"
-          end
-        end
+      private
 
         def format_date(date)
           date.strftime("%m/%d/%Y")

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -30,10 +30,6 @@ module Playbook
         closeable.present? ? " remove_toast" : ""
       end
 
-      def auto_close_class
-        auto_close.present? ? " auto_close_#{auto_close}" : ""
-      end
-
       def position_class
         horizontal && vertical ? " positioned_toast #{vertical} #{horizontal}" : ""
       end
@@ -42,6 +38,14 @@ module Playbook
         multi_line.present? ? "multi_line" : nil
       end
 
+      def auto_close_attribute
+        auto_close.present? ? { "pb-auto-close": auto_close } : {}
+      end
+
+      def data
+        Hash(prop(:data)).merge(auto_close_attribute)
+      end
+
       def icon_value
         icon || case status
                 when "success"
@@ -61,9 +65,7 @@ module Playbook
 
       def classname
         default_z_index = z_index.present? ? "" : " z_index_max"
-        # IMPORTANT: the AutoClose class must be the last class in the string for JS to read it correctly
-        # Changing the order will break the auto_close functionality
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index + auto_close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index
       end
     end
   end

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js

@@ -21,17 +21,12 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
   }
 
   autoCloseToast(element) {
-    const classListValues = element.classList.value
-    const hasAutoCloseClass = classListValues.includes('auto_close')
-
-    if (hasAutoCloseClass) {
-      const classList = classListValues.split(' ')
-      const autoCloseValue = classList[classList.length - 1].split('_')[2]
-      const autoCloseIntValue = parseInt(autoCloseValue)
+    const autoCloseDataAttr = element.getAttribute('data-pb-auto-close')
 
+    if (autoCloseDataAttr) {
       setTimeout(() => {
         this.removeToast(element)
-      }, autoCloseIntValue)
+      }, parseInt(autoCloseDataAttr))
     }
   }
 }

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -4,7 +4,7 @@ import Flex from "../../pb_flex/_flex";
 import FlexItem from "../../pb_flex/_flex_item";
 import SectionSeparator from "../../pb_section_separator/_section_separator";
 
-import  EditorButton  from "./EditorButton";
+import EditorButton  from "./EditorButton";
 import ToolbarDropdown from "./ToolbarDropdown";
 import ToolbarNodes from "./ToolbarNodes";
 import { ToolbarTypes } from "./EditorTypes";

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -44,6 +44,8 @@ type RichTextEditorProps = {
   name?: string,
   onChange: (html: string, text: string) => void,
   placeholder?: string,
+  inputHeight?: "sm" | "md" | "lg",
+  inputMinHeight?: "sm" | "md" | "lg",
   simple?: boolean,
   sticky?: boolean,
   template: string,
@@ -68,6 +70,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     name,
     onChange = noop,
     placeholder,
+    inputHeight,
+    inputMinHeight,
     simple = false,
     sticky = false,
     template = '',
@@ -214,9 +218,10 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       {
         advancedEditor ? (
           <div 
-              className={classnames("pb_rich_text_editor_advanced_container", { 
-              ["toolbar-active"]: shouldShowToolbar,
-              })}
+              className={classnames(
+                "pb_rich_text_editor_advanced_container",
+                { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
+              )}
           >
             {shouldShowToolbar && (
               <EditorToolbar editor={advancedEditor}

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -205,6 +205,59 @@
     }
   }
 }
+
+.pb_rich_text_editor_advanced_container.input_height_sm {
+  div {
+    .tiptap.ProseMirror {
+      height: 131px;
+      overflow: auto;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_height_md {
+  div {
+    .tiptap.ProseMirror {
+      height: 180px;
+      overflow: auto;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_height_lg {
+  div {
+    .tiptap.ProseMirror {
+      height: 230px;
+      overflow: auto;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_min_height_sm {
+  div {
+    .tiptap.ProseMirror {
+      min-height: 131px;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_min_height_md {
+  div {
+    .tiptap.ProseMirror {
+      min-height: 180px;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_min_height_lg {
+  div {
+    .tiptap.ProseMirror {
+      min-height: 230px;
+    }
+  }
+}
+
+
 .tiptap-content {
   @include preview_tiptap_first_child;
   a {

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

@@ -0,0 +1,71 @@
+import React from 'react'
+import RichTextEditor from '../_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+import { Caption } from "playbook-ui"
+
+
+const RichTextEditorAdvancedHeight = (props) => {
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor2 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor3 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  return (
+    <div>
+      <Caption>sm</Caption>
+      <RichTextEditor
+          advancedEditor={editor}
+          inputHeight="sm"
+          {...props}
+      >
+        <EditorContent editor={editor} />
+      </RichTextEditor>
+
+      <br />
+
+      <Caption>md</Caption>
+      <RichTextEditor
+          advancedEditor={editor2}
+          inputHeight="md"
+          {...props}
+      >
+        <EditorContent editor={editor2} />
+      </RichTextEditor>
+
+      <br />
+
+      <Caption>lg</Caption>
+      <RichTextEditor
+          advancedEditor={editor3}
+          inputHeight="lg"
+          {...props}
+      >
+        <EditorContent editor={editor3} />
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedHeight

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

@@ -0,0 +1 @@
+Use the `inputHeight` prop to keep the text area a specific height. If the text exceeds the text area, it will automatically add a scrollbar to maintain the fixed height.

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

@@ -0,0 +1 @@
+Use the inputMinHeight prop to render the text area with a minimum height. If the text exceeds the text area, the text area will grow to accommodate it.