mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 14:19:17 +08:00
4302 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
| e75fa582c4 |
fix(header, footer): resolve CSP violations with box shadow (#27560)
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 `ion-header` and `ion-footer` use a base64 encoded image for a box shadow instead of using the CSS box-shadow property directly. The use of the background image creates CSP violations. The historic reasoning of using an image instead of box shadow was to improve scroll performance. Browsers and devices have improved a lot since that was implemented (5 years ago). ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updates the usage of `ion-header` and `ion-footer` to use a box shadow. The value comes from Material's web implementation: https://material-components.github.io/material-components-web-catalog/#/component/top-app-bar ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| cb013df7f5 |
chore(deps-dev): Bump @stencil/vue-output-target from 0.8.5 to 0.8.6 in /core (#27607)
Bumps [@stencil/vue-output-target](https://github.com/ionic-team/stencil-ds-output-targets) from 0.8.5 to 0.8.6. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/stencil-ds-output-targets/releases"><code>@stencil/vue-output-target</code>'s releases</a>.</em></p> <blockquote> <h2><code>@stencil/vue-output-target</code><a href="https://github.com/0"><code>@0</code></a>.8.6</h2> <h2>What's Changed</h2> <ul> <li>Configure Renovate by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-ds-output-targets/pull/343">ionic-team/stencil-ds-output-targets#343</a></li> <li>chore(peerDeps): bumping the <code>@stencil/core</code> required peerDep for v4 launch by <a href="https://github.com/JessicaSachs"><code>@JessicaSachs</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-ds-output-targets/pull/346">ionic-team/stencil-ds-output-targets#346</a></li> <li>chore(npm): manually bumping the package versions by <a href="https://github.com/JessicaSachs"><code>@JessicaSachs</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-ds-output-targets/pull/349">ionic-team/stencil-ds-output-targets#349</a></li> </ul> <h2>New Contributors</h2> <ul> <li><a href="https://github.com/renovate"><code>@renovate</code></a> made their first contribution in <a href="https://redirect.github.com/ionic-team/stencil-ds-output-targets/pull/343">ionic-team/stencil-ds-output-targets#343</a></li> </ul> <p><strong>Full Changelog</strong>: <a href="https://github.com/ionic-team/stencil-ds-output-targets/compare/@stencil/angular-output-target@0.7.0...@stencil/vue-output-target@0.8.6">https://github.com/ionic-team/stencil-ds-output-targets/compare/<code>@stencil/angular-output-target</code><code>@0.7.0...</code><code>@stencil/vue-output-target</code><code>@0.8.6</code></a></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/ionic-team/stencil-ds-output-targets/commits/@stencil/vue-output-target@0.8.6">compare view</a></li> </ul> </details> <br /> [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot 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> |
|||
| 2070de7047 |
chore(deps): Bump @stencil/core from 3.3.0 to 3.3.1 in /core (#27608)
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 3.3.0 to 3.3.1. <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>🎀 3.3.1 (2023-06-02)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>compiler:</strong> handle ts 5.0 static members (<a href="https://redirect.github.com/ionic-team/stencil/issues/4447">#4447</a>) (<a href=" |
|||
| d4e1388fcb |
Revert "fix(select): prevent click event from firing twice" (#27609)
Reverts ionic-team/ionic-framework#27570 ------- The team is reconsidering this approach as it causes us to fight against the browser. Discussions are ongoing internally, so I am going to revert this patch until we can reach consensus. |
|||
| 5123981269 |
chore(deps-dev): Bump @stencil/angular-output-target from 0.7.0 to 0.7.1 in /core (#27591)
Bumps [@stencil/angular-output-target](https://github.com/ionic-team/stencil-ds-output-targets) from 0.7.0 to 0.7.1. <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/ionic-team/stencil-ds-output-targets/commits">compare view</a></li> </ul> </details> <br /> [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot 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> |
|||
| f2c1845fba |
feat(datetime): add shadow parts and CSS variables for styling wheel pickers (#27529)
Issue number: resolves #25945 --------- <!-- 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. --> Datetime wheel pickers cannot be styled. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Adds styling APIs in accordance with the Wheel Pickers and Time Picker sections of [this design doc](https://github.com/ionic-team/ionic-framework-design-documents/blob/main/projects/ionic-framework/components/datetime/datetime-styling.md). Shadow parts added: - `wheel-item` - `wheel-item active` - `time-button` - `time-button active` CSS properties added: - `--wheel-highlight-background` - `--wheel-fade-background-rgb` ## 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.0.7-dev.11685554390.10c2ca9b` Docs PR: https://github.com/ionic-team/ionic-docs/pull/2982 |
|||
| b2a226ae66 |
fix(item-sliding): refresh sliding behavior when options are added or removed asynchronously (#27572)
Issue number: resolves #25578 --------- <!-- 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. --> If `ion-item-option`s are added or removed from an `ion-item-sliding` asyncronously/after it has initialized, the sliding behavior of the item will not update. If options are added to an item that didn't have any, the item will not be openable. If all options are removed, the item will still be openable, though no options will render. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> The item now re-checks its options when it detects that any have been added or removed, using the same utility/behavior as `ion-select`. ## 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. --> |
|||
| 94347ac3a9 |
chore(deps-dev): Bump @stencil/react-output-target from 0.5.0 to 0.5.1 in /core (#27593)
Bumps [@stencil/react-output-target](https://github.com/ionic-team/stencil-ds-output-targets) from 0.5.0 to 0.5.1. <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/ionic-team/stencil-ds-output-targets/commits">compare view</a></li> </ul> </details> <br /> [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot 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> |
|||
| 2105ef42f7 |
chore(deps-dev): Bump @playwright/test from 1.34.1 to 1.34.3 in /core (#27576)
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from 1.34.1 to 1.34.3. <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.34.3</h2> <h2>Highlights</h2> <p><a href="https://redirect.github.com/microsoft/playwright/issues/23228">microsoft/playwright#23228</a> - [BUG] Getting "Please install <code>@playwright/test</code> package..." after upgrading from 1.34.0 to 1.34.1</p> <h2>Browser Versions</h2> <ul> <li>Chromium 114.0.5735.26</li> <li>Mozilla Firefox 113.0</li> <li>WebKit 16.4</li> </ul> <p>This version was also tested against the following stable channels:</p> <ul> <li>Google Chrome 113</li> <li>Microsoft Edge 113</li> </ul> <h2>v1.34.2</h2> <h2>Highlights</h2> <p><a href="https://redirect.github.com/microsoft/playwright/issues/23225">microsoft/playwright#23225</a> - [BUG] VSCode Extension broken with Playwright 1.34.1</p> <h2>Browser Versions</h2> <ul> <li>Chromium 114.0.5735.26</li> <li>Mozilla Firefox 113.0</li> <li>WebKit 16.4</li> </ul> <p>This version was also tested against the following stable channels:</p> <ul> <li>Google Chrome 113</li> <li>Microsoft Edge 113</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
|||
| b3e6d45541 |
chore(deps-dev): Bump @stencil/sass from 3.0.3 to 3.0.4 in /core (#27592)
Bumps [@stencil/sass](https://github.com/ionic-team/stencil-sass) from 3.0.3 to 3.0.4. <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.4</h2> <h2>What's Changed</h2> <h3>Node v20 Support</h3> <ul> <li>chore(node): add node 20 to ci by <a href="https://github.com/rwaskiewicz"><code>@rwaskiewicz</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/313">ionic-team/stencil-sass#313</a></li> </ul> <h3>Stencil v4 Support</h3> <ul> <li>Stencil 4 support by <a href="https://github.com/alicewriteswrongs"><code>@alicewriteswrongs</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/326">ionic-team/stencil-sass#326</a></li> </ul> <h3>Dependency Updates</h3> <p><code>@rollup/plugin-node-resolve</code></p> <ul> <li>chore(deps-dev): bump <code>@rollup/plugin-node-resolve</code> from 15.0.2 to 15.1.0 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/325">ionic-team/stencil-sass#325</a></li> </ul> <p><code>@stencil/core</code></p> <ul> <li>chore(deps-dev): bump <code>@stencil/core</code> from 3.2.2 to 3.3.0 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/320">ionic-team/stencil-sass#320</a></li> </ul> <p><code>@types/node</code></p> <ul> <li>chore(deps-dev): bump <code>@types/node</code> from 16.18.25 to 20.2.5 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/323">ionic-team/stencil-sass#323</a></li> </ul> <p><code>terser</code></p> <ul> <li>chore(deps-dev): bump terser from 5.17.5 to 5.17.6 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/319">ionic-team/stencil-sass#319</a></li> <li>chore(deps-dev): bump terser from 5.17.6 to 5.17.7 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/327">ionic-team/stencil-sass#327</a></li> </ul> <h2>New Contributors</h2> <ul> <li><a href="https://github.com/alicewriteswrongs"><code>@alicewriteswrongs</code></a> made their first contribution in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/326">ionic-team/stencil-sass#326</a></li> </ul> <p><strong>Full Changelog</strong>: <a href="https://github.com/ionic-team/stencil-sass/compare/v3.0.3...v3.0.4">https://github.com/ionic-team/stencil-sass/compare/v3.0.3...v3.0.4</a></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
|||
| ba7e60e866 |
fix(select): prevent click event from firing twice (#27570)
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 click event was firing twice. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The click event fires once. ## 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. --> You can use the test file to see that the event now fires once, and before this change it fired twice. I couldn't figure out how to write an automated test for this that fails before the change and passes after the change. (Perhaps because of how Jest "clicks" elements? Not sure.) Also, you can use the repro repo in the Jira ticket and update it to `"@ionic/angular": "7.0.10-dev.11685472954.170be0cc",` and see that the issue is fixed. |
|||
| b8113cbd79 |
chore(deps-dev): Bump @axe-core/playwright from 4.7.1 to 4.7.2 in /core (#27585)
Bumps [@axe-core/playwright](https://github.com/dequelabs/axe-core-npm) from 4.7.1 to 4.7.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/dequelabs/axe-core-npm/releases"><code>@axe-core/playwright</code>'s releases</a>.</em></p> <blockquote> <h2>Release 4.7.2</h2> <h3>Bug Fixes</h3> <ul> <li><strong>packages/cli:</strong> revert ESM (<a href="https://redirect.github.com/dequelabs/axe-core-npm/issues/730">#730</a>) (<a href=" |
|||
| 1814f0e58d | chore(): add updated snapshots | |||
| d10509f840 |
fix: import paths
The `win` utility was moved to the browser/ folder. |
|||
| 49b91692fc |
chore(segment): remove unused import
pointerCoord usage was removed on main. |
|||
| 66d959f5bf | Merge remote-tracking branch 'origin/main' into sp/sync-feature-7.1-with-main | |||
| d87e692c6c |
fix(radio): radio with modern syntax is keyboard navigable (#27530)
Issue number: resolves #27268 --------- <!-- 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 tabbing on a radio group (modern syntax), it focuses on the next radio option inside the radio group. It replicates the behavior of the up/down keys. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - When tabbing on a radio group (modern syntax), it focuses on the next radio option of the next radio group. A spike ticket has been created to further investigate web accessibility and browser compatibility. ## 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 |
|||
| 7871210e9e |
fix(keyboard): listen on correct events for keyboard lifecycle (#27569)
Issue number: resolves #27558
---------
<!-- 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 keyboard lifecycle util was always listening on visual viewport
events even when in native environments. The visual viewport API is not
reliable due to how the Ionic webview customizes how it resizes. We
should only be listening on the native keyboard events in native
environments.
https://github.com/ionic-team/capacitor/issues/3730
|
|||
| becf8009d7 |
chore(deps): Bump @stencil/core from 3.2.2 to 3.3.0 in /core (#27539)
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 3.2.2 to 3.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>🍭 3.3.0 (2023-05-23)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>compiler:</strong> components typedef path aliases (<a href="https://redirect.github.com/ionic-team/stencil/issues/4365">#4365</a>) (<a href=" |
|||
| 5b4c28be80 |
merge release-7.0.10
Release 7.0.10 |
|||
| 38d05b0fc5 |
test(datetime): reduce flakiness (#27549)
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. -->
Sometimes the datetime picker hasn't scrolled to the correct date yet
before the screenshot is taken. (See JIRA ticket for a failing build.)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The test waits until the picker has scrolled before taking the
screenshot.
## 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. -->
Hopefully this is all that's needed. I did a few runs and it hasn't
failed, but it's hard to know with flaky tests 🙃
|
|||
| 99bb59b2e6 |
test(list): screenshot capture only the list container (#27571)
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 basic list test screenshots capture a portion of the box shadow from the `ion-header`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removes the `ion-header` from the test template for screenshot capture - Only visually captures the `ion-list` ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| 58d6dae9a1 |
chore(deps-dev): Bump @playwright/test from 1.33.0 to 1.34.1 in /core (#27533)
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from 1.33.0 to 1.34.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.34.0</h2> <h3>Highlights</h3> <ul> <li> <p>UI Mode now shows steps, fixtures and attachments: <!-- raw HTML omitted --></p> </li> <li> <p>New property <a href="https://playwright.dev/docs/api/class-testproject#test-project-teardown"><code>testProject.teardown</code></a> to specify a project that needs to run after this and all dependent projects have finished. Teardown is useful to cleanup any resources acquired by this project.</p> <p>A common pattern would be a <code>setup</code> dependency with a corresponding <code>teardown</code>:</p> <pre lang="js"><code>// playwright.config.ts import { defineConfig } from '@playwright/test'; <p>export default defineConfig({ projects: [ { name: 'setup', testMatch: /global.setup.ts/, teardown: 'teardown', }, { name: 'teardown', testMatch: /global.teardown.ts/, }, { name: 'chromium', use: devices['Desktop Chrome'], dependencies: ['setup'], }, { name: 'firefox', use: devices['Desktop Firefox'], dependencies: ['setup'], }, { name: 'webkit', use: devices['Desktop Safari'], dependencies: ['setup'], }, ], }); </code></pre></p> </li> <li> <p>New method <a href="https://playwright.dev/docs/test-assertions#expectconfigure"><code>expect.configure</code></a> to create pre-configured expect instance with its own defaults such as <code>timeout</code> and <code>soft</code>.</p> <pre lang="js"><code>const slowExpect = expect.configure({ timeout: 10000 }); await slowExpect(locator).toHaveText('Submit'); <p>// Always do soft assertions. const softExpect = expect.configure({ soft: true }); </code></pre></p> </li> </ul> <!-- raw HTML omitted --> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
|||
| e54bf142c3 |
perf: passive event listener for focus visible (#27568)
Issue number: resolves #27566 --------- <!-- 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 `touchstart` listener for focus visible is not marked as passive. This causes a browser delay in case `touchstart` calls `ev.preventDefault()`. However, we are not doing that in this block of code. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Added `passive: true` to the `touchstart` listener to avoid the browser delay. Note that this is only needed for touch and wheel events which is why I only modified `touchstart`: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener ## 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. --> |
|||
| 209880622a |
fix(datetime): ascending order for years (#27551)
resolves #27422 Co-authored-by: Jón Prüßmeier <jon-pruessmeier@users.noreply.github.com> --------- <!-- 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. --> Years in the date picker are displayed in descending order. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Years in the date picker are displayed in ascending order - This matches the native behavior ## 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. --> This is not a breaking change, but it may be unexpected and also may cause users' visual diff tests to fail. As such, we'll target this to 7.1 ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> The updated snapshots show the change --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| af92cb28c8 |
feat(select): add label slot (#27545)
resolves #26838 |
|||
| 6bbe4c99d2 | v7.0.9 | |||
| 0e7359c07f |
fix(core): handle uncaught native keyboard exceptions (#27514)
Issue number: Resolves #27503 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Ionic Framework wraps the implementation around Capacitor's Keyboard plugin API, to provide additional functionality and behavior "automatically" in Ionic, when the plugin is installed. Certain methods such as `getResizeMode()` are only available for certain platforms and will cause an error when running in the unsupported platform. Ionic Framework does not check to see if that platform is active before calling potentially unsupported methods, which leads to an exception for scenarios such as this - calling `getResizeMode()` on Android. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Handles the uncaught exception by returning `undefined` if the plugin method is unavailable. - Developers do not receive an uncaught exception on Android when using the Capacitor Keyboard plugin with Ionic Framework ## 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.0.8-dev.11684444351.1b1ab142` (outdated) |
|||
| 448e63fef0 |
feat(segment): display segment as a grid and add an ellipsis to overflowing text in a segment button (#27457)
Issue number: resolves #16532 --------- ## What is the current behavior? Text that is too long to fit in a segment button does not ellipsis, instead it centers all of the text and cuts it off at the beginning and end of the text. ## What is the new behavior? Text that is wider than the segment button will now add an ellipsis and cut the text off instead of horizontally centering the text and overflowing the button (while being cut off visually). While researching how to fix this issue I discovered that the button text was not properly overflowing when it should due to a limitation of flex. I was able to mock segments using divs and see that certain buttons were adding an ellipsis when there was room to grow. This is due to a combination of using `flex-basis: 0` on the segment buttons and `width: auto` on the segment inside of a toolbar. This [blog](https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think) sums it up well, but it is not something I could work around with segment set as `display: flex`. When I changed the mocked segment to use `display: grid`, it allowed the text to properly grow, while overflowing and adding an ellipsis when it couldn't grow. This can be seen in my [Codepen example](https://codepen.io/brandyscarney/pen/poOpbWE?editors=1100). As a result, I made the following updates: - Changed the `ion-segment` to [`display: grid`](https://github.com/ionic-team/ionic-framework/pull/27457/files#diff-dedcf5921daa49880ebae649e04d4f488a6b965c885a7bb1fdf29a5f1b3d501fR14) (`display: inline-grid` could not be used because the highlight was not properly aligned to the bottom of a toolbar for `md` mode) - Moves the `max-width` for Material Design segment buttons to the parent segment by using [`grid-auto-columns: minmax(auto, $segment-button-md-max-width);`](https://github.com/ionic-team/ionic-framework/pull/27457/files#diff-8df7c6681b616fdc975b068e3d31282cc4997222e786db6365ebcef3bccbb6d3R10). This is necessary for the buttons to properly center inside of the grid when they all hit the max-width (360px at the moment). - The Material Design segment buttons will now take up equal widths. This matches the [MD2 spec for fixed segments](https://m2.material.io/components/tabs#fixed-tabs). - Sets [`grid-row: 1`](https://github.com/ionic-team/ionic-framework/pull/27457/files#diff-761a18ae6f41275e0eb63e9710045cafd5b221721ef1dad1d46d562e50404615R75) on the host segment button. This tells the segment buttons to stay on the same row. - Sets [`max-width: 100%`](https://github.com/ionic-team/ionic-framework/pull/27457/files#diff-761a18ae6f41275e0eb63e9710045cafd5b221721ef1dad1d46d562e50404615R214) and [`overflow: hidden`](https://github.com/ionic-team/ionic-framework/pull/27457/files#diff-761a18ae6f41275e0eb63e9710045cafd5b221721ef1dad1d46d562e50404615R222) on the native button. This allows the text itself to ellipsis. - Added tests for segment wrapping & went through all existing tests to add missing `ion-label` elements in the segment buttons ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information ### High-level changes between main and this branch | `main` | `FW-3401` | | ---| ---| |  |  | |  |  | |
|||
| 5c10f88b2e |
feat(select): expose container and label as CSS parts (#27541)
Issue number: resolves #27112 --------- ## What is the current behavior? The select does not expose the label or the container for the value/placeholder as a CSS shadow part in order to style it. ## What is the new behavior? - Exposed `label` and `container` parts for custom styling - Added an e2e test to verify the parts are working - Renamed the existing screenshots for the custom tests to fix a typo from "custon" to "custom" ## 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. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| 01f99597f7 |
fix(segment): remove duplicate ripple effect on pointerup (#27448)
Issue number: resolves #27338 --------- ## What is the current behavior? Segment button on `md` mode shows two ripple effects: once on pointerdown and again on pointerup ## What is the new behavior? Segment button on `md` mode only shows a ripple effect on pointerdown ## Does this introduce a breaking change? - [ ] Yes - [x] No --------- Co-authored-by: Brandy Carney <brandy@ionic.io> |
|||
| ec95ae5cd3 |
feat(segment, segment-button): update segment value property to accept numbers (#27222)
Issue number: resolves #27221 --------- ## What is the current behavior? The value property of the segment component in Ionic Framework currently only accepts string values. ## What is the new behavior? This pull request updates the "value" property of the segment component to accept a union of string and number types. This allows for more versatile data input in the segment component, particularly for users who work with numerical data. ## Does this introduce a breaking change? - [ ] Yes - [X] No ## Other information N/A |
|||
| 9a89ae7998 | v7.0.8 | |||
| c75cd9a189 |
chore(deps-dev): Bump @stencil/angular-output-target from 0.6.0 to 0.7.0 in /core (#27537)
Bumps [@stencil/angular-output-target](https://github.com/ionic-team/stencil-ds-output-targets) from 0.6.0 to 0.7.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/stencil-ds-output-targets/releases"><code>@stencil/angular-output-target</code>'s releases</a>.</em></p> <blockquote> <h2><code>@stencil/angular-output-target</code><a href="https://github.com/0"><code>@0</code></a>.7.0</h2> <h2>What's Changed</h2> <ul> <li>feat(angular): omit output related imports for components with no event by <a href="https://github.com/KariiO"><code>@KariiO</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-ds-output-targets/pull/330">ionic-team/stencil-ds-output-targets#330</a></li> </ul> <h2>New Contributors</h2> <ul> <li><a href="https://github.com/KariiO"><code>@KariiO</code></a> made their first contribution in <a href="https://redirect.github.com/ionic-team/stencil-ds-output-targets/pull/330">ionic-team/stencil-ds-output-targets#330</a></li> </ul> <p><strong>Full Changelog</strong>: <a href="https://github.com/ionic-team/stencil-ds-output-targets/compare/v0.8.4...@stencil/angular-output-target@0.7.0">https://github.com/ionic-team/stencil-ds-output-targets/compare/v0.8.4...<code>@stencil/angular-output-target</code><code>@0.7.0</code></a></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
|||
| 69928aa16e |
chore(deps-dev): Bump @stencil/sass from 3.0.2 to 3.0.3 in /core (#27536)
Bumps [@stencil/sass](https://github.com/ionic-team/stencil-sass) from 3.0.2 to 3.0.3. <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.3</h2> <h2>Dependency Updates</h2> <p><code>@ionic/prettier-config</code></p> <ul> <li>chore(deps-dev): bump <code>@ionic/prettier-config</code> from 2.1.2 to 3.0.0 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/295">ionic-team/stencil-sass#295</a></li> </ul> <p><code>@stencil/core</code></p> <ul> <li>chore(deps-dev): bump <code>@stencil/core</code> from 3.2.1 to 3.2.2 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/292">ionic-team/stencil-sass#292</a></li> </ul> <p><code>rimraf</code></p> <ul> <li>chore(deps-dev): bump rimraf from 5.0.0 to 5.0.1 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/315">ionic-team/stencil-sass#315</a></li> </ul> <p><code>rollup</code></p> <ul> <li>chore(deps-dev): bump rollup from 3.21.0 to 3.21.3 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/294">ionic-team/stencil-sass#294</a></li> <li>chore(deps-dev): bump rollup from 3.21.3 to 3.21.5 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/298">ionic-team/stencil-sass#298</a></li> <li>chore(deps-dev): bump rollup from 3.21.5 to 3.21.6 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/303">ionic-team/stencil-sass#303</a></li> <li>chore(deps-dev): bump rollup from 3.21.6 to 3.21.7 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/307">ionic-team/stencil-sass#307</a></li> <li>chore(deps-dev): bump rollup from 3.21.7 to 3.22.0 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/311">ionic-team/stencil-sass#311</a></li> <li>chore(deps-dev): bump rollup from 3.22.0 to 3.23.0 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/317">ionic-team/stencil-sass#317</a></li> </ul> <p><code>terser</code></p> <ul> <li>chore(deps-dev): bump terser from 5.17.1 to 5.17.2 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/299">ionic-team/stencil-sass#299</a></li> <li>chore(deps-dev): bump terser from 5.17.2 to 5.17.3 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/301">ionic-team/stencil-sass#301</a></li> <li>chore(deps-dev): bump terser from 5.17.3 to 5.17.4 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/310">ionic-team/stencil-sass#310</a></li> <li>chore(deps-dev): bump terser from 5.17.4 to 5.17.5 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/318">ionic-team/stencil-sass#318</a></li> </ul> <p><strong>Full Changelog</strong>: <a href="https://github.com/ionic-team/stencil-sass/compare/v3.0.2...v3.0.3">https://github.com/ionic-team/stencil-sass/compare/v3.0.2...v3.0.3</a></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
|||
| c1eabb7333 |
refactor(accordion): remove duplicate selector (#27523)
Hey guys, I've found a minor issue. There is a duplicate selector for the same rules. The lines `:24` and `:25` are the same. |
|||
| 134c912992 |
chore(deps-dev): Bump @axe-core/playwright from 4.7.0 to 4.7.1 in /core (#27520)
Bumps [@axe-core/playwright](https://github.com/dequelabs/axe-core-npm) from 4.7.0 to 4.7.1. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/dequelabs/axe-core-npm/releases"><code>@axe-core/playwright</code>'s releases</a>.</em></p> <blockquote> <h2>Release 4.7.1</h2> <h3>Bug Fixes</h3> <ul> <li>proper imports in esm context (<a href="https://redirect.github.com/dequelabs/axe-core-npm/issues/718">#718</a>) (<a href=" |
|||
| 475cd2d7de |
docs(angular, core): change link from slack to discord (#27519)
Issue number: N/A [The Stencil team has moved their community from Slack to Discord](https://twitter.com/stenciljs/status/1658561079767887873). --------- <!-- 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 is a link to the Slack. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - There is a link to the Discord. ## 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. --> |
|||
| d3dd72fff6 |
fix(picker-column): correct RTL direction (#27460)
Issue number: resolves #21205 --------- <!-- 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. --> `picker-column` keeps using LTR display when using RTL. LTR: `Column 1 Column 2` RTL: `Column 1 Column 2` ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> `picker-column` correctly displays for RTL. LTR: `Column 1 Column 2` RTL: `Column 2 Column 1` ## 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 PR is already being tested through the `picker -> basic` and `picker -> value` screenshots. Due to those tests, a new test is not needed to verify the fix. The current fix is only changing the `picker` and `picker-column`. The `datetime` and `datetime-button` do not change, leaving the format up to the users. It wouldn't change the functionality that was provided through PR ionic-team/ionic-framework#17018. --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| 75902b9257 |
chore(deps-dev): bump @axe-core/playwright from 4.6.1 to 4.7.0 in /core (#27351)
Bumps [@axe-core/playwright](https://github.com/dequelabs/axe-core-npm) from 4.6.1 to 4.7.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/dequelabs/axe-core-npm/releases"><code>@axe-core/playwright</code>'s releases</a>.</em></p> <blockquote> <h2>Release 4.7.0</h2> <h3>Bug Fixes</h3> <ul> <li><strong>cli:</strong> do not inject script tags due to pages not allowing script tags (<a href="https://redirect.github.com/dequelabs/axe-core-npm/issues/710">#710</a>) (<a href=" |
|||
| de1dc6b696 |
test(select): clean up basic test template (#27507)
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 `basic` test for `ion-select` contains a lot of content that is either duplicated within the test, duplicated by other tests, or simply not used/needed. Additionally, some select options (notably gender and hair color) are not inclusive. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Test template cleaned up, and options replaced with less personal ones as needed. Legacy test HTML was intentionally left alone since we'll be removing that in the near future anyway, though I did have to tweak a legacy E2E test since it was visiting the non-legacy page. ## 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. --> |
|||
| d71a2edf4c |
chore(deps-dev): bump @stencil/vue-output-target from 0.8.4 to 0.8.5 in /core (#27501)
Bumps [@stencil/vue-output-target](https://github.com/ionic-team/stencil-ds-output-targets) from 0.8.4 to 0.8.5. <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/ionic-team/stencil-ds-output-targets/commits">compare view</a></li> </ul> </details> <br /> [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot 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> Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> |
|||
| a59eefb6a3 |
fix(popover): blur translucent popover in chromium (#27484)
Issue number: Resolves #22176 --------- <!-- 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. --> Translucent popovers do not get blurred in Chromium ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Translucent popover gets blurred in Chromium Note: existing screenshot tests nicely show the change in behavior. ## 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 Because of the [existing, apparently intentional](https://bugs.chromium.org/p/chromium/issues/detail?id=1148826) behavior in Chromium browsers with `backdrop-filter` and animation, we need to either animate the arrow and content instead of the wrapper or apply the filter to a different element. Here, I've animated the arrow and content instead of the wrapper. The fix only needs to apply in `ios` mode. The translucent option is not supported in `md` mode. <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| 995a848575 |
fix(many): update form controls (radio, checkbox, toggle, input, select) to have consistent disabled opacity (#27396)
Issue number: resolves #27184 --------- ## What is the current behavior? The modern form controls do not use the same opacity for their labels when disabled, resulting in inconsistent UI when using two different types in the same view (select vs checkbox, for example). ## What is the new behavior? The checkbox, input, radio, range, select, textarea and toggle labels have been updated on both modes to use the same opacity as each other when disabled. The checkbox and radio icons have been updated to use a different opacity than the label for `md` mode. - Updates `ios` mode so all form controls use the same opacity of `0.3` - I could not find any guidelines by Apple for what color these should be, so I decided to just make them the same as what is most commonly used & match item - Updates `md` mode so all form control labels use the same opacity of `0.38` - I used the [Material Design 3 documentation](https://m2.material.io/components) to get this number as well as the opacity of the disabled selection controls in the [Material Design 2 figma design kit](https://www.figma.com/community/file/778763161265841481). The Material Design 2 documentation does not mention the opacity, but this is also the number used by Material Design 1 so it's safe to assume it is what the disabled form labels should also use for Material Design 2. - Updates the `md` range so the slotted elements are also included when setting the opacity on the label - Updates the range, radio & checkbox tests to make sure there are screenshots in the different disabled states - Updates the item/disabled test to include radio & textarea so you can see all form controls side by side ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information I downloaded screenshots of the item disabled tests and put them side by side for `main` and this branch in order to see the differences in the labels. The grey boxes to the left of each item are just a bigger version of the label color for that item, so it's easier to see when they aren't the same.   --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| 3e17d29fe7 | v7.0.7 | |||
| 70d9854d8d |
fix(footer, tab-bar): wait for resize before re-showing (#27417)
Issue number: resolves #25990 --------- <!-- 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 tab bar and footer are being shown too soon after the keyboard begins to hide. This is happening because the webview resizes _after_ the keyboard begins to dismiss. As a result, it is possible for the tab bar and footer to briefly appear on the top of the keyboard in environments where the webview resizes. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The tab bar and footer wait until after the webview has resized before showing again | before | after | | - | - | | <video src="https://user-images.githubusercontent.com/2721089/236905066-42ac17a5-a5bf-458b-9c62-005fcce05e20.MP4"></video> | <video src="https://user-images.githubusercontent.com/2721089/236905185-d2f539d1-6d93-4385-b1cb-24dd7aa06393.MP4"></video> | This code works by adding an optional parameter to the keyboard controller callback called `waitForResize`. When defined, code within Ionic can wait for the webview to resize as a result of the keyboard opening or closing. Tab bar and footer wait for this `waitForResize` promise to resolve before re-showing the relevant elements. This `waitForResize` parameter is only only defined when all of the following are two: **1. The webview resize mode is known and is _not_ "None".** If the webview resize mode is unknown then either the Keyboard plugin is not installed (in which case the tab bar/footer are never hidden in the first place) or the app is being deployed in a browser/PWA environment (in which case the web content typically does not resize). If the webview resize mode is "None" then that means the keyboard plugin is installed, but the webview is configured to never resize when the keyboard opens/closes. As a result, there is no need to wait for the webview to resize. **2. The webview has previously resized.** If the keyboard is closed _before_ the opening keyboard animation completes then it is possible for the webview to never resize. In this case, the webview is at full height and the tab bar/footer can immediately be re-shown. ------ Under the hood, we use a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to listen for when the web content resizes. Which element we listen on depends on the resize mode set in the developer's Capacitor app. We determine this in the `getResizeContainer` function. From there, we wait for the ResizeObserver callback, then wait 1 more frame so the promise resolves _after_ the resize has finished. ## 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.0.6-dev.11683905366.13943af0` |
|||
| f08cb31b39 | chore(): add updated snapshots | |||
| 9dc126d387 |
fix(picker-column): prevSelected is set to the correct value (#27458)
Issue number: resolves #21764 --------- <!-- 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 `prevSelected` returns the same value as `selectedIndex`. When a user has selected the first option then the second: - `prevSelected` returns `1` - `selectedIndex` returns `1` ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> The `prevSelected` returns the index of the last selected option. When a user has selected the first option then the second: - `prevSelected` returns `0` - `selectedIndex` returns `1` ## 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. --> Read the comment below regarding `toHaveReceivedEventDetail`. |
|||
| 19ec41c965 | chore: sync with main | |||
| 13d2d115d4 |
fix(select): modern syntax works with forms (#27480)
Issue number: resolves #27478 --------- <!-- 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 modern syntax render function was missing `renderHiddenInput` which caused modern `ion-select` instances to not participate in form submission. Legacy syntax is not affected. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Modern syntax calls `renderHiddenInput`. ## 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.0.7-dev.11684158250.1920157d` |
