mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-02-04 13:16:08 +08:00
ld/datetime-listbox
13213 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
|
|
aecfd034e9 | add listbox demo | ||
|
|
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> |
||
|
|
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=" |
||
|
|
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` |
||
|
|
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` |
||
|
|
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=" |
||
|
|
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`:
|
||
|
|
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 | ||
|
|
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` |
||
|
|
70e9177e2c |
chore: add script for updating local snapshots (#28254)
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. --> Team members often need to update the ground truth screenshots when validating visual regressions or working on a design change. The command may be unfamiliar to them or they may be new to the project/playwright. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Adds a new script to the `core` package for updating the local (to the file system) ground truth screenshots. ## 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. --> |
||
|
|
51b7ceb5be |
test: remove deprecated getSnapshotSettings method (#28250)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The `getSnapshotSettings` method was used in the pre-generator test infrastructure. It was deprecated at the start of the generator migration. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Now that the generator migration is complete, this method is no longer needed. As a result, I removed it. Developers should use the `screenshot` function: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/test/playwright/docs/api.md#using-the-return-value-from-each-configuration ## 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. --> |
||
|
|
597bec7534 |
test(docs): add info on how to run tests and update screenshots (#28229)
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. --> During planning the team discussed that some of our internal docs are outdated. Additionally, some of this info would be useful for contributors. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Ported remaining E2E docs to GitHub - Added info on installing deps, running tests, and updating screenshots. API and best practices are already on the repo. ## 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: Brandy Carney <brandyscarney@users.noreply.github.com> |
||
|
|
eb41b556b5 |
fix(fab-button): position is correct with custom sizes (#28195)
Issue number: resolves #22564 --------- <!-- 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. --> Changing the size of the FAB button causes it to be positioned incorrectly. This was happening because we set position values based on the assumption that the default FAB button would always be 56px x 56px. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - FAB and FAB List positioning is now computed based on intrinsic size ## 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.1-dev.11695395641.14897417` --------- Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
|
355d95d4d8 |
merge release-7.4.2
Release 7.4.2 |
||
|
|
078964447a | chore(): update package lock files | ||
|
|
45bcd4c22b | v7.4.2 v7.4.2 | ||
|
|
71a7af0f52 |
fix(title): large title uses custom font on transition (#28231)
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 testing Dynamic Font Scaling with a custom font I noticed that the large title does not respect `--ion-font-family` on transition. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The cloned large title now respect `--ion-font-family` Note: This happens in `main` too which is why I am merging into there instead of the Dynamic Font Scaling branch. | `main` | branch | | - | - | |  |  | ## 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. --> |
||
|
|
8a9db8c949 |
chore(deps-dev): Bump @playwright/test from 1.38.0 to 1.38.1 in /core (#28214)
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from 1.38.0 to 1.38.1. <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.38.1</h2> <h3>Highlights</h3> <p><a href="https://redirect.github.com/microsoft/playwright/issues/27071">microsoft/playwright#27071</a> - expect(value).toMatchSnapshot() deprecation announcement on V1.38 <a href="https://redirect.github.com/microsoft/playwright/issues/27072">microsoft/playwright#27072</a> - [BUG] PWT trace viewer fails to load trace and throws TypeError <a href="https://redirect.github.com/microsoft/playwright/issues/27073">microsoft/playwright#27073</a> - [BUG] RangeError: Invalid time value <a href="https://redirect.github.com/microsoft/playwright/issues/27087">microsoft/playwright#27087</a> - [REGRESSION]: npx playwright test --list prints all tests twice <a href="https://redirect.github.com/microsoft/playwright/issues/27113">microsoft/playwright#27113</a> - [REGRESSION]: No longer able to extend PlaywrightTest.Matchers type for locators and pages <a href="https://redirect.github.com/microsoft/playwright/issues/27144">microsoft/playwright#27144</a> - [BUG]can not display trace <a href="https://redirect.github.com/microsoft/playwright/issues/27163">microsoft/playwright#27163</a> - [REGRESSION] Single Quote Wrongly Escaped by Locator When Using Unicode Flag <a href="https://redirect.github.com/microsoft/playwright/issues/27181">microsoft/playwright#27181</a> - [BUG] evaluate serializing fails at 1.38</p> <h3>Browser Versions</h3> <ul> <li>Chromium 117.0.5938.62</li> <li>Mozilla Firefox 117.0</li> <li>WebKit 17.0</li> </ul> <p>This version was also tested against the following stable channels:</p> <ul> <li>Google Chrome 116</li> <li>Microsoft Edge 116</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
||
|
|
fe10e7280f |
chore(deps-dev): Bump @capacitor/core from 5.4.0 to 5.4.1 in /core (#28215)
Bumps [@capacitor/core](https://github.com/ionic-team/capacitor) from 5.4.0 to 5.4.1. <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.1</h2> <h2><a href="https://github.com/ionic-team/capacitor/compare/5.4.0...5.4.1">5.4.1</a> (2023-09-21)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>android:</strong> handle webview version for developer builds (<a href="https://redirect.github.com/ionic-team/capacitor/issues/6911">#6911</a>) (<a href=" |
||
|
|
82a5b310da |
chore(item): add deprecated flag to fill prop (#28210)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The `fill` prop on `ion-item` is currently deprecated (see warning [here](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/item/item.tsx#L248-L253)) but the docs have not been updated to reflect this. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> `@deprecated` flag added to the `fill` prop. ## 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. --> |
||
|
|
b02f1aff2b | test(radio): skip flaky tests (#28211) | ||
|
|
de1a4c50bb |
test: update test apps to cypress 13 (#28212)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> CI is failing for Cypress apps due to https://github.com/cypress-io/cypress/issues/27804#issuecomment-1721476731. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - All Cypress test apps have been updated to Cypress 13.2.0 which is not affected by this issue. ## 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. --> |
||
|
|
5e016a6616 |
test(item-sliding): re-enable flaky tests (#28192)
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. --> Some of the tests for `item-sliding` were being skipped due to flakiness. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated the tests to use the stable function, `dragElementBy` to handle gestures, removing the gesture flakiness. - Separated the basic test to lessen the gesture complexity else it becomes flaky since it can't handle opening and closing and opening in the same test. - Tests are now checking all modes and all directions. - Updated a utils function with a warning regarding an open issue with RTL. ## 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> Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com> |
||
|
|
0edcb2cd85 |
fix(react): Nav unmounts component while invoking popTo or popToRoot (#27821)
Issue number: Resolves #27798 --------- ## What is the current behavior React IonNav component's views are missing keys, leading to unnecessary duplicate mounting of components. ## What is the new behavior? - Adds key to views of React IonNav component. ## Does this introduce a breaking change? - [ ] Yes - [x] No --------- Co-authored-by: Sean Perkins <sean@ionic.io> |
||
|
|
7b197a3226 |
merge release-7.4.1
Release 7.4.1 |
||
|
|
2e626a909f | chore(): update package lock files | ||
|
|
d82414d43f | v7.4.1 v7.4.1 | ||
|
|
5b7e422dc0 |
fix(radio,toggle,checkbox,select): padded space is clickable in items (#28136)
Issue number: Resolves #27169 --------- <!-- 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. --> Clicking the padded space within an `ion-item` will not pass the click event to the slotted `ion-radio`, `ion-checkbox`, `ion-select` or `ion-toggle`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The padded space at the start of `.item-native` and at the end of `.item-inner` is clickable to activate a control. - When the item is clicked, we check if the event is a result of clicking the control or clicking the item's padded space. If the click event is on the control, we don't need to do anything and let the default behavior occur. If the click event is on the padded space, we manually call the `.click()` method for the interactive element. - The cursor pointer displays when hovering over the padded space when a slotted interactive control is present. ## 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. --> |
||
|
|
0104d89927 |
fix(range): knob is not cut off in item with modern syntax (#28199)
Issue number: resolves #27199 --------- <!-- 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 using the modern range in an item, the knob will get cut off by the item when the value is at either the min or the max. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Range knob is no longer cut off by the item ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> This is an extension of https://github.com/ionic-team/ionic-framework/pull/27188. I decided to make a separate branch/PR since I added tests and changed the implementation a bit. Feel free to take all/some/none of this code. --------- Co-authored-by: Sean Perkins <sean-perkins@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
|
3f06da4cfc |
fix(scroll-assist): re-run when keyboard changes (#28174)
Issue number: resolves #22940 --------- <!-- 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. --> Scroll assist does not run when changing keyboards. This means that inputs can be hidden under the keyboard if the new keyboard is larger than the previous keyboard. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - On Browsers/PWAs scroll assist will re-run when the keyboard geometry changes. We don't have a cross-browser way of detecting keyboard changes yet, so this is the best we have for now. - On Cordova/Capacitor scroll assist will re-run when the keyboard changes, even if the overall keyboard geometry does not change. In the example below, we are changing keyboards while an input is focused: | `main` | branch | | - | - | | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/715e176a-6724-4308-ae3e-15b5bea308ac"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/b9ccd482-720a-409b-a089-b3330c1e405c"></video> | Breakdown per-resize mode: | Native | None | Ionic | Body | | - | - | - | - | | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/b930ac5f-3398-4887-a8ca-a57708adc66d"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/68465854-94d0-4e00-940c-c4674a43b6a3"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/561f313a-9caf-4c9e-ab15-9c4383f0e3ee"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/300b8894-ad2a-43bc-8e82-ecd68afd407e"></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. --> Dev build: `7.3.4-dev.11694706860.14b2710d` --------- Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> |
||
|
|
5ff32b7786 |
test(docs): update viewport docs (#28197)
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. -->
I needed this constant for a different PR but realized the docs were
outdated:
|
||
|
|
b5c736f5ac |
fix(scroll-assist): improve input scroll accuracy with native resizing (#28169)
Issue number: Part of #22940
---------
<!-- 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 fix for #22940, I discovered another bug that
impacted the reliability of my proposed fix for #22940. When we compute
the scroll data (i.e. how much the input needs to be scrolled by), we
subtract the `keyboardHeight` from the `platformHeight` (i.e. the
viewport height):
|
||
|
|
81714d45bd |
fix(overlays): correctly re-add root to accessibility tree (#28183)
Issue number: resolves #28180 --------- <!-- 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 presenting an overlay, we remove the root (usually `ion-router-outlet`) from the accessibility tree. This makes it so you cannot accidentally focus elements behind the overlay. When dismissing an overlay we re-add the root to the accessibility tree. However, we fail to consider if there are multiple presented overlays. For example, if you present a modal, then an alert, then dismiss the alert, then the root is re-added to the accessibility tree even though the modal is still presented. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The root is now re-added to the accessibility tree only if it is the last presented overlay. ## 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.1-dev.11694783260.13da477f` |
||
|
|
4e0b522728 |
test(playwright): only use retries on CI (#28196)
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. --> We currently use retries on CI to help catch flaky tests. However, retries are enabled even when testing locally. This is not ideal because a failing test will be re-run multiple times before erroring out which increases the time it takes to run tests locally. I typically write tests before fixes so I can verify my test is checking the correct behavior. In this case I don't need it to be re-run twice -- I already know it's supposed to fail. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Test retries are only enabled on CI ## 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. --> |
||
|
|
94514501a6 |
chore(deps): Bump @stencil/core from 4.2.1 to 4.3.0 in /core (#28194)
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.2.1 to 4.3.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>🎱 4.3.0 (2023-09-18)</h2> <h2>Bug Fixes</h2> <ul> <li><strong>compiler:</strong> restrict config extras slot fix flags (<a href="https://redirect.github.com/ionic-team/stencil/issues/4767">#4767</a>) (<a href=" |
||
|
|
574d762594 |
test(menu): safe area and proper var reset (#28177)
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. --> - There are no tests for menu when safe area is applied. - The safe area variables on menu weren't being reset properly to allow easy local customization. Currently, some of the variables are being set to `env()`. This is the same structure that is being used in core. However, this doesn't prevents users from mocking the safe area when using `--ion-safe-area-left: 50px` on `html`. It makes it hard to create tests to validate that padding is being applied to the safe area. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Tests have been added. - The safe area variables on menu are now being reset to use the values from `:root`. The variables are being `unset` in order for the variables to [default to parent styles](https://stackoverflow.com/a/69491310/5374225). Since core styles has already declared the variables, then developers can use `--ion-safe-area-left: 50px` on `html`. ## 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> |
||
|
|
45bbea6a34 |
chore(deps-dev): Bump @capacitor/core from 5.3.0 to 5.4.0 in /core (#28179)
Bumps [@capacitor/core](https://github.com/ionic-team/capacitor) from 5.3.0 to 5.4.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.4.0</h2> <h1><a href="https://github.com/ionic-team/capacitor/compare/5.3.0...5.4.0">5.4.0</a> (2023-09-14)</h1> <h3>Bug Fixes</h3> <ul> <li><strong>cli:</strong> use helper in Podfile with correct path (<a href="https://redirect.github.com/ionic-team/capacitor/issues/6888">#6888</a>) (<a href=" |
||
|
|
9050a9fbf5 |
fix(vue): respect keepContentsMounted if passed as attribute (#28167)
Issue number: resolves #28165 --------- <!-- 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 overlay implementation in Vue only checks for truthy `keepContentsMounted` values. When setting this prop as an attribute, the value of it is `''` which is falsy. As a result, content does not get mounted. One of Vue's ESLint rules states that this should be supported: https://eslint.vuejs.org/rules/prefer-true-attribute-shorthand.html Part of the issue may also be that Vue does not know the type of this property and so it assume "any": > The shorthand form is not always equivalent! If a prop accepts multiple types, but Boolean is not the first one, a shorthand prop won't pass true. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The overlay wrapper now checks for `''` values. If `keepContentsMounted === ''` then the inner contents will be mounted because this means the prop is being set using the attribute shorthand. ## 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.3.5-dev.11694621267.1e5f63c2` |
||
|
|
a5f14e3933 |
chore(deps-dev): Bump @playwright/test from 1.37.1 to 1.38.0 in /core (#28171)
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from 1.37.1 to 1.38.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.38.0</h2> <h2>UI Mode Updates</h2> <p><img src="https://github.com/microsoft/playwright/assets/746130/8ba27be0-58fd-4f62-8561-950480610369" alt="Playwright UI Mode" /></p> <ol> <li>Zoom into time range.</li> <li>Network panel redesign.</li> </ol> <h2>New APIs</h2> <ul> <li>[<code>browserContext.on('weberror')</code>]</li> <li>[<code>locator.pressSequentially()</code>]</li> <li>The [<code>reporter.onEnd()</code>] now reports <code>startTime</code> and total run <code>duration</code>.</li> </ul> <h2>Deprecations</h2> <ul> <li>The following methods were deprecated: [<code>page.type()</code>], [<code>frame.type()</code>], [<code>locator.type()</code>] and [<code>elementHandle.type()</code>]. Please use [<code>locator.fill()</code>] instead which is much faster. Use [<code>locator.pressSequentially()</code>] only if there is a special keyboard handling on the page, and you need to press keys one-by-one.</li> <li>The method [<code>expect(value).toMatchSnapshot()</code>] is deprecated in favor of [<code>expect(page).toHaveScreenshot()</code>] and [<code>expect(locator).toHaveScreenshot()</code>].</li> </ul> <h2>Breaking Changes: Playwright no longer downloads browsers automatically</h2> <blockquote> <p>[!NOTE] If you are using <code>@playwright/test</code> package, this change <strong>does not</strong> affect you.</p> </blockquote> <p>Playwright recommends to use <code>@playwright/test</code> package and download browsers via <code>npx playwright install</code> command. If you are following this recommendation, nothing has changed for you.</p> <p>However, up to v1.38, installing the <code>playwright</code> package instead of <code>@playwright/test</code> did automatically download browsers. This is no longer the case, and we recommend to explicitly download browsers via <code>npx playwright install</code> command.</p> <p><strong>v1.37 and earlier</strong></p> <p><code>playwright</code> package was downloading browsers during <code>npm install</code>, while <code>@playwright/test</code> was not.</p> <p><strong>v1.38 and later</strong></p> <p><code>playwright</code> and <code>@playwright/test</code> packages do not download browsers during <code>npm install</code>.</p> <p><strong>Recommended migration</strong></p> <p>Run <code>npx playwright install</code> to download browsers after <code>npm install</code>. For example, in your CI configuration:</p> <pre lang="yml"><code>- run: npm ci - run: npx playwright install --with-deps </code></pre> <p><strong>Alternative migration option - not recommended</strong></p> <!-- raw HTML omitted --> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |