Commit Graph

2335 Commits

Author SHA1 Message Date
Liam DeBeasi
1091534397 chore: sync with main 2024-02-07 11:48:46 -05:00
ionitron
a0afeeb50e chore(): update package lock files 2024-02-07 14:21:09 +00:00
ionitron
66fcb70151 v7.7.1 2024-02-07 14:20:32 +00:00
Sean Perkins
5777ce2581 fix(react): route with redirect will mount page (#28961)
Issue number: resolves #28838

---------

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

In #28316 we resolved a longstanding misconfiguration where event
listeners being added to the page were not removed. This was due to
incorrect usage of `.bind` creating a new instance of the callback
functions.

By removing the event listener for `ionViewDidLeave`, before the
component has actually unmounted in react, resulted in the registered
destroy callback to not fire:
51c729eafc/packages/react/src/contexts/IonLifeCycleContext.tsx (L208-L216)
and
51c729eafc/packages/react/src/routing/ViewLifeCycleManager.tsx (L21-L32)

This resulted in a scenario that using a `Redirect` could cause the
wrong view to be unmounted (the entering view) and leave the user on an
empty screen.

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

- `ionViewDidEnter` event listener *is not* removed while the component
is unmounting. The browser will naturally remove the event listener when
the element node is detached from the DOM.
- Users are no longer presented with a white screen after clicking a
route that uses a redirect.

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

Dev-build: `7.6.7-dev.11706567011.11e782a9`
2024-02-06 23:20:57 +00:00
Maria Hutt
2816b87ba6 refactor(input): remove accept property (#28946)
BREAKING CHANGE:
The `accept` property has been removed from `ion-input`.
2024-02-01 11:43:19 -08:00
Maria Hutt
51c729eafc refactor(angular, react, vue): add missing test app msg (#28951)
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 packages, Angular, React, and Vue, will accept any `app_dir`
parameter when passing it to the build script. This can lead to a user
to entering a directory that doesn't exist within `test/apps`. If this
happens, then the build folder will include an incomplete test app.

For example:
1. `./build ng13`
2. This creates a `build/ng13` folder, but the folder only contains the
contents from the `base` folder. This causes it to be incomplete.

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

- Provides a message that the provided app directory doesn't exist.
- Does not create the incomplete app when an invalid app directory is
given.

## 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.
  4. Update the BREAKING.md file with the breaking change.
5. 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. -->

N/A
2024-02-01 17:04:58 +00:00
Shawn Taylor
7f3273f0b2 docs(angular test app): include instructions for updating nightly build (#28948)
Issue number: None

---------

<!-- 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. -->
People adding a new Angular test app don't know they need to update the
Stencil nightly build.

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

- Documentation exists for adding a new Angular version to the Stencil
nightly build when creating a new Angular test 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

This is related to #28945

<!-- 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>
2024-02-01 15:49:30 +00:00
ionitron
7bb08f9ce4 chore(): update package lock files 2024-01-31 15:18:19 +00:00
ionitron
e672805406 v7.7.0 2024-01-31 15:17:39 +00:00
ionitron
fae7b24d2a chore(): update package lock files 2024-01-31 14:27:13 +00:00
ionitron
1de5ff9302 v7.6.7 2024-01-31 14:26:24 +00:00
Liam DeBeasi
bf34e0e247 test: migrate form control usages to modern syntax (#28897)
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. -->

Several tests were still using the legacy form syntax.

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

- Migrated tests in `core`, `angular`, and `vue` to use the modern form
syntax (`react` did not have form controls).

I opted not to migrate `item/test/highlight` and `item/test/counter`
because those tests are going to be removed in the future once the
deprecate item APIs are removed.

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

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
2024-01-30 16:14:02 +00:00
Sean Perkins
a393d2a86c feat(input): remove size property in favor of CSS styling (#28903)
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 `ion-input` component currently specifies a `size` attribute to
align with the HTML `input` implementation. However, Ionic's custom
appearance for MD and iOS is not compatible and should not be used with
the `size` attribute:
https://github.com/ionic-team/ionic-framework/issues/27945#issuecomment-1669702274.

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

- The `size` property has been removed from `ion-input`.

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

The `size` attribute has been removed from `ion-input`. As it was not
compatible before, this is likely to have a minimal impact to
developers. If your application is using the `size` attribute, replace
the usage with CSS styling to control the width of the `ion-input`.


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2024-01-29 19:56:25 -05:00
Liam DeBeasi
b1c4c72474 refactor(react, react-router): build works on windows (#28904)
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. -->

React and React Router packages do not build correctly on Windows
because certain dependencies were not marked as external.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- 3rd party packages are correctly marked as external


## 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. -->
2024-01-29 18:15:50 +00:00
Amanda Johnston
720a3cea99 test(react): re-enable picker tests (#28885)
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 `IonPicker` tests in the React app were skipped due to a Stencil bug
that has since been resolved.

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

Tests re-enabled.

## 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. -->
2024-01-26 21:16:14 +00:00
Liam DeBeasi
ddd8b92235 chore: remove old link scripts (#28886)
This script was used to aid in the test of local version of
`@ionic/angular`. However, these instructions have been replaced by the
instructions in `packages/angular/test/README.md`. This PR removes the
old script.
2024-01-25 20:15:28 +00:00
Liam DeBeasi
74de16f862 chore(): sync 2024-01-25 12:35:32 -05:00
ionitron
67bee73513 chore(): update package lock files 2024-01-24 14:15:49 +00:00
ionitron
0c4e1fcdb4 v7.6.6 2024-01-24 14:15:07 +00:00
Liam DeBeasi
5bc439961f fix(vue): tabs and parameterized routes work with latest vue (#28846)
Issue number: resolves #28774

---------

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

There are two issues causing Ionic Vue apps to not behave as intended
with certain versions of Vue:

1. In Vue 3.3 a [breaking change
shipped](https://github.com/vuejs/core/issues/9916) that changes the
default behavior of the `watch` inside of IonRouterOutlet to be a
shallow watcher instead of a deep watcher. This caused the router outlet
to not consistent re-render. While the change was later reverted by the
Vue team, they expressed that the change [may re-land in a future minor
release](https://github.com/vuejs/core/issues/9965#issuecomment-1875067499).
As a result, we will need to account for this inside of Ionic.
2. In Vue 3.2 a [custom elements improvement
shipped](https://github.com/vuejs/core/blob/main/changelogs/CHANGELOG-3.2.md#3238-2022-08-30)
that changed how custom elements are referred to in VNodes.

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

- The affected `watch` call now is now explicitly a deep watcher. This
change is backwards compatible as well as forward compatible with
upcoming Vue changes.
- Updated IonTabs to account for the new VNode behavior for custom
elements. Ionic still supports version of Vue that do not have this
improvement, so we need to account for both behaviors for now. I also
added a tech debt ticket to remove the old checks when we drop support
for older versions of Vue.
- Updated E2E test dependencies. During this update some of our tests
needed to be updated to account for newer versions of Vue/Vitest.
Overall I was able to simplify a lot of our tests as a result.

I plan to add renovatebot to these E2E test apps, but I will handle that
in a separate PR.

## 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.
  4. Update the BREAKING.md file with the breaking change.
5. 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. -->

Dev build: `7.6.6-dev.11705526292.1bc0acb5`

Note: Both of the issues cause tests to fail when using the latest
dependencies in the Vue E2E test app. However, I need to use the latest
dependencies so I can demonstrate that my changes do fix the reported
issues. As a result, I have both fixes in the same PR.
2024-01-19 21:29:56 +00:00
Liam DeBeasi
0fb88315df chore: update package lock 2024-01-17 09:41:15 -05:00
Liam DeBeasi
71e485d770 chore: clean up changelog 2024-01-17 09:31:16 -05:00
ionitron
e2708ff651 v7.6.5 2024-01-17 14:23:09 +00:00
Liam DeBeasi
fb7735397e fix(angular): add old IonBackButtonDelegate import (#28831)
Issue number: resolves #28827

---------

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

This import was renamed to `IonBackButton` as part of
9f20780d66.
However, we did not consider that some developers are importing this to
use with `ViewChild`. While we should keep alignment with other
component imports, we need to support the old import until we can make a
breaking change in Ionic 8.

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

- Adds the old IonBackButtonDelegate import

## 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. -->
Dev build: `7.6.5-dev.11705352188.1c6cdb08`
2024-01-16 16:53:25 +00:00
Liam DeBeasi
076c9fed29 merge release-7.6.4 2024-01-10 11:28:13 -05:00
Liam DeBeasi
77a0640e92 perf(angular): views are not moved on mount (#28544)
Issue number: resolves #28534

---------

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

Page views in Ionic need to be rendered as a child of
`ion-router-outlet` in order for page transitions and swipe to go back
to function correctly. However, Angular always inserts components as
siblings of the insertion point. Previously, the insertion point was
`ion-router-outlet` (the host element). This meant that page views were
mounted as siblings of `ion-router-outlet`. We then added code to move
the component inside of `ion-router-outlet`.

This caused two issues:

1. A DOM tree mismatch during hydration (the linked issue) because
hydration is expecting the page view to be a sibling of the router
outlet, but Ionic moves the view around in the DOM.
2. A performance issue where all components effectively have
`connectedCallback` fired twice. This callback runs when the component
is added to the DOM. On initial mount, `connectedCallback` for each
component runs. Once the page view is moved, the elements are removed
from the DOM (thus causing `disconnectedCallback` to run), and then
added to the correct location in the DOM which causes
`connectedCallback` to run again.

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

- IonRouterOutlet now renders a `ng-container`. This appears as a
comment in the DOM inside of `ion-router-outlet`. This comment is used
as the injection point for adding new views. The new views are added as
siblings of the comment, but since the comment is inside of
`ion-router-outlet` then the views themselves are inside of
`ion-router-outlet` too.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

This doesn't cause any known breaking changes. However, the placement of
views is pretty critical to the functionality of Ionic, so I wanted to
ship this in a major release so we have a solid public testing period
before the code is considered stable.

We already have test coverage that verifies page views are mounted in
the correct order, so I did not add more tests for this.

<!-- 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.6.2-dev.11704390532.1202188d

Testing: 

1. Clone and install dependencies for
https://github.com/bashoogzaad/ionic-ssr-test
2. Run `npm run dev:ssr`.
3. Open app in a browser. Observe that error noted in
https://github.com/ionic-team/ionic-framework/issues/28534#issue-1995002926
appears.
4. Install dev build.
5. Run `npm run dev:ssr`. Observe that the error noted in the original
issue does not appear.


Note: The Angular SSR package does not support Web Components. As a
result, there are other errors you will encounter. However, I still
think it's worth fixing this issue a) in the event that the Angular SSR
package adds support for Web Components and b) to get the performance
gain of not having to re-mount components.
2024-01-09 09:17:01 -05:00
Liam DeBeasi
b2e40cdcb8 chore: update package lock files 2024-01-03 09:57:18 -05:00
ionitron
ebb9ae9c11 v7.6.3 2024-01-03 14:52:37 +00:00
ionitron
bfd497f825 chore(): update package lock files 2023-12-19 14:45:31 +00:00
ionitron
8d841b4225 v7.6.2 2023-12-19 14:45:17 +00:00
Liam DeBeasi
7ce1031c17 fix(refresher): mode property can be used in typescript (#28717)
Issue number: resolves #28716

---------

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

All components that have per-mode stylesheets can have their mode
adjusted by setting `mode` on the component. We use the `setMode`
function to determine which mode to use on the component:
516b84475e/core/src/global/ionic-global.ts (L75)

While this works on refresher, it is missing the `virtualProp` jsdoc
comment which causes it to not have the appropriate type information. As
a result, when developers try to use a JS binding for `mode`, they will
get compilation errors.

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

- Adds virtualProp for mode to refresher

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


I am considering this a bug fix instead of a feature. In non-TypeScript
environments you can set `mode` on `ion-refresher` and it does change
the mode. What's missing here is the type information associated with
it.

Dev build: `7.6.2-dev.11702914017.1ae72da5`
2023-12-18 18:09:25 +00:00
Liam DeBeasi
7cec5337a4 chore: sync 2023-12-18 10:46:20 -05:00
Liam DeBeasi
e574ffe85a chore(picker): mark ionInputModeChange as internal (#28701) 2023-12-13 17:51:23 -05:00
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
Liam DeBeasi
f6531fa2be chore: bump package-lock 2023-12-13 09:31:00 -05:00
ionitron
150ea1a8ad v7.6.1 2023-12-13 14:27:51 +00:00
Sean Perkins
92f1b8627a fix(react): avoid type collision with @types/react@18.2.43 and greater (#28687)
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. -->

Ionic React projects using `@types/react@18.2.43` or greater will run
into a type-check error on build with `IonRouterOutlet` and potentially
other components:

```
Property 'placeholder' is missing in type '{ children: Element[]; }' but required in type 'Pick<IonRouterOutlet & { basePath?: string | undefined; ref?: Ref<any> | undefined; ionPage?: boolean | undefined; } & IonicReactProps & Omit<...>, "color" | ... 254 more ... | "ionPage">'.
```

Definitely typed decided to make a breaking type change in a patch
release:
b954269038


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

- Patches the type to allow for compatibility between React v16, 17 and
18.

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

### Testing

1. Create a new Ionic react project with the "list" template.
2. Run `npm run build`
3. Observe: Exception posted above
4. Install the dev-build
5. Run `npm run build`
6. Observe: No exception, build passes
7. You can additionally serve the app to verify no runtime
exceptions/broken behavior.

Dev-build: `7.6.1-dev.11702322681.17e39348`
2023-12-12 22:53:55 +00:00
Alexander Harding
a17b963182 fix(react): replacing route uses new route direction and animation (#28671)
Issue number: resolves #24260

---------

<!-- 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?

When replacing a route (`router.push(newRoute, 'none', 'replace')`) the
`RouterDirection` from the route being replaced is being used (if it
exists) instead of the new one the user specifies.

## What is the new behavior?

User-specified `RouteDirection` is used, if it exists. If it doesn't it
falls back to the `RouteDirection` of the route being replaced.

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

Please see the following comment for why I think the current behavior is
incorrect, and why this change is needed:
https://github.com/ionic-team/ionic-framework/issues/24260#issuecomment-1078960780

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2023-12-11 21:09:41 +00:00
Liam DeBeasi
fc88613fef fix(react): use custom animation when going back after a replace (#28674)
Issue number: resolves #28673

---------

<!-- 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 reviewing https://github.com/ionic-team/ionic-framework/pull/28671
I noticed a bug where the custom animation was not used when going back
after a replace.

`handleNavigate` will override whatever is in `incomingRouteParams`.
Since we were passing `routeAnimation` (which is `undefined`), it was
overriding the animation we set in `handleNavigateBack`.

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

- `routeAnimation` is no longer overridden

## 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.6.1-dev.11702048520.13c82dad`
2023-12-11 17:31:27 +00:00
ionitron
f3799f332b chore(): update package lock files 2023-12-06 15:33:57 +00:00
ionitron
90ce7f00fa v7.6.0 2023-12-06 15:33:45 +00:00
Liam DeBeasi
ede9c6e3c8 Merge remote-tracking branch 'origin/main' into sync-76-final 2023-12-06 10:16:26 -05:00
ionitron
5573fde6a2 chore(): update package lock files 2023-12-06 15:04:35 +00:00
ionitron
507d5ee1da v7.5.8 2023-12-06 15:04:23 +00:00
Maria Hutt
7871b56ecc fix(angular): add missing menu controller methods (#28618)
Issue number: resolves #20053 

---------

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

There are a few methods that that are missing for the menu in the
Angular packages. This leads to users to not being able to use methods
like `isAnimating()`.

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

- The missing methods have been added by implementing `MenuControllerI`.

## 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.11701461830.1be851fd
2023-12-05 18:43:12 +00:00
Liam DeBeasi
8dc3d1a16d Merge remote-tracking branch 'origin/main' into sync-80-125 2023-12-05 09:12:24 -05:00
Liam DeBeasi
e51deed21c Merge remote-tracking branch 'origin/main' into sync-76-125 2023-12-05 09:11:57 -05:00
Sean Perkins
1705d064cc fix(react): router creates new view instances of parameterized routes (#28616)
Issue number: Resolves #26524 

---------

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

## Definitions

**Parameterized routes**: A route that includes one or more variables in
the path segments, such as `/form/:index`.

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When an application routes from a parameterized route, to an
intermediary route, to the same parameterized route, but with a
different value/url, Ionic's routing logic is incorrectly reusing the
view item from the first instance of the parameterized route instead of
calculating that the matched path is different. This results in the
wrong view item being recycled and rendered.

Another way of representing it:
- User navigates to `/form/0` which resolves `FormPage`
- User enters `0` into the form and submits the form
- User navigates to `/link`, which resolves `LinkPage`
- User navigates to `/form/1`, which resolves `FormPage`
- However, instead of creating a new instance of `FormPage` it is
reusing the instance of `FormPage` from `/form/0` which includes the
form having `0` in the input.
  - The user now sees a "new view", but with cached data in the form.

This is not expected or desired. 


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

- Ionic's routing logic will validate if the entering view item matches
the match route data before reusing it. This results in new instances of
the view item being constructed when using parameterized routes.


https://github.com/ionic-team/ionic-framework/assets/13732623/e7e3d03f-2848-4429-9f60-9074d0761e45


## 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.11701383555.17254408`
2023-12-01 22:11:41 +00:00
Éric Le Maître
60303aad23 fix(vue): nav component accepts kebab-case component properties (#28615)
Issue number: resolves #28611

---------

<!-- 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. -->
It's not possible to pass props that are not camelCase to the `IonNav`
component.

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

- It is now possible to set a props with kebab-case instead of camelCase
(for example, `root-params` instead of `rootParams`)

## 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 is my first PR for ionic so I hope I didn't miss important steps
into the process. I also checked on my project that the fix is working
well. Thank you! 🙂

---------

Co-authored-by: Sean Perkins <sean@ionic.io>
2023-12-01 15:30:13 +00:00
Sean Perkins
2fb6cd92dc Merge remote-tracking branch 'origin/main' into sp/sync-feature-8 2023-11-29 16:49:21 -05:00