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

Files

Sean Perkins f65235ac47 feat(progress-bar): update styles to iOS 17 specs (#28759 )

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

Ionic's progress bar implementation deviates from the appearance of a
progress bar on iOS 17.

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

- Progress bar is updated to have rounded corners (around the
container).
- Increases progress bar height to `4px`
- Solid progress bars (progress bars with a buffer value of `1`) will
have a consistent background appearance.
- Buffer progress bars will continue to have the colored background
appearance as they do in v7.

## Does this introduce a breaking change?

- [x] Yes
- [ ] 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.
-->

### Breaking Changes

- `--buffer-background` has been removed in favor of `--background`. 

## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Accomplishing rounded caps for the inner progress with Ionic's scale
transformation was not viable. To maintain 60fps animations for the
progress, rounded corners were applied to the container.

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

2024-01-05 17:16:27 -05:00

3.4 KiB

Raw Permalink Blame History

Breaking Changes

This is a comprehensive list of the breaking changes introduced in the major version releases of Ionic Framework.

Versions

Version 8.x

Browser and Platform Support
Components
- Button
- Content
- Datetime
- Picker
- Progress bar

Browser and Platform Support

This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 8.

Minimum Browser Versions

Desktop Browser	Supported Versions
Chrome	89+
Safari	15+
Firefox	75+
Edge	89+

Minimum JavaScript Framework Versions

Framework	Supported Version
Angular	16+
React	17+
Vue	3.0.6+

Minimum Mobile Platform Versions

Platform	Supported Version
iOS	15+
Android	5.1+ with Chromium 89+

Components

Button

Button text now wraps by default. If this behavior is not desired, add the ion-text-nowrap class from the CSS Utilities.

Content

Content no longer sets the --background custom property when the .outer-content class is set on the host.

Datetime

The CSS shadow part for month-year-button has been changed to target a button element instead of ion-item. Developers should verify their UI renders as expected for the month/year toggle button inside of ion-datetime.
- Developers using the CSS variables available on ion-item will need to migrate their CSS to use CSS properties. For example:
```
ion-datetime::part(month-year-button) {
-  --background: red;

+  background: red;
}
```

Picker

ion-picker and ion-picker-column have been renamed to ion-picker-legacy and ion-picker-legacy-column, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period.
- Only the component names have been changed. Usages such as ion-picker or IonPicker should be changed to ion-picker-legacy and IonPickerLegacy, respectively.
- Non-component usages such as pickerController or useIonPicker remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages.

Progress bar

The --buffer-background CSS variable has been removed. Use --background instead.

3.4 KiB Raw Permalink Blame History