@widergy/mobile-ui 1.47.0 → 1.48.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.48.0](https://github.com/widergy/mobile-ui/compare/v1.47.0...v1.48.0) (2025-06-02)
+
+
+### Features
+
+* [AUT-706] auth test ids history ([#437](https://github.com/widergy/mobile-ui/issues/437)) ([928bf83](https://github.com/widergy/mobile-ui/commit/928bf8311b5c6cea9c249ef4a7f96a735b756d50)), closes [#436](https://github.com/widergy/mobile-ui/issues/436)
+
 # [1.47.0](https://github.com/widergy/mobile-ui/compare/v1.46.1...v1.47.0) (2025-05-28)
 
 

package/lib/components/CaptionLabel/README.md

@@ -4,24 +4,46 @@ One line height small label to show helper text and errors below inputs.
 
 ### Props
 
+| NAME       | TYPE           | REQUIRED | DESCRIPTION                                     |
+| ---------- | -------------- | -------- | ----------------------------------------------- |
+| children   | string         | No       | Helper message to show.                         |
+| dataTestId | string         | No       | Test ID for automated testing.                  |
+| error      | string or bool | No       | If a not empty string, show this message error. |
+| style      | textStyleProp  | No       | Styles to add to the label.                     |
 
-| NAME     | TYPE            | REQUIRED | DESCRIPTION                                     |
-| ---      | ---             | ---      | ---                                             |
-| children | string          | No       | Helper message to show.                         |
-| error    | string  or bool | No       | If a not empty string, show this message error. |
-| style    | textStyleProp   | No       | Styles to add to the label.                     |
+## Test IDs
 
+When `dataTestId` is provided, the component applies the test ID to its element:
 
+| Element | Test ID         | Condition                         |
+| ------- | --------------- | --------------------------------- |
+| Label   | `${dataTestId}` | Always when `dataTestId` provided |
 
+### Test ID Details
+
+- **Label**: The main caption text element that displays helper text or error messages
+
+The CaptionLabel component applies the test ID directly to its root text element, making it easy to identify and interact with in automated tests.
 
 #### Example
 
 ```js
 <View>
   <TextInput onSubmit={this.handleSubmit} />
-  <CaptionLabel error={error}>
-     {helperText}
-  </CaptionLabel>
+  <CaptionLabel error={error}>{helperText}</CaptionLabel>
 </View>
 ```
 
+#### Example with Test IDs
+
+```js
+<View>
+  <TextInput onSubmit={this.handleSubmit} />
+  <CaptionLabel dataTestId="emailHelper" error={emailError}>
+    {emailHelperText}
+  </CaptionLabel>
+</View>
+
+// Generated test IDs:
+// emailHelper (caption label text)
+```

package/lib/components/CaptionLabel/index.js

@@ -5,9 +5,10 @@ import Label from '../Label';
 import constants from './constants';
 import propTypes from './propTypes';
 
-const CaptionLabel = ({ color, children, error, errorColor, style, textProps }) => (
+const CaptionLabel = ({ color, children, dataTestId, error, errorColor, style, textProps }) => (
   <Label
     color={!error ? color : errorColor}
+    dataTestId={dataTestId}
     error={error && !errorColor}
     primary={!error && !color}
     xsmall

package/lib/components/CaptionLabel/propTypes.js

@@ -4,6 +4,7 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 export default {
   color: oneOfType([bool, string]),
   children: oneOfType([bool, string]),
+  dataTestId: string,
   error: oneOfType([bool, string]),
   style: ViewPropTypes.style
 };

package/lib/components/Checkbox/README.md

@@ -1,40 +1,108 @@
 # Checkbox
 
+**⚠️ DEPRECATION WARNING:** The Checkbox component is deprecated and will be removed in a future release. Please use the UTCheckBox component instead.
+
 ## Checkbox
 
 Simple, presentational checkbox component. Supports a label and sublabel text.
 
 ### Props
 
-| NAME                   | TYPE       | REQUIRED    | DESCRIPTION                                                                                  |
-| ---                    | ---        | ---         | ---                                                                                          |
-| LabelComponent         | node       | No          | Component to use to override LabelComponent (it will receive label text as children).        |
-| boldLabel              | bool       | No          | If the checkbox is checked, sets label text to bold.                                         |
-| boldSublabel           | bool       | No          | If the checkbox is checked, sets sublabel text to bold.                                      |
-| checked                | bool       | Yes         | Toggles the checkbox between checked and unchecked.                                          |
-| checkedColor           | string     | No          | Color for the checkbox when checked and not disabled.                                        |
-| checkedLabelColor      | string     | No          | Color for the checkbox label when checked and `coloredText` is true and not disabled.        |
-| checkedSublabelColor   | string     | No          | Color for the checkbox sublabel when checked and `coloredText` is true and not disabled.     |
-| coloredText            | bool       | No          | Text should be colored.                                                                      |
-| disabled               | bool       | No          | Checkbox should be disabled.                                                                 |
-| effectColor            | string     | No          | Effect color for the touchable.                                                              |
-| iconSize               | number     | No          | Size for the icon.                                                                           |
-| iconStyle              | ViewStyle  | No          | Styles for the icon.                                                                         |
-| label                  | string     | Yes         | Label text shown besides the checkbox.                                                       |
-| onPress                | func       | Yes         | Callback function to pass to the `Touchable`.                                                |
-| reversed               | bool       | No          | Checkbox should have labels before the icon.                                                 |
-| uncheckedColor         | string     | No          | Color for the checkbox when not checked and not disabled.                                    |
-| uncheckedLabelColor    | string     | No          | Color for the checkbox label when not checked and `coloredText` is true and not disabled.    |
-| uncheckedSublabelColor | string     | No          | Color for the checkbox sublabel when not checked and `coloredText` is true and not disabled. |
-| style                  | ViewStyle  | No          | Optional styles to be applied to the checkbox item container.                                |
-| subLabel               | string     | No          | Smaller text shown below the label.                                                          |
-| disabledCheckedColor    | string     | No          | color for disabled checked icon                                                    |
-| textProps| object     | No          | labels textProps |
+| NAME                   | TYPE      | REQUIRED | DESCRIPTION                                                                                  |
+| ---------------------- | --------- | -------- | -------------------------------------------------------------------------------------------- |
+| LabelComponent         | node      | No       | Component to use to override LabelComponent (it will receive label text as children).        |
+| boldLabel              | bool      | No       | If the checkbox is checked, sets label text to bold.                                         |
+| boldSublabel           | bool      | No       | If the checkbox is checked, sets sublabel text to bold.                                      |
+| checked                | bool      | Yes      | Toggles the checkbox between checked and unchecked.                                          |
+| checkedColor           | string    | No       | Color for the checkbox when checked and not disabled.                                        |
+| checkedLabelColor      | string    | No       | Color for the checkbox label when checked and `coloredText` is true and not disabled.        |
+| checkedSublabelColor   | string    | No       | Color for the checkbox sublabel when checked and `coloredText` is true and not disabled.     |
+| coloredText            | bool      | No       | Text should be colored.                                                                      |
+| dataTestId             | string    | No       | Unique identifier for testing purposes. Creates hierarchical test IDs for child elements.    |
+| disabled               | bool      | No       | Checkbox should be disabled.                                                                 |
+| effectColor            | string    | No       | Effect color for the touchable.                                                              |
+| iconSize               | number    | No       | Size for the icon.                                                                           |
+| iconStyle              | ViewStyle | No       | Styles for the icon.                                                                         |
+| label                  | string    | Yes      | Label text shown besides the checkbox.                                                       |
+| onPress                | func      | Yes      | Callback function to pass to the `Touchable`.                                                |
+| reversed               | bool      | No       | Checkbox should have labels before the icon.                                                 |
+| uncheckedColor         | string    | No       | Color for the checkbox when not checked and not disabled.                                    |
+| uncheckedLabelColor    | string    | No       | Color for the checkbox label when not checked and `coloredText` is true and not disabled.    |
+| uncheckedSublabelColor | string    | No       | Color for the checkbox sublabel when not checked and `coloredText` is true and not disabled. |
+| style                  | ViewStyle | No       | Optional styles to be applied to the checkbox item container.                                |
+| subLabel               | string    | No       | Smaller text shown below the label.                                                          |
+| disabledCheckedColor   | string    | No       | color for disabled checked icon                                                              |
+| textProps              | object    | No       | labels textProps                                                                             |
+
 #### Example
 
 ```js
 import React from 'react';
 import { Checkbox } from '@widergy/mobile-ui';
 
-<Checkbox onPress={this.handleOnPress} checked={checked} label={label} subLabel={subLabel} />
+<Checkbox onPress={this.handleOnPress} checked={checked} label={label} subLabel={subLabel} />;
+```
+
+## Testing
+
+The `Checkbox` component supports comprehensive test ID assignment through the `dataTestId` prop. When provided, it creates a hierarchical structure of test IDs for all interactive and meaningful elements.
+
+### Test ID Structure
+
+When you provide `dataTestId="provided.testId"`, the following test IDs are automatically generated:
+
+| Element            | Test ID                    | When Available                                            |
+| ------------------ | -------------------------- | --------------------------------------------------------- |
+| Checkbox container | `provided.testId`          | Always (when dataTestId is provided)                      |
+| Checkbox icon      | `provided.testId.icon`     | Always (when dataTestId is provided)                      |
+| Label text         | `provided.testId.label`    | When label prop is provided and no LabelComponent is used |
+| Sub-label text     | `provided.testId.subLabel` | When subLabel prop is provided                            |
+
+**Note:** When using a custom `LabelComponent`, the `dataTestId` is not automatically passed to it. Use the `textProps` prop to pass custom test IDs to your custom label component.
+
+### Example Usage
+
+```jsx
+// Basic test ID usage
+<Checkbox
+  dataTestId="privacyCheckbox"
+  checked={privacyAccepted}
+  onPress={() => setPrivacyAccepted(!privacyAccepted)}
+  label="I accept the privacy policy"
+/>
+
+// Creates the following test IDs:
+// - privacyCheckbox (main container)
+// - privacyCheckbox.icon (checkbox icon)
+// - privacyCheckbox.label (label text)
+
+// With sub-label
+<Checkbox
+  dataTestId="newsletterCheckbox"
+  checked={subscribed}
+  onPress={() => setSubscribed(!subscribed)}
+  label="Subscribe to newsletter"
+  subLabel="Get weekly updates and promotions"
+/>
+
+// Creates test IDs:
+// - newsletterCheckbox
+// - newsletterCheckbox.icon
+// - newsletterCheckbox.label
+// - newsletterCheckbox.subLabel
+
+// With custom LabelComponent
+<Checkbox
+  dataTestId="customCheckbox"
+  checked={customChecked}
+  onPress={() => setCustomChecked(!customChecked)}
+  LabelComponent={CustomLabel}
+  label="Custom label text"
+  textProps={{ dataTestId: "customCheckbox.customLabel" }}
+/>
+
+// Creates test IDs:
+// - customCheckbox (main container)
+// - customCheckbox.icon (checkbox icon)
+// - customCheckbox.customLabel (passed via textProps to CustomLabel)
 ```

package/lib/components/Checkbox/index.js

@@ -5,11 +5,14 @@ import Label from '../Label';
 import Icon from '../Icon';
 import Touchable from '../Touchable';
 import { withTheme } from '../../theming';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import propTypes from './propTypes';
 import styles from './styles';
 import { CHECKED_ICON, UNCHECKED_ICON } from './constants';
 
+const { label: labelTestId, subLabel: subLabelTestId, icon } = TEST_ID_CONSTANTS;
+
 const Checkbox = ({
   LabelComponent,
   backgroundColor,
@@ -20,6 +23,7 @@ const Checkbox = ({
   checkedLabelColor,
   checkedSublabelColor,
   coloredText,
+  dataTestId,
   disabled,
   effectColor,
   iconSize,
@@ -42,6 +46,7 @@ const Checkbox = ({
   const RenderComponent = children || (
     <View style={[styles.containerLabel, labelsContainerStyle]}>
       <Component
+        {...(!LabelComponent && dataTestId && { dataTestId: `${dataTestId}.${labelTestId}` })}
         bold={checked && boldLabel}
         color={coloredText && (checked ? checkedLabelColor || theme.colors.primary : uncheckedLabelColor)}
         disabled={disabled}
@@ -52,6 +57,7 @@ const Checkbox = ({
       </Component>
       {!!subLabel && (
         <Label
+          dataTestId={dataTestId ? `${dataTestId}.${subLabelTestId}` : undefined}
           bold={checked && boldSublabel}
           color={coloredText && (checked ? checkedSublabelColor : uncheckedSublabelColor)}
           disabled={disabled}
@@ -63,9 +69,16 @@ const Checkbox = ({
     </View>
   );
   return (
-    <Touchable disabled={disabled} effectColor={effectColor} onPress={onPress} style={{ backgroundColor }}>
+    <Touchable
+      dataTestId={dataTestId}
+      disabled={disabled}
+      effectColor={effectColor}
+      onPress={onPress}
+      style={{ backgroundColor }}
+    >
       <View style={[styles.container, reversed ? styles.containerReversed : styles.containerDefault, style]}>
         <Icon
+          testID={dataTestId ? `${dataTestId}.${icon}` : undefined}
           color={
             disabled
               ? disabledCheckedColor || theme.colors.disabled

package/lib/components/Checkbox/propTypes.js

@@ -13,6 +13,7 @@ export default {
   checkedLabelColor: string,
   checkedSublabelColor: string,
   coloredText: bool,
+  dataTestId: string,
   disabled: bool,
   effectColor: string,
   iconSize: number,

package/lib/components/Label/index.js

@@ -12,6 +12,7 @@ import propTypes from './propTypes';
 const Label = ({
   children,
   color,
+  dataTestId,
   style,
   textProps,
   theme,
@@ -59,7 +60,7 @@ const Label = ({
         };
   }, [allowFontScaling, children, onLinkPress, textProps, theme.allowFontScaling, useMarkdown]);
 
-  return <LabelRenderer style={styles} {...propsByComponent} {...props} />;
+  return <LabelRenderer style={styles} testID={dataTestId} {...propsByComponent} {...props} />;
 };
 
 Label.displayName = 'Label';

package/lib/components/Label/propTypes.js

@@ -4,6 +4,7 @@ import { themeType } from '../../theming';
 
 export default {
   color: oneOfType([bool, string]),
+  dataTestId: string,
   textProps: object,
   theme: themeType,
   allowFontScaling: bool,

package/lib/components/RadioGroup/components/RadioButton/index.js

@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { View } from 'react-native';
-import PropTypes from 'prop-types';
+import { bool, func, node, number, object, oneOfType, shape, string } from 'prop-types';
 
 import { withTheme, themeType } from '../../../../theming';
 import Icon from '../../../Icon';
@@ -21,6 +21,7 @@ class RadioButton extends Component {
 
   render() {
     const {
+      dataTestId,
       status,
       style,
       label,
@@ -35,12 +36,17 @@ class RadioButton extends Component {
     } = this.props;
     return (
       <Fragment>
-        <Touchable onPress={this.handlePress} disabled={disabled}>
+        <Touchable
+          dataTestId={dataTestId ? `${dataTestId}` : undefined}
+          onPress={this.handlePress}
+          disabled={disabled}
+        >
           <View style={[styles.container, style]}>
             {descriptionComponent ? (
               <View style={styles.descriptionComponentContainer}>
                 {descriptionComponent}
                 <Icon
+                  testID={dataTestId ? `${dataTestId}.icon` : undefined}
                   name={status ? RADIO_CHECKED_ICON : RADIO_UNCHECKED_ICON}
                   color={theme.colors.primary}
                   style={styles.iconSpacing}
@@ -50,6 +56,7 @@ class RadioButton extends Component {
             ) : (
               <Fragment>
                 <Icon
+                  testID={dataTestId ? `${dataTestId}.icon` : undefined}
                   name={status ? RADIO_CHECKED_ICON : RADIO_UNCHECKED_ICON}
                   color={status ? theme.colors.primary : theme.colors.disabled}
                   style={styles.iconSpacing}
@@ -59,6 +66,7 @@ class RadioButton extends Component {
                   <View>
                     <View style={[styles.label, labelComponent && styles.labelComponent]}>
                       <UTLabel
+                        dataTestId={dataTestId ? `${dataTestId}.label` : undefined}
                         variant="xsmall"
                         weight={status ? 'bold' : 'regular'}
                         {...labelContainerStyles.title}
@@ -69,6 +77,7 @@ class RadioButton extends Component {
                     </View>
                     {(sublabel || sublabel === 0) && (
                       <UTLabel
+                        dataTestId={dataTestId ? `${dataTestId}.sublabel` : undefined}
                         colorTheme="gray"
                         variant="xsmall"
                         weight={status ? 'bold' : 'regular'}
@@ -81,6 +90,7 @@ class RadioButton extends Component {
                 </View>
                 {labelValue && (
                   <UTLabel
+                    dataTestId={dataTestId ? `${dataTestId}.labelValue` : undefined}
                     colorTheme={status ? 'accent' : 'dark'}
                     variant="small"
                     weight={status ? 'bold' : 'regular'}
@@ -99,25 +109,26 @@ class RadioButton extends Component {
 }
 
 RadioButton.propTypes = {
-  label: PropTypes.string.isRequired,
-  sublabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  labelValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  onPress: PropTypes.func.isRequired,
-  status: PropTypes.bool,
-  style: ViewPropTypes.style,
-  option: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    sublabel: PropTypes.string
+  dataTestId: string,
+  label: string.isRequired,
+  sublabel: oneOfType([string, number]),
+  labelValue: oneOfType([string, number]),
+  onPress: func.isRequired,
+  status: bool,
+  style: ViewPropTypes,
+  option: shape({
+    label: string.isRequired,
+    sublabel: string
   }),
   theme: themeType,
-  labelComponent: PropTypes.node,
-  labelContainerStyles: PropTypes.shape({
-    title: PropTypes.object,
-    subtitle: PropTypes.object
+  labelComponent: node,
+  labelContainerStyles: shape({
+    title: object,
+    subtitle: object
   }),
-  descriptionComponent: PropTypes.node,
-  showSeparatorBar: PropTypes.bool,
-  disabled: PropTypes.bool
+  descriptionComponent: node,
+  showSeparatorBar: bool,
+  disabled: bool
 };
 
 export default withTheme(RadioButton);

package/lib/components/RadioGroup/index.js

@@ -1,14 +1,17 @@
 import React, { Component } from 'react';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { View } from 'react-native';
-import PropTypes from 'prop-types';
+import PropTypes, { string } from 'prop-types';
 
 import UTLabel from '../UTLabel';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import RadioButton from './components/RadioButton';
 import { DEFAULT_KEY_FIELD } from './constants';
 import styles from './styles';
 
+const { title: titleTestId, error: errorTestId } = TEST_ID_CONSTANTS;
+
 class RadioGroup extends Component {
   handleOptionSelected = option => {
     const { onOptionChange, keyField } = this.props;
@@ -16,10 +19,11 @@ class RadioGroup extends Component {
   };
 
   renderOptions = option => {
-    const { selectedOption, radioProps, keyField, disabled } = this.props;
+    const { selectedOption, radioProps, keyField, disabled, dataTestId } = this.props;
     return (
       <RadioButton
         style={styles.radio}
+        dataTestId={dataTestId ? `${dataTestId}.radioButton_${option.id}` : undefined}
         option={option}
         key={option.id}
         label={option.label}
@@ -36,18 +40,27 @@ class RadioGroup extends Component {
   };
 
   render() {
-    const { title, options, titleProps, error } = this.props;
+    const { title, options, titleProps, error, dataTestId } = this.props;
     return (
       <View style={styles.container}>
         {title && (
           <View style={styles.titleContainer}>
-            <UTLabel variant="medium" {...titleProps}>
+            <UTLabel
+              dataTestId={dataTestId ? `${dataTestId}.${titleTestId}` : undefined}
+              variant="medium"
+              {...titleProps}
+            >
               {title}
             </UTLabel>
           </View>
         )}
         {options.map(this.renderOptions)}
-        <UTLabel colorTheme="error" shade="05" variant="body">
+        <UTLabel
+          dataTestId={dataTestId ? `${dataTestId}.${errorTestId}` : undefined}
+          colorTheme="error"
+          shade="05"
+          variant="body"
+        >
           {error}
         </UTLabel>
       </View>
@@ -57,6 +70,7 @@ class RadioGroup extends Component {
 
 RadioGroup.propTypes = {
   title: PropTypes.string.isRequired,
+  dataTestId: string,
   error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   options: PropTypes.arrayOf(
     PropTypes.shape({

package/lib/components/Touchable/index.js

@@ -7,7 +7,7 @@ import { withTheme } from '../../theming';
 import styles, { getEffectColor } from './styles';
 import propTypes from './propTypes';
 
-const Touchable = ({ borderless, children, disabled, onPress, style, theme, ...props }) => {
+const Touchable = ({ borderless, children, dataTestId, disabled, onPress, style, theme, ...props }) => {
   const useForeground = USE_FOREGROUND && borderless; // Workaround for ripple on Android Pie (https://github.com/facebook/react-native/issues/6480)
   const isDisabled = disabled || !onPress;
   const { effectColor } = getEffectColor(props, theme);
@@ -22,6 +22,7 @@ const Touchable = ({ borderless, children, disabled, onPress, style, theme, ...p
       <TouchableNativeFeedback
         {...props}
         background={TouchableNativeFeedback.Ripple(effectColor, borderless)}
+        testID={dataTestId}
         delayPressIn={0}
         delayPressOut={0}
         disabled={isDisabled}
@@ -37,6 +38,7 @@ const Touchable = ({ borderless, children, disabled, onPress, style, theme, ...p
       {...props}
       delayPressIn={0}
       delayPressOut={0}
+      testID={dataTestId}
       disabled={isDisabled}
       onPress={onPress}
       style={[borderless && styles.borderless, style]}

package/lib/components/Touchable/propTypes.js

@@ -6,6 +6,7 @@ import { themeType } from '../../theming';
 export default {
   borderless: bool,
   children: node,
+  dataTestId: string,
   disabled: bool,
   onPress: func.isRequired,
   style: ViewPropTypes.style,

package/lib/components/UTBadge/index.js

@@ -8,7 +8,7 @@ import UTLabel from '../UTLabel';
 import { DEFAULT_PROPS } from './constants';
 import { retrieveStyle } from './theme';
 
-const UTBadge = ({ children, colorTheme, style }) => {
+const UTBadge = ({ children, colorTheme, dataTestId, style }) => {
   const theme = useTheme();
 
   const classes = retrieveStyle({ theme, children, colorTheme });
@@ -16,6 +16,7 @@ const UTBadge = ({ children, colorTheme, style }) => {
   return (
     <Component
       colorTheme={classes.textColorTheme}
+      {...(children ? { dataTestId } : { testID: dataTestId })}
       style={[classes.root, style]}
       variant="xsmall"
       weight="medium"
@@ -30,6 +31,7 @@ UTBadge.defaultProps = DEFAULT_PROPS;
 UTBadge.propTypes = {
   children: oneOfType([string, number]),
   colorTheme: string,
+  dataTestId: string,
   style: object
 };
 

package/lib/components/UTBaseInputField/README.md

@@ -11,6 +11,7 @@
 | alwaysShowPlaceholder | bool                                                      | false       | Whether to always show the placeholder text, even when the field is focused.                    |
 | autoCapitalize        | oneOf('none','sentences','words','characters')            | 'sentences' | Defines how to automatically capitalize certain characters.                                     |
 | blurOnSubmit          | bool                                                      |             | If true, the input will be blurred when the user submits the text.                              |
+| dataTestId            | string                                                    |             | Test ID for automated testing. Enables hierarchical test ID structure.                          |
 | disabled              | bool                                                      |             | Whether the input field is disabled.                                                            |
 | editable              | bool                                                      | true        | Whether the input field is editable. If false, it behaves like a disabled field.                |
 | error                 | oneOfType([bool, string])                                 |             | Error message to display, or `true` to indicate an error state without a message.               |
@@ -33,6 +34,28 @@
 | type                  | string                                                    |             | Type of the input field (e.g., text, email, numeric, password).                                 |
 | variant               | string                                                    | 'white'     | Variant of the input field. One of: `white`, `gray`.                                            |
 
+## Test IDs
+
+When `dataTestId` is provided, the component creates a hierarchical test ID structure:
+
+| Element          | Test ID                        | Condition                         |
+| ---------------- | ------------------------------ | --------------------------------- |
+| Input field      | `${dataTestId}`                | Always when `dataTestId` provided |
+| Left adornments  | `${dataTestId}.left`           | When left adornments are present  |
+| Right adornments | `${dataTestId}.right`          | When right adornments are present |
+| Character count  | `${dataTestId}.characterCount` | When `showCharacterCount` is true |
+
+### Test ID Structure Details
+
+- **Input field**: The main TextInput element gets the base `dataTestId`
+- **Left adornments**: All left-side adornments share the `.left` test ID
+- **Right adornments**: All right-side adornments share the `.right` test ID
+- **Character count**: The character count display when enabled
+
+### Adornment Test IDs
+
+Individual adornments within the left/right containers inherit the adornment test ID and may create their own hierarchical structure based on their component type (e.g., UTIcon, UTButton, etc.).
+
 ## Input Types
 
 The `type` prop can be one of these values:
@@ -176,31 +199,30 @@ Displays a tooltip with an icon.
 <UTBaseInputField rightAdornments={[{ name: 'Tooltip', props: { tooltip: 'Tooltip Text' } }]} />
 ```
 
-### Example Usages:
+### Example with Test IDs
 
 ```javascript
-// Example of PrefixAdornment usage
-<UTBaseInputField
-  leftAdornments={[{ name: 'Prefix', props: { text: 'Prefix Text' } }]}
-/>
-
-// Example of SuffixAdornment usage
-<UTBaseInputField
-  rightAdornments={[{ name: 'Suffix', props: { text: 'Suffix Text' } }]}
-/>
-
-// Example of IconAdornment usage
+// Basic input with test ID
 <UTBaseInputField
-  rightAdornments={[{ name: 'Icon', props: { Icon: 'IconActivity', changeOnError: true } }]}
+  dataTestId="userEmail"
+  placeholder="Enter your email"
+  type="email"
 />
 
-// Example of ActionAdornment usage
+// Input with adornments and test IDs
 <UTBaseInputField
-  rightAdornments={[{ name: 'Action', props: { action: { text: 'Go', onPress: handlePress } } }]}
+  dataTestId="searchField"
+  placeholder="Search products..."
+  leftAdornments={[{ name: 'Icon', props: { Icon: 'IconSearch' } }]}
+  rightAdornments={[{ name: 'Action', props: { action: { text: 'Search', onPress: handleSearch } } }]}
+  showCharacterCount
+  maxLength={100}
 />
 
-// Example of TooltipAdornment usage
-<UTBaseInputField
-  rightAdornments={[{ name: 'Tooltip', props: { tooltip: 'Tooltip Text' } }]}
-/>
+// Generated test IDs:
+// userEmail (input field)
+// searchField (input field)
+// searchField.left (left adornments container)
+// searchField.right (right adornments container)
+// searchField.characterCount (character count display)
 ```