bug: clean search bar

[ShatilKhan]

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 detected

Latest commit: 3e7e6ca

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@strapi/design-system	Patch
@strapi/icons	Patch
@strapi/ui-primitives	Patch

Not sure what this means? Click here to learn what changesets are.

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

[vercel]

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 28, 2024 5:12am

[lucasboilly]

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

[ShatilKhan]

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]

Hi @ShatilKhan :)

All good for the right padding.

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

@HichamELBSI do you know how we can fix this?

[HichamELBSI]

Hi @ShatilKhan :)

All good for the right padding.

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

@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 🙂

[ShatilKhan]

I'm on it

[ShatilKhan]

Can you please check ?

bug-clean-searchbar-vid-3.webm

[HichamELBSI]

@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.

[ShatilKhan]

@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.

I've added the changesheet