Issue number: N/A
---------
<!-- 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. -->
CI is failing for Cypress apps due to
https://github.com/cypress-io/cypress/issues/27804#issuecomment-1721476731.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- All Cypress test apps have been updated to Cypress 13.2.0 which is not
affected by this issue.
## 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. -->
Issue number: Resolves#27798
---------
## What is the current behavior
React IonNav component's views are missing keys, leading to unnecessary
duplicate mounting of components.
## What is the new behavior?
- Adds key to views of React IonNav component.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Sean Perkins <sean@ionic.io>
Issue number: resolves#28165
---------
<!-- 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 overlay implementation in Vue only checks for truthy
`keepContentsMounted` values. When setting this prop as an attribute,
the value of it is `''` which is falsy. As a result, content does not
get mounted.
One of Vue's ESLint rules states that this should be supported:
https://eslint.vuejs.org/rules/prefer-true-attribute-shorthand.html
Part of the issue may also be that Vue does not know the type of this
property and so it assume "any":
> The shorthand form is not always equivalent! If a prop accepts
multiple types, but Boolean is not the first one, a shorthand prop won't
pass true.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The overlay wrapper now checks for `''` values. If
`keepContentsMounted === ''` then the inner contents will be mounted
because this means the prop is being set using the attribute shorthand.
## 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.3.5-dev.11694621267.1e5f63c2`
Issue number: N/A
---------
<!-- 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 instructions doesn't provide clear directory paths for syncing local
changes.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The instructions has clear directory paths for syncing local changes.
- Updated out of date information.
## 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. -->
N/A
Issue number: resolves#28102
---------
<!-- 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. -->
When one modal is added and another modal is removed, the modal that is
removed does not account for the newly added modal when updating the
overlay context in React. As a result, the inner contents of the newly
added modal is not mounted.
We originally tried to fix this in
https://github.com/ionic-team/ionic-framework/pull/24553, but the fix
was not complete. While storing the latest information in a React ref
was correct, the way we updated the ref was done in a way such that data
was still stale.
In particular, the `overlaysRef` is updated whenever `IonOverlayManager`
is re-rendered. State updates are batched, so updating the state twice
in quick succession does not necessarily result in 2 separate renders.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- We need to make sure the ref is updated synchronously before any
render so that `addOverlay` and `removeOverlay` always have access to
the latest data.
- Added a test
## 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.3.3-dev.11693592339.18e000af`
---------
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: N/A
---------
<!-- 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 instructions doesn't provide clear directory paths for syncing
local changes.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The instructions has clear directory paths for syncing local changes.
- Switched to the `[!NOTE]` for notes.
## 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. -->
N/A
Issue number: N/A
---------
<!-- 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 Vue Router implementation [assigns data to the `routerAnimation` on
the view
item](cddefd1548/packages/vue/src/components/IonRouterOutlet.ts (L165-L170)),
but the [type does not exist on the `ViewItem`
interface](https://github.com/ionic-team/ionic-framework/blob/main/packages/vue-router/src/types.ts#L62-L76).
The actual routing implementation does not make use of the type, but
this is backfilling the information when we wire up the types to the
implementation.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds the missing type for `routerAnimation` to the `ViewItem`
## 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. -->
Issue number: Resolves#28010
---------
<!-- 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. -->
`onDidDismiss` and `onWillPresent` will fire twice when having a manual
binding in your implementation for inline overlays.
e.g.:
```tsx
<IonAlert onDidDismiss={() => console.log('hello world')} />
```
Will result in:
> hello world
> hello world
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `onDidDismiss` and `onWillPresent` do not execute the callback handler
twice per invocation
## 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.3.1-dev.11692305436.16a4008f`
Issue number: Resolves#23480
---------
<!-- 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. -->
Angular's min/max validators do not work with `ion-input[type=number]`.
Using the built-in validators with `ion-input` will not update the
control status to invalid, reflect the `ng-invalid` class or report the
correct errors.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The `IonicModule` now includes two additional directive declarations
that extend Angular's built-in min/max validators and target the
`ion-input` component when using `type="number"`.
## 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. -->
Issue number: Resolves#27212
---------
<!-- 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. -->
`ionTabsWillChange` emits _after_ the tab view is activated in the
stack.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `ionTabsWillChange` emits _before_ the tab view is activated in the
stack.
## 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.2.4-dev.11692040948.1fd0ecd2`
Issue number: N/A
---------
<!-- 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 sync script for the React package is out of date. It will
unintentionally delete the symlink directory of the build output from
`core/`, which breaks the build for the package during local
development.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the sync script to package and install the `core` package
- Matches the implementation pattern used for the sync script in our
other packages
## 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. -->
Issue number: N/A
---------
<!-- 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. -->
React 17/18 test apps use react-scripts. This does not align with our
starter templates.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the React 18 test app to use Vite
- Leaves the React 17 test app on react-scripts for now
- Updates test app dependencies to align with the react starters
## 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. -->
closes#27949
---------
<!-- 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. -->
- Typescript is complaining about the `onClick` event type of the
`IonTabButton`
```ts
const App: React.FC = () => {
async function handleTabClick(e: CustomEvent<HTMLIonTabButtonElement>) {
alert(e.detail.tab);
}
return (
<IonTabButton tab="myTab" onClick={handleTabClick}>
);
};
```
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `onClick` handler uses `CustomEvent` type
- Typescript does not error
## 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. -->
Issue number: resolves#27873
---------
<!-- 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. -->
Custom animations are not always used when the `handleNavigateBack`
method is called. This impacts both Ionic React and Ionic Vue.
While we do set the `incomingRouteParams` with the animation:
a08a5894ba/packages/react-router/src/ReactRouter/IonRouter.tsx (L247-L252)
We do sometimes call `handleNavigate`:
a08a5894ba/packages/react-router/src/ReactRouter/IonRouter.tsx (L273-L279)
This `handleNavigate` method sets `incomingRouteParams` again:
a08a5894ba/packages/react-router/src/ReactRouter/IonRouter.tsx (L225-L230)
Since we do not re-pass `routeAnimation`, that field gets set to
`undefined` and the custom animation does not get used.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Custom animation is now passed to `handleNavigate`
## 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.2.2-dev.11690810887.180000d1`
Issue number: Resolves#27476
---------
<!-- 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 Angular application on Angular v16 cannot use the
[`bindToComponentInputs`](https://angular.io/api/router/ExtraOptions#bindToComponentInputs)
feature to assign route parameters, query parameters, route data and
route resolve data to component inputs.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Ionic Angular developers can use the option on `RouterModule.forRoot`
to enable the Angular feature for binding the route snapshot data to the
component inputs.
**Modules**
```ts
@NgModule({
imports: [
RouterModule.forRoot([/* your routes */], {
bindToComponentInputs: true // <-- enable this feature
})
]
})
export class AppModule { }
```
**Standalone**
```ts
import { withComponentInputBinding } from '@angular/router';
bootstrapApplication(App, {
providers: [
provideRouter(routes,
//... other features
withComponentInputBinding() // <-- enable this feature
)
],
});
```
With this feature enabled, developers can bind route parameters, query
parameters, route data and the returned value from a resolver to input
bindings on their component.
For example, with a route configuration of:
```ts
RouterModule.forChild([
{
path: ':id',
data: {
title: 'Hello world'
},
resolve: {
name: () => 'Resolved name'
},
loadComponent: () => import('./example-component/example.component').then(c => c.ExampleComponent)
}
])
```
and a component configuration of:
```ts
@Component({ })
export class ExampleComponent {
@Input() id?: string;
@Input() title?: string;
@Input() name?: string;
@Input() query?: string;
}
```
Navigating to the component with a url of: `/2?query=searchphrase`
The following would occur:
- `id` would return `2`
- `title` would return `Hello world`
- `name` would return `Resolved name`
- `query` would return `searchphrase`
## 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. -->
This PR will need to be targeted to a minor release once a design doc is
approved by the team.
Dev-build: `7.1.3-dev.11689276547.129acb40`
