Skip to content

Searchbox component issues and improvements #275

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vrundakansara merged 24 commits into from
Mar 14, 2025
Merged

Searchbox component issues and improvements #275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
85e6ed9
Extract and create a separate portal component
jaieds Mar 10, 2025
2986bcf
style: Enhance search input focus and disabled states
jaieds Mar 10, 2025
97d40a6
feat: Improve SearchBox component with new features and interactions
jaieds Mar 10, 2025
f403cdf
Update changelog.txt
jaieds Mar 10, 2025
cd1d4a5
style: Refine SearchBox input styling with minimal padding and height
jaieds Mar 10, 2025
6a4196c
feat: Enhance SearchBox with advanced keyboard navigation and accessi…
jaieds Mar 10, 2025
0ac4556
feat: Add `closeOnClick` option to SearchBox for improved interaction
jaieds Mar 10, 2025
42b444d
Prevent opening the dropdown
jaieds Mar 10, 2025
d3b90ec
Removed props that are not required
jaieds Mar 12, 2025
e83a371
fix: TS errors
jaieds Mar 12, 2025
b65063d
Update search.stories.tsx
jaieds Mar 12, 2025
c4f8675
Moved filter prop to the root component
jaieds Mar 12, 2025
df1cf62
Apply className to the parent element
jaieds Mar 12, 2025
9152210
Update prop name
jaieds Mar 13, 2025
36fc5f7
Set default value to undefined
jaieds Mar 13, 2025
ecff263
Add className to the wrapper
jaieds Mar 13, 2025
6455eb3
Merge branch 'dev' into searchbox-component/improvement
vrundakansara Mar 14, 2025
b9e1115
Show inner outline on focus for ghost variant
jaieds Mar 14, 2025
264f958
Merge branch 'searchbox-component/improvement' of https://github.com/…
jaieds Mar 14, 2025
ee98d5e
Update search result item padding
jaieds Mar 14, 2025
f05731b
Update dropdown offset value
jaieds Mar 14, 2025
6fa2baf
Update offset to match the Figma mockup
jaieds Mar 14, 2025
6e84472
Show keyboard shortcut based on OS
jaieds Mar 14, 2025
9e74b31
Merge branch 'dev' into pr/jaieds/275
jaieds Mar 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions changelog.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
Version 1.4.3 - xth x, 2025
- New - Added a variant in Input component to show uploaded file preview.
- New - Added a variant in Progress Steps component to show icon and number in the completed step.
Version 1.4.3 - xth xxxx, 2025
- New - Added new Atom, File Uploader - to show uploaded file preview.
- New - Added new variants in Progress Steps component to show icon and number in the completed step.
- Improvement - Enhanced the UI and functionality of the Searchbox component for better flexibility and user experience.

Version 1.4.2 - 6th March, 2025
- New - Added new size 'xs' to the Switch component.
Expand Down
67 changes: 35 additions & 32 deletions src/components/search/search.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const meta: Meta<typeof SearchBox> = {
'SearchBox.Input': SearchBox.Input,
'SearchBox.Loading': SearchBox.Loading,
'SearchBox.Separator': SearchBox.Separator,
'SearchBox.Portal': SearchBox.Portal,
'SearchBox.Content': SearchBox.Content,
'SearchBox.List': SearchBox.List,
'SearchBox.Empty': SearchBox.Empty,
Expand Down Expand Up @@ -48,36 +49,38 @@ const Template: StoryFn<typeof SearchBox> = ( args ) => {
<SearchBox
{ ...args }
open={ open || args.open }
onOpenChange={ handleOpenChange }
setOpen={ handleOpenChange }
>
<SearchBox.Input ref={ inputRef } onChange={ handleSearch } />
<SearchBox.Content>
<SearchBox.List>
<SearchBox.Group heading="Suggestions">
<SearchBox.Item icon={ <File /> }>
Calendar
</SearchBox.Item>
<SearchBox.Item icon={ <File /> }>
Document
</SearchBox.Item>
<SearchBox.Item icon={ <File /> }>
Attendance
</SearchBox.Item>
</SearchBox.Group>
<SearchBox.Separator />
<SearchBox.Group heading="Folders">
<SearchBox.Item icon={ <Folder /> }>
Calendar Folder
</SearchBox.Item>
<SearchBox.Item icon={ <Folder /> }>
Document Folder
</SearchBox.Item>
<SearchBox.Item icon={ <Folder /> }>
Attendance Folder
</SearchBox.Item>
</SearchBox.Group>
</SearchBox.List>
</SearchBox.Content>
<SearchBox.Portal>
<SearchBox.Content>
<SearchBox.List>
<SearchBox.Group heading="Suggestions">
<SearchBox.Item icon={ <File /> }>
Calendar
</SearchBox.Item>
<SearchBox.Item icon={ <File /> }>
Document
</SearchBox.Item>
<SearchBox.Item icon={ <File /> }>
Attendance
</SearchBox.Item>
</SearchBox.Group>
<SearchBox.Separator />
<SearchBox.Group heading="Folders">
<SearchBox.Item icon={ <Folder /> }>
Calendar Folder
</SearchBox.Item>
<SearchBox.Item icon={ <Folder /> }>
Document Folder
</SearchBox.Item>
<SearchBox.Item icon={ <Folder /> }>
Attendance Folder
</SearchBox.Item>
</SearchBox.Group>
</SearchBox.List>
</SearchBox.Content>
</SearchBox.Portal>
</SearchBox>
);
};
Expand All @@ -91,8 +94,8 @@ export const SecondarySearchBox = Template.bind( {} );
SecondarySearchBox.args = {};
SecondarySearchBox.decorators = [
() => (
<SearchBox>
<SearchBox.Input variant="secondary" />
<SearchBox variant="secondary">
<SearchBox.Input />
</SearchBox>
),
];
Expand All @@ -101,8 +104,8 @@ export const GhostSearchBox = Template.bind( {} );
GhostSearchBox.args = {};
GhostSearchBox.decorators = [
() => (
<SearchBox>
<SearchBox.Input variant="ghost" />
<SearchBox variant="ghost">
<SearchBox.Input />
</SearchBox>
),
];
Expand Down
Loading
Loading