remove clear button margin

Author: bernhardoj

src/components/Search/SearchAutocompleteInput.tsx

@@ -58,12 +58,10 @@ type SearchAutocompleteInputProps = {
 
     /** Any additional styles to apply to text input along with FormHelperMessage */
     outerWrapperStyle?: StyleProp<ViewStyle>;
-
     inputStyle?: StyleProp<TextStyle>;
-
     inputContainerStyle?: StyleProp<ViewStyle>;
-
     touchableInputWrapperStyle?: StyleProp<ViewStyle>;
+    clearButtonStyle?: StyleProp<ViewStyle>;
 
     /** Whether the search reports API call is running  */
     isSearchingForReports?: boolean;
@@ -96,6 +94,7 @@ function SearchAutocompleteInput({
     inputStyle,
     inputContainerStyle,
     touchableInputWrapperStyle,
+    clearButtonStyle,
     isSearchingForReports,
     selection,
     substitutionMap,
@@ -222,6 +221,7 @@ function SearchAutocompleteInput({
                     textInputContainerStyles={[styles.borderNone, styles.pb0, styles.ph3, inputContainerStyle]}
                     inputStyle={[inputWidth, styles.lineHeightUndefined, inputStyle]}
                     touchableInputWrapperStyle={touchableInputWrapperStyle}
+                    clearButtonStyle={clearButtonStyle}
                     placeholderTextColor={theme.textSupporting}
                     loadingSpinnerStyle={[styles.mt0, styles.mr1, styles.justifyContentCenter]}
                     onFocus={() => {

src/components/Search/SearchPageHeader/SearchPageInputWide.tsx

@@ -74,6 +74,7 @@ function SearchPageInputWide({queryJSON, handleSearch}: SearchPageInputWideProps
                     inputStyle={isAutocompleteListVisible ? undefined : styles.fontSizeLabel}
                     inputContainerStyle={isAutocompleteListVisible ? undefined : styles.ph2}
                     touchableInputWrapperStyle={isAutocompleteListVisible ? undefined : styles.searchPageInputWideTouchableWrapper}
+                    clearButtonStyle={isAutocompleteListVisible ? undefined : styles.mh0}
                     onSubmit={() => {
                         const focusedOption = listRef.current?.getFocusedOption();
                         if (focusedOption) {

src/components/TextInput/BaseTextInput/implementation/index.native.tsx

@@ -80,6 +80,7 @@ function BaseTextInput({
     placeholderTextColor,
     onClearInput,
     iconContainerStyle,
+    clearButtonStyle,
     shouldUseDefaultLineHeightForPrefix = true,
     ref,
     sentryLabel,
@@ -452,7 +453,7 @@ function BaseTextInput({
                                         setValue('');
                                         onClearInput?.();
                                     }}
-                                    style={[StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff)]}
+                                    style={[StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff), clearButtonStyle]}
                                 />
                             )}
                             {!!inputProps.isLoading && !shouldShowClearButton && (

src/components/TextInput/BaseTextInput/implementation/index.tsx

@@ -82,6 +82,7 @@ function BaseTextInput({
     placeholderTextColor,
     onClearInput,
     iconContainerStyle,
+    clearButtonStyle,
     shouldUseDefaultLineHeightForPrefix = true,
     ref,
     sentryLabel,
@@ -528,7 +529,7 @@ function BaseTextInput({
                                             setValue('');
                                             onClearInput?.();
                                         }}
-                                        style={[StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff)]}
+                                        style={[StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff), clearButtonStyle]}
                                         sentryLabel={sentryLabel ? `${sentryLabel}-ClearButton` : undefined}
                                     />
                                 </View>

src/components/TextInput/BaseTextInput/types.ts

@@ -165,6 +165,9 @@ type CustomBaseTextInputProps = ForwardedFSClassProps &
         /** Style for the icon container */
         iconContainerStyle?: StyleProp<ViewStyle>;
 
+        /** Style for the clear button */
+        clearButtonStyle?: StyleProp<ViewStyle>;
+
         /** The width of inner content */
         contentWidth?: number;