playbook_ui 16.1.0.pre.alpha.play276813969 → 16.1.0.pre.alpha.testingrailsfix14159

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 387f03d299bddebe2e4ac7e9800fddf28bb00cdeceb0ffcd9a5c4ea1ed211d20
-  data.tar.gz: 03b9b1cbcb66afd3afd4d28eb8c0226dc4d7a2ddc883dadb0844bc427f857831
+  metadata.gz: d322d1484a0695b5c047cf03aa19f8af74cf5ad1728dc20a327eb2447c986d61
+  data.tar.gz: 042e05bf1e98557de7c10f400b547d52d806788e4e14e40fdf374934eed0a0d9
 SHA512:
-  metadata.gz: e4f7c1a63a205b06dadc63869cbfb9f761d88775d9d625efe37bd896d1cbd5269107b71fc0c24714bb781c2b314e949aa5a37bcab80eed8689fe0d90b72796f9
-  data.tar.gz: 7933fda91c7fe525372cb559bcc56147fe86bc877cac737603ee0694b62f34fdef93cd2e40b88860de6a51f0c389e21ac2ae6d858cd1cb14531a31083e78bd7c
+  metadata.gz: a29ba74bbb1ceefdc7817720135660996607782e6ecbe661b112bd23d7d576dd8526de402247e20551c94acba07ee146c1522f58b3165368926a49af0c00c9e0
+  data.tar.gz: c10ac2431f78b6b2d88a0ae45f7543d501341449d1d79d62a2321a93e2594c03aa36ef678f4f2377667801d261fde114228b8ad09c06b3cd71b61206ff6b5f3b

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -66,8 +66,18 @@ const TableCellRenderer = ({
         // Find the "owning" colDefinition by accessor. Needed for multi column logic
         const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
-        const cellFontColor = colDef?.columnStyling?.fontColor
-        const cellBackgroundColor = colDef?.columnStyling?.cellBackgroundColor
+        
+        // Support function-based styling for conditional rendering
+        const cellFontColorValue = colDef?.columnStyling?.fontColor
+        const cellFontColor = typeof cellFontColorValue === 'function' 
+          ? cellFontColorValue(row) 
+          : cellFontColorValue
+        
+        const cellBackgroundColorValue = colDef?.columnStyling?.cellBackgroundColor
+        const cellBackgroundColor = typeof cellBackgroundColorValue === 'function' 
+          ? cellBackgroundColorValue(row) 
+          : cellBackgroundColorValue
+        
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
 

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -920,6 +920,39 @@ test("columnStyling.backgroundColor works as excpected", () => {
   expect(firstEnrollmentCell).toHaveStyle({ backgroundColor: colors.error_subtle });
 });
 
+test("columnStyling.cellBackgroundColor works as expected with function", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling:{
+        cellBackgroundColor: (row) => row.original.newEnrollments > 15 ? colors.success_subtle : colors.error_subtle,
+        fontColor: (row) => row.original.newEnrollments > 15 ? colors.success : colors.error,
+      },    
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
+  expect(firstEnrollmentCell).toHaveStyle({ backgroundColor: colors.success_subtle, color: colors.success });
+}); 
+
 test("columnStyling.headerBackgroundColor works as excpected", () => {
   const styledColumnDefs = [
     {

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

@@ -0,0 +1,71 @@
+import React from "react"
+import AdvancedTable from '../_advanced_table'
+import colors from '../../tokens/exports/_colors.module.scss'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+import  Flex  from '../../pb_flex/_flex'
+import  Title  from '../../pb_title/_title'
+import  Body  from '../../pb_body/_body'
+
+
+const AdvancedTableColumnStylingBackgroundCustom = (props) => {
+  const columnDefinitions = [
+{
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      customRenderer: (row, value) => (
+        <Flex flexDirection="column">
+          <Title size={4}
+              text={value} 
+          />
+          <Body text="lorem ipsum" />
+          <Body text="lorem ipsum" />
+        </Flex>
+      ), 
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling:{
+        cellBackgroundColor: (row) => row.original.newEnrollments > 15 ? colors.success_subtle : colors.error_subtle,
+        fontColor: (row) => row.original.newEnrollments > 15 ? colors.success : colors.error,
+      },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      columnStyling:{
+        cellBackgroundColor: (row) => row.original.scheduledMeetings >= 15 ? colors.info_subtle : colors.warning_subtle
+      },
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnStylingBackgroundCustom

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

@@ -0,0 +1,4 @@
+`cellBackgroundColor` and `fontColor` can also accept functions for conditional styling based on row data. The function receives the row object and returns a color value.
+
+See the code snippet below for more details.
+

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

@@ -78,6 +78,7 @@ examples:
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_column_styling_background: Column Styling Background Color
+  - advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)
   - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color

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

@@ -47,4 +47,5 @@ export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
 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 AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
+export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -168,4 +168,4 @@ $transition: $transition_cubic;
       border-color: $error;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -4,6 +4,8 @@ import Icon from '../pb_icon/_icon'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import classnames from 'classnames'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import colors from '../tokens/exports/_colors.module.scss'
+import spacing from '../tokens/exports/_spacing.module.scss'
 
 type CheckboxProps = {
   aria?: {[key: string]: string},
@@ -19,6 +21,7 @@ type CheckboxProps = {
   indeterminate?: boolean,
   name?: string,
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
+  requiredIndicator?: boolean,
   tabIndex?: number,
   text?: string,
   value?: string,
@@ -39,6 +42,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
     indeterminate = false,
     name = '',
     onChange = () => { void 0 },
+    requiredIndicator = false,
     tabIndex,
     text = '',
     value = '',
@@ -124,7 +128,20 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
           variant={null}
       >
         {text}
+        {requiredIndicator && (
+          <span
+              aria-hidden="true"
+              className="pb_required_indicator"
+              style={{
+                color: colors.error,
+                marginLeft: spacing.space_xs,
+              }}
+          >
+           {'*'}
+          </span>
+        )}
       </Body>
+
     </label>
   )
 })

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -5,6 +5,15 @@
     <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
   </span>
   <span class="pb_checkbox_label">
-    <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
+    <%= pb_rails("body", props: { status: object.checkbox_label_status, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) do %>
+      <%= object.text%>
+      <% if object.required_indicator %>
+        <span
+          class="pb_checkbox_required_indicator"
+          aria-hidden="true"
+          style="color: #DA0014;"
+        >*</span>
+      <% end %>
+    <% end %>
   </span>
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -23,6 +23,8 @@ module Playbook
       prop :hidden_input, type: Playbook::Props::Boolean,
                           default: false
       prop :hidden_value
+      prop :required_indicator, type: Playbook::Props::Boolean,
+                                default: false
 
       def classname
         generate_classname("pb_checkbox_kit", checked_class) + error_class

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("checkbox" , props: {
+  required_indicator: true,
+  text: "Checkbox Label",
+  value: "checkbox-value",
+  name: "checkbox-name"
+}) %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Checkbox from '../_checkbox'
+
+const CheckboxRequiredIndicator = () => {
+  return (
+    <div>
+      <Checkbox
+          name="checkbox-name"
+          requiredIndicator
+          text="Checkbox label"
+          value="check-box value"
+      />
+    </div>
+  )
+}
+
+export default CheckboxRequiredIndicator

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.md

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation. 
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop. 

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

@@ -8,6 +8,7 @@ examples:
     - checkbox_indeterminate: Indeterminate Checkbox
     - checkbox_disabled: Disabled Checkbox
     - checkbox_form: Form and Hidden Input
+    # - checkbox_required_indicator: Required Indicator
 
   react:
   - checkbox_default: Default
@@ -17,6 +18,7 @@ examples:
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
   - checkbox_disabled: Disabled Checkbox
+  # - checkbox_required_indicator: Required Indicator
 
   swift:
     - checkbox_default_swift: Default

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

@@ -5,3 +5,4 @@ export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
 export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
+export { default as CheckboxRequiredIndicator } from './_checkbox_required_indicator.jsx'

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -40,7 +40,7 @@ type DatePickerProps = {
   maxDate: string,
   minDate: string,
   name: string,
-  pickerId?: string,
+  pickerId: string,
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
@@ -196,6 +196,8 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
+  const errorId = error ? `${pickerId}-error` : undefined
+
   return (
     <div
         {...ariaProps}
@@ -211,14 +213,18 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       >
 
         {!hideLabel && (
-          <Caption
-              className="pb_date_picker_kit_label"
-              text={label}
-          />
+           <label htmlFor={pickerId}>
+            <Caption
+                className="pb_date_picker_kit_label"
+                text={label}
+            />
+          </label>
         )}
           <>
             <div className="date_picker_input_wrapper">
               <input
+                  aria-describedby={errorId}
+                  aria-invalid={!!error}
                   autoComplete="off"
                   className="date_picker_input"
                   disabled={disableInput}
@@ -232,6 +238,9 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
               {error &&
                   <Body
+                      aria={{ atomic: "true", live: "polite" }}
+                      htmlOptions={{ role: "alert" }}
+                      id={errorId}
                       status="negative"
                       text={error}
                       variant={null}

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

@@ -0,0 +1 @@
+`pickerId`/`picker_id` is a **required prop** to instantiate the Date Picker. The presence of `pickerId`/`picker_id` in your Date Picker also associates the label with the input, providing the ability to focus the Date Picker by clicking the label.

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb

@@ -1,14 +1,17 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
+  <%= form.typeahead :example_typeahead_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
+  <%# <%= form.check_box :example_checkbox, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
+  <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -26,6 +26,10 @@ class PbFormValidation extends PbEnhancedElement {
       const isPhoneNumberInput = field.closest('.pb_phone_number_input')
       if (isPhoneNumberInput) return
 
+      // Skip TimePicker inputs - they handle their own validation
+      const isTimePickerInput = field.closest('.pb_time_picker')
+      if (isTimePickerInput) return
+
       FIELD_EVENTS.forEach((e) => {
         field.addEventListener(e, debounce((event) => {
           this.validateFormField(event)
@@ -67,13 +71,16 @@ class PbFormValidation extends PbEnhancedElement {
 
     // Check if this is a phone number input
     const isPhoneNumberInput = kitElement.classList.contains('pb_phone_number_input')
+    
+    // Check if this is a TimePicker input
+    const isTimePickerInput = kitElement.classList.contains('pb_time_picker')
 
     // ensure clean error message state
     this.clearError(target)
     kitElement.classList.add('error')
 
-    // Only add error message if it's NOT a phone number input
-    if (!isPhoneNumberInput) {
+    // Only add error message if it's NOT a phone number input or TimePicker input
+    if (!isPhoneNumberInput && !isTimePickerInput) {
       // set the error message element
       const errorMessageContainer = this.errorMessageContainer
 

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx

@@ -178,22 +178,40 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
               {...inputProps}
           />
           <span
+              aria-label={
+                showPassphrase
+                  ? "Passphrase currently visible. Click icon to hide password"
+                  : "Passphrase currently hidden. Click icon to reveal password"
+              }
+              aria-pressed={showPassphrase}
               className="show-passphrase-icon"
               onClick={toggleShowPassphrase}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault()
+                  toggleShowPassphrase(e as any)
+                }
+              }}
+              role="button"
+              tabIndex={0}
           >
             <Body
                 className={showPassphrase ? "hide-icon" : ""}
                 color="light"
                 dark={dark}
             >
-              <Icon icon="eye-slash" />
+              <Icon 
+                  aria={{ label: "eye icon" }} 
+                  icon="eye-slash" 
+              />
             </Body>
             <Body
                 className={showPassphrase ? "" : "hide-icon"}
                 color="light"
                 dark={dark}
             >
-            <Icon  
+            <Icon 
+                aria={{ label: "eye icon" }} 
                 className="svg-inline--fa"
                 customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }}
             />

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

@@ -94,25 +94,51 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
+  const fieldId = id ? (id as string) : null
+  const labelElementId = fieldId ? `${fieldId}-label` : null
+
   const handleOnEditorReady = (editorInstance: Editor) => {
     setEditor(editorInstance)
+
     setTimeout(() => {
-      const oldId = editorInstance.element.getAttribute('input')
-      if (oldId) {
-        const hiddenInput = document.getElementById(oldId)
-        if (hiddenInput) {
-          const newId = (inputOptions.id as string) || oldId
-          hiddenInput.id = newId
-          editorInstance.element.setAttribute('input', newId)
-
-          if (inputOptions.name) {
-            hiddenInput.setAttribute('name', inputOptions.name as string)
-          }
-        }
+      const oldId = editorInstance.element?.getAttribute("input")
+      if (!oldId) return
+
+      const hiddenInput = document.getElementById(oldId) as HTMLElement | null
+      if (!hiddenInput) return
+
+      const hiddenInputId = (inputOptions.id as string) || oldId
+
+      if (hiddenInputId !== oldId) {
+        hiddenInput.id = hiddenInputId
+        editorInstance.element?.setAttribute("input", hiddenInputId)
+      }
+
+      if (inputOptions.name) {
+        hiddenInput.setAttribute("name", inputOptions.name as string)
       }
+
+      const editorDomId = (id as string) || `${hiddenInputId}_trix`
+      const trixLabelId = ((id as string) || hiddenInputId) + "-label"
+
+      if (label) {
+        editorInstance.element?.setAttribute("aria-labelledby", trixLabelId)
+      }
+      editorInstance.element!.id = editorDomId
     })
   }
 
+  useEffect(() => {
+    if (!advancedEditor || !fieldId || !labelElementId) return
+
+    const dom = advancedEditor.view?.dom as HTMLElement | undefined
+    if (!dom) return
+
+    dom.setAttribute("aria-labelledby", labelElementId)
+    dom.setAttribute("role", "textbox")
+    dom.setAttribute("aria-multiline", "true")
+  }, [advancedEditor, fieldId, labelElementId])
+
   // DOM manipulation must wait for editor to be ready
   if (editor && editor.element) {
     const toolbarElement = editor.element.parentElement.querySelector('trix-toolbar') as HTMLElement,
@@ -214,6 +240,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   // Determine if toolbar should be shown
   const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
 
+  const labelFor = advancedEditor ? fieldId : (id ? id : (inputOptions.id ? `${inputOptions.id}_trix` : undefined))
+
   return (
     <div
         {...ariaProps}
@@ -223,7 +251,14 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         ref={focus ? containerRef : undefined}
     >
     {label && (
-      <label  htmlFor={id}>
+      <label
+          {...(labelFor ? { htmlFor: labelFor, id: labelElementId } : {})}
+          onMouseDown={(e) => {
+            if (!advancedEditor || !fieldId) return
+            e.preventDefault()
+            advancedEditor.commands.focus()
+          }}
+      >
         {
           requiredIndicator ? (
             <Caption className="pb_text_input_kit_label"
@@ -246,9 +281,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         advancedEditor ? (
           <div
               className={classnames(
-                "pb_rich_text_editor_advanced_container",
-                { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
-              )}
+              "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/docs/_rich_text_editor_advanced_label.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedLabel = (props) => {
+
+    const editor = useEditor({
+      extensions: [StarterKit, Link],
+      content: "Add your text here. You can format your text, add links, quotes, and bullets.",
+    })
+
+    const editorNoLabel = useEditor({
+      extensions: [StarterKit, Link],
+      content: "Add your text here. You can format your text, add links, quotes, and bullets.",
+    })
+
+    if (!editor || !editorNoLabel) return null
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          id={"advanced-example"}
+          label="Advanced Example Label"
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+      <br/>
+      <RichTextEditor
+          advancedEditor={editorNoLabel}
+          label="Advanced Example Label No ID"
+          {...props}
+      >
+        <EditorContent editor={editorNoLabel}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedLabel

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

@@ -0,0 +1 @@
+The optional `label` prop adds a visible label to the advanced editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.

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

@@ -22,6 +22,7 @@ const RichTextEditorAdvancedRequiredIndicator = (props) => {
     <div>
       <RichTextEditor
           advancedEditor={editor}
+          id={"required-advanced"}
           label="Label"
           requiredIndicator
           {...props}

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

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

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

@@ -0,0 +1 @@
+The optional `label` prop adds a visible label to the editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.

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

@@ -8,6 +8,7 @@ const RichTextEditorRequiredIndicator = (props) => {
   return (
     <div>
       <RichTextEditor
+          inputOptions = {{ id: "required" }}
           label="Label"
           onChange={handleOnChange}
           requiredIndicator