mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
331c08aad542de158e53ed351705d4c396bb4e90
13259 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Amanda Johnston
|
331c08aad5 |
fix(fab): apply safe area in positioning to proper side regardless of direction (#28377)
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. --> When calculating the fab's horizontal position, the safe area is taken into account. However, which safe area side is applied changes depending on whether the document's direction is LTR or RTL. This is incorrect as the left safe area padding will always be on the left side regardless of direction, and vice versa. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> The left safe area is always applied to the fab's `left` position, and vice versa. ## 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. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Liam DeBeasi
|
c801e2ada9 |
chore: remove unused sass variables (#28363)
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. --> This project has several unused Sass variables still in the code base. The team would like to remove these. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removed unused Sass variables ## 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. --> The original scope of this ticket was for checkbox only, but many other components had unused sass variables, so I decided to tackle everything all at once. Since these variables are not used anywhere: 1. The build should pass 2. There should be no screenshot diffs |
||
|
Liam DeBeasi
|
5a30082546 |
fix(menu): menu no longer disappears with multiple split panes (#28370)
Issue number: resolves #18683, resolves #15538, resolves #22341 --------- <!-- 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. --> Menus in a split pane are hidden when a second split pane is mounted/made visible. This is because the `onSplitPaneChanged` callback does not take into account whether the it is a child of the split pane that emitted `ionSplitPaneVisible`. When split pane 2 is shown, that causes the menu is split pane 1 to hide. When split pane 1 is shown, the menu inside of it _is_ shown. However, since split pane 2 is then hidden that component also emits `ionSplitPaneVisible`, causing the menu inside of split pane 1 to hide. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Menus are only hidden when its parent split pane changes visibility ## 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.1-dev.11697568647.1ac87d08` --------- Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> |
||
|
Liam DeBeasi
|
068d003860 |
chore(angular): proxies file is ignored by prettier (#28379)
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. --> Prettier is configured to ignore the `proxies.ts` file in the `src` directory only. This means it is adjusting whitespace/commas/etc on the `proxies.ts` file in the `standalone` directory which we do not want because we will always get diffs whenever `npm run build` is run in `core`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated prettier config to ignore all `proxies.ts` files in the `angular` package - Re-generated the proxies file ## 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. --> |
||
|
Maria Hutt
|
6b7d288536 |
fix(rtl): allow :host to use rtl() (#28353)
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. -->
While working on a safe area padding mixin, I realized that `rtl()`
wasn't being applied for `:host` when using Firefox or Safari. This is
happening because the syntax for `:dir()` is wrong. The placement needs
to be updated for Firefox and Safari to register it.
```scss
:host {
@include rtl() { // <- won't work
// styles
}
}
// generates
:host-context([dir=rtl]) {
// styles
}
:host:dir(rtl) { // <- wrong syntax
// styles
}
```
```scss
:host(.class) {
@include rtl() { // <- won't work
// styles
}
}
// generates
:host-context([dir=rtl]):host(.class) {
// styles
}
:host-context([dir=rtl]).class {
// styles
}
:host(.class):dir(rtl) { // <- wrong syntax
// styles
}
```
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
I updated `rtl()` to use `:dir()` as the `addHostSelector` in the
`add-root-selector` function. This generates all the correct selectors
for Firefox and Safari. However, `:dir()` does not have the structure of
`:host-context()` so I had to add a new parameter to `add-root-selector`
to determine whether to use `:host-context()` or not. I set the default
to `true` since the function originally used `:host-context()`.
An extra win is that the updated function will be ready for when
`:host-context()` can be removed from the codebase.
```diff
:host {
@include rtl() { // <- works
// styles
}
}
// generates
:host-context([dir=rtl]) {
// styles
}
- :host:dir(rtl) {
+ :host(:dir(rtl)) {
// styles
}
```
```diff
:host(.class) {
@include rtl() { // <- works
// styles
}
}
// generates
:host-context([dir=rtl]):host(.class) {
padding-right: 40px;
}
:host-context([dir=rtl]).class {
// styles
}
- :host(.class):dir(rtl) {
+ :host(.class:dir(rtl)) {
// styles
}
```
## 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
---------
Co-authored-by: ionitron <hi@ionicframework.com>
|
||
|
Liam DeBeasi
|
82d6309ef1 |
fix(angular): remove form control side effects (#28359)
Issue number: resolves #28358
---------
<!-- 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. -->
|
||
|
Brandy Carney
|
416bb736a1 |
refactor(item-sliding): remove unused CSS from item options (#28367)
Issue number: Internal --------- ## What is the current behavior? Item sliding has some unused CSS and no tests for safe area padding based on the direction. This CSS is not used: |
||
|
Liam DeBeasi
|
0188289e96 |
merge release-7.5.1
Release 7.5.1 |
||
|
Liam DeBeasi
|
e21085f15d | chore: clean up changelog | ||
|
ionitron
|
da0da54314 | chore(): update package lock files | ||
|
ionitron
|
38f2a027f0 | v7.5.1 v7.5.1 | ||
|
Liam DeBeasi
|
3a3ebcf659 |
chore(ci): add workflow for testing ionicons dev build (#28345)
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. --> Testing Ionicons in Ionic is currently difficult. Developers need to a) create a dev build of Ionicons, b) create a branch in Ionic, c) install the dev build in Ionic core, d) push the branch, and e) create a draft PR to watch the CI process run. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Introduces a workflow dispatch option for our CI process. This allows developers to run the CI process for any branch without creating PR. - I also added an optional input so devs can specify the ionicons version if they want to pass a special version. ## 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. --> |
||
|
dependabot[bot]
|
feda7a0e96 |
chore(deps): Bump @stencil/core from 4.4.1 to 4.5.0 in /core (#28364)
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.4.1 to 4.5.0. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/stencil/blob/main/CHANGELOG.md"><code>@stencil/core</code>'s changelog</a>.</em></p> <blockquote> <h1>📢 <a href="https://github.com/ionic-team/stencil/compare/v4.4.1...v4.5.0">4.5.0</a> (2023-10-16)</h1> <h3>Features</h3> <ul> <li><strong>compiler, runtime:</strong> add support for form-associated elements (<a href="https://redirect.github.com/ionic-team/stencil/issues/4784">#4784</a>) (<a href=" |
||
|
dependabot[bot]
|
ed7a5e5f4a |
chore(deps-dev): Bump @axe-core/playwright from 4.8.0 to 4.8.1 in /core (#28354)
Bumps [@axe-core/playwright](https://github.com/dequelabs/axe-core-npm) from 4.8.0 to 4.8.1. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/dequelabs/axe-core-npm/blob/develop/CHANGELOG.md"><code>@axe-core/playwright</code>'s changelog</a>.</em></p> <blockquote> <h1>Change Log</h1> <p>All notable changes to this project will be documented in this file. See <a href="https://conventionalcommits.org">Conventional Commits</a> for commit guidelines.</p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/dequelabs/axe-core-npm/commits">compare view</a></li> </ul> </details> <br /> [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> |
||
|
dependabot[bot]
|
3d96ccb7b2 |
chore(deps-dev): Bump @playwright/test from 1.38.1 to 1.39.0 in /core (#28339)
Bumps [@playwright/test](https://github.com/microsoft/playwright) from 1.38.1 to 1.39.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/microsoft/playwright/releases"><code>@playwright/test</code>'s releases</a>.</em></p> <blockquote> <h2>v1.39.0</h2> <h2>Add custom matchers to your expect</h2> <p>You can extend Playwright assertions by providing custom matchers. These matchers will be available on the expect object.</p> <pre lang="js"><code>import { expect as baseExpect } from '@playwright/test'; export const expect = baseExpect.extend({ async toHaveAmount(locator: Locator, expected: number, options?: { timeout?: number }) { // ... see documentation for how to write matchers. }, }); <p>test('pass', async ({ page }) => { await expect(page.getByTestId('cart')).toHaveAmount(5); }); </code></pre></p> <p>See the documentation <a href="https://playwright.dev/docs/test-configuration#add-custom-matchers-using-expectextend">for a full example</a>.</p> <h2>Merge test fixtures</h2> <p>You can now merge test fixtures from multiple files or modules:</p> <pre lang="js"><code>import { mergeTests } from '@playwright/test'; import { test as dbTest } from 'database-test-utils'; import { test as a11yTest } from 'a11y-test-utils'; <p>export const test = mergeTests(dbTest, a11yTest); </code></pre></p> <pre lang="js"><code>import { test } from './fixtures'; test('passes', async ({ database, page, a11y }) => { // use database and a11y fixtures. }); </code></pre> <h2>Merge custom expect matchers</h2> <p>You can now merge custom expect matchers from multiple files or modules:</p> <pre lang="js"><code>import { mergeTests, mergeExpects } from '@playwright/test'; import { test as dbTest, expect as dbExpect } from 'database-test-utils'; import { test as a11yTest, expect as a11yExpect } from 'a11y-test-utils'; <p>export const test = mergeTests(dbTest, a11yTest); </tr></table> </code></pre></p> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
||
|
Liam DeBeasi
|
fe47594dc0 |
feat(title): large title transition supports dynamic font scaling (#28290)
Issue number: resolves #28351 --------- <!-- 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 collapsible large title transition does not support Dynamic Font Scaling as the position values are all hardcoded. Additionally, I noticed that the title and the text do not align very well even at the default font scale. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> I made a few changes to support Dynamic Font Scaling, fix the default scale alignment, and generally make this code easier to maintain (or at least I hope it will): 1. Removed most hardcoded values in favor of bounding box calculations. The hardcoded values that remain have comments explaining what they are. 2. Modified the back button animation so the container handles the translation and have the back button text animation handle its scale. Having the back button text handle the translation and the scale at the same time made it hard to figure out what the correct values should be. 3. Added a lot of comments explaining what we are doing/why **When the Large Title and Back Button Texts Do Not Match** | `FW-4146` (default) | branch (default) | `FW-4146` (scaled) | branch (scale) | | - | - | - | - | | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/a6261499-c5ca-4ee3-af62-fa124718ca46"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/0648c0b1-e1f8-43c1-9e7e-91489cc8ec4a"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/0def6d88-22d0-48b9-98b3-0ed2bbb407aa"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/3650ceb1-f4cb-4530-b7c6-17194f4ccd66"></video> | **When the Large Title and Back Button Texts Do Match** | `FW-4146` (default) | branch (default) | `FW-4146` (scaled) | branch (scale) | | - | - | - | - | | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/2b8035a4-81aa-4901-99e1-fd49db1fd0d7"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/e3c66978-2015-484e-b337-73ac1c4c02a1"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/437483a8-2495-4c54-9c27-47c91af4c562"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/05ef08b0-cf0d-469d-8834-533071a8c583"></video> | ## 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. --> Note that the alignment of the title/button will not exactly match native iOS. The goal of this PR is to get something that is pretty close (similar to how it was when we originally implemented this) --------- Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> |
||
|
Liam DeBeasi
|
fa78676d57 |
fix(angular): do not create duplicate menuController instances (#28343)
Issue number: resolves #28337
---------
<!-- 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. -->
Duplicate instances of `menuController` are being created in
`@ionic/angular`. `ion-menu` registers itself in the `menuController`
from `@ionic/core`, but the `MenuController` from `@ionic/angular` uses
the `menuController` from `@ionic/core/components`. This is how the
overlay providers work too. Normally, this is not a problem. However,
`menuController` caches references to registered menus in each
controller instances:
|
||
|
Sean Perkins
|
1ba9973857 |
fix(react): cleanup functions are execute for lifecycle hooks (#28319)
Issue number: Resolves #28186 --------- <!-- 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 lifecycle hooks do not execute a cleanup function when the underlying `useEffect` is unmounted. ```ts useEffect(() => { return () => { console.log('cleanup'); // called }; }); useIonViewWillEnter(() => { return () => { console.log('cleanup'); // never called }; }); ``` Ionic's implementation registers the lifecycle callback to be handled at a later time, by the page managers. However, it does not keep a reference to the returned callback, so it cannot execute it when the `useEffect` is unmounted. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Ionic lifecycle hooks execute dev-specified cleanup functions ## 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.4.4-dev.11696956070.1faa3cfe` This PR builds on the changes in #28316. --------- Co-authored-by: Maria Hutt <maria@ionic.io> Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> |
||
|
Sean Perkins
|
dd93e0b268 |
fix(angular): export missing lifecycle interfaces for standalone package (#28346)
Issue number: N/A
Resolves feedback identified here:
|
||
|
dependabot[bot]
|
79725d7d7a |
chore(deps-dev): Bump @capacitor/core from 5.4.2 to 5.5.0 in /core (#28340)
Bumps [@capacitor/core](https://github.com/ionic-team/capacitor) from 5.4.2 to 5.5.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/capacitor/releases"><code>@capacitor/core</code>'s releases</a>.</em></p> <blockquote> <h2>5.5.0</h2> <h1><a href="https://github.com/ionic-team/capacitor/compare/5.4.2...5.5.0">5.5.0</a> (2023-10-11)</h1> <h3>Features</h3> <ul> <li><strong>android:</strong> allow developers to provide logic for onRenderProcessGone in WebViewListener (<a href="https://redirect.github.com/ionic-team/capacitor/issues/6946">#6946</a>) (<a href=" |
||
|
dependabot[bot]
|
d669fbefd2 |
chore(deps-dev): Bump @axe-core/playwright from 4.7.3 to 4.8.0 in /core (#28338)
Bumps [@axe-core/playwright](https://github.com/dequelabs/axe-core-npm) from 4.7.3 to 4.8.0. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/dequelabs/axe-core-npm/blob/develop/CHANGELOG.md"><code>@axe-core/playwright</code>'s changelog</a>.</em></p> <blockquote> <h1><a href="https://github.com/dequelabs/axe-core-npm/compare/v4.7.3...v4.8.0">4.8.0</a> (2023-09-28)</h1> <h3>Bug Fixes</h3> <ul> <li><strong>cli:</strong> better error message for ChromeDriver version mismatch (<a href="https://redirect.github.com/dequelabs/axe-core-npm/issues/680">#680</a>) (<a href=" |
||
|
Sean Perkins
|
f14a59c5e0 |
fix(react): lifecycle events are removed on page unmount (#28316)
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. --> While debugging #28186, Maria and I identified that Ionic's lifecycle event listeners (`ionViewWillEnter`, etc.) were being registered multiple times on the same `.ion-page` element. This resulted in problematic behavior, where a user's implementation of our lifecycle hooks, would execute their callback multiple times. ```ts useIonViewWillEnter(() => { // This is called 2x for every time the `ionViewWillEnter` event is emitted (in React 18, dev mode) console.log('hello world'); }); ``` When the Ionic lifecycle event listeners are registered in React, we bind the scope of the class to the callback function. When removing the event listener we additional use the `.bind` syntax. ```tsx componentDidMount() { element.addEventListener('ionViewWillEnter', this.ionViewWillEnter.bind(this)); } componentWillUnmount() { // This creates a new instance of the function to remove! It doesn't remove the original event listener. element.removeEventListener('ionViewWillEnter', this.ionViewWillEnter.bind(this)); } ``` The `.bind` method returns a new instance of the function. This means in the implementation we are creating a new instance of the function when both adding and removing the event listener - resulting in the `removeEventListener` to never remove the original event listener. This behavior only occurred in React 18 in dev mode, as a result of the mount/unmount behavior running 2x for `useEffect` hooks. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Ionic lifecycle event listeners are removed from element references when they are unmounted. - User's lifecycle callback methods are only invoked once per event emission. |Before|After| |----|----| |<img alt="CleanShot 2023-10-09 at 18 32 08@2x" src="https://github.com/ionic-team/ionic-framework/assets/13732623/53f2ef5d-5900-4a84-b427-fa6c9d35d081">|<img alt="CleanShot 2023-10-09 at 18 29 37@2x" src="https://github.com/ionic-team/ionic-framework/assets/13732623/c8a9a657-a0bf-4d6d-9f21-a41a686de490">| ## 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. --> --------- Co-authored-by: Maria Hutt <maria@ionic.io> Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> |
||
|
Shawn Taylor
|
dcbf45101f |
chore: update codeowners (#28332)
Issue number: N/A "Owning" a test didn't really work out like I expected/hoped. A lot of changes to the test files were minor, so I ended up just getting assigned to more-or-less random PRs. It wasn't really hurting anything, but I might as well just let the bot assign me. --------- ## Does this introduce a breaking change? - [ ] Yes - [x] No |
||
|
Liam DeBeasi
|
4837f0debf |
merge release-7.5.0
Release 7.5.0 |
||
|
ionitron
|
59f23dcc2c | chore(): update package lock files | ||
|
ionitron
|
053b7d59d3 | v7.5.0 v7.5.0 | ||
|
Liam DeBeasi
|
e097439abf |
chore: sync with main
chore: sync with main |
||
|
Liam DeBeasi
|
dc2f55f0fb | chore: sync with main | ||
|
Liam DeBeasi
|
895bcb04d0 |
merge release-7.4.4
Release 7.4.4 |
||
|
ionitron
|
2caaf6a526 | chore(): update package lock files | ||
|
ionitron
|
cb47273f26 | v7.4.4 v7.4.4 | ||
|
Liam DeBeasi
|
f8067819ee |
feat(a11y): add dynamic font scaling (#28314)
Issue number: resolves #24638, resolves #18592 --------- <!-- 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. --> Developers have requested that Ionic Framework support the dynamic type feature on iOS for accessibility purposes. Ionic applications do not respond to font scaling on iOS which can create inaccessible applications particularly for users with low vision. Ionic apps on Android devices currently support the Android equivalent due to functionality in the Chromium webview. Developers have also requested a way of adjusting the fonts in their Ionic UI components consistently. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Ionic components now use `rem` instead of `px` where appropriate. This means devs can change the font size on `html` and the text in supported Ionic components will scale up/down appropriately - Add support for Dynamic Type on iOS (the iOS version of Dynamic Font Scaling) ## 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. --> --------- Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com> Co-authored-by: Shawn Taylor <shawn@ionic.io> Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Sean Perkins <sean@ionic.io> Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> |
||
|
Liam DeBeasi
|
eee2115fd2 |
fix(select): do not focus disabled popover option (#28309)
Issue number: resolves #28284 --------- <!-- 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 focuses the first popover option when no value is provided. This means that the first option is focused even if it disabled. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Select focuses the first **enabled** popover option when no value is provided. ## 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. --> --------- Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> |
||
|
Liam DeBeasi
|
57e2476370 |
feat(angular): ship Ionic components as Angular standalone components (#28311)
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. --> **1. Bundle Size Reductions** All Ionic UI components and Ionicons are added to the final bundle of an Ionic Angular application. This is because all components and icons are lazily loaded as needed. This prevents the compiler from properly tree shaking applications. This does not cause all components and icons to be loaded on application start, but it does increase the size of the final app output that all users need to download. **Related Issues** https://github.com/ionic-team/ionicons/issues/910 https://github.com/ionic-team/ionicons/issues/536 https://github.com/ionic-team/ionic-framework/issues/27280 https://github.com/ionic-team/ionic-framework/issues/24352 **2. Standalone Component Support** Standalone Components are a stable API as of Angular 15. The Ionic starter apps on the CLI have NgModule and Standalone options, but all of the Ionic components are still lazily/dynamically loaded using `IonicModule`. Standalone components in Ionic also enable support for new Angular features such as bundling with ESBuild instead of Webpack. ESBuild does not work in Ionic Angular right now because components cannot be statically analyzed since they are dynamically imported. We added preliminary support for standalone components in Ionic v6.3.0. This enabled developers to use their own custom standalone components when routing with `ion-router-outlet`. However, we did not ship standalone components for Ionic's UI components. **Related Issues** https://github.com/ionic-team/ionic-framework/issues/25404 https://github.com/ionic-team/ionic-framework/issues/27251 https://github.com/ionic-team/ionic-framework/issues/27387 **3. Faster Component Load Times** Since Ionic Angular components are lazily loaded, they also need to be hydrated. However, this hydration does not happen immediately which prevents components from being usable for multiple frames. **Related Issues** https://github.com/ionic-team/ionic-framework/issues/24352 https://github.com/ionic-team/ionic-framework/issues/26474 ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Ionic components and directives are accessible as Angular standalone components/directives ## 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. --> Associated documentation branch: https://github.com/ionic-team/ionic-docs/tree/feature-7.5 --------- Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: Sean Perkins <sean@ionic.io> Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> Co-authored-by: Maria Hutt <maria@ionic.io> Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> |
||
|
dependabot[bot]
|
d0057352fe |
chore(deps): Bump @stencil/core from 4.4.0 to 4.4.1 in /core (#28317)
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.4.0 to 4.4.1. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/stencil/blob/main/CHANGELOG.md"><code>@stencil/core</code>'s changelog</a>.</em></p> <blockquote> <h2>❤️ <a href="https://github.com/ionic-team/stencil/compare/v4.4.0...v4.4.1">4.4.1</a> (2023-10-09)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>screenshot:</strong> alert user when toMatchScreenshot uses NaN (<a href="https://redirect.github.com/ionic-team/stencil/issues/4891">#4891</a>) (<a href=" |
||
|
Liam DeBeasi
|
4f43d5ce08 |
fix(menu) menus on the same side are not automatically disabled (#28269)
Issue number: resolves #18974 --------- <!-- 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 multiple menus on the same `side` are registered, all but the most recent menu are disabled. For example, if a user starts on PageA with a `start` menu and then navigates to PageB which also has a `start` menu, then the menu on PageA will be disabled. The problem is that if users navigates back to PageA they will be unable to open the menu on that view because it is still disabled. This behavior impacts any Ionic developer trying to open a menu whether by calling the `open` method on the menu itself or on the `menuController`. After discussing with the team, we believe the original intent of this behavior was to prevent users from accidentally opening the wrong menu when calling `menuController.open('start')`. This API allows developers to reference a menu by side, and since it's possible to have multiple menus on the same side it's also possible to open the wrong menu when referencing by side only. However, this API starts to break down pretty quickly in a navigation scenario. Sample Repo: https://github.com/liamdebeasi/multiple-menu-bug-repro ## Scenario 1: Referencing Menu by Side 1. On the "home" route click "Open 'start' menu". Observe that the home page menu opens. 2. Close the menu and click "Go to Page Two". 3. On the "page-two" route click "Open 'start' menu". Observe that the page two menu opens. 4. Go back to "home". 5. Click "Open 'start' menu". Observe that nothing happens. 6. Click "Enable and Open 'start'" Menu". Observe that the home menu opens. ## Scenario 2: Referencing Menu by ID 1. On the "home" route click "Open '#menu1' menu". Observe that the home page menu opens. 2. Close the menu and click "Go to Page Two". 3. On the "page-two" route click "Open '#menu2' menu". Observe that the page two menu opens. 4. Go back to "home". 5. Click "Open '#menu1' menu". Observe that nothing happens. 6. Click "Enable and Open '#menu1'" Menu". Observe that the home menu opens. ## Scenario 3: Using 3 or more menus even when enabling menus 1. On the "home" route click "Open 'start' menu". Observe that the home page menu opens. 2. Close the menu and click "Go to Page Two". 3. On the "page-two" route click "Open 'start' menu". Observe that the page two menu opens. 4. Close the menu and click "Go to Page Three" 5. On the "page-three" route click "Open 'start' menu". Observe that the page three menu opens. 6. Go back to "page-two". 8. Click "Open 'start' menu". Observe that nothing happens. 9. Click "Enable and Open 'start' Menu". Observe that nothing happens. The menu controller attempts to find an enabled menu on the specified side: |
||
|
Liam DeBeasi
|
8601977aa7 | chore: update to latest ionicons (#28315) | ||
|
Liam DeBeasi
|
c70432e693 |
fix(checkbox, radio, toggle): disabled elements are not interactive (#28294)
Issue number: resolves #28293 --------- <!-- 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. --> Disabled toggles, radios, and checkboxes can still be enabled by manually dispatching a click event on them. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Toggles, radios, and checkboxes no longer activate if `disabled` is set to `true` ## 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.4.4-dev.11696545130.1171e7a9` |
||
|
Liam DeBeasi
|
c37b3d8bf4 | fix(toast): toast does not warn when positionAnchor is undefined (#28312) | ||
|
Liam DeBeasi
|
8450564eba |
chore: sync with main
chore: sync with main |
||
|
Liam DeBeasi
|
b5261e0f41 | Merge remote-tracking branch 'origin/main' into sync-feature-7.5-109 | ||
|
Liam DeBeasi
|
a1690441e5 |
fix(menu): do not error if disabled or swipeGesture is changed mid-animation (#28268)
Issue number: resolves #20092, resolves #19676, resolves #19000 --------- <!-- 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. --> Menu is currently throwing errors because it expects no animations to be running when any state changes happen (such as changing `disabled` or `swipeGesture`). For example, if you set `swipeGesture="false"` mid-gesture then the menu will error. Alternatively, if you set `disabled="true"` mid-open animation then the menu will error also. This is undesirable because it can cause visual flickering and other undesirable behaviors as noted in the linked threads. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Any in-progress animation is cancelled if the state updates such that the animation is no longer relevant (i.e. `disabled` is set to `true` while the menu is opening) - Removed relevant assertions - Added tests ## 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.4.3-dev.11696264821.1755dd6a` |
||
|
Francisco Pladano
|
6da82aab81 |
feat(angular, react, vue, core): export openURL utility (#28295)
Issue number: resolves #27911 --------- <!-- 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 `openURL` utility is not available to developers. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Export `openURL` utilities from `@ionic/core`, `@ionic/angular`, `@ionic/react` and `@ionic/vue`. ## 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. --> |
||
|
Liam DeBeasi
|
e6031fbef0 |
fix(animation): play method resolves when animation is stopped (#28264)
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. --> When trying to fix https://github.com/ionic-team/ionic-framework/issues/20092, I discovered that |
||
|
Alexander Harding
|
d5f0c776df |
fix(core): swipe to go back gesture has priority over other horizontal swipe gestures (#28304)
Issue number: resolves #28303 --------- <!-- 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? - Swipe back gesture is inconsistently clobbered by ion-item-sliding's gesture. ## What is the new behavior? - Swipe back gesture now has a higher priority than ion-item-sliding - - ## 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 This patch has been in use in [Voyager](https://github.com/aeharding/voyager) for the past couple months to great success! --------- Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> |
||
|
Ryan Waskiewicz
|
00767a02e4 |
chore(repo): parameterize stencil nightly (#28308)
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. --> when the stencil team wants to test a dev build of stencil against the framework team's ci, they push a branch to this repo that overrides the stencil nightly job's npm tag (replacing 'nightly' with the dev build version) and manually kick off the nightly workflow. this commit would eliminate the need for that first step there ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> update the stencil nightly job to accept any npm release tag, rather than always default to 'nightly'. doing so allows the stencil team to reuse this workflow for cases where we'd like to test a _dev_ build of stencil by running it through the framework's ci process, without landing the feature in stencil first. I was able to test that `nightly` gets set by default (and the field is required) by running the workflow from this branch. I then also tested this against a dev build of Stencil:  Interestingly enough, it helped me catch something to consider if we were to accept the PR this dev build is accepted! ## 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 I considered making a separate workflow for this (rather than override/use nightly) - it didn't quite seem worth the maintenance effort 🤷 <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
||
|
Liam DeBeasi
|
3259da0de1 |
fix(header): collapsible large title main header does not flicker on load (#28277)
Issue number: resolves #27060
---------
<!-- 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 main header is controlled by the header with `collapse="condense"`
set:
|
||
|
dependabot[bot]
|
470c119a05 |
chore(deps-dev): Bump @capacitor/core from 5.4.1 to 5.4.2 in /core (#28285)
Bumps [@capacitor/core](https://github.com/ionic-team/capacitor) from 5.4.1 to 5.4.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/capacitor/releases"><code>@capacitor/core</code>'s releases</a>.</em></p> <blockquote> <h2>5.4.2</h2> <h2><a href="https://github.com/ionic-team/capacitor/compare/5.4.1...5.4.2">5.4.2</a> (2023-10-04)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>android:</strong> make local urls use unpatched fetch (<a href="https://redirect.github.com/ionic-team/capacitor/issues/6954">#6954</a>) (<a href=" |
||
|
Maria Hutt
|
72b389993d | fix(alert): stop Enter keypress for checkboxes (#28279) | ||
|
Liam DeBeasi
|
b297529afc |
fix(core): allow fullscreen scroll content to flow outside container for translucent tab bar (#28246)
Issue number: resolves #17676
---------
<!-- 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 IonNav, IonRouterOutlet, and .ion-page elements have `overflow:
hidden` which prevent content from spilling out of it. This was likely
done to prevent these elements from having overflow scroll (since the
inner IonContent should be scrollable). However, this breaks the
translucency effect on IonTabBar because the content in IonContent can
not scroll under the IonTabBar.
```html
<ion-tabs>
<ion-router-outlet> <!-- this has overflow: hidden -->
...
<ion-content fullscreen="true">...</ion-content>
</ion-router-outlet>
<ion-tab-bar translucent="true">...</ion-tab-bar>
</ion-tabs>
```
In Ionic v3 components such as IonTabs and IonNav did have `overflow:
hidden`:
|