TextField - ClearButton - fix right margin (#3482)

* TextField - ClearButton - fix right margin

* Add ClearButtonProps and move style to preset

Author: M-i-k-e-l

src/components/textField/ClearButton.tsx

@@ -3,11 +3,11 @@ import {StyleSheet} from 'react-native';
 import {useAnimatedStyle, useSharedValue, withTiming, Easing} from 'react-native-reanimated';
 import {useDidUpdate} from '../../hooks';
 import Assets from '../../assets';
-import {Spacings, Colors} from '../../style';
+import {Colors} from '../../style';
 import View from '../view';
 import Button from '../button';
 import FieldContext from './FieldContext';
-import {TextFieldProps} from './types';
+import {ClearButtonProps} from './types';
 
 const hitSlop = {top: 20, bottom: 20, left: 20, right: 20};
 const NON_VISIBLE_POSITION = 18;
@@ -17,7 +17,7 @@ const TIMING_CONFIG = {
   easing: Easing.bezier(0.33, 1, 0.68, 1)
 };
 
-const ClearButton = ({testID, onClear, onChangeText}: Pick<TextFieldProps, 'onClear' | 'testID' | 'onChangeText'>) => {
+const ClearButton = ({testID, onClear, onChangeText, clearButtonStyle}: ClearButtonProps) => {
   const {hasValue} = useContext(FieldContext);
   const animatedValue = useSharedValue(hasValue ? VISIBLE_POSITION : NON_VISIBLE_POSITION);
   const animatedOpacity = useSharedValue(hasValue ? 1 : 0);
@@ -29,7 +29,7 @@ const ClearButton = ({testID, onClear, onChangeText}: Pick<TextFieldProps, 'onCl
     };
   });
 
-  const style = useMemo(() => [styles.container, animatedStyle], [animatedStyle]);
+  const style = useMemo(() => [clearButtonStyle, animatedStyle], [clearButtonStyle, animatedStyle]);
 
   const animate = useCallback(() => {
     const toValue = hasValue ? VISIBLE_POSITION : NON_VISIBLE_POSITION;
@@ -64,9 +64,6 @@ const ClearButton = ({testID, onClear, onChangeText}: Pick<TextFieldProps, 'onCl
 };
 
 const styles = StyleSheet.create({
-  container: {
-    marginHorizontal: Spacings.s3
-  },
   clearIcon: {
     tintColor: Colors.$textNeutralLight
   }

src/components/textField/index.tsx

@@ -91,6 +91,7 @@ const TextField = (props: InternalTextFieldProps) => {
     centered,
     readonly = false,
     showMandatoryIndication,
+    clearButtonStyle,
     ...others
   } = usePreset(props);
 
@@ -208,7 +209,12 @@ const TextField = (props: InternalTextFieldProps) => {
             </View>
           )}
           {showClearButton && (
-            <ClearButton onClear={onClear} testID={`${props.testID}.clearButton`} onChangeText={onChangeText}/>
+            <ClearButton
+              onClear={onClear}
+              testID={`${props.testID}.clearButton`}
+              onChangeText={onChangeText}
+              clearButtonStyle={clearButtonStyle}
+            />
           )}
           {trailingAccessory}
           {/* </View> */}

src/components/textField/presets/outline.ts

@@ -3,6 +3,7 @@ import {BorderRadiuses, Colors, Spacings} from '../../../style';
 import underline from './underline';
 
 const styles = StyleSheet.create({
+  clearButtonStyle: {marginLeft: Spacings.s3},
   field: {
     borderWidth: 1,
     borderColor: Colors.$outlineDisabled,
@@ -14,5 +15,6 @@ const styles = StyleSheet.create({
 
 export default {
   ...underline,
+  clearButtonStyle: styles.clearButtonStyle,
   fieldStyle: styles.field
 };

src/components/textField/presets/underline.ts

@@ -26,6 +26,7 @@ const styles = StyleSheet.create({
     lineHeight: undefined,
     height: Typography?.text70?.lineHeight
   },
+  clearButtonStyle: {marginHorizontal: Spacings.s3},
   floatingPlaceholder: {...Typography.text70}
 });
 
@@ -37,5 +38,6 @@ export default {
   labelColor: colorByState,
   fieldStyle: styles.field,
   style: styles.input,
+  clearButtonStyle: styles.clearButtonStyle,
   floatingPlaceholderStyle: styles.floatingPlaceholder
 };

src/components/textField/types.ts

@@ -69,6 +69,17 @@ export interface MandatoryIndication {
   showMandatoryIndication?: boolean;
 }
 
+export interface ClearButtonProps extends Pick<TextInputProps, 'testID' | 'onChangeText'> {
+  /**
+   * On clear button callback
+   */
+  onClear?: () => void;
+  /**
+   * The style of the clear button
+   */
+  clearButtonStyle?: StyleProp<ViewStyle>;
+}
+
 export interface LabelProps extends MandatoryIndication, Pick<ValidationMessageProps, 'enableErrors'> {
   /**
    * Field label
@@ -190,6 +201,7 @@ export type TextFieldProps = MarginModifiers &
   LabelProps &
   Omit<FloatingPlaceholderProps, 'testID'> &
   MandatoryIndication &
+  Omit<ClearButtonProps, 'testID' | 'onChangeText'> &
   // We're declaring these props explicitly here for react-docgen (which can't read hooks)
   // FieldStateProps &
   ValidationMessageProps &
@@ -214,10 +226,6 @@ export type TextFieldProps = MarginModifiers &
      * Should show a clear button when there is a value
      */
     showClearButton?: boolean;
-    /**
-     * On clear button callback
-     */
-    onClear?: () => void;
     /**
      * Text to display under the input
      */