diff --git a/src/text-field/text-field.test.tsx b/src/text-field/text-field.test.tsx index 61bff343..2be8cfe0 100644 --- a/src/text-field/text-field.test.tsx +++ b/src/text-field/text-field.test.tsx @@ -239,6 +239,17 @@ describe('TextField', () => { expect(inputElement).toHaveFocus() }) + it('forwards exceptionallySetClassName to the underlying input element', () => { + render( + , + ) + expect(screen.getByTestId('text-field')).toHaveClass('custom-input-class') + }) + describe('a11y', () => { it('renders with no a11y violations', async () => { const { container } = render( diff --git a/src/text-field/text-field.tsx b/src/text-field/text-field.tsx index 28819818..9bcb929f 100644 --- a/src/text-field/text-field.tsx +++ b/src/text-field/text-field.tsx @@ -8,13 +8,15 @@ import { Box } from '../box' import styles from './text-field.module.css' import type { BaseFieldProps, BaseFieldVariantProps, FieldComponentProps } from '../base-field' +import type { ObfuscatedClassName } from '../utils/common-types' type TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url' interface TextFieldProps extends Omit, 'type' | 'supportsStartAndEndSlots'>, BaseFieldVariantProps, - Pick { + Pick, + ObfuscatedClassName { type?: TextFieldType startSlot?: React.ReactElement | string | number endSlot?: React.ReactElement | string | number @@ -45,6 +47,7 @@ const TextField = React.forwardRef(function Te onChange: originalOnChange, characterCountPosition = 'below', endSlotPosition = 'bottom', + exceptionallySetClassName, ...props }, ref, @@ -107,6 +110,7 @@ const TextField = React.forwardRef(function Te type={type} ref={combinedRef} maxLength={maxLength} + className={exceptionallySetClassName} onChange={(event) => { originalOnChange?.(event) onChange?.(event)