mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 06:09:31 +08:00
4302 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
| 2150188d27 |
chore(deps-dev): Bump @stencil/angular-output-target from 0.8.3 to 0.8.4 in /core (#28896)
Bumps [@stencil/angular-output-target](https://github.com/ionic-team/stencil-ds-output-targets) from 0.8.3 to 0.8.4. <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>.8.4</h2> <h2>What's Changed</h2> <ul> <li>fix(angular): generate event type with inline types by <a href="https://github.com/sean-perkins"><code>@sean-perkins</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-ds-output-targets/pull/412">ionic-team/stencil-ds-output-targets#412</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.8.2...@stencil/angular-output-target@0.8.4">https://github.com/ionic-team/stencil-ds-output-targets/compare/<code>@stencil/angular-output-target</code><code>@0.8.2...</code><code>@stencil/angular-output-target</code><code>@0.8.4</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/angular-output-target@0.8.4">compare view</a></li> </ul> </details> <br /> [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> |
|||
| 59543af4e9 |
merge release-7.7.0
Release 7.7.0 |
|||
| e672805406 | v7.7.0 | |||
| 950fa40c55 |
fix(overlays): tear down animations after dismiss (#28907)
Issue number: resolves #28352 --------- <!-- 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. --> Not all animations are getting properly destroyed after they run. This means that styles can get stuck at the end value of their animation. Specifically for this reproduction (as reported in the bug ticket), if the modal animates from 1 to 0 opacity and then the modal gets reopened with a different animation where the opacity should be 1 throughout (i.e. the opacity isn't supposed to animate at all), the modal is invisible because the opacity got stuck at 0 and never got reset to the default value of 1. This bug is probably causing some incorrect behavior on other edge cases with overlays, but this is the only one I've identified. ### Reproduction steps Note: you cannot reproduce this when using a modalController 1. Open a modal, e.g. [this one](http://localhost:3333/src/components/modal/test/card-nav?ionic:mode=ios) in `ios` mode on a screen wider than 768px 1. Close the modal 1. Open the same modal on a screen narrower than 768px 1. See that the modal does not appear ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Animations are properly destroyed after the animation completes - The modal now appears as expected after following the reproduction steps above ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> <!-- ## 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: Liam DeBeasi <liamdebeasi@users.noreply.github.com> |
|||
| d5dc901bb9 |
chore(deps-dev): Bump @capacitor/haptics from 5.0.6 to 5.0.7 in /core (#28932)
Bumps [@capacitor/haptics](https://github.com/ionic-team/capacitor-plugins) from 5.0.6 to 5.0.7. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/capacitor-plugins/releases"><code>@capacitor/haptics</code>'s releases</a>.</em></p> <blockquote> <h2><code>@capacitor/haptics</code><a href="https://github.com/5"><code>@5</code></a>.0.7</h2> <h2><a href="https://github.com/ionic-team/capacitor-plugins/compare/@capacitor/haptics@5.0.6...@capacitor/haptics@5.0.7">5.0.7</a> (2024-01-29)</h2> <p><strong>Note:</strong> Version bump only for package <code>@capacitor/haptics</code></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
|||
| 775841a397 | chore: sync with main | |||
| 1de5ff9302 | v7.6.7 | |||
| 7825eab925 |
chore(deps-dev): Bump @capacitor/status-bar from 5.0.6 to 5.0.7 in /core (#28931)
Bumps [@capacitor/status-bar](https://github.com/ionic-team/capacitor-plugins) from 5.0.6 to 5.0.7. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/capacitor-plugins/releases"><code>@capacitor/status-bar</code>'s releases</a>.</em></p> <blockquote> <h2><code>@capacitor/status-bar</code><a href="https://github.com/5"><code>@5</code></a>.0.7</h2> <h2><a href="https://github.com/ionic-team/capacitor-plugins/compare/@capacitor/status-bar@5.0.6...@capacitor/status-bar@5.0.7">5.0.7</a> (2024-01-29)</h2> <p><strong>Note:</strong> Version bump only for package <code>@capacitor/status-bar</code></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
|||
| 219e630ed5 | chore: sync with main | |||
| bf34e0e247 |
test: migrate form control usages to modern syntax (#28897)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Several tests were still using the legacy form syntax. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Migrated tests in `core`, `angular`, and `vue` to use the modern form syntax (`react` did not have form controls). I opted not to migrate `item/test/highlight` and `item/test/counter` because those tests are going to be removed in the future once the deprecate item APIs are removed. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
|||
| f6fc22bba6 |
fix(action-sheet, alert, toast): button roles autocomplete with available options (#27940)
Issue number: resolves #27965 --------- https://www.youtube.com/watch?v=a_m7jxrTlaw&list=PLIvujZeVDLMx040-j1W4WFs1BxuTGdI_b&index=3 <!-- 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 lack of autocomplete support for AlertButton attribute of `role` (there may be similar situations for other components too, however, I was working on this component and found it). ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Support for autocomplete for the two types defined `cancel` and `destructive`, and also supports any arbitrary string if passed in. ## 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. --> I suggest there to be some global interface similar to the following: ``` interface LooseAutocomplete<T extends string> = T | Omit<string, T>; ``` I referenced this great [video](https://youtu.be/a_m7jxrTlaw) from Matt @mattpocock --------- Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> |
|||
| e021eadb81 |
chore(deps-dev): Bump @capacitor/keyboard from 5.0.7 to 5.0.8 in /core (#28913)
Bumps [@capacitor/keyboard](https://github.com/ionic-team/capacitor-plugins) from 5.0.7 to 5.0.8. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/capacitor-plugins/releases"><code>@capacitor/keyboard</code>'s releases</a>.</em></p> <blockquote> <h2><code>@capacitor/keyboard</code><a href="https://github.com/5"><code>@5</code></a>.0.8</h2> <h2><a href="https://github.com/ionic-team/capacitor-plugins/compare/@capacitor/keyboard@5.0.7...@capacitor/keyboard@5.0.8">5.0.8</a> (2024-01-29)</h2> <p><strong>Note:</strong> Version bump only for package <code>@capacitor/keyboard</code></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
|||
| a1e7694490 |
chore(deps): Bump @stencil/core from 4.11.0 to 4.12.0 in /core (#28914)
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.11.0 to 4.12.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/stencil/releases"><code>@stencil/core</code>'s releases</a>.</em></p> <blockquote> <h2>🌅 4.12.0 (2024-01-29)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>hmr:</strong> allow changes to component decorators when using HMR (<a href="https://redirect.github.com/ionic-team/stencil/issues/5290">#5290</a>) (<a href=" |
|||
| a393d2a86c |
feat(input): remove size property in favor of CSS styling (#28903)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The `ion-input` component currently specifies a `size` attribute to align with the HTML `input` implementation. However, Ionic's custom appearance for MD and iOS is not compatible and should not be used with the `size` attribute: https://github.com/ionic-team/ionic-framework/issues/27945#issuecomment-1669702274. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The `size` property has been removed from `ion-input`. ## Does this introduce a breaking change? - [x] Yes - [ ] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> The `size` attribute has been removed from `ion-input`. As it was not compatible before, this is likely to have a minimal impact to developers. If your application is using the `size` attribute, replace the usage with CSS styling to control the width of the `ion-input`. ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
|||
| 07b987d034 |
chore(deps-dev): Bump @stencil/sass from 3.0.8 to 3.0.9 in /core (#28912)
Bumps [@stencil/sass](https://github.com/ionic-team/stencil-sass) from 3.0.8 to 3.0.9. <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.9</h2> <h2>What's Changed</h2> <h3>Bug Fixes</h3> <ul> <li>fix(plugin): normalize dependency path by <a href="https://github.com/christian-bromann"><code>@christian-bromann</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/459">ionic-team/stencil-sass#459</a></li> </ul> <h3>Dependency Updates</h3> <ul> <li>chore(deps): update dependency np to v9.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/451">ionic-team/stencil-sass#451</a></li> <li>chore(deps): update actions/setup-node action to v4.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/454">ionic-team/stencil-sass#454</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.9.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/455">ionic-team/stencil-sass#455</a></li> <li>chore(deps): update dependency prettier to v3.1.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/452">ionic-team/stencil-sass#452</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.9.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/456">ionic-team/stencil-sass#456</a></li> <li>chore(deps): update dependency npm to v10.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/457">ionic-team/stencil-sass#457</a></li> <li>chore(deps): update dependency prettier to v3.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/458">ionic-team/stencil-sass#458</a></li> <li>chore(deps): update node.js to v20.11.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/443">ionic-team/stencil-sass#443</a></li> <li>chore(deps): update dependency rollup to v4.9.5 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/442">ionic-team/stencil-sass#442</a></li> <li>chore(deps): update dependency prettier to v3.2.2 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/460">ionic-team/stencil-sass#460</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.10.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/462">ionic-team/stencil-sass#462</a></li> <li>chore(deps): update dependency terser to v5.27.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/464">ionic-team/stencil-sass#464</a></li> <li>chore(deps): update dependency prettier to v3.2.4 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/463">ionic-team/stencil-sass#463</a></li> <li>chore(build): improve build process by <a href="https://github.com/christian-bromann"><code>@christian-bromann</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/461">ionic-team/stencil-sass#461</a></li> <li>chore(deps): update dependency rollup to v4.9.6 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/465">ionic-team/stencil-sass#465</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.11.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/466">ionic-team/stencil-sass#466</a></li> <li>chore(deps): update dependency npm to v10.4.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/468">ionic-team/stencil-sass#468</a></li> </ul> <h2>New Contributors</h2> <ul> <li><a href="https://github.com/christian-bromann"><code>@christian-bromann</code></a> made their first contribution in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/459">ionic-team/stencil-sass#459</a></li> </ul> <p><strong>Full Changelog</strong>: <a href="https://github.com/ionic-team/stencil-sass/compare/v3.0.8...v3.0.9">https://github.com/ionic-team/stencil-sass/compare/v3.0.8...v3.0.9</a></p> <h2>v3.0.9-0</h2> <h2>What's Changed</h2> <ul> <li>chore(deps): update dependency np to v9.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/451">ionic-team/stencil-sass#451</a></li> <li>chore(deps): update actions/setup-node action to v4.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/454">ionic-team/stencil-sass#454</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.9.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/455">ionic-team/stencil-sass#455</a></li> <li>chore(deps): update dependency prettier to v3.1.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/452">ionic-team/stencil-sass#452</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.9.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/456">ionic-team/stencil-sass#456</a></li> <li>chore(deps): update dependency npm to v10.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/457">ionic-team/stencil-sass#457</a></li> <li>chore(deps): update dependency prettier to v3.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/458">ionic-team/stencil-sass#458</a></li> <li>chore(deps): update node.js to v20.11.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/443">ionic-team/stencil-sass#443</a></li> <li>chore(deps): update dependency rollup to v4.9.5 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/442">ionic-team/stencil-sass#442</a></li> <li>chore(deps): update dependency prettier to v3.2.2 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/460">ionic-team/stencil-sass#460</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.10.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/462">ionic-team/stencil-sass#462</a></li> <li>fix(plugin): normalize dependency path by <a href="https://github.com/christian-bromann"><code>@christian-bromann</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/459">ionic-team/stencil-sass#459</a></li> <li>chore(deps): update dependency terser to v5.27.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/464">ionic-team/stencil-sass#464</a></li> <li>chore(deps): update dependency prettier to v3.2.4 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/463">ionic-team/stencil-sass#463</a></li> <li>chore(build): improve build process by <a href="https://github.com/christian-bromann"><code>@christian-bromann</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/461">ionic-team/stencil-sass#461</a></li> </ul> <h2>New Contributors</h2> <ul> <li><a href="https://github.com/christian-bromann"><code>@christian-bromann</code></a> made their first contribution in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/459">ionic-team/stencil-sass#459</a></li> </ul> <!-- raw HTML omitted --> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
|||
| 58639c7a1e |
chore(deps): Bump @stencil/core from 4.10.0 to 4.11.0 in /core (#28866)
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.10.0 to 4.11.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/stencil/releases"><code>@stencil/core</code>'s releases</a>.</em></p> <blockquote> <h2>🍝 4.11.0 (2024-01-22)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>runtime:</strong> resolve memory leak caused by global content ref (<a href="https://redirect.github.com/ionic-team/stencil/issues/5266">#5266</a>) (<a href=" |
|||
| 9448783bb1 |
fix(item): only default slot content wraps (#28773)
Issue number: resolves #28769 --------- <!-- 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. --> As part of https://github.com/ionic-team/ionic-framework/pull/28146, we allowed text wrapping inside of `ion-item` for accessibility purposes. One of the behaviors we added was to allow start, default, and end slotted containers to wrap to the next line to align with the iOS spec. However, this decision was based on an incorrect assumption. The following screenshot shows the Settings app on iOS: | default scale | 310% scale | | - | - | | <img width="1170" alt="Frame 4" src="https://github.com/ionic-team/ionic-framework/assets/2721089/462ef153-a060-41c8-9a00-f0aad17839be"> | <img width="1170" alt="Frame 5" src="https://github.com/ionic-team/ionic-framework/assets/2721089/f047f880-7b80-4710-939b-96da075fbbf9"> | At the default scale, the blue icon is in the iOS equivalent of the "start" slot, "Bluetooth" is in the default slot, and "On" is in the "end" slot. We incorrectly assumed the same markup was true when scaling the text up. However, at 310% scale the icon, "Bluetooth" text, and "On" text all become part of the default slot in a single container that wraps. You can tell because the bottom border runs underneath the blue icon at 310% whereas it does not at the default scale. This allows the text to wrap underneath the blue icon. When we originally implemented #28146 we thought that this meant the start, default, and end slot containers should wrap to the next line. I further validated this behavior by creating an app with Swift UI. I created a list of items where each item has the native equivalent of a checkbox in the `start` slot and multiple `ion-labels` in the default slot of the item: | Default Scale | 310% Scale | | - | - | |  |  | The content within each label wraps within the container, but the containers themselves never wrap to the next line. Demo code: ```swift import SwiftUI struct ContentView: View { struct Item: Identifiable, Hashable { let id = UUID() } private var items = [ Item(), Item(), Item(), Item(), Item() ] @State private var multiSelection = Set<UUID>() var body: some View { NavigationView { List(items, selection: $multiSelection) {_ in HStack { Text("Column 1 with really long text") Text("Column 2 with really long text") Text("Column 3 with really long text") Text("Column 4 with really long text") } } .toolbar { EditButton() } } Text("\(multiSelection.count) selections") } } #Preview { ContentView() } ``` ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - This PR removes the ability for the start, default, and end slot containers to wrap to the next line. This behavior aligns with pre-v7.6.0 behaviors. The containers inside of the default slot will not wrap to the next line. However, content within each container (such as text within an `ion-label`) will continue to wrap to meet the team's accessibility requirements. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## 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.6.5-dev.11704916749.1e64a3a7` --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| b81d85a401 |
chore(deps-dev): Bump @axe-core/playwright from 4.8.3 to 4.8.4 in /core (#28887)
Bumps [@axe-core/playwright](https://github.com/dequelabs/axe-core-npm) from 4.8.3 to 4.8.4. <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.8.4</h2> <h2>What's Changed</h2> <ul> <li>chore: RC v4.8.3 by <a href="https://github.com/github-actions"><code>@github-actions</code></a> in <a href="https://redirect.github.com/dequelabs/axe-core-npm/pull/983">dequelabs/axe-core-npm#983</a></li> <li>chore: bump puppeteer from 19.7.3 to 21.7.0 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/dequelabs/axe-core-npm/pull/979">dequelabs/axe-core-npm#979</a></li> <li>Release v4.8.3 by <a href="https://github.com/dequejenn"><code>@dequejenn</code></a> in <a href="https://redirect.github.com/dequelabs/axe-core-npm/pull/986">dequelabs/axe-core-npm#986</a></li> <li>chore: bump the npm-low-risk group with 11 updates by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/dequelabs/axe-core-npm/pull/982">dequelabs/axe-core-npm#982</a></li> <li>chore: bump follow-redirects from 1.15.2 to 1.15.5 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/dequelabs/axe-core-npm/pull/988">dequelabs/axe-core-npm#988</a></li> <li>chore: merge master into develop by <a href="https://github.com/github-actions"><code>@github-actions</code></a> in <a href="https://redirect.github.com/dequelabs/axe-core-npm/pull/987">dequelabs/axe-core-npm#987</a></li> <li>ci: add env var required for creating gh releases by <a href="https://github.com/michael-siek"><code>@michael-siek</code></a> in <a href="https://redirect.github.com/dequelabs/axe-core-npm/pull/989">dequelabs/axe-core-npm#989</a></li> <li>ci: remove deprecated release candidate action by <a href="https://github.com/michael-siek"><code>@michael-siek</code></a> in <a href="https://redirect.github.com/dequelabs/axe-core-npm/pull/990">dequelabs/axe-core-npm#990</a></li> <li>fix(webdriverjs): use new headless argument to fix selenium-webdriver@4.17.0 breaking release by <a href="https://github.com/straker"><code>@straker</code></a> in <a href="https://redirect.github.com/dequelabs/axe-core-npm/pull/992">dequelabs/axe-core-npm#992</a></li> </ul> <p><strong>Full Changelog</strong>: <a href="https://github.com/dequelabs/axe-core-npm/compare/v4.8.3...4.8.4">https://github.com/dequelabs/axe-core-npm/compare/v4.8.3...4.8.4</a></p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/dequelabs/axe-core-npm/blob/develop/CHANGELOG.md"><code>@axe-core/playwright</code>'s changelog</a>.</em></p> <blockquote> <h1>Change Log</h1> <p>All notable changes to this project will be documented in this file. See <a href="https://conventionalcommits.org">Conventional Commits</a> for commit guidelines.</p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
|||
| bf7922c8b3 |
fix(item): ensure button focus state on property change (#28892)
Issue number: resolves #28525 --------- <!-- 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 navigated via tab-key, the ion-item is not highlighted correctly after switching from button=false to button=true. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Now, when dynamically changing the the `button` option to `True`, there's a `@watch` callback that will make sure the internal `isFocusable` `@state` will be updated. - A new unit test was added to item/test. As there was still any unit test for the `ion-item`, a new files was created - `item.spec.tsx` ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> New behavior in runtime:  --------- Co-authored-by: Sean Perkins <sean@ionic.io> |
|||
| 2a3c26e44d |
test(many): replace waitForSelector with waitFor (#28888)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> There are some tests that use Playwright's `waitForSelector` [function](https://playwright.dev/docs/api/class-page#page-wait-for-selector). However, Playwright has informed the community to not use this function by labeling it as [discouraged](https://playwright.dev/docs/api/class-page#page-wait-for-selector). ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Replaced `waitForSelector` with the [recommended](https://playwright.dev/docs/api/class-page#page-wait-for-selector) `waitFor` [function](https://playwright.dev/docs/api/class-locator#locator-wait-for). ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## 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 |
|||
| 79e4ce5885 | chore: update snapshots | |||
| b7c2b662ae | chore(): add updated snapshots | |||
| 0fdd7d137b | chore: sync with main | |||
| 74de16f862 | chore(): sync | |||
| e10f49c43d |
fix(accordion): prevent opening of readonly accordion using keyboard (#28865)
Issue number: resolves #28344 --------- <!-- 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 an Accordion is inside an Accordion Group, and the Accordion Group is enabled and not readonly but the Accordion is disabled and/or readonly, it is possible to navigate to the accordion and open it using the keyboard. This should not be allowed, just like opening it on click is not allowed. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - A disabled Accordion inside an Accordion Group may not be opened via the keyboard. - A readonly Accordion inside an Accordion Group may not be opened via the keyboard. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
|||
| 0c4e1fcdb4 | v7.6.6 | |||
| 9603a4de36 |
fix(menu): improve reliability of main content not being scrollable when menu opens (#28829)
Issue number: resolves #28399 --------- <!-- 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. --> As part of https://github.com/ionic-team/ionic-framework/pull/26976 I fixed an issue where `pointer-events: none` was not applied until after the menu open gesture finishes. This resolved a bug where scrolling was latching after the menu gesture starts. However, I did not account for the edge case where scrolling latches _before_ `pointer-events: none` is applied in the DOM. Since scrolling has already latched then `pointer-events: none` does not change the scrolling behavior. This can happen if a user swipes up and to the right from the left edge of the screen. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `overflow-y: hidden` is now applied to the scrollable content which will interrupt any scrolling when the menu is open. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Testing: This bug fixes a timing issue where scrolling latches on the main content as the menu tries to open. As a result, I am unable to write reliable automated tests for this. Reviewers should perform the following test on iOS and Android physical devices: 1. Open `src/components/menu/test/basic`. 2. Add enough elements to the main page content such that it scrolls (I added a list with items). 3. On each device, attempt to scroll the main content while also opening the menu on the starting edge of the screen. Scrolling on the main content should not happen if the menu opens. Dev build: `7.6.5-dev.11705341148.1a550d3b` |
|||
| 10c38d0354 |
fix(popover): content inside of popover scrolls correctly (#28861)
Issue number: resolves #28455 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The main `ion-content` inside of a popover is not scrollable. Instead, the `.popover-viewport` container is scrolled because certain styles no longer applied once we moved popover to the Shadow DOM. This bug impacted the linked issue because it meant that the infinite scroll inside of the content never fires (since the content never scrolls). ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The `.popover-viewport` rule now targets slotted content with the`.popover-viewport` class. This class is added to the root node that is slotted. This enables us to target the user's content in the light dom. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## 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.6.6-dev.11705696534.177666f8` --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| a8e1e168ee |
fix(themes): modify the dark themes to use :root for mode-specific styles (#28833)
Issue number: N/A
---------
## What is the current behavior?
The `system` and `always` dark theme files target the mode-specific
styles by using the following selectors:
```scss
:root {
@include dark-base-theme();
}
.ios body {
@include dark-ios-theme();
}
.md body {
@include dark-md-theme();
}
```
This is an issue because then users **cannot** override the dark theme
by targeting `:root.ios`, they must target the `body`.
## What is the new behavior?
Updates the mode selectors to target the `:root` with the mode-specific
class:
```scss
:root {
@include dark-base-theme();
}
:root.ios {
@include dark-ios-theme();
}
:root.md {
@include dark-md-theme();
}
```
This makes more sense, since we want it to still be global but
mode-specific, and allows users to override it on `:root` if desired.
## Does this introduce a breaking change?
- [ ] Yes
- [x] Maybe
- [ ] No
BREAKING CHANGES:
In previous versions, it was recommended to define the dark theme in the
following way:
```css
@media (prefers-color-scheme: dark) {
body {
/* global app variables */
}
.ios body {
/* global ios app variables */
}
.md body {
/* global md app variables */
}
}
```
In Ionic Framework version 8, the dark theme is being distributed via
css files that can be imported. Below is an example of importing a dark
theme file in Angular:
```css
/* @import '@ionic/angular/css/themes/dark.always.css'; */
/* @import "@ionic/angular/css/themes/dark.class.css"; */
@import "@ionic/angular/css/themes/dark.system.css";
```
By importing the `dark.system.css` file, the dark theme variables will
be defined like the following:
```css
@media (prefers-color-scheme: dark) {
:root {
/* global app variables */
}
:root.ios {
/* global ios app variables */
}
:root.md {
/* global md app variables */
}
}
```
Notice that the dark theme is now applied to the `:root` selector
instead of the `body` selector. The
[`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root)
selector represents the `<html>` element and is identical to the
selector `html`, except that its specificity is higher.
While migrating to include the new dark theme files is unlikely to cause
breaking changes, these new selectors can lead to unexpected overrides
if custom CSS variables are being set on the `body` element. We
recommend updating any instances where global application variables are
set to target the `:root` selector instead.
For more information on the new dark theme files, refer to the [Dark
Mode documentation](https://ionicframework.com/docs/theming/dark-mode).
## Other Information
Dev build: `7.6.2-dev.11705355381.14b22962`
|
|||
| 9262f7da15 |
fix(datetime): do not animate to new value when multiple values in different months are set (#28847)
Issue number: resolves #28602 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> We animate to the new date when the value is changed, but we do not account for multiple selection. This behavior is valuable for when the value is set asynchronously on a different month than what it shown. However, this is confusing when there are multiple dates selected in different months, because we do not reasonably know which date to animate to. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Datetime no longer animates to the new value if more than one date is selected, and the selected dates aren't all in the same month. An alternative strategy would be to always animate unless one of the selected dates is in the month currently being viewed. However, this would still mean guessing at which value the user wants to see, which we are trying to avoid. Based on this PR: https://github.com/ionic-team/ionic-framework/pull/28605 ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## 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: Liam DeBeasi <liamdebeasi@users.noreply.github.com> --------- Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> |
|||
| c47a16d6c3 |
fix(datetime): enter closes keyboard when typing time (#28848)
Issue number: resolves #28325 --------- <!-- 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 typing the time into the date picker pressing "Enter" does not close the on-screen keyboard. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Pressing "Enter" closes the on-screen keyboard ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Test: ⚠️ While I have a test for this, please also test this on a physical Android device. 1. Go to `src/components/datetime/test/basic` 2. Open the time picker (in any of the date times) 3. Tap the time to open the keyboard 4. Press "Enter" on Android. Observe that the keyboard closes. Dev build: `7.6.6-dev.11705528328.1ef5e17b` |
|||
| 0847c2ac2c |
fix(segment): setting value via binding updates button state (#28837)
Issue number: resolves #28816 --------- <!-- 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 value is set on Segment asynchronously when binding it in Angular. However, the timing works out such that the value changes after `connectedCallback` is fired but before any Stencil Watchers are configured. As a result, our `value` property watcher does not fire which causes `ionSelect` to not be emitted. Segment Buttons rely on this event to know when to update their state (if the value changes such that a segment button is now selected). This results in a checked segment button not appearing checked. This is similar to other issues that have been fixed: https://github.com/ionic-team/ionic-framework/pull/28510 https://github.com/ionic-team/ionic-framework/pull/28488 https://github.com/ionic-team/ionic-framework/pull/28526 ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Segment now emits `ionSelect` on `componentDidLoad` so that any descendant segment buttons can update correctly. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## 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.6.5-dev.11705415448.16878103` This is a timing issue with Stencil, so I am unable to write a reliable automated test. Reviewers should test the dev build in the repro provided in the linked issue. |
|||
| ad65824722 |
fix(alert): remove border-right on ios stacked buttons (#28821)
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> When iOS alert has 3 or more buttons, those are rendered vertically. All but the last button will have a right border. There shouldn't be a right border when the buttons are stacked.  ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Vertical buttons don't have a right border. - Separated the test in order to also test dark theme.   ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> N/A --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| aed7a03532 |
fix(select): click handlers on slotted content fire (#28839)
Issue number: resolves #28818 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Select has logic in place to prevent the overlay from opening when clicking the slotted content. As part of this, we need to deal with the `<label>` element dispatching another click that then bubbles up and causes the overlay to open when clicking the slotted content. We currently deal with this by calling `preventDefault` which prevents this extra event from being dispatched only when clicking the slotted content. We also call `stopPropagation`. This code is not necessary, and in most cases should not have any adverse effects on developer applications. However, this does impact React applications due to how React handles events. When a developer places `onClick` on a slotted element, a native "click" listener is not immediately applied to that element. Instead, React adds a native "click" listener to the root element of an application. When that listener's callback fires, React will dispatch a synthetic click event on the slotted element. Since we are calling `stopPropagation`, the click event never bubbles up to this root node's listener. As a result, the synthetic event is never dispatched on the slotted element, and the developed `onClick` callback never fires. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Select no longer prevents events from bubbling. The existing `event.preventDefault` is sufficient to prevent the label from dispatching another click (thereby causing the select overlay to open) when clicking the slotted content. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## 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.6.5-dev.11705430252.1023daf3` |
|||
| 71e485d770 | chore: clean up changelog | |||
| e2708ff651 | v7.6.5 | |||
| 774872f671 |
chore(deps): Bump @stencil/core from 4.9.1 to 4.10.0 in /core (#28835)
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.9.1 to 4.10.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.10.0 (2024-01-15)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>runtime:</strong> revert slot relocation forwarding (<a href="https://redirect.github.com/ionic-team/stencil/issues/5222">#5222</a>) (<a href=" |
|||
| 4fd05b6416 |
fix(nav): getLength is part of the public API (#28832)
resolves #28826 BREAKING CHANGE: `getLength` returns `Promise<number>` instead of `<number>`. This method was not previously available in Nav's TypeScript interface, but developers could still access it by casting Nav as `any`. Developers should ensure they `await` their `getLength` call before accessing the returned value. |
|||
| dbaaa5bd9f |
fix(list): remove uneeded border radius from items in inset list (#28830)
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. --> In MD mode, items in an inset list currently receive their own border radius, separate from the border radius also applied to the inset list itself. The original intent was likely to ensure that the corners of the items don't spill out of the list. However, the item's border radius is no longer needed, for two reasons: 1. MD has since added top/bottom padding to their lists ([spec](https://m2.material.io/components/lists#specs)), which we've mirrored. This means the borders no longer line up anyway. 2. Even if a developer removes the list's vertical padding (we set it on the host [here]( |
|||
| b7adede05a |
chore(deps-dev): Bump @axe-core/playwright from 4.8.2 to 4.8.3 in /core (#28834)
Bumps [@axe-core/playwright](https://github.com/dequelabs/axe-core-npm) from 4.8.2 to 4.8.3. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/dequelabs/axe-core-npm/blob/develop/CHANGELOG.md"><code>@axe-core/playwright</code>'s changelog</a>.</em></p> <blockquote> <h2><a href="https://github.com/dequelabs/axe-core-npm/compare/v4.8.1...v4.8.3">4.8.3</a> (2024-01-09)</h2> <h3>Bug Fixes</h3> <ul> <li>allow cjs version of packages to export a default value (<a href="https://redirect.github.com/dequelabs/axe-core-npm/issues/943">#943</a>) (<a href=" |
|||
| 33aa8e36d9 |
chore(alert): remove ion-buttons from tests (#28823)
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> `ion-button` is being used as a way to open the alerts. It's not being used to test functionality. When `ion-button` is updated then the screenshots in the alert tests must be updated. This shouldn't happen when `ion-button` isn't necessary to have in these tests. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Replaced `ion-button` with `button` ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> N/A --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| 76f6362410 |
fix(menu): menu can be encapsulated in a component (#28801)
Issue number: resolves #16304, resolves #20681 --------- <!-- 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. --> Split Pane assumes that Menu is a child of the Split Pane. This means that CSS selectors and JS queries only check for children instead of descendants. When a Menu is encapsulated in a component that component can itself show up as an element in the DOM depending on the environment. For example, both Angular and Web components show up as elements in the DOM. This causes the Menu to not work because it is no longer a child of the Split Pane. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Menu can now be used as a descendant of Split Pane. The following changes make this possible: 1. When the menu is loaded, it queries the ancestor Split Pane. If one is found, it sets `isPaneVisible` depending on if the split pane is visible or not. 2. Any changes to the split pane visibility state after the menu is loaded will be handled through the `ionSplitPaneVisible` event. 3. A menu is now considered to be a pane if it is inside of a split pane 4. Related CSS no longer uses `::slotted` which only targets children. The CSS was moved into the menu stylesheets. I consider the coupling here to be valuable as menu and split pane are often used together. We also already have style coupling between the two components, so this isn't anything new. ## Does this introduce a breaking change? - [ ] Yes - [x] No There are no known changes to the public API or public behavior. However, there are two risks here: 1. There is an unknown risk into how this change impacts nested split panes. This isn't an explicitly supported feature, but it technically works in Ionic now. We don't know if anyone is actually implementing this pattern. We'd like to evaluate use cases for nested split panes submitted by the community before we try to account for this functionality in menu and split pane. 5. There may be some specificity changes due to the new CSS. CSS was moved from split pane to menu so it could work with encapsulated components: `:host(.split-pane-visible) ::slotted(.split-pane-side)` has a specificity of 0-1-1 `:host(.menu-page-visible.menu-pane-side)` has a specificity of 0-1-0 There shouldn't be any changes needed to developer code since the selectors are in the Shadow DOM and developer styles are in the Light DOM. However, we aren't able to anticipate every edge case so we'd like to place this in a major release just to be safe. ## 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.6.2-dev.11704922151.1fd3369f` |
|||
| e1f98509fa |
feat(theme): export light theme tokens (#28802)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The light theme tokens are included in the starter apps but not in Ionic Framework itself. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The light mode tokens are bundled with Ionic Framework. This allows developers to always have the light mode accessible to them including the tokens. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## 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> |
|||
| 749df5bdce |
fix(toggle): set switch icon color correctly (#28812)
Issue number: None --------- <!-- 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. --> Similar to #28809, in my work for FW-5822, I found that I had unexpected screenshot diffs. `--ion-color-dark` was not defined in our test infrastructure, and this toggle icon was therefore displaying in the wrong color in the tests. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Toggle has the correct icon color even when the --ion-color-dark token is not defined ## Does this introduce a breaking change? - [ ] Yes - [x] No Introduces style changes if the token is undefined, but it should always be defined in real-world uses. <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## 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> |
|||
| 3929b0188a |
fix(datetime): set default background color correctly (#28809)
Issue number: None --------- <!-- 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 my work for FW-5822, I found that I had unexpected screenshot diffs. `--ion-color-light` was not defined in our test infrastructure, and the white fallback for the datetime background was causing snapshots to have a white background when they should have had a light one. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Datetime has the correct background color even when the `--ion-color-light` token is not defined ## Does this introduce a breaking change? - [ ] Yes - [x] No Introduces style changes if the token is undefined, but it should always be defined in real-world uses. <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## 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> |
|||
| 076c9fed29 | merge release-7.6.4 | |||
| bb822b3ed0 |
chore: remove matchMedia check (#28783)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> As part of FW-2832 the team has an initiative to remove much of the `any` usage in favor of stronger types. This will make modifications to this codebase safer as we will have access to proper type checking. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removed the `any` case from window.matchMedia. This causes the linter to fail because `window.matchMedia` is always defined. I removed the check altogether. `matchMedia` is supported on all browsers that Ionic 7 supports. This should not cause any changes for Ionic developers, but I want to ship this a) in a separate patch and b) in a minor release to de-risk just in case there's an edge case I am not considering ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
|||
| d42f5ed78b |
test: always use official dark mode theme (#28795)
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. --> Our theme tests currently consume an internal dark theme. This was needed to add light/dark theme tests prior to us shipping separate stylesheets to developers. However, now that these stylesheets have been created we should always be testing with them so we can catch any bugs in the dark mode stylesheet. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Remove the custom dark.css file and removed references to it - Added a TODO to do the same thing for the light theme once FW-5862 is done. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
|||
| e45fe988ff |
chore(deps): Bump @stencil/core from 4.9.0 to 4.9.1 in /core (#28798)
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.9.0 to 4.9.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>🍬 v4.9.1 (2024-01-08)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>declarations:</strong> bundle child_process type for portability (<a href="https://redirect.github.com/ionic-team/stencil/issues/5165">#5165</a>) (<a href=" |
|||
| 15e368c378 |
feat(theme): improved color contrast with color palette (#28791)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The team would like to ensure that Ionic Framework components that use an Ionic color (primary, secondary, etc) on top of a contrast color pass minimum contrast ratios as defined in the WCAG. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Introduces a revised set of Ionic colors that pass AA color contrast guidelines when with the appropriate contrast. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## 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: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Co-authored-by: Brandy Carney <brandy@ionic.io> Co-authored-by: Sean Perkins <sean@ionic.io> Co-authored-by: Shawn Taylor <shawn@ionic.io> Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com> Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> |
