feat: add hideClearButton Prop to SearchInput Component

.changeset/witty-cheetahs-battle.md

@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': patch
+---
+
+feat: add hideClearButton Prop to SearchInput Component

packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx

@@ -70,6 +70,7 @@ export default {
     labelPosition: 'top',
     helpText: undefined,
     autoCapitalize: undefined,
+    hideClearButton: false,
   },
   tags: ['autodocs'],
   argTypes: {
@@ -185,6 +186,14 @@ export default {
         category: propsCategory.KEYBOARD_PROPS,
       },
     },
+    hideClearButton: {
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        category: propsCategory.TRAILING_VISUAL_PROPS,
+      },
+    },
     ...getStyledPropsArgTypes(),
   },
   parameters: {
@@ -256,6 +265,11 @@ const SearchInputTemplate: StoryFn<typeof SearchInputComponent> = (args) => {
 export const Default = SearchInputTemplate.bind({});
 Default.storyName = 'Default';
 
+export const SearchInputWithClearButtonHidden = SearchInputTemplate.bind({});
+SearchInputWithClearButtonHidden.storyName = 'SearchInput with Clear Button Hidden';
+SearchInputWithClearButtonHidden.args = {
+  hideClearButton: true,
+};
 export const SearchInputHelpText = SearchInputTemplate.bind({});
 SearchInputHelpText.storyName = 'SearchInput with Help Text';
 SearchInputHelpText.args = {

packages/blade/src/components/Input/SearchInput/SearchInput.tsx

@@ -59,6 +59,12 @@ type SearchInputCommonProps = Pick<
    * @default true
    */
   showSearchIcon?: boolean;
+  /**
+   * Toggle the visibility of the clear button.
+   *
+   * @default false
+   */
+  hideClearButton?: boolean;
 } & StyledPropsBlade;
 
 /*
@@ -90,7 +96,9 @@ type SearchInputPropsWithLabel = {
 };
 
 type SearchInputProps = (SearchInputPropsWithA11yLabel | SearchInputPropsWithLabel) &
-  SearchInputCommonProps;
+  SearchInputCommonProps & {
+    hideClearButton?: boolean;
+  };
 
 // need to do this to tell TS to infer type as SearchInput of React Native and make it believe that `ref.current.clear()` exists
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -121,6 +129,9 @@ const _SearchInput: React.ForwardRefRenderFunction<BladeElementRef, SearchInputP
     testID,
     size = 'medium',
     showSearchIcon = true,
+
+    hideClearButton = false,
+
     ...rest
   },
   ref,
@@ -145,7 +156,7 @@ const _SearchInput: React.ForwardRefRenderFunction<BladeElementRef, SearchInputP
       return <Spinner accessibilityLabel="Loading Content" color="primary" />;
     }
 
-    if (shouldShowClearButton) {
+    if (!hideClearButton && shouldShowClearButton) {
       return (
         <IconButton
           size="medium"