Issue number: internal
---------
## What is the current behavior?
There are tests apps for Angular 16, 17 and 18
## What is the new behavior?
Adds a test app for Angular 19
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Issue number: resolves 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. -->
Segments can only be changed by clicking a segment button, or dragging
the indicator
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The segment/segment buttons can now be linked to segment content within
a segment view component. This content is scrollable/swipeable. Changing
the content will update the segment/indicator and vice-versa.
## 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/docs/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. -->
**Limitations:**
- Segment buttons **cannot** be disabled when connected ton
`ion-segment-content` instances
- The `ion-segment` **cannot** be without a value when linked with an
`ion-segment-view`. If no value is provided, the value will default to
the value of the first `ion-segment-content`
[Preview](https://ionic-framework-jlt8by2io-ionic1.vercel.app/src/components/segment-view/test/basic)
[Preview (disabled
state)](https://ionic-framework-jlt8by2io-ionic1.vercel.app/src/components/segment-view/test/disabled)
---------
Co-authored-by: Brandy Carney <brandyscarney@gmail.com>
Issue number: resolves 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. -->
Select only offers `alert`, `action-sheet`, and `popover` as interfaces
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Adds `modal` as an interface option for `ion-select`
## 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/docs/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: Brandy Carney <brandyscarney@users.noreply.github.com>
- Adds the `MenuCloseEventDetail` interface which includes an optional `role` property
- The `ionWillClose` and `ionDidClose` emit the `role` property for the following scenarios:
- A role of `'gesture'` when dragging the menu closed
- A role of `'backdrop'` when clicking on the backdrop to close the menu
- A role of `'backdrop'` when the the menu is closed using the escape key
- A role of `undefined` when the menu is closed from a button inside of
the menu
resolves#28201
This PR fixes the navigation issue related to `router.go` that was
identified in issue #28201. After working on this issue I realised that
@xxllxhdj has already created a PR for this in #29847. While their fix
is great, I have added tests to replicate the issue, reused existing
code and `undefined` will be returned in unexpected situations - which
matches the existing functionality.
## What is the current behavior?
If a user navigates from `/home` -> `/pageA` -> `/pageB` -> `/pageC` ->
back to `/pageB` -> then `router.go(-2)` is called the URL will be
updated to `/home` correctly, but the app will try to render `/pageA`.
This happens for any delta < -1.
## What is the new behavior?
The app will correctly render `/pageA`, which matches the URL.
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
---------
Co-authored-by: xxllxhdj <12881488+xxllxhdj@users.noreply.github.com>
Issue number: resolves#29826
---------
## What is the current behavior?
When using `compareWith` on `ion-radio-group` in Ionic Angular
Standalone the following error is thrown:
```
NG8002: Can't bind to 'compareWith' since it isn't a known property of 'ion-radio-group'.
```
## What is the new behavior?
- `compareWith` on `ion-radio-group` in Angular Standalone is available
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
Issue number: resolves#29885, resolves#29924
---------
<!-- 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 Vue:
Tab bar could be a standalone element within `IonTabs` and would
navigate without issues with a router outlet before v8.3:
```tsx
<IonTabs>
<IonRouterOutlet></IonRouterOutlet>
<IonTabBar></IonTabBar>
</IonTabs>
```
It would work as if it was written as:
```tsx
<IonTabs>
<IonRouterOutlet></IonRouterOutlet>
<IonTabBar slot="bottom">
<!-- Buttons -->
</IonTabBar>
</IonTabs>
```
After v8.3, any `ion-tab-bar` that was not a direct child of `ion-tabs`
would lose it's expected behavior when used with a router outlet. If a
user clicked on a tab button, then the content would not be redirected
to that expected view.
React only:
Users can no longer add a `ref` to the `IonRouterOutlet`, it always
returns undefined.
```
<IonTabs>
<IonRouterOutlet ref={ref}>
<IonTabBar slot="bottom">
<!-- Buttons -->
</IonTabBar>
</IonTabs>
```
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The fixes were already reviewed through PR
https://github.com/ionic-team/ionic-framework/pull/29925 and PR
https://github.com/ionic-team/ionic-framework/pull/29927. I split them
to make it easier to review.
React and Vue:
The React tabs has been updated to pass data to the tab bar through
context instead of passing it through a ref. By using a context, the
data will be available for the tab bar to use regardless of its level.
React only:
Reverted the logic for `routerOutletRef` and added a comment of the
importance of it.
## 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/docs/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
Issue number: resolves#29830
---------
## What is the current behavior?
The `setFocus` method on `ion-app` is marked internal.
## What is the new behavior?
Document the `setFocus` method as a way for developers to
programmatically focus elements.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
The method isn’t new, it was just marked as internal, which prevented it
from being documented. I can mark this as a `feat` though if anyone
thinks it should be.
Related documentation PR:
https://github.com/ionic-team/ionic-docs/pull/3842
Issue number: resolves ionic-team/stencil-ds-output-targets#476,
resolves ionic-team/stencil-ds-output-targets#475, resolves#29848
---------
<!-- 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 v0.6.0 of the [React output
target](https://www.npmjs.com/package/@stencil/react-output-target), the
implementation was changed to leverage Lit's utility for creating React
components from web components. This introduced some unforseen issues
and breaking changes.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Reverts many of the changes from
https://github.com/ionic-team/ionic-framework/pull/29782 to downgrade
the React output target package to the last stable version (v0.5.3)
- Downgrades the version of Stencil to v4.20.0 (due to
https://github.com/ionic-team/stencil/issues/5983 causing problems with
the downgraded output target)
- Pins these versions and prevents Renovate from attempting to upgrade
until the associated issues are resolved
## 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/docs/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 for this version: `8.3.1-dev.11726167750.15400355`
I tested the dev build against the use cases outlined in
https://github.com/ionic-team/stencil-ds-output-targets/issues/475 and
https://github.com/ionic-team/stencil-ds-output-targets/issues/476
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. -->
As mentioned in this
[PR](https://github.com/ionic-team/ionic-docs/pull/3797), React
`IonTabs` requires `IonTabBar` do be a child, else it doesn't render and
throws an error.
Angular, JS, and Vue doesn't have this requirement.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
I didn't see any reason why React does not mimic the other frameworks.
In order to keep consistency, I've updated the React tabs. This would
allow `ion-tabs` and `ion-tab-bar` can be used as standalone elements as
mentioned in the [docs](https://ionicframework.com/docs/api/tabs).
- React follows the same structure as the other frameworks: `IonTabs`
doesn't require `IonTabBar` to be a child to render.
## 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/docs/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: 8.3.1-dev.11726159792.1a6f49de
How to test:
1. Create a Ionic React app through the Ionic CLI with tabs as the
starter
2. Run the app
3. Comment out the `IonTabBar`
4. Notice that the `IonTabs` does not render
5. Notice that there's an error in the console: "IonTabs needs a
IonTabBar"
6. Install the dev build: `npm install
@ionic/react@8.3.1-dev.11726159792.1a6f49de`
7. Make sure the `IonTabBar` is still commented out
8. Verify that `IonTabs` renders
9. Verify that there isn't an error in the console
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: Refreshes the app upon a tab button press and returns to the
first tab content.
Vue: Does not render the tabs when the app doesn't use a router at all
because of `ionRouter` not being defined.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- React: Users can press on the tab button without having the app
refresh and displays the associated tab content.
- Vue: Renders the tabs when router is not present.
## 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/docs/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: 8.3.1-dev.11726094383.1cdbab6f
How to test:
I recommend using the playgrounds in the Ionic Framework docs repo since
those playgrounds are setup to not have any routers at a high level.
1. Navigate to the [basic usage
section](https://ionic-docs-git-rou-11138-ionic1.vercel.app/docs/api/tabs#basic-usage)
2. Select React
3. Open the StackBlitz example
4. Click on any tab button
5. Notice that the app refreshes and returns to the first tab content
6. Install the dev build: `npm install
@ionic/react@8.3.1-dev.11726094383.1cdbab6f`
7. Verify that the app doesn't refresh and reset the content after
clicking on any tab button
8. Navigate to the [basic usage
section](https://ionic-docs-git-rou-11138-ionic1.vercel.app/docs/api/tabs#basic-usage)
9. Select Vue
10. Open the StackBlitz example
11. Notice that tabs doesn't render
12. Open the console and notice that there's an error `ionRouter is
undefined`
13. Install the dev build: `npm install
@ionic/vue@8.3.1-dev.11726094383.1cdbab6f`
14. Verify that it renders
15. Verify that the console no longer shows the error
Issue number: resolves#29755
---------
<!-- 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. -->
Types do not generate when a React app is opened in IntelliJ IDE.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated `stencil/react-output-target` to the latest
- Updated the stencil config file
- Updated `jest`, `ts-jest`, and `typescript` because of the changes in
`packages/react/tsconfig.json`
- Installed `jest-environment-jsdom` because Jest 26 no longer ships it
by default since the test environment is now node by default. The test
environment needs to be changed to `jsdom` when [building a web
app](https://jestjs.io/docs/configuration#testenvironment-string).
## 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/docs/CONTRIBUTING.md#footer
for more information.
-->
No visual changes are introduced and there will be no changes needed by
developers. Their apps will continue to work as is.
## 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: 8.2.8-dev.11724100788.103018f2
Issue number: resolves#20632
---------
## What is the current behavior?
When using the `routerLink` directive in Angular, it automatically adds
`tabindex="0"` to the element. This creates issues with Ionic components
that render native button or anchor elements, as they have their own
focus management. As a result, when navigating between list items with
`routerLink` using the `Tab` key, you need to press the `Tab` key twice
to move to the next item. This problem is illustrated in the following
demo:
[](https://stackblitz.com/edit/angular-blfa7h?file=src%2Fapp%2Fexample.component.html)
Related Angular issue: https://github.com/angular/angular/issues/28345
## What is the new behavior?
Updated our `RouterLinkDelegateDirective` to check if the element using
`routerLink` is one of the following Ionic components:
`ion-back-button`, `ion-breadcrumb`, `ion-button`, `ion-card`,
`ion-fab-button`, `ion-item`, `ion-item-option`, `ion-menu-button`,
`ion-segment-button`, or `ion-tab-button`. If so, it removes the
`tabindex` attribute from the element. This allows these Ionic
components to let the native button or anchor element handle the focus.
This solution is demonstrated in the following demo:
[](https://stackblitz.com/edit/angular-blfa7h-svmguh?file=src%2Fapp%2Fexample.component.html)
> [!NOTE]
> I did not include the `ion-router-link` component in the list to
remove `tabindex` because [the router link
documentation](https://ionicframework.com/docs/api/router-link) does not
recommend using it with Angular:
>> Note: this component should only be used with vanilla and Stencil
JavaScript projects. For Angular projects, use an `<a>` and `routerLink`
with the Angular router.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Dev build: `8.2.7-dev.11722448707.1e8c66e6`
Issue number: N/A
---------
## What is the current behavior?
Ionic Framework Vue components using `router-link` do not apply an
`href` property which causes components to render `div` or `button`
elements when they should render an `a`. This is inconsistent with the
way Angular and Vue handle router link.
## What is the new behavior?
Updates `@stencil/vue-output-target` to latest which adds the code from
the following PR:
https://github.com/ionic-team/stencil-ds-output-targets/pull/446
The update in vue output target checks if `router-link` and `navManager`
are defined so this fix only applies to Ionic Framework components. If
both are defined then it adds the `href` property to the element with
the value of `router-link`.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Dev build: `8.2.7-dev.11722629362.1ac136c4`
Issue number: resolves#29174
---------
## What is the current behavior?
React throws tab errors with `IonTabButton` when binding to
`onPointerDown`, `onTouchEnd` and `onTouchMove`
## What is the new behavior?
- Adds missing type definitions for `onPointerDown`, `onTouchEnd` and
`onTouchMove` to `IonTaButton`
- React does not throw type errors when binding callback functions to
these events
---------
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: steven <sribeiro@gio.lu>
Issue number: resolves#29728
---------
<!-- 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 `focusTrap` property was missed when adding focus trapping
configuration to the modal and popover. This results in a type error
when developers attempt to assign to the property.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds `focusTrap` property to `ion-modal` and `ion-popover` for the
angular component wrappers
- Resolves type warnings when using the property in angular
## 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/docs/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: `8.2.6-dev.11721672792.195afb09`
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. -->
In v3.2.46 [vue was updated](https://github.com/vuejs/core/pull/3969) to
add support for a generic type argument to the `Plugin` type. In
https://github.com/ionic-team/ionic-framework/pull/29637 Ionic's Vue
plugin was updated to use the generic, but the`@ionic/vue` project is
currently installing v3.2.37.
This results in a local type checking error and build error:
```
(!) Plugin typescript: @rollup/plugin-typescript TS2315: Type 'Plugin_2' is not generic.
src/ionic-vue.ts: (24:24)
24 export const IonicVue: Plugin<[IonicConfig?]> = {
```
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Bumps and pins the dev dependency of `vue` to `3.2.46`. There are
other breaking changes that Vue has shipped in minor/patch cycles that
prevents from updating to the latest.
- Resolves the type checking error locally during build of
the`@ionic/vue` package
## 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/docs/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. -->
Validation steps:
1. Checkout the branch
2. Build `core/`
3. In `packages/vue`, install latest pinned dependencies with `npm ci`
4. Sync the changes to the `vue` package with `npm run sync`
5. Open `/packages/vue/src/ionic-vue.ts`
6. Observe: No type errors on L24
7. Run `npm run build`
8. Observe: No build errors
Updated `eslint` to latest 8.x and `@ionic/eslint-config` to latest
(0.4.0), which is required for eslint 8.x to work.
Removed `eslint-plugin-import` and `@typescript-eslint/eslint-plugin`
since they are part of `@ionic/eslint-config`
