- Change the radio's `display` property to `block` when the `justify` or `alignment` property is set.
- Set the default `justify-content` style to `space-between` so that a radio with `width: 100%` set without `justify` or `alignment` set will still have the same default
- Modifies the `label-placement` e2e test to remove the explicit width as setting the property will make them full-width
- Adds two examples to the `label-placement` e2e test of labels that do not have `justify` set but use `width: 100%` to ensure they are working as expected without it
- Adds one example to the `label-placement` e2e test of a long label that uses `justify` to ensure it still wraps properly
- Change the toggle's `display` property to `block` when the `justify` or `alignment` property is set.
- Set the default `justify-content` style to `space-between` so that a toggle with `width: 100%` set without `justify` or `alignment` set will still have the same default
- Set the default `align-items` style to `center` so that a toggle with `width: 100%` and `label-placement="stacked"` set without `justify` or `alignment` set will still have the same default
- Modifies the `label` e2e test to remove the explicit width as setting the property will make them full-width
- Adds two examples to the `label` e2e test of labels that do not have `justify` set but use `width: 100%` to ensure they are working as expected without it
- Adds one example to the `label` e2e test of a long label that uses `justify` to ensure it still wraps properly
- Change the checkbox's `display` property to `block` when the `justify` or `alignment` property is set.
- Set the default `justify-content` style to `space-between` so that a checkbox with `width: 100%` set without `justify` or `alignment` set will still have the same default
- Modifies the `label` e2e test to remove the explicit width as setting the property will make them full-width
- Adds two examples to the `label` e2e test of labels that do not have `justify` set but use `width: 100%` to ensure they are working as expected without it
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?
Setting a custom `role` on the `ion-content` element does not work.
## What is the new behavior?
- Inherit attributes for the content element which allows a custom
`role` property to be set
- Adds e2e tests for content, header, and footer verifying that the
proper roles are assigned
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
To test this PR:
1. Switch to the branch and navigate to the `core/` directory
1. Make sure to run `npx playwright install` if it has not been updated
recenly
1. Run `npm run test.e2e src/components/content/test/a11y/`
1. Verify that the tests pass
1. Remove my fix in `core/src/components/content/content.tsx` and run
the test again
1. Verify that the `should allow for custom role` tests fail
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: N/A
---------
## What is the current behavior?
Item includes `ion-anchor` in the list of clickable components it
queries. This component was renamed to `ion-router-link` in
[v5](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v5.md#anchor).
## What is the new behavior?
Updates the reference to `ion-anchor` to `ion-router-link` in
`ion-item`.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
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: 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 Framework has a set of custom lint assertions to avoid creating
flaky Playwright tests by forgetting to await a promise. However the
`click` method was not included in the original list of methods to
check.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Developers will receive a lint error when forgetting to await click
methods from Playwright
- Resolves existing tests where this lint issue was 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. -->
Issue number: resolves#29712
---------
<!-- 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?
In every type of overlay, the auto incremented overlay id is overwriting
any id set in htmlAttributes.
## What is the new behavior?
The id in htmlAttributes now takes precedence.
## 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: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
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
Issue number: resolves#29704
---------
<!-- 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?
Setting the id of an alert via htmlAttributes doesn't work due to it
being overwritten by the overlay id.
## What is the new behavior?
Setting the id of an alert via htmlAttributes works.
## 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
First time PR, long time fan. Please let me know if I missed any of the
contributing guidelines, happy to change anything!
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`
Issue number: https://github.com/ionic-team/ionic-framework/issues/29659
---------
<!-- 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. -->
while using `.use(IonicVue, {})`, the config object has no autocomplete.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Add type autocomplete on plugin option in VueJS 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. -->
Co-authored-by: Julien Vaumoron <julien.vaumoron@kanoma.fr>
Issue number: internal
---------
This does a couple things:
**1 - Adds a `sync` command to get the latest `core` build in
`angular-server`**
The release process for `angular-server` failed
[here](https://github.com/ionic-team/ionic-framework/actions/runs/9686982182/job/26730689874).
This failure was only made apparent because the Lerna command
[here](52ff0505e8/.github/workflows/actions/publish-npm/action.yml (L35))
runs prior to building each package.
This should have been caught by CI on the [update to @stencil/core to
v4.19.0](https://github.com/ionic-team/ionic-framework/pull/29666), but
the `angular-server` package is the only package that doesn't sync
`core` before it builds. This PR adds a `sync` command so that
`angular-server` will use the latest core build during the normal build
action.
**2 - Resolving types errors in `angular-server`**
After properly syncing `core` in `angular-server` using the command
added, running build fails with the following:
<img width="400px" alt="Screenshot 2024-06-27 at 1 16 15 PM"
src="https://github.com/ionic-team/ionic-framework/assets/6577830/68d74750-821b-4776-b563-124d8fa06a79">
This was a regression in Stencil. `@stencil/core` has been updated to
resolve these errors so the build passes.
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 test page has the wrong title text.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated the text to reflect the purpose of the page.
## 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: 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. -->
Vue input values cannot accept a string object without causing it's
behavior to fail. This is happening because a change that happened
through Vue.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Vue released a fix, verified that fixes the issue, upgraded the
version
## 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. -->
Issue number: resolves#29640
---------
## What is the current behavior?
(Angular) If a list inside of a popover contains a disabled item and is
included in the following way:
```html
<ion-list>
<ion-item [button]="true">Option 1</ion-item>
<ion-item [button]="true" [disabled]="true">Option 2</ion-item>
<ion-item [button]="true">Option 3</ion-item>
</ion-list>
```
when you try to navigate using the arrow down keys, it will stop at the
disabled item instead of continuing over it.
Note that changing the item to the following will work:
```html
<ion-item [button]="true" disabled="true">Option 2</ion-item>
```
## What is the new behavior?
Reflect the `disabled` property in the item so that when items are
queried in the popover, the arrow down key skips over the disabled item.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
This can be tested in the Angular test app by following the
documentation here:
https://github.com/ionic-team/ionic-framework/blob/main/docs/angular/testing.md
Removing my fix in `core`, then running `npm run build` and re-syncing
the test app should reproduce the problem.
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 tests are failing because of a recent patch from Vue. They start to
fail on Vue v3.4.28.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Pinned Vue v3.4.27 until we can determine a fix.
## 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
