Skip to content

Conversation

@OS-pedrolourenco
Copy link
Contributor

Issue number: internal


What is the current behavior?

The searchbar component does not currently match our UX designs for the ionic theme.

What is the new behavior?

Updated the searchbar so that it does:

  • Adjusted the searchbar input paddings when no leading or trailing icons are rendered;
  • Added an ellipsis text overflow to the searchbar input;
  • Updated the background, text and icon colors so that they are reactive to state changes like having inserted text and being disabled (some design tokens are still TBD);
  • The clear button is now hidden when the searchbar is disabled.

Does this introduce a breaking change?

  • Yes
  • No

Other information

@vercel
Copy link

vercel bot commented Mar 13, 2025

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

Name Status Preview Comments Updated (UTC)
ionic-framework ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 18, 2025 10:57am

@github-actions github-actions bot added the package: core @ionic/core package label Mar 13, 2025
@OS-pedrolourenco OS-pedrolourenco marked this pull request as ready for review March 13, 2025 15:00
@OS-pedrolourenco OS-pedrolourenco requested a review from a team as a code owner March 13, 2025 15:00
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also the PR title should use refactor since we are updating the styles, not adding them in.

Comment on lines 22 to 23
--leading-icon-padding: #{calc(globals.$ion-scale-400 + globals.$ion-space-200)};
--clear-button-padding: #{calc(globals.$ion-scale-400 + globals.$ion-space-200)};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why were these new variables added? We need to be careful when adding new ones because it introduces them to the public so we try to make sure that they're necessary.

If they're to make it easier to keep track of then it might be best to make Sass variables.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These variables were created with the purpose of making the searchbar's start and end paddings be dynamic according to whether it is rendering leading and/or trailing icons. That being said, I don't see a reason why they have to be CSS variables instead of SCSS variables so I'll make that change 👍🏼

@OS-pedrolourenco OS-pedrolourenco changed the title feat(searchbar): update according to design refactor(searchbar): update according to design Mar 13, 2025
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@OS-pedrolourenco OS-pedrolourenco merged commit 723868d into next Mar 19, 2025
47 checks passed
@OS-pedrolourenco OS-pedrolourenco deleted the ROU-11253 branch March 19, 2025 12:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants