A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
refactor(searchbar): update according to design (#30245)
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## 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 - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
P
Pedro Lourenço committed
723868df9e8b9ad5652155f91c4dbefd28994f95
Parent: 355af73
Committed by GitHub <noreply@github.com>
on 3/19/2025, 12:57:08 PM