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

data/app/pb_kits/playbook/pb_textarea/index.ts

@@ -11,18 +11,21 @@ export default class PbTextarea extends PbEnhancedElement {
   }
 
   hasEmojiMask(): boolean {
+    if (!this.element) return false
     return (this.element as HTMLElement).dataset.pbEmojiMask === "true"
   }
 
-  onInput(): void {
+  onInput = (): void => {
+    if (!this.element) return
+    
     if ((this.element as HTMLElement).closest('.resize_auto')) {
-      this.style.height = 'auto'
-      this.style.height = (this.scrollHeight) + 'px'
+      (this.element as HTMLTextAreaElement).style.height = 'auto';
+      (this.element as HTMLTextAreaElement).style.height = (this.element as HTMLTextAreaElement).scrollHeight + 'px'
     }
   }
 
   handleEmojiInput = (): void => {
-    if (!this.hasEmojiMask()) return
+    if (!this.element || !this.hasEmojiMask()) return
     
     if (this.skipNextEmojiFilter) {
       this.skipNextEmojiFilter = false
@@ -33,7 +36,7 @@ export default class PbTextarea extends PbEnhancedElement {
   }
 
   handleEmojiPaste = (event: ClipboardEvent): void => {
-    if (!this.hasEmojiMask()) return
+    if (!this.element || !this.hasEmojiMask()) return
 
     const pastedText = event.clipboardData?.getData('text') || ''
     const filteredText = stripEmojisForPaste(pastedText)
@@ -57,6 +60,8 @@ export default class PbTextarea extends PbEnhancedElement {
   }
 
   connect(): void {
+    if (!this.element) return
+    
     if ((this.element as HTMLElement).closest('.resize_auto')) {
       this.element.setAttribute('style', 'height:' + (this.element as HTMLTextAreaElement).scrollHeight + 'px;overflow-y:hidden;')
       this.element.addEventListener('input', this.onInput, false)
@@ -69,6 +74,8 @@ export default class PbTextarea extends PbEnhancedElement {
   }
 
   disconnect(): void {
+    if (!this.element) return
+    
     this.element.removeEventListener('input', this.onInput, false)
     this.element.removeEventListener('input', this.handleEmojiInput, false)
     this.element.removeEventListener('paste', this.handleEmojiPaste as EventListener, false)

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -1,6 +1,12 @@
 <%= pb_content_tag do %>
   <% if object.label.present? %>
+    <% if object.required_indicator %>
+      <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) do %>
+        <%= object.label %><span style="color: #DA0014;"> *</span>
+      <% end %>
+    <% else %>
     <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
+    <% end %>
   <% end %>
   <% if content.present? %>
     <%= content %>
@@ -8,16 +14,10 @@
       <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
     <% end %>
   <% else %>
-    <%= text_area(
-        :object,
-        :method,
-        :data => object.textarea_options[:data],
-        :max_characters => object.max_characters,
-        :name => object.name,
-        :onkeyup => object.onkeyup,
-        :placeholder => object.placeholder,
-        :rows => object.rows,
-        :value => object.value) %>
+    <%= text_area_tag(
+        object.name,
+        object.value,
+        object.all_textarea_attributes) %>
     <% if object.error %>
       <% if object.character_count %>
         <%= pb_rails("flex", props: { spacing: "between", vertical: "center" }) do %>

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -8,6 +8,8 @@ module Playbook
       prop :error
       prop :inline, type: Playbook::Props::Boolean,
                     default: false
+      prop :input_options, type: Playbook::Props::HashProp,
+                           default: {}
       prop :label
       prop :method
       prop :name
@@ -21,6 +23,8 @@ module Playbook
       prop :character_count
       prop :onkeyup
       prop :max_characters
+      prop :required_indicator, type: Playbook::Props::Boolean,
+                                default: false
 
       def classname
         generate_classname("pb_textarea_kit") + error_class + resize_class + inline_class
@@ -36,6 +40,32 @@ module Playbook
         }
       end
 
+      def all_textarea_attributes
+        # Merge data attributes: emoji_mask data + input_options data
+        data_attrs = textarea_options[:data] || {}
+        input_data = input_options[:data] || {}
+        merged_data = data_attrs.merge(input_data)
+
+        base_attributes = {
+          id: input_options[:id] || "object_method",
+          max_characters: max_characters,
+          name: name,
+          onkeyup: onkeyup,
+          placeholder: placeholder,
+          rows: rows,
+          value: value,
+        }
+
+        # Merge input_options (excluding data to handle separately)
+        input_options_without_data = input_options.except(:data)
+        result = base_attributes.merge(input_options_without_data)
+
+        # Add merged data if present (input_options data takes precedence over emoji_mask data)
+        result[:data] = merged_data unless merged_data.empty?
+
+        result
+      end
+
     private
 
       def error_class

data/app/pb_kits/playbook/pb_textarea/textarea.test.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { render, screen, fireEvent } from "../utilities/test-utils"
+import { render, screen, fireEvent, within } from "../utilities/test-utils"
 
 import Textarea from "./_textarea"
 
@@ -265,4 +265,21 @@ describe("Textarea Emoji Mask", () => {
     fireEvent.change(textarea, { target: { value: 'àëǒüñ' } })
     expect(textarea.value).toBe('àëǒüñ')
   })
+
+  test('renders required indicator asterisk when requiredIndicator is true', () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          label="Name"
+          required
+          requiredIndicator
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const label = within(kit).getByText(/Name/)
+
+    expect(label).toBeInTheDocument()
+    expect(kit).toHaveTextContent('*')
+  })
 })

data/app/pb_kits/playbook/utilities/test/globalProps/borderRadius.test.js

@@ -0,0 +1,33 @@
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+// NOTE: TextInput excluded - borderRadius is not a valid prop for input elements
+testGlobalProp(
+  'borderRadius',
+  ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'rounded'],
+  (v) => `border_radius_${v}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+
+testGlobalPropAbsence(
+  'borderRadius',
+  ['border_radius_none', 'border_radius_xs', 'border_radius_sm', 'border_radius_md', 'border_radius_lg', 'border_radius_xl', 'border_radius_rounded'],
+  undefined,
+  { skipNull: true }
+)
+
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'borderRadius',
+  ['invalid', 'bad_value', 'not_a_radius', 'special-chars!@#'],
+  ['border_radius_invalid', 'border_radius_bad_value', 'border_radius_not_a_radius', 'border_radius_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/bottom.test.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import { render, screen } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+const validSizes = ['xs', 'sm', 'md', 'lg', 'xl']
+
+// NOTE: TextInput excluded - positioning props are not valid for input elements
+// Test bottom prop with string values
+testGlobalProp(
+  'bottom',
+  validSizes,
+  (v) => `bottom_${v}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+
+// Test bottom prop with object values (inset) - tested separately due to object value complexity
+test('Global Props: bottom returns proper class name with object values (inset)', () => {
+  const testCases = [
+    { value: { value: 'md', inset: true }, expected: 'bottom_md_inset' },
+    { value: { value: 'lg', inset: false }, expected: 'bottom_lg' },
+    { value: { value: 'sm', inset: true }, expected: 'bottom_sm_inset' }
+  ]
+  
+  testCases.forEach(({ value, expected }) => {
+    const testId = `body-bottom-object-${value.value}-${value.inset}`
+    render(
+      <Body
+          bottom={value}
+          data={{ testid: testId }}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(expected)
+  })
+})
+
+testGlobalPropAbsence(
+  'bottom',
+  ['bottom_xs', 'bottom_sm', 'bottom_md', 'bottom_lg', 'bottom_xl'],
+  undefined,
+  { skipNull: true }
+)
+
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'bottom',
+  ['invalid', 'bad_value', 'not_a_size', 'special-chars!@#'],
+  ['bottom_invalid', 'bottom_bad_value', 'bottom_not_a_size', 'bottom_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/cursor.test.js

@@ -0,0 +1,42 @@
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import { camelToSnakeCase } from '../../../utilities/text'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import TextInput from '../../../pb_text_input/_text_input'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+const validValues = [
+  'auto', 'default', 'none', 'contextMenu', 'help', 'pointer', 'progress', 'wait', 'cell',
+  'crosshair', 'text', 'verticalText', 'alias', 'copy', 'move', 'noDrop', 'notAllowed', 'grab',
+  'grabbing', 'eResize', 'nResize', 'neResize', 'nwResize', 'sResize', 'seResize', 'swResize', 'wResize',
+  'ewResize', 'nsResize', 'neswResize', 'nwseResize', 'colResize', 'rowResize', 'allScroll', 'zoomIn', 'zoomOut'
+]
+
+testGlobalProp(
+  'cursor',
+  validValues,
+  (v) => `cursor_${camelToSnakeCase(v)}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+
+testGlobalPropAbsence(
+  'cursor',
+  ['cursor_auto', 'cursor_pointer', 'cursor_default', 'cursor_none'],
+  undefined,
+  { skipNull: true }
+)
+
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+// NOTE: Using allowRenderingErrors: true because invalid types (like numbers) cause rendering errors with camelToSnakeCase
+testGlobalPropInvalidValues(
+  'cursor',
+  ['invalid', 'bad_value', 'not_a_cursor', 'special-chars!@#'],
+  ['cursor_invalid', 'cursor_bad_value', 'cursor_not_a_cursor', 'cursor_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true, allowRenderingErrors: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/dark.test.js

@@ -0,0 +1,33 @@
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import TextInput from '../../../pb_text_input/_text_input'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+testGlobalProp(
+  'dark',
+  [true],
+  () => 'dark',
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+
+testGlobalPropAbsence(
+  'dark',
+  ['dark'],
+  undefined,
+  { skipNull: true }
+)
+
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'dark',
+  ['invalid', 'bad_value', 123, 'true', 'false'],
+  ['dark_invalid', 'dark_bad_value', 'dark_123', 'dark_true', 'dark_false'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/gap.test.js

@@ -0,0 +1,87 @@
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+// NOTE: TextInput excluded - gap properties are not valid props for input elements
+// Test gap prop
+testGlobalProp(
+  'gap',
+  ['xs', 'sm', 'md', 'lg', 'xl'],
+  (v) => `gap_${v}`,
+  (size, v) => `gap_${size}_${v}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+
+testGlobalPropResponsiveWithDefault(
+  'gap',
+  { default: 'md', xs: 'xs', sm: 'md', md: 'lg' },
+  (v) => `gap_${v}`,
+  (size, v) => `gap_${size}_${v}`
+)
+
+testGlobalPropAbsence(
+  'gap',
+  ['gap_xs', 'gap_sm', 'gap_md', 'gap_lg', 'gap_xl'],
+  undefined,
+  { skipNull: true }
+)
+
+// Test columnGap prop
+testGlobalProp(
+  'columnGap',
+  ['xs', 'sm', 'md', 'lg', 'xl'],
+  (v) => `column_gap_${v}`,
+  (size, v) => `column_gap_${size}_${v}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+
+testGlobalPropResponsiveWithDefault(
+  'columnGap',
+  { default: 'md', xs: 'xs', sm: 'md', md: 'lg' },
+  (v) => `column_gap_${v}`,
+  (size, v) => `column_gap_${size}_${v}`
+)
+
+testGlobalPropAbsence(
+  'columnGap',
+  ['column_gap_xs', 'column_gap_sm', 'column_gap_md', 'column_gap_lg', 'column_gap_xl'],
+  undefined,
+  { skipNull: true }
+)
+
+// Test rowGap prop
+testGlobalProp(
+  'rowGap',
+  ['xs', 'sm', 'md', 'lg', 'xl'],
+  (v) => `row_gap_${v}`,
+  (size, v) => `row_gap_${size}_${v}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+
+testGlobalPropResponsiveWithDefault(
+  'rowGap',
+  { default: 'md', xs: 'xs', sm: 'md', md: 'lg' },
+  (v) => `row_gap_${v}`,
+  (size, v) => `row_gap_${size}_${v}`
+)
+
+testGlobalPropAbsence(
+  'rowGap',
+  ['row_gap_xs', 'row_gap_sm', 'row_gap_md', 'row_gap_lg', 'row_gap_xl'],
+  undefined,
+  { skipNull: true }
+)
+
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'gap',
+  ['invalid', 'bad_value', 'not_a_size', 'special-chars!@#'],
+  ['gap_invalid', 'gap_bad_value', 'gap_not_a_size', 'gap_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)