From 06de7a97116157ff45e1ed4b8560c32508911c65 Mon Sep 17 00:00:00 2001 From: shubham yadav <126192924+yadavshubham01@users.noreply.github.com> Date: Sat, 30 Nov 2024 19:10:34 +0530 Subject: [PATCH 1/9] Update SearchInput.tsx --- .../components/Input/SearchInput/SearchInput.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/blade/src/components/Input/SearchInput/SearchInput.tsx b/packages/blade/src/components/Input/SearchInput/SearchInput.tsx index 523106cf559..79512a1ac93 100644 --- a/packages/blade/src/components/Input/SearchInput/SearchInput.tsx +++ b/packages/blade/src/components/Input/SearchInput/SearchInput.tsx @@ -54,6 +54,12 @@ type SearchInputCommonProps = Pick< * @default true */ showSearchIcon?: boolean; + /** + * Toggle the visibility of the clear button. + * + * @default false + */ + hideClearButton?: boolean; // New prop } & StyledPropsBlade; /* @@ -85,7 +91,9 @@ type SearchInputPropsWithLabel = { }; type SearchInputProps = (SearchInputPropsWithA11yLabel | SearchInputPropsWithLabel) & - SearchInputCommonProps; + SearchInputCommonProps & { + hideClearButton?: boolean; // Add a line to include the new prop + } // 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 @@ -116,6 +124,7 @@ const _SearchInput: React.ForwardRefRenderFunction; } - if (shouldShowClearButton) { + if (!hideClearButton && shouldShowClearButton) { return ( Date: Sat, 30 Nov 2024 19:18:27 +0530 Subject: [PATCH 2/9] Update SearchInput.stories.tsx --- .../Input/SearchInput/SearchInput.stories.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx b/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx index b0c9dd1757f..23586ea523a 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: { @@ -184,6 +185,14 @@ export default { table: { category: propsCategory.KEYBOARD_PROPS, }, + }, + hideClearButton: { + control: { + type: 'boolean', + }, + table: { + category: propsCategory.TRAILING_VISUAL_PROPS, + }, }, ...getStyledPropsArgTypes(), }, @@ -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, // Set the new prop to true +}; export const SearchInputHelpText = SearchInputTemplate.bind({}); SearchInputHelpText.storyName = 'SearchInput with Help Text'; SearchInputHelpText.args = { From 16f290f0655daf0594768517c9254664953336d1 Mon Sep 17 00:00:00 2001 From: shubham yadav <126192924+yadavshubham01@users.noreply.github.com> Date: Sat, 7 Dec 2024 22:53:03 +0530 Subject: [PATCH 3/9] Update SearchInput.tsx --- .../blade/src/components/Input/SearchInput/SearchInput.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/blade/src/components/Input/SearchInput/SearchInput.tsx b/packages/blade/src/components/Input/SearchInput/SearchInput.tsx index 1b02a81ef0d..4540d5a2ba6 100644 --- a/packages/blade/src/components/Input/SearchInput/SearchInput.tsx +++ b/packages/blade/src/components/Input/SearchInput/SearchInput.tsx @@ -131,9 +131,8 @@ const _SearchInput: React.ForwardRefRenderFunction Date: Sun, 8 Dec 2024 16:10:31 +0530 Subject: [PATCH 4/9] Update SearchInput.stories.tsx --- .../src/components/Input/SearchInput/SearchInput.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx b/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx index 8456a4e66db..a0ee43bb5af 100644 --- a/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx +++ b/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx @@ -268,7 +268,7 @@ Default.storyName = 'Default'; export const SearchInputWithClearButtonHidden = SearchInputTemplate.bind({}); SearchInputWithClearButtonHidden.storyName = 'SearchInput with Clear Button Hidden'; SearchInputWithClearButtonHidden.args = { - hideClearButton: true, // Set the new prop to true + hideClearButton: true, }; export const SearchInputHelpText = SearchInputTemplate.bind({}); SearchInputHelpText.storyName = 'SearchInput with Help Text'; From 91b761720de73cef9c80c03a63b7061e93b42407 Mon Sep 17 00:00:00 2001 From: shubham yadav <126192924+yadavshubham01@users.noreply.github.com> Date: Sun, 8 Dec 2024 16:11:34 +0530 Subject: [PATCH 5/9] Update SearchInput.tsx --- .../blade/src/components/Input/SearchInput/SearchInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/blade/src/components/Input/SearchInput/SearchInput.tsx b/packages/blade/src/components/Input/SearchInput/SearchInput.tsx index 4540d5a2ba6..65cc271fb2d 100644 --- a/packages/blade/src/components/Input/SearchInput/SearchInput.tsx +++ b/packages/blade/src/components/Input/SearchInput/SearchInput.tsx @@ -64,7 +64,7 @@ type SearchInputCommonProps = Pick< * * @default false */ - hideClearButton?: boolean; // New prop + hideClearButton?: boolean; } & StyledPropsBlade; /* @@ -97,7 +97,7 @@ type SearchInputPropsWithLabel = { type SearchInputProps = (SearchInputPropsWithA11yLabel | SearchInputPropsWithLabel) & SearchInputCommonProps & { - hideClearButton?: boolean; // Add a line to include the new prop + 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 From d0cb88af74145d2edfac0780c85065ff13d7e098 Mon Sep 17 00:00:00 2001 From: shubham yadav <126192924+yadavshubham01@users.noreply.github.com> Date: Thu, 19 Dec 2024 21:08:48 +0530 Subject: [PATCH 6/9] Update SearchInput.stories.tsx --- .../src/components/Input/SearchInput/SearchInput.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx b/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx index a0ee43bb5af..55ac41997c6 100644 --- a/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx +++ b/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx @@ -186,7 +186,7 @@ export default { category: propsCategory.KEYBOARD_PROPS, }, }, - hideClearButton: { + hideClearButton:{ control: { type: 'boolean', }, @@ -268,7 +268,7 @@ Default.storyName = 'Default'; export const SearchInputWithClearButtonHidden = SearchInputTemplate.bind({}); SearchInputWithClearButtonHidden.storyName = 'SearchInput with Clear Button Hidden'; SearchInputWithClearButtonHidden.args = { - hideClearButton: true, + hideClearButton:true, }; export const SearchInputHelpText = SearchInputTemplate.bind({}); SearchInputHelpText.storyName = 'SearchInput with Help Text'; From d29b0d6981fc3653684b1e838775dddd56218b65 Mon Sep 17 00:00:00 2001 From: shubham yadav <126192924+yadavshubham01@users.noreply.github.com> Date: Thu, 19 Dec 2024 21:10:31 +0530 Subject: [PATCH 7/9] Update SearchInput.tsx --- .../blade/src/components/Input/SearchInput/SearchInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/blade/src/components/Input/SearchInput/SearchInput.tsx b/packages/blade/src/components/Input/SearchInput/SearchInput.tsx index 65cc271fb2d..88830898877 100644 --- a/packages/blade/src/components/Input/SearchInput/SearchInput.tsx +++ b/packages/blade/src/components/Input/SearchInput/SearchInput.tsx @@ -98,7 +98,7 @@ type SearchInputPropsWithLabel = { type SearchInputProps = (SearchInputPropsWithA11yLabel | SearchInputPropsWithLabel) & 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 @@ -132,7 +132,7 @@ const _SearchInput: React.ForwardRefRenderFunction Date: Sun, 22 Dec 2024 20:08:52 +0530 Subject: [PATCH 8/9] fix linting --- .../components/Input/SearchInput/SearchInput.stories.tsx | 4 ++-- .../src/components/Input/SearchInput/SearchInput.tsx | 9 ++++----- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx b/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx index 55ac41997c6..87e0fa27d9a 100644 --- a/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx +++ b/packages/blade/src/components/Input/SearchInput/SearchInput.stories.tsx @@ -186,7 +186,7 @@ export default { category: propsCategory.KEYBOARD_PROPS, }, }, - hideClearButton:{ + hideClearButton: { control: { type: 'boolean', }, @@ -268,7 +268,7 @@ Default.storyName = 'Default'; export const SearchInputWithClearButtonHidden = SearchInputTemplate.bind({}); SearchInputWithClearButtonHidden.storyName = 'SearchInput with Clear Button Hidden'; SearchInputWithClearButtonHidden.args = { - hideClearButton:true, + hideClearButton: true, }; export const SearchInputHelpText = SearchInputTemplate.bind({}); SearchInputHelpText.storyName = 'SearchInput with Help Text'; diff --git a/packages/blade/src/components/Input/SearchInput/SearchInput.tsx b/packages/blade/src/components/Input/SearchInput/SearchInput.tsx index 88830898877..12c4cf9c074 100644 --- a/packages/blade/src/components/Input/SearchInput/SearchInput.tsx +++ b/packages/blade/src/components/Input/SearchInput/SearchInput.tsx @@ -59,12 +59,12 @@ type SearchInputCommonProps = Pick< * @default true */ showSearchIcon?: boolean; - /** + /** * Toggle the visibility of the clear button. * * @default false */ - hideClearButton?: boolean; + hideClearButton?: boolean; } & StyledPropsBlade; /* @@ -97,7 +97,7 @@ type SearchInputPropsWithLabel = { type SearchInputProps = (SearchInputPropsWithA11yLabel | SearchInputPropsWithLabel) & SearchInputCommonProps & { - hideClearButton?: boolean; + 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 @@ -131,9 +131,8 @@ const _SearchInput: React.ForwardRefRenderFunction { From d7c69ffe1c82e398220baf11c5a8b0f135e3d62e Mon Sep 17 00:00:00 2001 From: tewarig Date: Thu, 2 Jan 2025 13:07:33 +0530 Subject: [PATCH 9/9] chore: add change set --- .changeset/witty-cheetahs-battle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/witty-cheetahs-battle.md 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