mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 08:09:32 +08:00
13748 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
| 021712bd7d |
chore(): update BREAKING.md to prepare for Ionic 8 development (#28360)
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 new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - v7 breaking changes moved to legacy file. - New v8 section added to main breaking changes list. ## 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. --> |
|||
| 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=" |
|||
| 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> |
|||
| 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=" |
|||
| 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> |
|||
| 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:
|
|||
| 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> |
|||
| dd93e0b268 |
fix(angular): export missing lifecycle interfaces for standalone package (#28346)
Issue number: N/A
Resolves feedback identified here:
|
|||
| 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=" |
|||
| 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=" |
|||
| 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> |
|||
| 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 |
|||
| 4837f0debf |
merge release-7.5.0
Release 7.5.0 |
|||
| 59f23dcc2c | chore(): update package lock files | |||
| 053b7d59d3 | v7.5.0 v7.5.0 | |||
| e097439abf |
chore: sync with main
chore: sync with main |
|||
| dc2f55f0fb | chore: sync with main | |||
| 895bcb04d0 |
merge release-7.4.4
Release 7.4.4 |
|||
| 2caaf6a526 | chore(): update package lock files | |||
| cb47273f26 | v7.4.4 v7.4.4 | |||
| 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> |
|||
| 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> |
|||
| 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> |
|||
| 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=" |
|||
| 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: |
|||
| 8601977aa7 | chore: update to latest ionicons (#28315) | |||
| 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` |
|||
| c37b3d8bf4 | fix(toast): toast does not warn when positionAnchor is undefined (#28312) | |||
| 8450564eba |
chore: sync with main
chore: sync with main |
|||
| b5261e0f41 | Merge remote-tracking branch 'origin/main' into sync-feature-7.5-109 | |||
| 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` |
|||
| 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. --> |
|||
| 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 |
|||
| 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> |
|||
| 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. --> |
|||
| 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:
|
|||
| 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=" |
|||
| 72b389993d | fix(alert): stop Enter keypress for checkboxes (#28279) | |||
| 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`:
|
|||
| 897ff6f749 |
feat(toast): allow custom positioning relative to specific element (#28248)
Issue number: resolves #17499 --------- <!-- 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. --> Currently, there isn't a way to position toasts such that they don't overlap navigation elements such as headers, footers, and FABs. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Added the new `positionAnchor` property, which specifies an element that the toast's position should be anchored to. While the name can be tweaked, we should take care to keep the relation between it and the `position` property clear. The `position` acts as a sort of "origin" point, and the toast is moved from there to sit near the chosen anchor element. This is important because it helps clarify why the toast sits above the anchor for `position="bottom"` and vice versa. I chose not to rename the `position` prop itself to avoid breaking changes. Docs PR: https://github.com/ionic-team/ionic-docs/pull/3158 ## 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> Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> |
|||
| 7375dd6aba |
fix(content): fullscreen offset is computed correctly with tab bar (#28245)
Issue number: resolves #21130 --------- <!-- 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. --> IonContent sets `--offset-top` and `--offset-bottom` variables to allow the content to scroll under headers, footers, and tab bars. This is essential to creating the translucency effect on these components. IonContent does this by computing its offsetHeight and offsetTop coordinates which take into account the dimensions of headers, footers, and tab bars. Occasionally, this code will run before the IonTabBar has been hydrated which means that the offset will be wrong because the IonTabBar will have a dimension of 0x0 prior to hydration. This impacts Ionic Angular devs who are using the lazy loaded build of Ionic. React and Vue devs are not impacted because they are using the dist-custom-elements build of Ionic which does not have hydration. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - IonContent will re-run the offset computation code whenever the `ionTabBarLoaded` event is emitted. This event is emitted at most once per IonTabBar instance. ## 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.2-dev.11695831341.191bdf12` Note: I did not write a test since this is fixing a race condition. I wasn't able to find a non-flaky way of testing this. You can test this in an Ionic Angular Tabs starter application with the dev build. The `--offset-bottom` variable on `ion-content` should be large enough such that the content will scroll under the tab bar. The translucency effect won't work just yet, but that is being fixed in https://github.com/ionic-team/ionic-framework/pull/28246. |
|||
| 1167a9325f |
fix(segment): scroll to active segment-button on first load (#28276)
Issue number: resolves #28096 --------- <!-- 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 a segment button is clicked, the segment will auto-scroll to position the newly active button fully in view. However, this behavior does not occur on first load. This means that when a segment is initialized with a `value` corresponding to an off-screen button, the button will remain off-screen. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> The same auto-scroll behavior from button click now also occurs on component load. ## 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. --> |
|||
| dc75392e9d |
refactor(router-outlet): reuse lock controller (#28273)
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. --> Code is duplicated between the router outlet and the overlays ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Code is reused between the router outlet and the overlays ## 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. --> |
|||
| 865bd2a004 |
merge release-7.4.3
Release 7.4.3 |
|||
| 2429caa168 | chore(): update package lock files | |||
| a8517f4fcf | v7.4.3 v7.4.3 | |||
| 01167fc185 | fix(select): use correct aria-haspopup value (#28265) | |||
| a04a11be35 |
chore(deps): Bump @stencil/core from 4.3.0 to 4.4.0 in /core (#28270)
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.3.0 to 4.4.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/stencil/releases"><code>@stencil/core</code>'s releases</a>.</em></p> <blockquote> <h2>🍫 v4.4.0 (2023-10-02)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>jest:</strong> use correct minimum jest version (<a href="https://redirect.github.com/ionic-team/stencil/issues/4851">#4851</a>) (<a href=" |
|||
| f5df28e2c7 |
chore(deps-dev): Bump @stencil/sass from 3.0.5 to 3.0.6 in /core (#28271)
Bumps [@stencil/sass](https://github.com/ionic-team/stencil-sass) from 3.0.5 to 3.0.6. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/stencil-sass/releases"><code>@stencil/sass</code>'s releases</a>.</em></p> <blockquote> <h2>v3.0.6</h2> <h2>What's Changed</h2> <ul> <li>chore(deps): update dependency terser to v5.19.2 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/376">ionic-team/stencil-sass#376</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.0.2 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/377">ionic-team/stencil-sass#377</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.0.3 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/379">ionic-team/stencil-sass#379</a></li> <li>chore(deps): update dependency prettier to v3.0.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/380">ionic-team/stencil-sass#380</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.0.4 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/381">ionic-team/stencil-sass#381</a></li> <li>chore(deps): update actions/setup-node action to v3.8.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/383">ionic-team/stencil-sass#383</a></li> <li>chore(deps): update node.js to v20.5.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/382">ionic-team/stencil-sass#382</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.0.5 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/384">ionic-team/stencil-sass#384</a></li> <li>chore(deps): update actions/setup-node action to v3.8.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/385">ionic-team/stencil-sass#385</a></li> <li>chore(deps): update dependency prettier to v3.0.2 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/386">ionic-team/stencil-sass#386</a></li> <li>chore(deps): update dependency <code>@rollup/plugin-node-resolve</code> to v15.2.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/387">ionic-team/stencil-sass#387</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.1.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/388">ionic-team/stencil-sass#388</a></li> <li>chore(deps): update dependency <code>@rollup/plugin-node-resolve</code> to v15.2.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/389">ionic-team/stencil-sass#389</a></li> <li>chore(deps): update dependency npm to v10 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/393">ionic-team/stencil-sass#393</a></li> <li>chore(deps): update dependency prettier to v3.0.3 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/391">ionic-team/stencil-sass#391</a></li> <li>chore(deps): update actions/checkout action to v3.6.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/390">ionic-team/stencil-sass#390</a></li> <li>chore(deps): update node.js to v20.6.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/394">ionic-team/stencil-sass#394</a></li> <li>chore(deps): update dependency terser to v5.19.3 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/392">ionic-team/stencil-sass#392</a></li> <li>chore(deps): update actions/checkout action to v4 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/396">ionic-team/stencil-sass#396</a></li> <li>chore(deps): update dependency terser to v5.19.4 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/395">ionic-team/stencil-sass#395</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.2.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/397">ionic-team/stencil-sass#397</a></li> <li>chore(deps): update dependency npm to v10.1.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/399">ionic-team/stencil-sass#399</a></li> <li>chore(deps): update node.js to v20.6.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/398">ionic-team/stencil-sass#398</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.2.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/400">ionic-team/stencil-sass#400</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.3.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/401">ionic-team/stencil-sass#401</a></li> <li>chore(deps): update node.js to v20.7.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/402">ionic-team/stencil-sass#402</a></li> <li>chore(deps): update dependency terser to v5.20.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/403">ionic-team/stencil-sass#403</a></li> <li>chore(deps): update actions/checkout action to v4.1.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/404">ionic-team/stencil-sass#404</a></li> <li>chore(deps): update dependency rimraf to v5.0.4 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/405">ionic-team/stencil-sass#405</a></li> <li>chore(deps): update node.js to v20.8.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/407">ionic-team/stencil-sass#407</a></li> <li>chore(deps): update dependency rimraf to v5.0.5 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/406">ionic-team/stencil-sass#406</a></li> </ul> <p><strong>Full Changelog</strong>: <a href="https://github.com/ionic-team/stencil-sass/compare/v3.0.5...v3.0.6">https://github.com/ionic-team/stencil-sass/compare/v3.0.5...v3.0.6</a></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
|||
| ac2c8e6c22 |
fix(range): knob positions are correct on initial render with custom elements build (#28257)
Issue number: Resolves #25444 --------- <!-- 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 the custom elements build, currently used by React and Vue packages, the range knob can be rendered incorrectly if the value is assigned after the `connectedCallback` but before the initial render of the component. This is most apparent with the dual knobs implementation in React (referenced issue). This results in the range's value being correct, but the visual representation of the range to be incorrect. This also causes issues with the custom elements build in the standalone implementation of Ionic's components in Angular. If a range is presented in a modal via a controller, the range will never render with the value that is initially assigned to it. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updates the range knob positioning when the range has initially rendered. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> This change needs to be pulled into the Ionic angular standalone work. Dev-build: `7.4.3-dev.11695926109.13b1266a` |
