chore: docs

Author: wonderlul

docs/docusaurus.config.js

@@ -170,7 +170,10 @@ const config = {
             TextInputAffix: 'TextInput/Adornment/TextInputAffix',
             TextInputIcon: 'TextInput/Adornment/TextInputIcon',
           },
-          TextField: 'TextField/TextField',
+          TextField: {
+            TextField: 'TextField/TextField',
+            TextFieldIcon: 'TextField/TextFieldIcon',
+          },
           ToggleButton: {
             ToggleButton: 'ToggleButton/ToggleButton',
             ToggleButtonGroup: 'ToggleButton/ToggleButtonGroup',

docs/src/components/PropTable.tsx

@@ -12,12 +12,14 @@ const typeDefinitions = {
   ThemeProp:
     'https://callstack.github.io/react-native-paper/docs/guides/theming#theme-properties',
   'ComponentType<TextFieldAccessoryProps>':
-    'https://github.com/callstack/react-native-paper/blob/main/src/components/TextField/TextField.tsx#L21',
+    'https://github.com/callstack/react-native-paper/blob/main/src/components/TextField/TextField.tsx#L20',
   AccessibilityState:
     'https://reactnative.dev/docs/accessibility#accessibilitystate',
   'StyleProp<ViewStyle>': 'https://reactnative.dev/docs/view-style-props',
   'StyleProp<TextStyle>': 'https://reactnative.dev/docs/text-style-props',
   TextProps: 'https://reactnative.dev/docs/text#props',
+  AccessibilityProps:
+    'https://reactnative.dev/docs/accessibility#accessibilityprops',
 };
 
 const renderBadge = (annotation: string) => {

src/components/TextField/TextField.tsx

@@ -128,8 +128,16 @@ export interface TextFieldProps extends TextInputProps {
  *     <TextField.Icon {...props} icon="magnify" />
  *   );
  *
- *   const ClearIcon = (props) => (
- *     <TextField.Icon {...props} icon="close" onPress={() => setText('')} />
+ *   const ClearAccessory = ({ style, editable }) => (
+ *     <Pressable
+ *       style={style}
+ *       disabled={!editable}
+ *       onPress={() => setText('')}
+ *       accessibilityRole="button"
+ *       accessibilityLabel="Clear text"
+ *     >
+ *       <Icon source="close" size={24} />
+ *     </Pressable>
  *   );
  *
  *   return (
@@ -138,7 +146,7 @@ export interface TextFieldProps extends TextInputProps {
  *       value={text}
  *       onChangeText={setText}
  *       StartAccessory={SearchIcon}
- *       EndAccessory={ClearIcon}
+ *       EndAccessory={ClearAccessory}
  *     />
  *   );
  * };

src/components/TextField/TextFieldIcon.tsx

@@ -31,13 +31,13 @@ export interface TextFieldIconProps extends TextFieldAccessoryProps {
   /**
    * Function to execute on press.
    */
-  onPress?: (e: GestureResponderEvent) => void;
+  onPress?: (event: GestureResponderEvent) => void;
 }
 
 /**
- * A pre-built accessory component that renders an icon button inside a TextField.
- * Accepts all `TextFieldAccessoryProps` (passed automatically by the parent) plus
- * icon-specific props.
+ * A component to render a leading / trailing icon in the TextField
+ * (inside `StartAccessory` or `EndAccessory`). Accepts icon-specific props as well as
+ * `TextFieldAccessoryProps`, which TextField forwards automatically.
  *
  * ## Usage
  * ```js
@@ -72,7 +72,7 @@ export interface TextFieldIconProps extends TextFieldAccessoryProps {
 const TextFieldIcon = ({
   icon,
   color,
-  size = ACCESSORY_SIZE,
+  size,
   style,
   status,
   editable,
@@ -82,6 +82,8 @@ const TextFieldIcon = ({
 }: TextFieldIconProps) => {
   const theme = useInternalTheme(themeOverride);
 
+  const iconSize = size ?? ACCESSORY_SIZE;
+
   const iconColor = getIconColor({
     theme,
     color,
@@ -95,7 +97,7 @@ const TextFieldIcon = ({
       <IconButton
         icon={icon}
         iconColor={iconColor}
-        size={size}
+        size={iconSize}
         style={$iconStyle}
         onPress={onPressHandler}
         {...accessibility}