Compare commits

..

12 Commits

Author SHA1 Message Date
ionitron
a8517f4fcf v7.4.3 2023-10-04 13:26:30 +00:00
dependabot[bot]
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="2f7fb88dcd">2f7fb88</a>)</li>
</ul>
<h3>Features</h3>
<ul>
<li><strong>typescript:</strong> upgrade to TypeScript 5.2 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4852">#4852</a>)
(<a
href="b589a07188">b589a07</a>)</li>
</ul>
</blockquote>
</details>
<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.3.0...v4.4.0">4.4.0</a>
(2023-10-02)</h1>
<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="2f7fb88dcd">2f7fb88</a>)</li>
</ul>
<h3>Features</h3>
<ul>
<li><strong>typescript:</strong> upgrade to TypeScript 5.2 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4852">#4852</a>)
(<a
href="b589a07188">b589a07</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="509494f7f1"><code>509494f</code></a>
Release v4.4.0 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4881">#4881</a>)</li>
<li><a
href="102cd77297"><code>102cd77</code></a>
docs(runtime): document <code>HostRef</code> (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4869">#4869</a>)</li>
<li><a
href="7ee5335042"><code>7ee5335</code></a>
chore(deps): update dependency <code>@​types/mock-fs</code> to v4.13.2
(<a
href="https://redirect.github.com/ionic-team/stencil/issues/4873">#4873</a>)</li>
<li><a
href="d9c5956399"><code>d9c5956</code></a>
chore(deps): update dependency <code>@​types/sizzle</code> to v2.3.4 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4875">#4875</a>)</li>
<li><a
href="07be07b39c"><code>07be07b</code></a>
chore(deps): update node.js to v20.7.0 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4860">#4860</a>)</li>
<li><a
href="a817ae83db"><code>a817ae8</code></a>
chore(renovate): fix volta karma node management (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4862">#4862</a>)</li>
<li><a
href="1b9bd8eb40"><code>1b9bd8e</code></a>
chore(test): remove old jest todos (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4861">#4861</a>)</li>
<li><a
href="14328ac637"><code>14328ac</code></a>
chore(ci): adjust component start test name to include jest version (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4863">#4863</a>)</li>
<li><a
href="4cd86f350d"><code>4cd86f3</code></a>
docs(repo): add code comments to update-component methods (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4850">#4850</a>)</li>
<li><a
href="c62bb6c9fa"><code>c62bb6c</code></a>
chore(repo): clean up start script (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4846">#4846</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/ionic-team/stencil/compare/v4.3.0...v4.4.0">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@stencil/core&package-manager=npm_and_yarn&previous-version=4.3.0&new-version=4.4.0)](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>
2023-10-03 15:32:47 +00:00
dependabot[bot]
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="5277ed9fbc"><code>5277ed9</code></a>
3.0.6</li>
<li><a
href="08151a5a20"><code>08151a5</code></a>
chore(deps): update dependency rimraf to v5.0.5 (<a
href="https://redirect.github.com/ionic-team/stencil-sass/issues/406">#406</a>)</li>
<li><a
href="5bbbfb8132"><code>5bbbfb8</code></a>
chore(deps): update node.js to v20.8.0 (<a
href="https://redirect.github.com/ionic-team/stencil-sass/issues/407">#407</a>)</li>
<li><a
href="1f134b0017"><code>1f134b0</code></a>
chore(deps): update dependency rimraf to v5.0.4 (<a
href="https://redirect.github.com/ionic-team/stencil-sass/issues/405">#405</a>)</li>
<li><a
href="d3494c4b93"><code>d3494c4</code></a>
chore(deps): update actions/checkout action to v4.1.0 (<a
href="https://redirect.github.com/ionic-team/stencil-sass/issues/404">#404</a>)</li>
<li><a
href="54a2decde0"><code>54a2dec</code></a>
chore(deps): update dependency terser to v5.20.0 (<a
href="https://redirect.github.com/ionic-team/stencil-sass/issues/403">#403</a>)</li>
<li><a
href="c6598ca45c"><code>c6598ca</code></a>
chore(deps): update node.js to v20.7.0 (<a
href="https://redirect.github.com/ionic-team/stencil-sass/issues/402">#402</a>)</li>
<li><a
href="6ac2191b96"><code>6ac2191</code></a>
chore(deps): update dependency <code>@​stencil/core</code> to v4.3.0 (<a
href="https://redirect.github.com/ionic-team/stencil-sass/issues/401">#401</a>)</li>
<li><a
href="b4d92dbc45"><code>b4d92db</code></a>
chore(deps): update dependency <code>@​stencil/core</code> to v4.2.1 (<a
href="https://redirect.github.com/ionic-team/stencil-sass/issues/400">#400</a>)</li>
<li><a
href="c71a702778"><code>c71a702</code></a>
chore(deps): update node.js to v20.6.1 (<a
href="https://redirect.github.com/ionic-team/stencil-sass/issues/398">#398</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/ionic-team/stencil-sass/compare/v3.0.5...v3.0.6">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@stencil/sass&package-manager=npm_and_yarn&previous-version=3.0.5&new-version=3.0.6)](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>
2023-10-03 15:32:34 +00:00
Sean Perkins
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`
2023-09-28 20:15:46 +00:00
Sean Perkins
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. -->
2023-09-28 16:47:09 +00:00
Liam DeBeasi
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. -->
2023-09-28 16:02:18 +00:00
Liam DeBeasi
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>
2023-09-28 15:03:34 +00:00
Liam DeBeasi
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>
2023-09-28 14:45:10 +00:00
Liam DeBeasi
355d95d4d8 merge release-7.4.2
Release 7.4.2
2023-09-27 09:55:55 -04:00
ionitron
078964447a chore(): update package lock files 2023-09-27 13:32:44 +00:00
ionitron
45bcd4c22b v7.4.2 2023-09-27 13:32:27 +00:00
Liam DeBeasi
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 |
| - | - |
|
![IMG_0182](https://github.com/ionic-team/ionic-framework/assets/2721089/8e09669b-5e76-4736-a1cb-bea87dc25258)
|
![IMG_0183](https://github.com/ionic-team/ionic-framework/assets/2721089/bde88ff1-6024-40ec-99ab-c71e73386dc9)
|

## 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. -->
2023-09-26 16:12:04 +00:00
50 changed files with 748 additions and 193 deletions

View File

@@ -1,4 +1,4 @@
name: "Ionic Dev Build"
name: 'Ionic Dev Build'
on:
workflow_dispatch:
@@ -40,26 +40,3 @@ jobs:
steps:
- run: echo ${{ needs.create-dev-hash.outputs.dev-hash }}
comment-on-pr:
runs-on: ubuntu-latest
needs: [create-dev-hash, release-ionic]
continue-on-error: true
outputs:
pr-number: ${{ steps.PR.outputs.number }}
steps:
- name: Checkout
uses: actions/checkout@v3
- uses: 8BitJonny/gh-get-current-pr@2.2.0
id: PR
- name: Comment on PR
uses: thollander/actions-comment-pull-request@v2
with:
message: |
A dev build has been generated for this PR. To use the dev build, update your Ionic packages to the following version:
```
${{ needs.create-dev-hash.outputs.dev-hash }}
```
pr_number: ${{ steps.PR.outputs.number }}
comment_tag: dev-build

View File

@@ -3,6 +3,30 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
### Bug Fixes
* **fab-button:** position is correct with custom sizes ([#28195](https://github.com/ionic-team/ionic-framework/issues/28195)) ([eb41b55](https://github.com/ionic-team/ionic-framework/commit/eb41b556b57c97139b9c36dc3e3be3711d8afaca)), closes [#22564](https://github.com/ionic-team/ionic-framework/issues/22564)
* **range:** knob positions are correct on initial render with custom elements build ([#28257](https://github.com/ionic-team/ionic-framework/issues/28257)) ([ac2c8e6](https://github.com/ionic-team/ionic-framework/commit/ac2c8e6c22da4d0d8224def24ddef56ee9d26246)), closes [#25444](https://github.com/ionic-team/ionic-framework/issues/25444)
## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
### Bug Fixes
* **react:** Nav unmounts component while invoking popTo or popToRoot ([#27821](https://github.com/ionic-team/ionic-framework/issues/27821)) ([0edcb2c](https://github.com/ionic-team/ionic-framework/commit/0edcb2cd85133ae8c304c53c37ca829e5fbad447)), closes [#27798](https://github.com/ionic-team/ionic-framework/issues/27798)
* **title:** large title uses custom font on transition ([#28231](https://github.com/ionic-team/ionic-framework/issues/28231)) ([71a7af0](https://github.com/ionic-team/ionic-framework/commit/71a7af0f52fe62937b1dea1ca2739e78801a2a6d))
## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)

View File

@@ -3,6 +3,29 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
### Bug Fixes
* **fab-button:** position is correct with custom sizes ([#28195](https://github.com/ionic-team/ionic-framework/issues/28195)) ([eb41b55](https://github.com/ionic-team/ionic-framework/commit/eb41b556b57c97139b9c36dc3e3be3711d8afaca)), closes [#22564](https://github.com/ionic-team/ionic-framework/issues/22564)
* **range:** knob positions are correct on initial render with custom elements build ([#28257](https://github.com/ionic-team/ionic-framework/issues/28257)) ([ac2c8e6](https://github.com/ionic-team/ionic-framework/commit/ac2c8e6c22da4d0d8224def24ddef56ee9d26246)), closes [#25444](https://github.com/ionic-team/ionic-framework/issues/25444)
## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
### Bug Fixes
* **title:** large title uses custom font on transition ([#28231](https://github.com/ionic-team/ionic-framework/issues/28231)) ([71a7af0](https://github.com/ionic-team/ionic-framework/commit/71a7af0f52fe62937b1dea1ca2739e78801a2a6d))
## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)

32
core/package-lock.json generated
View File

@@ -1,15 +1,15 @@
{
"name": "@ionic/core",
"version": "7.4.1",
"version": "7.4.3",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/core",
"version": "7.4.1",
"version": "7.4.3",
"license": "MIT",
"dependencies": {
"@stencil/core": "^4.3.0",
"@stencil/core": "^4.4.0",
"ionicons": "7.1.0",
"tslib": "^2.1.0"
},
@@ -27,7 +27,7 @@
"@rollup/plugin-virtual": "^2.0.3",
"@stencil/angular-output-target": "^0.8.2",
"@stencil/react-output-target": "^0.5.3",
"@stencil/sass": "^3.0.5",
"@stencil/sass": "^3.0.6",
"@stencil/vue-output-target": "^0.8.6",
"@types/jest": "^27.5.2",
"@types/node": "^14.6.0",
@@ -1630,9 +1630,9 @@
}
},
"node_modules/@stencil/core": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
"integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.0.tgz",
"integrity": "sha512-YlLyCqGBsMEuZb3XTO/STT0TX9eSwjoVhCJgtjVfQOF+ebIMVlojTh40CmDveWiWbth687cbr6S2heeussV8Sg==",
"bin": {
"stencil": "bin/stencil"
},
@@ -1651,9 +1651,9 @@
}
},
"node_modules/@stencil/sass": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.5.tgz",
"integrity": "sha512-9nyllMXOEvHywo6fP2iwXgnq32A+OOUE36Aq7iUjzwT3wdr04qsvupO1JNIyRvmvCDF15hOKXztrZH1/wDu2Zg==",
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.6.tgz",
"integrity": "sha512-d+k8qCvDgzI/vIV7M5QavIS6b75X4yn+YQH80KA/L0oL/hKD8KeF3wMOd7P1nDhGLIGRNw5tBDbe0GeIsGVU7A==",
"dev": true,
"engines": {
"node": ">=12.0.0",
@@ -11536,9 +11536,9 @@
"requires": {}
},
"@stencil/core": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
"integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.0.tgz",
"integrity": "sha512-YlLyCqGBsMEuZb3XTO/STT0TX9eSwjoVhCJgtjVfQOF+ebIMVlojTh40CmDveWiWbth687cbr6S2heeussV8Sg=="
},
"@stencil/react-output-target": {
"version": "0.5.3",
@@ -11548,9 +11548,9 @@
"requires": {}
},
"@stencil/sass": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.5.tgz",
"integrity": "sha512-9nyllMXOEvHywo6fP2iwXgnq32A+OOUE36Aq7iUjzwT3wdr04qsvupO1JNIyRvmvCDF15hOKXztrZH1/wDu2Zg==",
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.6.tgz",
"integrity": "sha512-d+k8qCvDgzI/vIV7M5QavIS6b75X4yn+YQH80KA/L0oL/hKD8KeF3wMOd7P1nDhGLIGRNw5tBDbe0GeIsGVU7A==",
"dev": true,
"requires": {}
},

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/core",
"version": "7.4.1",
"version": "7.4.3",
"description": "Base components for Ionic",
"keywords": [
"ionic",
@@ -31,7 +31,7 @@
"loader/"
],
"dependencies": {
"@stencil/core": "^4.3.0",
"@stencil/core": "^4.4.0",
"ionicons": "7.1.0",
"tslib": "^2.1.0"
},
@@ -49,7 +49,7 @@
"@rollup/plugin-virtual": "^2.0.3",
"@stencil/angular-output-target": "^0.8.2",
"@stencil/react-output-target": "^0.5.3",
"@stencil/sass": "^3.0.5",
"@stencil/sass": "^3.0.6",
"@stencil/vue-output-target": "^0.8.6",
"@types/jest": "^27.5.2",
"@types/node": "^14.6.0",
@@ -95,6 +95,7 @@
"test.spec": "stencil test --spec --max-workers=2",
"test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec",
"test.e2e": "npx playwright test",
"test.e2e.update-snapshots": "npm run test.e2e -- --update-snapshots",
"test.watch": "jest --watch --no-cache",
"test.treeshake": "node scripts/treeshaking.js dist/index.js",
"validate": "npm run lint && npm run test && npm run build && npm run test.treeshake"

View File

@@ -199,7 +199,7 @@
// --------------------------------------------------
:host(.fab-button-small) {
@include margin(($fab-size - $fab-small-size) * 0.5);
@include margin($fab-button-small-margin);
width: #{$fab-small-size};
height: #{$fab-small-size};

View File

@@ -11,3 +11,6 @@ $fab-small-size: 40px !default;
/// @prop - Border radius of the FAB button
$fab-border-radius: 50% !default;
/// @prop - Margin applied to the small FAB button
$fab-button-small-margin: 8px !default;

View File

@@ -4,7 +4,7 @@
// --------------------------------------------------
:host {
@include margin($fab-size + $fab-list-margin, 0);
@include margin(calc(100% + #{$fab-list-margin}), 0);
display: none;
position: absolute;
@@ -13,8 +13,15 @@
flex-direction: column;
align-items: center;
min-width: $fab-size;
min-height: $fab-size;
/**
* The list should be centered relative to the parent
* FAB button. We set minimum dimensions so the
* FAB list can be centered relative to the small FAB button.
* However, the small FAB button adds start/end margin, so we need
* to account for that in the FAB list dimensions.
*/
min-width: $fab-small-size + ($fab-button-small-margin * 2);
min-height: $fab-small-size + ($fab-button-small-margin * 2);
}
:host(.fab-list-active) {
@@ -59,14 +66,14 @@
}
:host(.fab-list-side-start) {
@include margin(0, $fab-size + $fab-list-margin);
@include margin(0, calc(100% + #{$fab-list-margin}));
@include position-horizontal(null, 0);
flex-direction: row-reverse;
}
:host(.fab-list-side-end) {
@include margin(0, $fab-size + $fab-list-margin);
@include margin(0, calc(100% + #{$fab-list-margin}));
@include position(null, null, null, 0);
flex-direction: row;

View File

@@ -1,4 +1,5 @@
@import "./fab.vars";
@import "../fab-list/fab-list.vars";
// Floating Action Button Container
// --------------------------------------------------
@@ -6,6 +7,9 @@
:host {
position: absolute;
width: fit-content;
height: fit-content;
z-index: $z-index-fixed-content;
}
@@ -14,8 +18,8 @@
// --------------------------------------------------
:host(.fab-horizontal-center) {
@include position(null, null, null, 50%);
@include margin-horizontal(-$fab-size * 0.5, null);
@include position(null, 0px, null, 0px);
@include margin(null, auto);
}
:host(.fab-horizontal-start) {
@@ -38,22 +42,93 @@
top: $fab-content-margin;
}
/**
* Reset the top value since edge
* styles use margin-top.
*/
:host(.fab-vertical-top.fab-edge) {
top: -$fab-size * 0.5;
top: 0;
}
/**
* We need to adjust the parent FAB button up by half
* its height so that half of it sits on the header. As a result,
* we target the slotted ion-fab-button instead of targeting the host.
*/
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button) {
margin-top: -50%;
}
/**
* The small FAB button adds top and bottom margin. We need to account for
* that margin when we adjust the FAB button for edge styles since we
* are overriding the margin-top value below.
*/
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button.fab-button-small) {
margin-top: calc((-100% + $fab-button-small-margin * 2) / 2);
}
/**
* Since we are adjusting the FAB button we also need
* to adjust the sibling ion-fab-list otherwise there will be
* a gap between the parent FAB button and the associated list.
*/
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-end) {
@include margin(-50%, null, null, null);
}
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom) {
@include margin(calc(50% + #{$fab-list-margin}) null, null, null);
}
:host(.fab-vertical-bottom) {
bottom: $fab-content-margin;
}
/**
* Reset the bottom value since edge
* styles use margin-bottom.
*/
:host(.fab-vertical-bottom.fab-edge) {
bottom: -$fab-size * 0.5;
bottom: 0;
}
/**
* We need to adjust the parent FAB button down by half
* its height so that half of it sits on the footer. As a result,
* we target the slotted ion-fab-button instead of targeting the host.
*/
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button) {
margin-bottom: -50%;
}
/**
* The small FAB button adds top and bottom margin. We need to account for
* that margin when we adjust the FAB button for edge styles since we
* are overriding the margin-bottom value below.
*/
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button.fab-button-small) {
margin-bottom: calc((-100% + $fab-button-small-margin * 2) / 2);
}
/**
* Since we are adjusting the FAB button we also need
* to adjust the sibling ion-fab-list otherwise there will be
* a gap between the parent FAB button and the associated list.
*/
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-end) {
@include margin(null, null, -50%, null);
}
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom) {
@include margin(null, null, calc(50% + #{$fab-list-margin}) null);
}
:host(.fab-vertical-center) {
@include margin(-$fab-size * 0.5, null, null, null);
top: 50%;
@include position(0px, null, 0px, null);
@include margin(auto, null);
}

View File

@@ -0,0 +1,17 @@
import { expect } from '@playwright/test';
import { configs, test, Viewports } from '@utils/test/playwright';
/**
* This behavior does not vary across modes
*/
configs({ modes: ['ios'] }).forEach(({ title, config, screenshot }) => {
test.describe(title('fab: custom size'), () => {
test('should position fabs correctly with custom sizes', async ({ page }) => {
await page.goto(`/src/components/fab/test/custom-size`, config);
await page.setViewportSize(Viewports.tablet.landscape);
await expect(page).toHaveScreenshot(screenshot(`fab-custom-size`));
});
});
});

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

View File

@@ -0,0 +1,241 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Floating Action Button - Custom Size</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
.ruler-y {
height: 100%;
width: 1px;
background: red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
z-index: 10000;
}
.ruler-x {
height: 1px;
width: 100%;
background: red;
position: absolute;
top: 50%;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
z-index: 10000;
transform: translateY(-50%);
}
ion-fab-button {
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Floating Action Button - Custom Size</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding" id="content">
<div class="ruler-y"></div>
<div class="ruler-x"></div>
<ion-fab vertical="top" horizontal="start" slot="fixed" edge="true">
<ion-fab-button activated="true">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
<ion-fab-list side="bottom" activated="true">
<ion-fab-button show="true">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end" activated="true">
<ion-fab-button show="true">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab vertical="top" horizontal="end" slot="fixed" edge="true">
<ion-fab-button activated="true">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
<ion-fab-list side="start" activated="true">
<ion-fab-button show="true">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="bottom" activated="true">
<ion-fab-button show="true">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab vertical="bottom" horizontal="start" slot="fixed" edge="true">
<ion-fab-button activated="true">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
<ion-fab-list side="top" activated="true">
<ion-fab-button show="true">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end" activated="true">
<ion-fab-button show="true">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab vertical="bottom" horizontal="end" slot="fixed" edge="true">
<ion-fab-button activated="true">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
<ion-fab-list side="start" activated="true">
<ion-fab-button show="true">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="top" activated="true">
<ion-fab-button show="true">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab vertical="center" horizontal="center" slot="fixed">
<ion-fab-button activated="true">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
<ion-fab-list side="start" activated="true">
<ion-fab-button show="true">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="top" activated="true">
<ion-fab-button show="true">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="bottom" activated="true">
<ion-fab-button show="true">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end" activated="true">
<ion-fab-button show="true">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button show="true">
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Floating Action Button - Basic</ion-title>
</ion-toolbar>
</ion-footer>
</ion-app>
</body>
</html>

View File

@@ -39,7 +39,7 @@ export async function testPickerColumn(
await page.waitForChanges();
screenshots.push({
name: `picker-${description}-column-diff-${i}-${page.getSnapshotSettings()}.png`,
name: screenshot(`picker-${description}-column-diff-${i}`),
screenshot: await page.screenshot(),
});
}

View File

@@ -319,6 +319,7 @@ export class Range implements ComponentInterface {
componentDidLoad() {
this.originalIonInput = this.ionInput;
this.setupGesture();
this.updateRatio();
this.didLoad = true;
}

View File

@@ -61,6 +61,7 @@
:host(.title-large.ion-cloned-element) {
--color: #{$text-color};
font-family: var(--ion-font-family);
}
:host(.title-large) .toolbar-title {

View File

@@ -6,5 +6,6 @@ This directory contains information on how to get the most out of Ionic's E2E te
| Directory | Description |
| - | - |
| [Usage Instructions](./usage-instructions.md) | How to run tests and update screenshots |
| [Best Practices](./best-practices.md) | Contains information on conventions to follow as well as pitfalls to avoid when writing tests |
| [API](./api.md) | Documents the custom functionality that has been built on top of Playwright |

View File

@@ -108,7 +108,6 @@ The [page fixture](https://playwright.dev/docs/test-fixtures) has been extended
| `setIonViewport` | Resizes the browser window to fit the entire height of `ion-content` on screen. Only needed when taking fullsize screenshots with `ion-content`. |
| `waitForChanges` | Waits for Stencil to re-render before proceeeding. This is typically only needed when you update a property on a component. |
| `spyOnEvent` | Creates an event spy that can be used to wait for a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) to be emitted. |
| `getSnapshotSettings` (DEPRECATED) | Returns information about the current test (such as mode or direction) to generate a unique screenshot name. Deprecated: Use the `screenshot` function provided by the test [generator](#generators) instead. |
<details>

View File

@@ -0,0 +1,114 @@
# Usage Instructions
E2E tests verify Ionic components in a real browser. This is useful for testing user interaction and catching visual regressions. We use Playwright as it allows us to test in multiple browsers. Tests can be written and run using Playwright's public API.
## Table of Contents
- [Installing Dependencies](#installing-dependencies)
- [Running Tests](#running-tests)
- [Managing Screenshots](#managing-screenshots)
- [Further Reading](#further-reading)
## Installing Dependencies
Follow these steps to install Playwright dependencies. These steps must also be run whenever the installed version of Playwright changes to ensure that you are testing with the correct browser binaries.
1. Install the Playwright dependency in the `core` directory: `npm ci`
2. Download the correct browsers: `npx playwright install`
## Running Tests
### Running All Test Files
All E2E tests can be run using the following command:
```shell
npm run test.e2e
```
> [!NOTE]
> This command is a wrapper for `npx playwright test`. All data passed to `npm run test.e2e` can also be passed to `npx playwright test`.
### Running Specific Test Files
Specific test files can be run by passing the file paths or a directory that contains multiple test files. See [Managing Screenshots](#managing-screenshots) for generating ground truths before running screenshot tests.
**Specific Test Files**
```shell
npm run test.e2e src/components/button/test/basic/button.e2e.ts src/components/button/test/a11y/button.e2e.ts
```
**Test Directory with Multiple Files**
```shell
# Will run all the test files in the `test` directory
npm run test.e2e src/components/button/test
```
## Managing Screenshots
### Generating or Updating Ground Truths (Local Development)
If you are running a test that takes a screenshot, you must first generate the reference screenshot from your reference branch. This is known as generating a "ground truth screenshot". All other screenshots will be compared to this ground truth. Alternatively, if the reference branch has changed since the last time you generated ground truths you may need to update your local ground truths.
For most types of work the reference branch is typically `main`. Features are merged into a different branch, so developers should use that as the reference branch. For example, if branch `foo` will be merged into `bar`, then the reference branch is `bar`.
The examples provided in the [Running Tests](#running-tests) section also apply here, allowing you to update screenshots for a specific test file.
Note that since you are generating the reference branch ground truth screenshots, you must be on the reference branch locally. Don't forget to pull the latest reference branch changes and then re-build using `npm run build`.
```shell
npm run test.e2e.update-snapshots
```
Optionally, you can pass a directory to only update the ground truths for that directory & subdirectories. This is useful when working on a specific component.
```shell
npm run test.e2e.update-snapshots src/components/alert/
```
From here, you can switch back to your branch and run the tests.
> [!NOTE]
> Locally generated ground truths should not be committed to the repo. The `.gitignore` file prevents this from accidentally happening.
### Updating Ground Truths (CI)
> [!IMPORTANT]
> Only Ionic Team members can update ground truths on the main repo. Ground truths cannot be updated on forked versions of the repo.
When making an intentional visual change, you will need to update the ground truth screenshots or add new ones. It is important that the ground truth and comparison screenshots are taken in the same environment, so do not update the ground truth screenshots locally and commit them to the repo.
Instead, use the [Update Reference Screenshots GitHub Action](https://github.com/ionic-team/ionic-framework/actions/workflows/update-screenshots.yml).
1. Click the **Run workflow** dropdown.
2. Select your branch.
3. Click **Run workflow**.
This workflow will re-run the screenshot tests. Instead of failing any tests with mismatched screenshots, it will take new ground truth screenshots. These ground truth screenshots will be pushed as a single commit to your branch once the workflow is completed.
### Verifying Screenshot Differences
When any of the screenshot tests fail, it means a potential regression was caught. Developers must manually verify the difference in the Playwright test report.
If the screenshots fail on CI then developers must download the build artifact. On the **Summary** page for a particular workflow, find the **Artifacts** section. Screenshot tests are currently parallelized across several test runners, and the results from each of those runners is included in an artifact with the following naming scheme:
```
test-results-[current shard]-[total shards]
Example:
test-results-2-5 --> Test results from job runner 2 out of 5.
```
Download the appropriate artifact and unzip the file.
In the newly created directory, open the `playwright-report/index.html` in your browser. From here, you will be able to see the tests that failed as well as the expected screenshot, the actual screenshot, and the pixel differences.
> [!WARNING]
> It is recommended to verify the screenshot difference within the Playwright test report first. If you choose to try and reproduce the difference in a browser manually, make sure you are using the **exact** same browser version that Playwright is using.
## Further Reading
For more info on how to use Playwright, please see the [Playwright documentation](https://playwright.dev/docs/intro).

View File

@@ -1,33 +0,0 @@
import type { Page, TestInfo } from '@playwright/test';
/**
* This provides metadata that can be used to
* create a unique screenshot URL.
* For example, we need to be able to differentiate
* between iOS in LTR mode and iOS in RTL mode.
*/
export const getSnapshotSettings = (page: Page, testInfo: TestInfo) => {
const url = page.url();
const splitUrl = url.split('?');
const paramsString = splitUrl[1];
const { mode, rtl } = testInfo.project.metadata;
/**
* Account for custom settings when overriding
* the mode/rtl setting. Fall back to the
* project metadata if nothing was found. This
* will happen if you call page.getSnapshotSettings
* before page.goto.
*/
const urlToParams = new URLSearchParams(paramsString);
const formattedMode = urlToParams.get('ionic:mode') ?? mode;
const formattedRtl = urlToParams.get('rtl') ?? rtl;
/**
* If encoded in the search params, the rtl value
* can be `'true'` instead of `true`.
*/
const rtlString = formattedRtl === true || formattedRtl === 'true' ? 'rtl' : 'ltr';
return `${formattedMode}-${rtlString}`;
};

View File

@@ -1,6 +1,5 @@
export * from './wait-for-changes';
export * from './goto';
export * from './get-snapshot-settings';
export * from './set-ion-viewport';
export * from './spy-on-event';
export * from './set-content';

View File

@@ -78,11 +78,6 @@ export interface E2EPage extends Page {
* Use this method when taking full-screen screenshots.
*/
setIonViewport: (options?: SetIonViewportOptions) => Promise<void>;
/**
* This provides metadata that can be used to create a unique screenshot URL.
* For example, we need to be able to differentiate between iOS in LTR mode and iOS in RTL mode.
*/
getSnapshotSettings: () => string;
/**
* After changes have been made to a component, such as an update to a property or attribute,
* we need to wait until the changes have been applied to the DOM.

View File

@@ -10,15 +10,7 @@ import { test as base } from '@playwright/test';
import { PageUtils } from '../press-keys';
import { initPageEvents } from './page/event-spy';
import {
getSnapshotSettings,
goto as goToPage,
setContent,
setIonViewport,
spyOnEvent,
waitForChanges,
locator,
} from './page/utils';
import { goto as goToPage, setContent, setIonViewport, spyOnEvent, waitForChanges, locator } from './page/utils';
import type { LocatorOptions } from './page/utils';
import type {
E2EPage,
@@ -57,7 +49,6 @@ export async function extendPageFixture(page: E2EPage, testInfo: TestInfo) {
page.locator = (selector: string, options?: LocatorOptions) => locator(page, originalLocator, selector, options);
// Custom Ionic methods
page.getSnapshotSettings = () => getSnapshotSettings(page, testInfo);
page.setIonViewport = (options?: SetIonViewportOptions) => setIonViewport(page, options);
page.waitForChanges = (timeoutMs?: number) => waitForChanges(page, timeoutMs);
page.spyOnEvent = (eventName: string) => spyOnEvent(page, eventName);

View File

@@ -4,6 +4,10 @@ export const Viewports = {
width: 768,
height: 900,
},
landscape: {
width: 900,
height: 768,
},
},
// Based off https://github.com/ionic-team/ionic-framework/blob/2fe23d9d46c3593843c781c57340332e5a86fd64/core/src/components/split-pane/split-pane.tsx#L9-L13
large: {

View File

@@ -3,6 +3,22 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
**Note:** Version bump only for package @ionic/docs
## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
**Note:** Version bump only for package @ionic/docs
## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
**Note:** Version bump only for package @ionic/docs

View File

@@ -1,12 +1,12 @@
{
"name": "@ionic/docs",
"version": "7.4.1",
"version": "7.4.3",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/docs",
"version": "7.4.1",
"version": "7.4.3",
"license": "MIT"
}
}

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/docs",
"version": "7.4.1",
"version": "7.4.3",
"description": "Pre-packaged API documentation for the Ionic docs.",
"main": "core.json",
"types": "core.d.ts",

View File

@@ -4,5 +4,5 @@
"docs",
"packages/*"
],
"version": "7.4.1"
"version": "7.4.3"
}

View File

@@ -3,6 +3,22 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
**Note:** Version bump only for package @ionic/angular-server
## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
**Note:** Version bump only for package @ionic/angular-server
## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
**Note:** Version bump only for package @ionic/angular-server

View File

@@ -1,15 +1,15 @@
{
"name": "@ionic/angular-server",
"version": "7.4.1",
"version": "7.4.3",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/angular-server",
"version": "7.4.1",
"version": "7.4.3",
"license": "MIT",
"dependencies": {
"@ionic/core": "^7.4.1"
"@ionic/core": "^7.4.3"
},
"devDependencies": {
"@angular-eslint/eslint-plugin": "^14.0.0",
@@ -1060,9 +1060,9 @@
"dev": true
},
"node_modules/@ionic/core": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
"integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"dependencies": {
"@stencil/core": "^4.3.0",
"ionicons": "7.1.0",
@@ -7342,9 +7342,9 @@
"dev": true
},
"@ionic/core": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
"integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"requires": {
"@stencil/core": "^4.3.0",
"ionicons": "7.1.0",

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/angular-server",
"version": "7.4.1",
"version": "7.4.3",
"description": "Angular SSR Module for Ionic",
"keywords": [
"ionic",
@@ -61,6 +61,6 @@
},
"prettier": "@ionic/prettier-config",
"dependencies": {
"@ionic/core": "^7.4.1"
"@ionic/core": "^7.4.3"
}
}

View File

@@ -3,6 +3,22 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
**Note:** Version bump only for package @ionic/angular
## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
**Note:** Version bump only for package @ionic/angular
## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
**Note:** Version bump only for package @ionic/angular

View File

@@ -1,15 +1,15 @@
{
"name": "@ionic/angular",
"version": "7.4.1",
"version": "7.4.3",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/angular",
"version": "7.4.1",
"version": "7.4.3",
"license": "MIT",
"dependencies": {
"@ionic/core": "^7.4.1",
"@ionic/core": "^7.4.3",
"ionicons": "^7.0.0",
"jsonc-parser": "^3.0.0",
"tslib": "^2.3.0"
@@ -1227,9 +1227,9 @@
"dev": true
},
"node_modules/@ionic/core": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
"integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"dependencies": {
"@stencil/core": "^4.3.0",
"ionicons": "7.1.0",
@@ -8104,9 +8104,9 @@
"dev": true
},
"@ionic/core": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
"integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"requires": {
"@stencil/core": "^4.3.0",
"ionicons": "7.1.0",

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/angular",
"version": "7.4.1",
"version": "7.4.3",
"description": "Angular specific wrappers for @ionic/core",
"keywords": [
"ionic",
@@ -47,7 +47,7 @@
}
},
"dependencies": {
"@ionic/core": "^7.4.1",
"@ionic/core": "^7.4.3",
"ionicons": "^7.0.0",
"jsonc-parser": "^3.0.0",
"tslib": "^2.3.0"

View File

@@ -3,6 +3,22 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
**Note:** Version bump only for package @ionic/react-router
## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
**Note:** Version bump only for package @ionic/react-router
## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
**Note:** Version bump only for package @ionic/react-router

View File

@@ -1,15 +1,15 @@
{
"name": "@ionic/react-router",
"version": "7.4.1",
"version": "7.4.3",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/react-router",
"version": "7.4.1",
"version": "7.4.3",
"license": "MIT",
"dependencies": {
"@ionic/react": "^7.4.1",
"@ionic/react": "^7.4.3",
"tslib": "*"
},
"devDependencies": {
@@ -205,9 +205,9 @@
"dev": true
},
"node_modules/@ionic/core": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
"integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"dependencies": {
"@stencil/core": "^4.3.0",
"ionicons": "7.1.0",
@@ -401,11 +401,11 @@
}
},
"node_modules/@ionic/react": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.4.1.tgz",
"integrity": "sha512-9ByyybeNJfchPCk7tz8/beKarjzF1yG7KZS1s2DMyUSFt7x2y3F3v6WrwG0xQgoYLNJYJIPmR+CKc/4eQeMbXA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.4.2.tgz",
"integrity": "sha512-lU6rVunrEQhpgC4ftEzqNC30c8U2PQTQivzwDSkd2y/WsJSCzYyG/+ZHhACSWfa4dbGZizOHdFCWsnAjZjDJFw==",
"dependencies": {
"@ionic/core": "7.4.1",
"@ionic/core": "7.4.2",
"ionicons": "^7.0.0",
"tslib": "*"
},
@@ -3663,9 +3663,9 @@
"dev": true
},
"@ionic/core": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
"integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"requires": {
"@stencil/core": "^4.3.0",
"ionicons": "7.1.0",
@@ -3786,11 +3786,11 @@
"requires": {}
},
"@ionic/react": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.4.1.tgz",
"integrity": "sha512-9ByyybeNJfchPCk7tz8/beKarjzF1yG7KZS1s2DMyUSFt7x2y3F3v6WrwG0xQgoYLNJYJIPmR+CKc/4eQeMbXA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.4.2.tgz",
"integrity": "sha512-lU6rVunrEQhpgC4ftEzqNC30c8U2PQTQivzwDSkd2y/WsJSCzYyG/+ZHhACSWfa4dbGZizOHdFCWsnAjZjDJFw==",
"requires": {
"@ionic/core": "7.4.1",
"@ionic/core": "7.4.2",
"ionicons": "^7.0.0",
"tslib": "*"
}

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/react-router",
"version": "7.4.1",
"version": "7.4.3",
"description": "React Router wrapper for @ionic/react",
"keywords": [
"ionic",
@@ -37,7 +37,7 @@
"dist/"
],
"dependencies": {
"@ionic/react": "^7.4.1",
"@ionic/react": "^7.4.3",
"tslib": "*"
},
"peerDependencies": {

View File

@@ -3,6 +3,25 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
**Note:** Version bump only for package @ionic/react
## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
### Bug Fixes
* **react:** Nav unmounts component while invoking popTo or popToRoot ([#27821](https://github.com/ionic-team/ionic-framework/issues/27821)) ([0edcb2c](https://github.com/ionic-team/ionic-framework/commit/0edcb2cd85133ae8c304c53c37ca829e5fbad447)), closes [#27798](https://github.com/ionic-team/ionic-framework/issues/27798)
## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
**Note:** Version bump only for package @ionic/react

View File

@@ -1,15 +1,15 @@
{
"name": "@ionic/react",
"version": "7.4.1",
"version": "7.4.3",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/react",
"version": "7.4.1",
"version": "7.4.3",
"license": "MIT",
"dependencies": {
"@ionic/core": "^7.4.1",
"@ionic/core": "^7.4.3",
"ionicons": "^7.0.0",
"tslib": "*"
},
@@ -697,9 +697,9 @@
"dev": true
},
"node_modules/@ionic/core": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
"integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"dependencies": {
"@stencil/core": "^4.3.0",
"ionicons": "7.1.0",
@@ -11778,9 +11778,9 @@
"dev": true
},
"@ionic/core": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
"integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"requires": {
"@stencil/core": "^4.3.0",
"ionicons": "7.1.0",

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/react",
"version": "7.4.1",
"version": "7.4.3",
"description": "React specific wrapper for @ionic/core",
"keywords": [
"ionic",
@@ -41,7 +41,7 @@
"css/"
],
"dependencies": {
"@ionic/core": "^7.4.1",
"@ionic/core": "^7.4.3",
"ionicons": "^7.0.0",
"tslib": "*"
},

View File

@@ -3,6 +3,22 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
**Note:** Version bump only for package @ionic/vue-router
## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
**Note:** Version bump only for package @ionic/vue-router
## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
**Note:** Version bump only for package @ionic/vue-router

View File

@@ -1,15 +1,15 @@
{
"name": "@ionic/vue-router",
"version": "7.4.1",
"version": "7.4.3",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/vue-router",
"version": "7.4.1",
"version": "7.4.3",
"license": "MIT",
"dependencies": {
"@ionic/vue": "^7.4.1"
"@ionic/vue": "^7.4.3"
},
"devDependencies": {
"@ionic/eslint-config": "^0.3.0",
@@ -660,9 +660,9 @@
"dev": true
},
"node_modules/@ionic/core": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
"integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"dependencies": {
"@stencil/core": "^4.3.0",
"ionicons": "7.1.0",
@@ -871,11 +871,11 @@
}
},
"node_modules/@ionic/vue": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.4.1.tgz",
"integrity": "sha512-yHmpBG69j+CCE7vpa6zyQ38vCMx68U/UZ90MAUPRYSvpCXGx0714YbSZ68S1JDU5bwz8h0Gv/zOfm/JWcYwzOA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.4.2.tgz",
"integrity": "sha512-zNYq40mJV2Gp0MBtllgEJXPxdvY9F3JYEhyfH6cn8xPOfhBz0pcSa5cMb8UcBql/Ut4LEEv0zaPLJ5KrP0hYiw==",
"dependencies": {
"@ionic/core": "7.4.1",
"@ionic/core": "7.4.2",
"ionicons": "^7.0.0"
}
},
@@ -7697,9 +7697,9 @@
"dev": true
},
"@ionic/core": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
"integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"requires": {
"@stencil/core": "^4.3.0",
"ionicons": "7.1.0",
@@ -7829,11 +7829,11 @@
"requires": {}
},
"@ionic/vue": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.4.1.tgz",
"integrity": "sha512-yHmpBG69j+CCE7vpa6zyQ38vCMx68U/UZ90MAUPRYSvpCXGx0714YbSZ68S1JDU5bwz8h0Gv/zOfm/JWcYwzOA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.4.2.tgz",
"integrity": "sha512-zNYq40mJV2Gp0MBtllgEJXPxdvY9F3JYEhyfH6cn8xPOfhBz0pcSa5cMb8UcBql/Ut4LEEv0zaPLJ5KrP0hYiw==",
"requires": {
"@ionic/core": "7.4.1",
"@ionic/core": "7.4.2",
"ionicons": "^7.0.0"
}
},

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/vue-router",
"version": "7.4.1",
"version": "7.4.3",
"description": "Vue Router integration for @ionic/vue",
"scripts": {
"test.spec": "jest",
@@ -45,7 +45,7 @@
},
"homepage": "https://github.com/ionic-team/ionic#readme",
"dependencies": {
"@ionic/vue": "^7.4.1"
"@ionic/vue": "^7.4.3"
},
"devDependencies": {
"@ionic/eslint-config": "^0.3.0",

View File

@@ -3,6 +3,22 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
**Note:** Version bump only for package @ionic/vue
## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
**Note:** Version bump only for package @ionic/vue
## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
**Note:** Version bump only for package @ionic/vue

View File

@@ -1,15 +1,15 @@
{
"name": "@ionic/vue",
"version": "7.4.1",
"version": "7.4.3",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/vue",
"version": "7.4.1",
"version": "7.4.3",
"license": "MIT",
"dependencies": {
"@ionic/core": "^7.4.1",
"@ionic/core": "^7.4.3",
"ionicons": "^7.0.0"
},
"devDependencies": {
@@ -207,9 +207,9 @@
"dev": true
},
"node_modules/@ionic/core": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
"integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"dependencies": {
"@stencil/core": "^4.3.0",
"ionicons": "7.1.0",
@@ -3746,9 +3746,9 @@
"dev": true
},
"@ionic/core": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.1.tgz",
"integrity": "sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA==",
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"requires": {
"@stencil/core": "^4.3.0",
"ionicons": "7.1.0",

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/vue",
"version": "7.4.1",
"version": "7.4.3",
"description": "Vue specific wrapper for @ionic/core",
"scripts": {
"eslint": "eslint src",
@@ -66,7 +66,7 @@
"vue-router": "^4.0.16"
},
"dependencies": {
"@ionic/core": "^7.4.1",
"@ionic/core": "^7.4.3",
"ionicons": "^7.0.0"
},
"vetur": {