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

Files

Liam DeBeasi cd5c099dd3 feat(picker): add inline picker (#28689 )

Issue number: resolves #24905, resolves #26840, resolves #15710

---------

<!-- 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 current picker is only displayed as an overlay which makes it
impossible to use inline with the rest of the application. Additionally,
there are several bugs and missing features. For example, it is
impossible to know when the value of the picker column has changed using
public APIs. This is valuable for updating other columns in response to
that data.

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

- Introduces `ion-picker` as an inline wheel picker component. The
overlay picker is still available using `ion-picker-legacy`.
- The implementation of this component resolves linked bugs. It also
resolves linked features by exposing an `ionChange` event for developers
to listen for.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

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

Dev-build: `7.5.8-dev.11702398696.1ab62ea9`

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

2023-12-13 13:03:58 -05:00

3.2 KiB

Raw 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

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.

3.2 KiB Raw Blame History