ionic-framework

mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00

Files

Sean Perkins 48c0d2c0dd feat(searchbar): update styles to iOS 17 specs (#28728 )

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?
<!-- Please describe the current behavior that you are modifying. -->

The searchbar implementation for Ionic's iOS mode does not align with
the appearance of a native search control in iOS 17.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The spacing between the searchbar and the cancel button has increased
to `12px`.
- The cancel button font size has increased to `17px`. 

|iOS 17|Ionic|Diff|
|----|----|----|

|![searchbar-ios](https://github.com/ionic-team/ionic-framework/assets/13732623/883bdeed-ec42-4a1a-898c-82d9d7aa270f)|![ionic-searchbar](https://github.com/ionic-team/ionic-framework/assets/13732623/93482bea-9fae-4056-a6de-8ca5c9e1640d)|![searchbar-diff](https://github.com/ionic-team/ionic-framework/assets/13732623/6c6a1f99-55ab-43be-94e5-bd2ebcd1b960)|


- Ionic's text and background color is different than iOS, this is
expected. Ionic uses the `$text-color-rgb`, which is compatible with
dark mode appearance. Ionic does not currently have rgb variables for
step colors to closer align to iOS color when requiring opacity.
- iOS reference image is from the Notes app. Ionic reference image is
from `searchbar/test/basic`, with a modified content background color of
`#f2f2f7` to closer align to the Notes app.

## 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/.github/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. -->

The additional screenshot diffs that are a part of this PR are valid
changes. When updating the color palette for AA contrast, these
reference images were not updated. We currently use a
[threshold](dc1dd9c395/core/playwright.config.ts (L57))
that determines if a diff exists. The reason that they show up in this
PR is because I manually deleted the reference images and forced new
references. As such the text color changes you see here are actually
from the AA contrast changes.

---------

Co-authored-by: ionitron <hi@ionicframework.com>

2024-01-03 16:55:04 -05:00