playbook_ui 15.6.0 → 15.7.0.pre.alpha.PLAY2678emojimask13284

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ChangeEvent } from 'react'
+import React, { forwardRef, ChangeEvent, ClipboardEvent } from 'react'
 import classnames from 'classnames'
 
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
@@ -9,8 +9,10 @@ import Card from '../pb_card/_card'
 import Caption from '../pb_caption/_caption'
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
+import colors from '../tokens/exports/_colors.module.scss'
 
 import { INPUTMASKS } from './inputMask'
+import { stripEmojisForPaste, applyEmojiMask } from '../utilities/emojiMask'
 
 type TextInputProps = {
   aria?: { [key: string]: string },
@@ -18,6 +20,7 @@ type TextInputProps = {
   data?: { [key: string]: string },
   dark?: boolean,
   disabled?: boolean,
+  emojiMask?: boolean,
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -28,6 +31,7 @@ type TextInputProps = {
   onChange: (e: React.FormEvent<HTMLInputElement>, sanitizedValue?: string) => void,
   placeholder: string,
   required?: boolean,
+  requiredIndicator?: boolean,
   type: string,
   value: string | number,
   children: React.ReactElement,
@@ -47,6 +51,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     dark = false,
     data = {},
     disabled,
+    emojiMask = false,
     error,
     htmlOptions = {},
     id,
@@ -60,6 +65,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     type = 'text',
     value = '',
     children = null,
+    requiredIndicator = false,
     autoComplete = true,
   } = props
 
@@ -99,6 +105,11 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   const isMaskedInput = mask && mask in INPUTMASKS
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    // Apply emoji mask if enabled using centralized helper
+    if (emojiMask) {
+      applyEmojiMask(e.target)
+    }
+
     if (isMaskedInput) {
       const inputValue = e.target.value
 
@@ -131,6 +142,29 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     }
   }
 
+  // Handle paste event for emoji mask - updates input value, cursor position, and calls onChange
+  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
+    if (emojiMask) {
+      const pastedText = e.clipboardData.getData('text')
+      const filteredText = stripEmojisForPaste(pastedText)
+      
+      if (pastedText !== filteredText) {
+        e.preventDefault()
+        const input = e.currentTarget
+        const start = input.selectionStart || 0
+        const end = input.selectionEnd || 0
+        const currentValue = input.value
+        const newValue = currentValue.slice(0, start) + filteredText + currentValue.slice(end)
+        const newCursorPosition = start + filteredText.length
+        
+        input.value = newValue
+        input.selectionStart = input.selectionEnd = newCursorPosition
+        
+        onChange({ ...e, target: input, currentTarget: input } as unknown as ChangeEvent<HTMLInputElement>)
+      }
+    }
+  }
+
   const childInput = children ? children.type === "input" : undefined
 
   let formattedValue;
@@ -142,10 +176,16 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
 
   const errorId = error ? `${id}-error` : undefined
 
+  // Set custom handler between emoji mask and input mask
+  const shouldUseCustomHandler = isMaskedInput || emojiMask
+
+  // Filter out emojiMask from props passed to DOM element
+  const { emojiMask: _emojiMask, ...domProps } = props
+
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
-        {...domSafeProps(props)}
+        {...domSafeProps(domProps)}
         aria-describedby={errorId}
         aria-invalid={!!error}
         autoComplete={typeof autoComplete === "string" ? autoComplete : ( autoComplete ? undefined : "off" )}
@@ -154,7 +194,8 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         id={id}
         key={id}
         name={name}
-        onChange={isMaskedInput ? handleChange : onChange}
+        onChange={shouldUseCustomHandler ? handleChange : onChange}
+        onPaste={emojiMask ? handlePaste : undefined}
         pattern={isMaskedInput ? INPUTMASKS[mask]?.pattern : undefined}
         placeholder={placeholder || (isMaskedInput ? INPUTMASKS[mask]?.placeholder : undefined)}
         ref={ref}
@@ -208,9 +249,18 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     >
       {label && (
         <label htmlFor={id}>
-          <Caption className="pb_text_input_kit_label" 
-              text={label} 
-          />
+          {
+            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>
       )}
       <div className={`${addOnCss} text_input_wrapper`}>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("text_input", props: {
+  emoji_mask: true,
+  label: "Emoji Mask",
+  placeholder: "Try typing or pasting emojis...",
+}) %>
+
+

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+
+import TextInput from '../../pb_text_input/_text_input'
+
+const TextInputEmojiMask = (props) => {
+  const [basicValue, setBasicValue] = useState('')
+
+  return (
+    <div>
+      <TextInput
+          emojiMask
+          label="Emoji Mask"
+          onChange={({ target }) => setBasicValue(target.value)}
+          placeholder="Try typing or pasting emojis..."
+          value={basicValue}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextInputEmojiMask
+
+

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.md

@@ -0,0 +1,2 @@
+Use the `emojiMask` / `emoji_mask` prop to prevent users from entering emoji characters (🐸 🐈 🏄‍♂️) in typed or pasted content. It allows accented characters and other non-ASCII letters (é, ü, 文).
+

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md

@@ -1 +1 @@
-Text Input w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Text Input w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("text_input", props: {
+  label: "First Name",
+  placeholder: "Enter first name",
+  id: "text_input_required_indicator",
+  required_indicator: true,
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.jsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+
+import TextInput from '../../pb_text_input/_text_input'
+
+const TextInputDefault = (props) => {
+  const [firstName, setFirstName] = useState('')
+  const handleOnChangeFirstName = ({ target }) => {
+    setFirstName(target.value)
+  }
+
+  return (
+      <TextInput
+          id="text_input_required_indicator"
+          label="First Name"
+          name="firstName"
+          onChange={handleOnChangeFirstName}
+          placeholder="Enter first name"
+          requiredIndicator
+          value={firstName}
+          {...props}
+      />
+  )
+}
+
+export default TextInputDefault

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_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_text_input/docs/example.yml

@@ -10,6 +10,9 @@ examples:
   - text_input_options: Input Options
   - text_input_mask: Mask
   - text_input_autocomplete: Autocomplete
+  - text_input_required_indicator: Required Indicator
+  - text_input_emoji_mask: Emoji Mask
+
   
   react:
   - text_input_default: Default
@@ -22,6 +25,8 @@ examples:
   - text_input_mask: Mask
   - text_input_sanitize: Sanitized Masked Input
   - text_input_autocomplete: Autocomplete
+  - text_input_required_indicator: Required Indicator
+  - text_input_emoji_mask: Emoji Mask
 
 
   swift:

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

@@ -8,3 +8,5 @@ export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
 export { default as TextInputMask } from './_text_input_mask.jsx'
 export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
 export { default as TextInputAutocomplete } from './_text_input_autocomplete.jsx'
+export { default as TextInputRequiredIndicator } from './_text_input_required_indicator.jsx'
+export { default as TextInputEmojiMask } from './_text_input_emoji_mask.jsx'

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

@@ -1,26 +1,64 @@
 import PbEnhancedElement from "../pb_enhanced_element"
 import { INPUTMASKS } from "./inputMask"
+import { stripEmojisForPaste, applyEmojiMask } from "../utilities/emojiMask"
 
 export default class PbTextInput extends PbEnhancedElement {
   static get selector() {
-    return '[data-pb-input-mask="true"]';
+    return '[data-pb-input-mask="true"], [data-pb-emoji-mask="true"]';
   }
 
   connect() {
     this.handleInput = this.handleInput.bind(this);
+    this.handlePaste = this.handlePaste.bind(this);
     this.element.addEventListener("input", this.handleInput);
+    this.element.addEventListener("paste", this.handlePaste);
     this.handleInput(); 
   }
 
   disconnect() {
     this.element.removeEventListener("input", this.handleInput);
+    this.element.removeEventListener("paste", this.handlePaste);
   }
 
-  handleInput() {
-    const maskType = this.element.getAttribute("mask");
+  hasEmojiMask() {
+    return this.element.dataset.pbEmojiMask === "true";
+  }
+
+  handlePaste(event) {
+    if (!this.hasEmojiMask()) return;
+
+    const pastedText = event.clipboardData.getData('text');
+    const filteredText = stripEmojisForPaste(pastedText);
+
+    if (pastedText !== filteredText) {
+      event.preventDefault();
+      const input = this.element;
+      const start = input.selectionStart || 0;
+      const end = input.selectionEnd || 0;
+      const currentValue = input.value;
+      const newValue = currentValue.slice(0, start) + filteredText + currentValue.slice(end);
+      const newCursor = start + filteredText.length;
+      
+      input.value = newValue;
+      input.selectionStart = input.selectionEnd = newCursor;
+      
+      // Continue to handleInput for mask processing, emoji filtering handled above
+      this.handleInput({ skipEmojiFilter: true });
+    }
+  }
+
+  handleInput({ skipEmojiFilter = false } = {}) {
     const cursorPosition = this.element.selectionStart;
-    const rawValue = this.element.value;
-    let formattedValue = rawValue;
+    let baseValue = this.element.value;
+
+    // Apply emoji mask if enabled (skip if already filtered in paste handler)
+    if (this.hasEmojiMask() && !skipEmojiFilter) {
+      const result = applyEmojiMask(this.element);
+      baseValue = result.value;
+    }
+
+    const maskType = this.element.getAttribute("mask");
+    let formattedValue = baseValue;
 
     const maskKey = {
       currency: 'currency',
@@ -32,13 +70,14 @@ export default class PbTextInput extends PbEnhancedElement {
     }[maskType];
 
     if (maskKey && INPUTMASKS[maskKey]) {
-      formattedValue = INPUTMASKS[maskKey].format(rawValue);
+      formattedValue = INPUTMASKS[maskKey].format(baseValue);
     }
 
     const sanitizedInput = this.element
       .closest(".text_input_wrapper")
       ?.querySelector('[data="sanitized-pb-input"]');
 
+    // Ensure sanitized input uses the already filtered value
     if (sanitizedInput) {
       switch (maskType) {
         case "ssn":
@@ -55,8 +94,10 @@ export default class PbTextInput extends PbEnhancedElement {
       }
     }
 
-    this.element.value = formattedValue;
-    setCursorPosition(this.element, cursorPosition, rawValue, formattedValue);
+    if (maskType) {
+      this.element.value = formattedValue;
+      setCursorPosition(this.element, cursorPosition, baseValue, formattedValue);
+    }
   }
 }
 

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,7 +1,13 @@
 <%= pb_content_tag(:div, id: nil ) do  %>
   <% if object.label.present? %>
   <label for="<%= object.input_options[:id] || object.id %>" >
+    <% if object.required_indicator %>
+      <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label" }) do %>
+        <%= object.label %><span style="color: #DA0014;"> *</span>
+      <% end %>
+    <% else %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
+    <% end %>
   </label>
   <% end %>
   <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -18,6 +18,8 @@ module Playbook
       prop :autocomplete, default: true
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
+      prop :emoji_mask, type: Playbook::Props::Boolean,
+                        default: false
       prop :error
       prop :inline, type: Playbook::Props::Boolean,
                     default: false
@@ -38,6 +40,8 @@ module Playbook
       prop :mask, type: Playbook::Props::Enum,
                   values: ["currency", "zip_code", "postal_code", "ssn", "credit_card", "cvv", nil],
                   default: nil
+      prop :required_indicator, type: Playbook::Props::Boolean,
+                                default: false
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -115,7 +119,9 @@ module Playbook
       def validation_data
         fields = input_options.dig(:data) || {}
         fields[:message] = validation_message unless validation_message.blank?
-        mask ? fields.merge(pb_input_mask: true) : fields
+        fields[:pb_input_mask] = true if mask
+        fields[:pb_emoji_mask] = true if emoji_mask
+        fields
       end
 
       def error_class

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -344,3 +344,72 @@ test('does not add autocomplete attribute otherwise', () => {
   const input = within(kit).getByRole('textbox')
   expect(input).not.toHaveAttribute("autocomplete")
 })
+
+test('renders required indicator asterisk when requiredIndicator is true', () => {
+  render(
+    <TextInput
+        data={{ testid: testId }}
+        label="Email Address"
+        requiredIndicator
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const label = within(kit).getByText(/Email Address/)
+  
+  expect(label).toBeInTheDocument()
+  expect(kit).toHaveTextContent('*') 
+})
+
+const TextInputEmojiMask = (props) => {
+  const [value, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        emojiMask
+        onChange={handleOnChange}
+        value={value}
+        {...props}
+    />
+  )
+}
+
+test('removes emoji characters when emojiMask is enabled', () => {
+  render(
+    <TextInputEmojiMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = within(kit).getByRole('textbox')
+
+  fireEvent.change(input, { target: { value: 'Hello 👋 World 🌍' } })
+  expect(input.value).toBe('Hello  World ')
+
+  fireEvent.change(input, { target: { value: '😀😂🎉' } })
+  expect(input.value).toBe('')
+
+  fireEvent.change(input, { target: { value: 'Hello World' } })
+  expect(input.value).toBe('Hello World')
+})
+
+test('allows accented characters when emojiMask is enabled', () => {
+  render(
+    <TextInputEmojiMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = within(kit).getByRole('textbox')
+
+  fireEvent.change(input, { target: { value: 'Café résumé naïve' } })
+  expect(input.value).toBe('Café résumé naïve')
+
+  fireEvent.change(input, { target: { value: 'àëǒüñ' } })
+  expect(input.value).toBe('àëǒüñ')
+})

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

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
-import React, { forwardRef, useEffect, useRef } from 'react'
+import React, { forwardRef, useEffect, useRef, ChangeEvent, ClipboardEvent } from 'react'
 import classnames from 'classnames'
 
 import PbTextarea from '.'
@@ -14,6 +14,8 @@ import Caption from '../pb_caption/_caption'
 import Flex from '../pb_flex/_flex'
 import FlexItem from '../pb_flex/_flex_item'
 
+import { stripEmojisForPaste, applyEmojiMask } from '../utilities/emojiMask'
+
 type TextareaProps = {
   aria?: {[key: string]: string},
   characterCount?: string,
@@ -21,6 +23,7 @@ type TextareaProps = {
   children?: React.ReactChild[],
   data?: {[key: string]: string},
   disabled?: boolean,
+  emojiMask?: boolean,
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -45,6 +48,7 @@ const Textarea = ({
   children,
   data = {},
   disabled,
+  emojiMask = false,
   htmlOptions = {},
   inline = false,
   resize = 'none',
@@ -67,6 +71,37 @@ const Textarea = ({
     }
   })
 
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    // Apply emoji mask if enabled using centralized helper
+    if (emojiMask) {
+      applyEmojiMask(e.target)
+    }
+    onChange(e)
+  }
+
+  // Handle paste event for emoji mask - updates textarea value, cursor position, and calls onChange
+  const handlePaste = (e: ClipboardEvent<HTMLTextAreaElement>) => {
+    if (emojiMask) {
+      const pastedText = e.clipboardData.getData('text')
+      const filteredText = stripEmojisForPaste(pastedText)
+      
+      if (pastedText !== filteredText) {
+        e.preventDefault()
+        const textarea = e.currentTarget
+        const start = textarea.selectionStart || 0
+        const end = textarea.selectionEnd || 0
+        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>)
+      }
+    }
+  }
+
   const errorClass = error ? 'error' : null
   const inlineClass = inline ? 'inline' : ''
   const resizeClass = `resize_${resize}`
@@ -94,7 +129,8 @@ const Textarea = ({
         <textarea
             disabled={disabled}
             name={name}
-            onChange={onChange}
+            onChange={emojiMask ? handleChange : onChange}
+            onPaste={emojiMask ? handlePaste : undefined}
             placeholder={placeholder}
             ref={ref}
             required={required}

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

@@ -0,0 +1,5 @@
+<%= pb_rails("textarea", props: {
+  emoji_mask: true,
+  label: "Emoji Mask",
+  placeholder: "Try typing or pasting emojis...",
+}) %>

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

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+
+import Textarea from '../../pb_textarea/_textarea'
+
+const TextareaEmojiMask = (props) => {
+  const [basicValue, setBasicValue] = useState('')
+
+  return (
+    <div>
+      <Textarea
+          emojiMask
+          label="Emoji Mask"
+          onChange={({ target }) => setBasicValue(target.value)}
+          placeholder="Try typing or pasting emojis..."
+          value={basicValue}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextareaEmojiMask
+
+

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

@@ -0,0 +1 @@
+Use the `emojiMask` / `emoji_mask` prop to prevent users from entering emoji characters (🐸 🐈 🏄‍♂️) in typed or pasted content. It allows accented characters and other non-ASCII letters (é, ü, 文).

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

@@ -1 +1 @@
-Textarea w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Textarea w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).

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

@@ -7,6 +7,7 @@ examples:
   - textarea_error: Textarea w/ Error
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
+  - textarea_emoji_mask: Emoji Mask
 
   react:
   - textarea_default: Default
@@ -15,6 +16,7 @@ examples:
   - textarea_error: Textarea w/ Error
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
+  - textarea_emoji_mask: Emoji Mask
 
   swift:
   - textarea_default_swift: Default

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

@@ -4,3 +4,4 @@ export { default as TextareaCustom } from './_textarea_custom.jsx'
 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'