Skip to content
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

Jump to bottom

[bug]: Cleaner search bar #1832

Closed
lucasboilly opened this issue Dec 4, 2024 · 2 comments · Fixed by #1833
Closed

[bug]: Cleaner search bar #1832

lucasboilly opened this issue Dec 4, 2024 · 2 comments · Fixed by #1833
Assignees
@lucasboilly
Labels
good first issue Good for newcomers issue: bug Issue reporting a bug

Comments

@lucasboilly
Copy link

lucasboilly commented Dec 4, 2024 •
edited
Loading

What version of design-system are you using?

Browser: Arc

What's Wrong?

Since it's displayed next to 32px elements (ex: the filter button of the list view), it makes the layout shift when it's opened. On the UI side, it simply doesn't look like it's part of our design system (icon color, shadow, no borders). The colors are also not the right ones in dark mode.

CleanShot.2024-12-04.at.10.57.58.mp4

To Reproduce

Click on any search bar, in the list view for example.

Expected Behaviour

The Search icon should have a 16px size and a Neutral500 color. The color of the placeholder text should be Neutral500 as well. The input itself should have a 32px height and a 8px paddings Please find the other measurements in the following screenshot.

CleanShot 2024-12-04 at 11 09 18@2x

With all these modifications, the transition between the collapsed and expanded mode should be smoother.

CleanShot.2024-12-04.at.11.14.45.mp4
@lucasboilly lucasboilly added good first issue Good for newcomers issue: bug Issue reporting a bug labels Dec 4, 2024
@lucasboilly lucasboilly self-assigned this Dec 4, 2024
@ShatilKhan
Copy link
Contributor

I'm looking into it. Can you assign me @lucasboilly ?

@ShatilKhan ShatilKhan mentioned this issue Dec 6, 2024
Merged
@lucasboilly
Copy link
Author

Hi @ShatilKhan, sorry I missed the notification!

Thanks for your contribution, I'm gonna check the design today and I'll let the team know about your PR 🙂

@lucasboilly lucasboilly linked a pull request Dec 10, 2024 that will close this issue
bug: clean search bar #1833
Merged
HichamELBSI added a commit that referenced this issue Jan 13, 2025
@HichamELBSI
bug: clean search bar (#1833)
c5600e0 
### What does it do?
This PR updates the search bar component to match the design system
specifications by:
- Adjusted the search icon size to 16px and color to Neutral500
- Set input height to 32px with 8px padding
- Updated placeholder text color to Neutral500
- Refined the border and focus states for better consistency
- Removed excess shadow for cleaner appearance
- Fixed layout shift issues between collapsed and expanded states

### Why is it needed?
As reported in issue #1832, the current search bar implementation had
several visual inconsistencies:
- The search bar caused layout shifts when opened due to mismatched
sizes with surrounding 32px elements
- Visual appearance didn't match the design system (icon colors, shadow,
borders)
- Dark mode colors were incorrect
- The transition between states wasn't smooth

Describe the issue you are solving.

### How to test it?

[bug-cleaner-search-bar.webm](https://github.com/user-attachments/assets/5c09324a-ba98-416a-b672-c18f74ab0f47)


### Related issue(s)/PR(s)

#1832
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@lucasboilly lucasboilly

Labels
good first issue Good for newcomers issue: bug Issue reporting a bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

bug: clean search bar ShatilKhan/design-system
2 participants
@lucasboilly @ShatilKhan