playbook_ui 15.7.0 → 15.8.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 71dc76821c0c875363dbf67c1969a0f24eb0c5ea2fdb791b70c0d95a6732a3d5
-  data.tar.gz: d95d190f3644e074b60828cf363fb37d99338050a29b4ab847ebe5bf99fe55f3
+  metadata.gz: 2d90a9283e859938c8668c9bda85da84fedc435fb8c2e944540fba1a7b834ced
+  data.tar.gz: 269fdbd32bd3da95347cffbcaca0e9c130e551c2288b0eb92a6f73e9d6e205fa
 SHA512:
-  metadata.gz: 4ea3c249a93b41caa33133053b9fccb280d01b539c4bc61516e7a231174ef7cb879d35d756bb4fea03f4e5d35d7f52d39b593a49a7b0374f509a724a27fc86d3
-  data.tar.gz: aed75a53ce523d6736b2e8ab00986472f1068f7c2f8e1f5c50194d10003ccccc1e31320a2d45fa59da4e31b6539c84a9d768112f6cf541274cac96dda9468347
+  metadata.gz: 8718b1da13b30dc286191523f1ba14e8ec1304389bdd0263f2b71ec6543473b20234090aca5a8d06d56716e9eed8334118429038a31f2e0983dac1c7503b1b59
+  data.tar.gz: 455f5232737b607d4c6c1d6b574e3bcfd5974246c2daff08bef7196af7e50e3ed3d4512fc4752240adb309ac74f1c56065e325ec7d15202ed3992da226a580a4

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,3 @@
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -98,6 +97,7 @@
 @import 'pb_text_input/text_input';
 @import 'pb_textarea/textarea';
 @import 'pb_time/time';
+@import 'pb_time_picker/time_picker';
 @import 'pb_time_range_inline/time_range_inline';
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_timeline/timeline';

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_form/docs/_form_form_with.html.erb

@@ -116,7 +116,7 @@
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form-default", tree_data: treeData, margin_bottom: "sm", label: "Example Multi Level Select field" } %>
-
+  <%= form.time_picker :example_time_picker, props: { label: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>

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

@@ -117,7 +117,8 @@
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
-
+  <%= form.time_picker :example_time_picker_validation, props: { label: true, required: true, validation_message: "Please select a time." } %>
+ 
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>

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

@@ -0,0 +1,14 @@
+<%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
+  <%= 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.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.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.md

@@ -0,0 +1,3 @@
+The `required_indicator` prop adds a red asterisk (*) to the input label, visually marking the field as required. This works with both `label: true` for auto-generated labels and `label: "Custom Text"` for custom labels.
+
+While it's typically used alongside the `required` prop for HTML5 validation, you can use `required_indicator` independently if you're handling validation differently (e.g., client-side or backend validation).

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

@@ -4,3 +4,4 @@ examples:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
   - form_form_with_loading: Default + Loading
+  - form_with_required_indicator: With Optional Required Indicator

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb

@@ -39,8 +39,8 @@
         tooltip_id: "append-to-tooltip-2",
         offset: true,
         position: "top",
-        append_to: ".kit-show-wrapper",
+        append_to: ".pb--page--sideNav",
     }) do %>
-        I'm a popover. I have been appended to the .kit-show-wrapper.
+        I'm a popover. I have been appended to the .pb--page--sideNav.
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx

@@ -54,14 +54,15 @@ const PopoverAppendTo = (props) => {
         <Body text="Click info for more details" />
         &nbsp;
         <PbReactPopover
-            appendTo=".kit-show-wrapper"
+            appendTo=".pb--page--sideNav"
             offset
             placement="top"
             reference={selectorPopoverReference}
             show={showSelectorPopover}
+            zIndex={10}
             {...props}
         >
-          {'I\'m a popover. I have been appended to the .kit-show-wrapper.'}
+          {'I\'m a popover. I have been appended to the .pb--page--sideNav.'}
         </PbReactPopover>
       </Flex>
     </>

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_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('àëǒüñ')
+})