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: clean search bar #1833

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

bug: clean search bar #1833

wants to merge 4 commits into from

Conversation

ShatilKhan
Copy link

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

Related issue(s)/PR(s)

#1832

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Dec 6, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: 71e44e0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel Vercel
Copy link

vercel bot commented Dec 6, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
design-system ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 19, 2024 0:40am

@lucasboilly lucasboilly linked an issue Dec 10, 2024 that may be closed by this pull request
[bug]: Cleaner search bar #1832
Open
@lucasboilly
Copy link

Thanks again for your contribution @ShatilKhan :)

I noticed 2 things:

  • The input's height is 40px instead of 32px, so the layout shift issue will remain
  • We should remove the 8px right padding because it makes the clear cross move to the left

CleanShot 2024-12-10 at 11 05 07@2x

@lucasboilly lucasboilly mentioned this pull request Dec 10, 2024
Closed
@ShatilKhan
fix padding
2bf421a 
Signed-off-by: ShatilKhan <[email protected]>
@ShatilKhan
Copy link
Author

I've removed the right padding
The text input field was showing 40px in my storybook so I reduced it
Please check & lmk

bug-clean-srch-bar-update.webm

@lucasboilly
Copy link

Hi @ShatilKhan :)

All good for the right padding.

However the Searchbar is still has a 40px height when I inspect it.

CleanShot 2024-12-13 at 16 22 29@2x

@HichamELBSI do you know how we can fix this?

@HichamELBSI
Copy link
Collaborator

Hi @ShatilKhan :)

All good for the right padding.

However the Searchbar is still has a 40px height when I inspect it.

CleanShot 2024-12-13 at 16 22 29@2x

@HichamELBSI do you know how we can fix this?

Hey, to make it 32px, we just have to add a size="S" of the SearchbarInput component that is used in the Searchbar.tsx file Line 82.

@ShatilKhan Please, feel free to do the update so we can merge all you modification 🙂

@HichamELBSI HichamELBSI self-requested a review December 16, 2024 08:53
@ShatilKhan
Copy link
Author

I'm on it

@ShatilKhan
set input size to small
71e44e0 
Signed-off-by: Shahriar Shatil <[email protected]>
@ShatilKhan
Copy link
Author

Can you please check ?

bug-clean-searchbar-vid-3.webm

@HichamELBSI
Copy link
Collaborator

@ShatilKhan In order to merge the PR, you will need to generate changeset. You can run yarn release:add to generate it. Feel free to follow the contributing guide.

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

@HichamELBSI HichamELBSI Awaiting requested review from HichamELBSI

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
community
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[bug]: Cleaner search bar
4 participants
@ShatilKhan @lucasboilly @HichamELBSI @oiorain