playbook_ui 16.1.0.pre.rc.1 → 16.1.0.pre.rc.3

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

@@ -4,6 +4,8 @@ import { TrixEditor } from 'react-trix'
 
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
+import Caption from '../pb_caption/_caption'
+import colors from '../tokens/exports/_colors.module.scss'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
 
@@ -40,12 +42,14 @@ type RichTextEditorProps = {
   inputOptions?: { [key: string]: string | number | boolean | (() => void) },
   id?: string,
   inline?: boolean,
+  label?: string,
   extensions?: { [key: string]: string }[],
   name?: string,
   onChange: (html: string, text: string) => void,
   placeholder?: string,
   inputHeight?: "sm" | "md" | "lg",
   inputMinHeight?: "sm" | "md" | "lg",
+  requiredIndicator?: boolean,
   simple?: boolean,
   sticky?: boolean,
   template: string,
@@ -64,6 +68,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     data = {},
     focus = false,
     htmlOptions = {},
+    id,
     inputOptions = {},
     inline = false,
     extensions,
@@ -76,7 +81,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     sticky = false,
     template = '',
     value = '',
-    maxWidth = "md"
+    maxWidth = "md",
+    requiredIndicator = false,
+    label,
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -86,7 +93,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     containerRef = useRef<HTMLDivElement>(null)
 
   const htmlProps = buildHtmlProps(htmlOptions)
-  
+
   const handleOnEditorReady = (editorInstance: Editor) => {
     setEditor(editorInstance)
     setTimeout(() => {
@@ -94,7 +101,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       if (oldId) {
         const hiddenInput = document.getElementById(oldId)
         if (hiddenInput) {
-          const newId = (inputOptions.id as string) || oldId  
+          const newId = (inputOptions.id as string) || oldId
           hiddenInput.id = newId
           editorInstance.element.setAttribute('input', newId)
 
@@ -119,7 +126,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       // set button attributes
       inlineCodeButton.dataset.trixAttribute = 'inlineCode'
       blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
-    } 
+    }
 
     if (toolbarBottom) editor.element.after(toolbarElement)
 
@@ -147,7 +154,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     if (!advancedEditor || !focus) return
 
     const handleFocus = () => setShowToolbarOnFocus(true)
-    
+
     const handleClickOutside = (event: Event) => {
       if (isClickInContainer(event) || isClickInPopover(event)) return
       setShowToolbarOnFocus(false)
@@ -215,9 +222,29 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         className={css}
         ref={focus ? containerRef : undefined}
     >
+    {label && (
+      <label  htmlFor={id}>
+        {
+          requiredIndicator ? (
+            <Caption className="pb_text_input_kit_label"
+                marginBottom="xs"
+            >
+              {label} <span style={{ color: `${colors.error}` }}>*</span>
+            </Caption>
+          ) : (
+            <Caption
+                className="pb_text_input_kit_label"
+                marginBottom="xs"
+                text={label}
+            />
+          )
+        }
+
+      </label>
+    )}
       {
         advancedEditor ? (
-          <div 
+          <div
               className={classnames(
                 "pb_rich_text_editor_advanced_container",
                 { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }

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

@@ -0,0 +1,35 @@
+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 RichTextEditorAdvancedRequiredIndicator = (props) => {
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"Add your text here. You can format your text, add links, quotes, and bullets."
+    })
+      if (!editor) {
+        return null
+      }
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          label="Label"
+          requiredIndicator
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedRequiredIndicator

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_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_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("rich_text_editor", props: {
+  id: "required-indicator",
+  input_options: {
+    id: 'hidden_input_id',
+    name: "hidden_input_name"
+  },
+  label: "Label",
+  required_indicator: true,
+  value: "Add your text here. You can format your text, add links, quotes, and bullets."
+}) %>

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

@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+
+const RichTextEditorRequiredIndicator = (props) => {
+  const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
+  handleOnChange = (html) => setValue(html)
+
+  return (
+    <div>
+      <RichTextEditor
+          label="Label"
+          onChange={handleOnChange}
+          requiredIndicator
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default RichTextEditorRequiredIndicator

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_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_rich_text_editor/docs/example.yml

@@ -9,6 +9,7 @@ examples:
   - rich_text_editor_templates: Templates
   # - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
+  - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_preview: Preview
 
   react:
@@ -31,5 +32,7 @@ examples:
   - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_advanced_height: Advanced Height
   - rich_text_editor_advanced_min_height: Advanced Min Height
+  - rich_text_editor_required_indicator: Required Indicator
+  - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
   - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview

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

@@ -19,3 +19,5 @@ export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_adv
 export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
 export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
 export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
+export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
+export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -21,6 +21,9 @@ module Playbook
       prop :template
       prop :placeholder
       prop :input_options
+      prop :label
+      prop :required_indicator, type: Playbook::Props::Boolean,
+                                default: false
 
       def classname
         generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
@@ -51,6 +54,8 @@ module Playbook
           template: template,
           placeholder: placeholder,
           inputOptions: input_options,
+          label: label,
+          requiredIndicator: required_indicator,
         }
       end
     end

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen, fireEvent, waitFor } from '../utilities/test-utils'
+import { render, screen, fireEvent, waitFor, within } from '../utilities/test-utils'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 
@@ -89,14 +89,14 @@ const TestAdvancedEditor = ({ toolbarOnFocus = false, ...props }) => {
 describe('Advanced TipTap Editor works as expected', () => {
   test('renders advanced editor with toolbar', () => {
     render(<TestAdvancedEditor />)
-    
+
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass(kitClass)
-    
+
     // Check for advanced container
     const advancedContainer = kit.querySelector('.pb_rich_text_editor_advanced_container')
     expect(advancedContainer).toBeInTheDocument()
-    
+
     // Check for toolbar
     const toolbar = kit.querySelector('.toolbar')
     expect(toolbar).toBeInTheDocument()
@@ -104,7 +104,7 @@ describe('Advanced TipTap Editor works as expected', () => {
 
   test('renders advanced editor without toolbar when advancedEditorToolbar is false', () => {
     render(<TestAdvancedEditor advancedEditorToolbar={false} />)
-    
+
     const kit = screen.getByTestId(testId)
     const toolbar = kit.querySelector('.toolbar')
     expect(toolbar).not.toBeInTheDocument()
@@ -112,17 +112,17 @@ describe('Advanced TipTap Editor works as expected', () => {
 
   test('shows/hides toolbar on focus when focus is enabled', async () => {
     render(<TestAdvancedEditor focus />)
-    
+
     const kit = screen.getByTestId(testId)
-    
+
     // Initially toolbar should be hidden
     let toolbar = kit.querySelector('.toolbar')
     expect(toolbar).not.toBeInTheDocument()
-    
+
     const editorElement = kit.querySelector('.ProseMirror')
     // Focus the editor
     fireEvent.focus(editorElement)
-    
+
     // Toolbar should now be visible
     await waitFor(() => {
       toolbar = kit.querySelector('.toolbar')
@@ -133,7 +133,7 @@ describe('Advanced TipTap Editor works as expected', () => {
 
   test('supports simple prop with advanced editor', () => {
     render(<TestAdvancedEditor simple />)
-    
+
     const kit = screen.getByTestId(testId)
     const toolbar = kit.querySelector('.toolbar')
     expect(toolbar).toBeInTheDocument()
@@ -144,7 +144,7 @@ describe('Advanced TipTap Editor works as expected', () => {
 
     test('supports sticky prop with advanced editor', () => {
     render(<TestAdvancedEditor sticky />)
-    
+
     const kit = screen.getByTestId(testId)
     const stickyToolbar = kit.querySelector('.pb_rich_text_editor_tiptap_toolbar_sticky')
     expect(stickyToolbar).toBeInTheDocument()
@@ -154,37 +154,52 @@ describe('Advanced TipTap Editor works as expected', () => {
   test('applies aria-label when provided', () => {
     const ariaLabel = 'Rich Text Editor'
     render(<TestAdvancedEditor aria={{ label: ariaLabel }} />)
-    
+
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveAttribute('aria-label', ariaLabel)
   })
 
   test('supports inline prop with advanced editor', () => {
     render(<TestAdvancedEditor inline />)
-    
+
     const kit = screen.getByTestId(testId)
     const toolbar = kit.querySelector('.toolbar')
     expect(toolbar).toBeInTheDocument()
     expect(kit).toHaveClass(`${kitClass} inline`)
   })
 
+  test('renders required indicator asterisk when requiredIndicator is true', () => {
+    render(
+      <RichTextEditor
+          data={{ testid: testId }}
+          label="Label"
+          requiredIndicator
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const label = within(kit).getByText(/Label/)
+
+    expect(label).toBeInTheDocument()
+    expect(kit).toHaveTextContent('*')
+  })
+
 describe('TipTap Editor Functionality', () => {
   test('can type and update content', async () => {
     render(<TestAdvancedEditor />)
-    
+
     const kit = screen.getByTestId(testId)
     const editorContent = kit.querySelector('.ProseMirror')
-    
+
     // Focus and type in the editor
     fireEvent.focus(editorContent)
-    fireEvent.input(editorContent, { 
+    fireEvent.input(editorContent, {
       target: { textContent: 'New content' }
     })
-    
+
     await waitFor(() => {
       expect(editorContent).toHaveTextContent('New content')
     })
   })
 })
 })
-

data/app/pb_kits/playbook/pb_table/docs/_sections.yml

@@ -0,0 +1,68 @@
+sections:
+  - title: "Size & Density"
+    examples:
+      - table_sm
+      - table_md
+      - table_lg
+      - table_multiline
+      - table_single_line
+      - table_outer_padding
+
+  - title: "Layout & Structure"
+    examples:
+      - table_responsive_table
+      - table_with_subcomponents
+      - table_with_subcomponents_as_divs
+      - table_with_background_kit
+
+
+  - title: "Sticky & Positional Behaviors"
+    examples:
+      - table_sticky
+      - table_sticky_left_columns
+      - table_sticky_right_columns
+      - table_sticky_columns
+      - table_alignment_row
+      - table_alignment_column
+      - table_alignment_shift_row
+      - table_alignment_shift_data
+      - table_side_highlight
+      - table_container
+
+  - title: "Collapsible & Nested Behaviors"
+    examples:
+      - table_with_collapsible
+      - table_with_dynamic_collapsible
+      - table_with_collapsible_with_custom_click
+      - table_with_collapsible_with_custom_content
+      - table_with_collapsible_with_nested_rows
+      - table_with_collapsible_with_nested_table
+
+  - title: "Data Presentation"
+    examples:
+      - table_data_table
+      - table_vertical_border
+      - table_striped
+
+  - title: "Header Variants"
+    examples:
+      - table_header
+      - table_with_header_style_borderless
+      - table_with_header_style_floating
+
+  - title: "Interactive Tables"
+    examples:
+      - table_with_clickable_rows
+      - table_with_selectable_rows
+      - table_with_filter_variant
+      - table_with_filter_variant_with_pagination
+      - table_disable_hover
+
+  - title: "Table Actions"
+    examples:
+      - table_one_action
+      - table_two_actions
+      - table_two_plus_actions
+      - table_action_middle
+      - table_icon_buttons
+      

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -13,6 +13,7 @@ import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
 import Flex from '../pb_flex/_flex'
 import FlexItem from '../pb_flex/_flex_item'
+import colors from '../tokens/exports/_colors.module.scss'
 
 import { stripEmojisForPaste, applyEmojiMask } from '../utilities/emojiMask'
 
@@ -36,6 +37,7 @@ type TextareaProps = {
   value?: string,
   name?: string,
   required?: boolean,
+  requiredIndicator?: boolean,
   rows?: number,
   resize: "none" | "both" | "horizontal" | "vertical" | "auto",
   onChange?: InputCallback<HTMLTextAreaElement>,
@@ -50,6 +52,7 @@ const Textarea = ({
   disabled,
   emojiMask = false,
   htmlOptions = {},
+  id,
   inline = false,
   resize = 'none',
   error,
@@ -60,6 +63,7 @@ const Textarea = ({
   onChange = () => {},
   placeholder,
   required,
+  requiredIndicator = false,
   rows = 4,
   value,
   ...props
@@ -84,7 +88,7 @@ const Textarea = ({
     if (emojiMask) {
       const pastedText = e.clipboardData.getData('text')
       const filteredText = stripEmojisForPaste(pastedText)
-      
+
       if (pastedText !== filteredText) {
         e.preventDefault()
         const textarea = e.currentTarget
@@ -93,10 +97,10 @@ const Textarea = ({
         const currentValue = textarea.value
         const newValue = currentValue.slice(0, start) + filteredText + currentValue.slice(end)
         const newCursorPosition = start + filteredText.length
-        
+
         textarea.value = newValue
         textarea.selectionStart = textarea.selectionEnd = newCursorPosition
-        
+
         onChange({ ...e, target: textarea, currentTarget: textarea } as unknown as ChangeEvent<HTMLTextAreaElement>)
       }
     }
@@ -124,7 +128,21 @@ const Textarea = ({
         {...htmlProps}
         className={classes}
     >
-      <Caption text={label} />
+    {label && (
+      <label htmlFor={id}>
+      {
+        requiredIndicator ? (
+          <Caption className="pb_text_input_kit_label">
+            {label} <span style={{ color: `${colors.error}` }}>*</span>
+          </Caption>
+        ) : (
+          <Caption  className="pb_text_input_kit_label"
+              text={label}
+          />
+        )
+      }
+      </label>
+    )}
       {children || (
         <textarea
             disabled={disabled}
@@ -143,19 +161,19 @@ const Textarea = ({
       {error ? (
         <>
           {characterCount ? (
-            <Flex 
-                spacing="between" 
+            <Flex
+                spacing="between"
                 vertical="center"
             >
               <FlexItem>
-                <Body 
+                <Body
                     margin="none"
                     status="negative"
-                    text={error} 
+                    text={error}
                 />
               </FlexItem>
               <FlexItem>
-                <Caption 
+                <Caption
                     margin="none"
                     size="xs"
                     text={characterCounter()}
@@ -163,7 +181,7 @@ const Textarea = ({
               </FlexItem>
             </Flex>
           ) : (
-            <Body 
+            <Body
                 status="negative"
                 text={error}
             />
@@ -171,7 +189,7 @@ const Textarea = ({
         </>
       ) : (
          noCount && (
-          <Caption 
+          <Caption
               margin="none"
               size="xs"
               text={characterCounter()}

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb

@@ -0,0 +1,39 @@
+<%= pb_rails("textarea", props: { 
+  label: "ID on Container", 
+  id: "container-id",
+  name: "comment",
+  rows: 4
+}) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { 
+  label: "ID on Textarea via input_options", 
+  input_options: { id: "textarea-id" },
+  name: "comment",
+  rows: 4
+}) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { 
+  label: "Both Container and Textarea IDs", 
+  id: "container-id-2",
+  input_options: { id: "textarea-id-2" },
+  name: "comment",
+  rows: 4
+}) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { 
+  label: "Data and ARIA Attributes", 
+  name: "description",
+  rows: 4,
+  input_options: {
+    'aria-label': "Enter description",
+    'aria-describedby': "help-text",
+    data: { controller: "textarea", action: "focus->handleFocus" },
+    id: "description-textarea"
+  }
+}) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md

@@ -0,0 +1,3 @@
+Use the `input_options` / `inputOptions` prop to pass additional attributes directly to the underlying `<textarea>` element instead of the outer wrapper. This is useful for applying data attributes, custom IDs, ARIA attributes, or other HTML attributes that need to be on the textarea element itself.
+
+Additional HTML attributes (e.g. data or ARIA attributes) can also be passed directly to the `<textarea>` via `input_options`.

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("textarea", props: {
+  label: "Label",
+  placeholder: "Placeholder text",
+  required_indicator: true
+}) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx

@@ -0,0 +1,25 @@
+import React, {useState} from 'react'
+
+import Textarea from '../_textarea'
+
+const TextareaRequiredIndicator = (props) => {
+  const [value, setValue] = useState('Default value text')
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+  return (
+    <div>
+      <Textarea
+          label="Label"
+          name="comment"
+          onChange={(e) => handleChange(e)}
+          placeholder="Placeholder text"
+          requiredIndicator
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextareaRequiredIndicator

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_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_textarea/docs/example.yml

@@ -8,6 +8,8 @@ examples:
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
   - textarea_emoji_mask: Emoji Mask
+  - textarea_required_indicator: Required Indicator
+  - textarea_input_options: Input Options
 
   react:
   - textarea_default: Default
@@ -17,8 +19,9 @@ examples:
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
   - textarea_emoji_mask: Emoji Mask
+  - textarea_required_indicator: Required Indicator
 
   swift:
   - textarea_default_swift: Default
   - textarea_error_swift: Textarea w/ Error
-  - textarea_props_swift: ""
+  - textarea_props_swift: ""

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

@@ -5,3 +5,4 @@ export { default as TextareaError } from './_textarea_error.jsx'
 export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
 export { default as TextareaInline } from './_textarea_inline.jsx'
 export { default as TextareaEmojiMask } from './_textarea_emoji_mask.jsx'
+export { default as TextareaRequiredIndicator } from './_textarea_required_indicator.jsx'