diff --git a/.changeset/witty-cheetahs-battle.md b/.changeset/witty-cheetahs-battle.md new file mode 100644 index 00000000000..cbcda8b4df8 --- /dev/null +++ b/.changeset/witty-cheetahs-battle.md @@ -0,0 +1,5 @@ +--- +'@razorpay/blade': patch +--- + +feat: add hideClearButton Prop to SearchInput Component diff --git a/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx b/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx index 31bce05f911..87e0fa27d9a 100644 --- a/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx +++ b/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 = (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 = { diff --git a/packages/blade/src/components/Input/SearchInput/SearchInput.tsx b/packages/blade/src/components/Input/SearchInput/SearchInput.tsx index 87c246ac1d6..12c4cf9c074 100644 --- a/packages/blade/src/components/Input/SearchInput/SearchInput.tsx +++ b/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; } - if (shouldShowClearButton) { + if (!hideClearButton && shouldShowClearButton) { return (