mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +08:00
13286 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
| 1175b258e7 | remove line | |||
| 5ac163e4bd | refactor(react-router): use ts rollup plugin | |||
| 9721d3d877 | refactor(react): use ts rollup plugin | |||
| 266cebdff6 | refactor(vue-router): use ts rollup plugin | |||
| 4dd069282b | refactor(vue): use ts rollup plugin | |||
| f6a6877044 |
fix(datetime): allow calendar navigation in readonly mode; disallow keyboard navigation when disabled (#28336)
Issue number: #28121 --------- <!-- 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. --> It is not possible to navigate between months when ion-datetime is in readonly mode. This means that if there are multiple dates selected, the user cannot browse to view them all. Also, keyboard navigation is not prevented in `readonly` or `disabled` mode where it should be. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> When `readonly`: - Clicking the month-year button changes the month & year in readonly mode - Clicking the next & prev buttons changes the month in readonly mode - Left and right arrow keys change the month in readonly mode - Swiping/scrolling changes the month in readonly mode - The selected date does not change when doing any of the above - You cannot clear the value using keyboard navigation of the clear button in readonly mode When `disabled`: - You cannot navigate months via keyboard navigation of the month-year button in disabled mode - You cannot navigate months using keyboard navigation of the previous & next buttons in disabled mode - You cannot navigate months via the left and right arrow keys in disabled mode - The selected date does not change when doing any of the above - You cannot clear the value using keyboard navigation of the clear button in disabled mode Known bug: - It is still possible to navigate through dates in `prefers-wheel` when `disabled`. This bug existed prior to this PR. I created FW-5408 to track this. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> |
|||
| 3b6e6318bf |
fix(angular): inputs on standalone form controls are reactive (#28434)
Issue number: resolves #28431
---------
<!-- 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. -->
My previous attempt at fixing
https://github.com/ionic-team/ionic-framework/issues/28358 caused inputs
to no longer be correctly proxied to the underlying components. This was
an attempt to work around an underlying ng-packagr bug (see linked
thread for more info).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
I decided it would be best to continue using `ProxyCmp` (since we know
that works) and find an alternative to working around the ng-packagr
bug. I spoke with the Angular team, and they recommended pulling the
provider into its own object. `forwardRef` is now required since we are
referencing the component before it is declared.
- Revert
|
|||
| 89698b338f |
fix(angular): standalone form components do not error when multiple are used (#28423)
Issue number: resolves #28418 --------- <!-- 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. --> Due to https://github.com/ionic-team/stencil-ds-output-targets/issues/397, calling `proxyInputs` for the form controls caused an error to be logged in developer applications. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated to a version of the Angular output targets with a patch for this error - I also excluded the `utils.ts` from all `angular-component-lib` directories from prettier since it was causing a diff. These changes are autogenerated so we should not be linting them anyways. ## 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.5.3-dev.11698340692.18daff2f` |
|||
| 90acad1837 |
fix(angular): NavController works with nested outlets (#28421)
Issue number: resolves #28417
---------
<!-- 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 common `IonRouterOutlet` was trying to inject another common
`IonRouterOutlet` into `parentOutlet`:
|
|||
| a5c68aa529 |
chore(repo): update angular path (#28426)
Issue number: # --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> i found a small typo in the contributing guide ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> update the relative path for updating ionic angular, now that it's code lives under the `packages/` directory ## 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. --> |
|||
| dbcd1ac489 |
chore(deps-dev): Bump @capacitor/core from 5.5.0 to 5.5.1 in /core (#28416)
Bumps [@capacitor/core](https://github.com/ionic-team/capacitor) from 5.5.0 to 5.5.1. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/capacitor/releases"><code>@capacitor/core</code>'s releases</a>.</em></p> <blockquote> <h2>5.5.1</h2> <h2><a href="https://github.com/ionic-team/capacitor/compare/5.5.0...5.5.1">5.5.1</a> (2023-10-25)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>ios:</strong> CAPWebView config update (<a href="https://redirect.github.com/ionic-team/capacitor/issues/7004">#7004</a>) (<a href=" |
|||
| b31ecbbfe8 |
fix(input, textarea, select): use consistent sizes (#28390)
aIssue number: resolves #28388 --------- <!-- 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 added a `min-height: 56px` to the input, textarea, and select components for MD mode. However, these were added for the outline/solid style inputs to align with the Material Design spec: https://material-components.github.io/material-components-web-catalog/#/component/text-field They should not apply to regular inputs in an item. The end result is inconsistently sized items when used with non-control items. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Non-filled and non-stacked/floating label controls are now have a minimum height of 44px. There should be **no changes** to the following types of controls: 1. iOS controls (all variants) 2. MD filled controls 3. MD stacked controls ## 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.5.2-dev.11697818830.1a33c881` --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| dc94ae01fe |
test(alert): add annotations (#28414)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> I forgot to add annotations to tests to indicate the bug fix they are validating: https://github.com/ionic-team/ionic-framework/pull/28408 ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Added annotations ## 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. --> |
|||
| 8e2f818671 |
fix(segment): avoid scrolling webkit bug (#28376)
Issue number: resolves #28373
---------
🚨 Reviewers: Please test this on Chrome, Firefox, and Safari
<!-- 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 fix in
|
|||
| a4b303e133 |
fix(angular): run platform subscriptions inside zone (#28404)
Issue number: #19539 --------- <!-- 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 app uses Capacitor, then the platform subscriptions will run outside of the Angular Zone. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The platform subscriptions will run inside of the Angular Zone regardless if it uses Capacitor or not. Added an extra `zone.run` within the event listener. ## 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: `npm install @ionic/angular@7.5.2-dev.11698187124.1b7ea660` |
|||
| 34257d681e |
fix(alert): long words wrap to next line (#28408)
Issue number: resolves #28406 --------- <!-- 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/27898 we updated the radio and checkbox labels to wrap to the next line instead of truncate. However, we did not consider long words. As a result, long words run outside of the container. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The radio and checkbox labels now break on words too in addition to white space characters. ## 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> |
|||
| d47b7e7503 |
fix(tab-bar): apply safe area to proper side regardless of direction (#28372)
Issue number: Internal --------- ## What is the current behavior? The safe area padding (both left and right) swap sides when the app's direction changes from LTR to RTL. The `--ion-safe-area-left` should always apply to the left side of the device and the `--ion-safe-area-right` should always apply to the right side of the device. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updates the tab bar stylesheet to always set `padding-left` and `padding-right` - Adds an e2e test for the basic directory which adds screenshots in both modes/directions for: - the default tab bar - a tab bar with safe area left applied - a tab bar with safe area right applied ## Does this introduce a breaking change? - [ ] Yes - [x] No --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| f99d5305fb |
fix(list-header): apply safe area to proper side regardless of direction (#28371)
Issue number: Internal --------- ## What is the current behavior? The list header adds padding to the "start" side (`padding-left` in LTR and `padding-right` in RTL) based on the value of `--ion-safe-area-left`. It does not account for `--ion-safe-area-right` at all even though the list header can extend to the right side of the content. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The `--ion-safe-area-left` always applies to the left side of the screen, regardless of direction. This means that in both LTR and RTL it applies as `padding-left`. - Added support for `--ion-safe-area-right` which applies to `padding-right` in both LTR and RTL. - Adds an e2e test which captures the list header with a button to ensure the proper padding is added for the safe area. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information ### Safe Area Left | mode | direction | `main` | `branch` | | ---| ---| ---| ---| | `ios` | `LTR` |  |  | | `ios` | `RTL` |  |  | | `md` | `LTR` |  |  | | `md` | `RTL` |  |  | ### Safe Area Right | mode | direction | `main` | `branch` | | ---| ---| ---| ---| | `ios` | `LTR` |  | | | `ios` | `RTL` |  |  | | `md` |`LTR` |  |  | | `md` |`RTL` |  |  | --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| 6e771e07d4 |
merge release-7.5.2
Release 7.5.2 |
|||
| afa0e3c4d1 | chore(): update package lock files | |||
| 7722ba05eb | v7.5.2 v7.5.2 | |||
| d72a55eb65 |
chore(deps-dev): Bump @stencil/sass from 3.0.6 to 3.0.7 in /core (#28401)
Bumps [@stencil/sass](https://github.com/ionic-team/stencil-sass) from 3.0.6 to 3.0.7. <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.7</h2> <h2>What's Changed</h2> <ul> <li>chore(deps): update dependency npm to v10.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/410">ionic-team/stencil-sass#410</a></li> <li>chore(deps): update dependency <code>@rollup/plugin-node-resolve</code> to v15.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/409">ionic-team/stencil-sass#409</a></li> <li>chore(deps): update dependency terser to v5.21.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/411">ionic-team/stencil-sass#411</a></li> <li>chore(repo): group rollup in renovate by <a href="https://github.com/rwaskiewicz"><code>@rwaskiewicz</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/413">ionic-team/stencil-sass#413</a></li> <li>chore(deps): update rollup, by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/414">ionic-team/stencil-sass#414</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.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/408">ionic-team/stencil-sass#408</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.4.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/416">ionic-team/stencil-sass#416</a></li> <li>chore(deps-dev): bump <code>@babel/traverse</code> from 7.15.4 to 7.23.2 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/418">ionic-team/stencil-sass#418</a></li> <li>chore(deps): update node.js to v20.8.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/417">ionic-team/stencil-sass#417</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.5.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/419">ionic-team/stencil-sass#419</a></li> <li>chore(deps): update dependency terser to v5.22.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/420">ionic-team/stencil-sass#420</a></li> <li>chore(deps): update dependency rollup to v4 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/415">ionic-team/stencil-sass#415</a></li> <li>chore(deps): update dependency npm to v10.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/422">ionic-team/stencil-sass#422</a></li> <li>chore(deps): update actions/checkout action to v4.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/421">ionic-team/stencil-sass#421</a></li> </ul> <p><strong>Full Changelog</strong>: <a href="https://github.com/ionic-team/stencil-sass/compare/v3.0.6...v3.0.7">https://github.com/ionic-team/stencil-sass/compare/v3.0.6...v3.0.7</a></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
|||
| 026efeb0a8 |
chore(deps): Bump @stencil/core from 4.5.0 to 4.6.0 in /core (#28400)
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.5.0 to 4.6.0. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/stencil/blob/main/CHANGELOG.md"><code>@stencil/core</code>'s changelog</a>.</em></p> <blockquote> <h1>💥 <a href="https://github.com/ionic-team/stencil/compare/v4.5.0...v4.6.0">4.6.0</a> (2023-10-23)</h1> <h3>Bug Fixes</h3> <ul> <li><strong>compiler:</strong> consistently generate additional type files (<a href="https://redirect.github.com/ionic-team/stencil/issues/4938">#4938</a>) (<a href=" |
|||
| 60f3d65794 |
fix(alert, action-sheet): show scrollbar for long list of options (#28369)
Issue number: resolves #18487 --------- <!-- 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. --> Web-based users do not get a scrollbar when: - alert has a long list of inputs (this also happens on `ion-select` with the alert interface) - `ion-select` uses the action-sheet interface and has a long list of options This makes it difficult for users to navigate through the options by forcing them to use their keyboards. Some users may also not be used to using their keyboards for navigation. Additionally, this can lead to potential confusion that there are no other options. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Web-based users get a scrollbar when: - alert has a long list of inputs (this also happens on `ion-select` with the alert interface) - `ion-select` uses the action-sheet interface and has a long list of options ## 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. --> The issue was filed for the alert interface but it's also happening on the action-sheet interface. Dev build: 7.5.1-dev.11697570585.1774584d |
|||
| 7ecd41f385 |
test(radio): skip Safari on legacy tab key tests (#28387)
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. --> Legacy radio has tests that use `Tab` key presses. These tend to flake at unknown moments and were skipped until a fix can be implemented. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Unable to replicate the flakiness locally or on GitHub. However, it only fails on Safari so the tests were re-enabled except for Safari. ## 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 only happens on legacy. The legacy form controls will also be removed in the future. Due to this, these tests will be removed anyways at that time. |
|||
| 2b015b2214 |
fix(input, searchbar, textarea): ensure nativeInput is always available (#28362)
Issue number: resolves #28283 --------- <!-- 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. --> `getInputElement()` is used to access the native input. If the component has yet to render, then the function will return `undefined`. This happens mostly when using `ref` on React. ```tsx <IonInput ref={async input => { const nativeInput = await input.getInputElement(); // nativeInput is undefined }} /> ``` ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `getInputElement()` will wait to return once the component is ready. ## 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.5.1-dev.11697488622.175c9183` |
|||
| 15a02253d3 |
chore: add stronger types to several files (#28347)
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 would like to swap out usages of the any type for stronger types. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> |
|||
| 331c08aad5 |
fix(fab): apply safe area in positioning to proper side regardless of direction (#28377)
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 calculating the fab's horizontal position, the safe area is taken into account. However, which safe area side is applied changes depending on whether the document's direction is LTR or RTL. This is incorrect as the left safe area padding will always be on the left side regardless of direction, and vice versa. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> The left safe area is always applied to the fab's `left` position, and vice versa. ## 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> |
|||
| c801e2ada9 |
chore: remove unused sass variables (#28363)
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. --> This project has several unused Sass variables still in the code base. The team would like to remove these. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removed unused Sass variables ## 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. --> The original scope of this ticket was for checkbox only, but many other components had unused sass variables, so I decided to tackle everything all at once. Since these variables are not used anywhere: 1. The build should pass 2. There should be no screenshot diffs |
|||
| 5a30082546 |
fix(menu): menu no longer disappears with multiple split panes (#28370)
Issue number: resolves #18683, resolves #15538, resolves #22341 --------- <!-- 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. --> Menus in a split pane are hidden when a second split pane is mounted/made visible. This is because the `onSplitPaneChanged` callback does not take into account whether the it is a child of the split pane that emitted `ionSplitPaneVisible`. When split pane 2 is shown, that causes the menu is split pane 1 to hide. When split pane 1 is shown, the menu inside of it _is_ shown. However, since split pane 2 is then hidden that component also emits `ionSplitPaneVisible`, causing the menu inside of split pane 1 to hide. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Menus are only hidden when its parent split pane changes visibility ## 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.5.1-dev.11697568647.1ac87d08` --------- Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> |
|||
| 068d003860 |
chore(angular): proxies file is ignored by prettier (#28379)
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. --> Prettier is configured to ignore the `proxies.ts` file in the `src` directory only. This means it is adjusting whitespace/commas/etc on the `proxies.ts` file in the `standalone` directory which we do not want because we will always get diffs whenever `npm run build` is run in `core`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated prettier config to ignore all `proxies.ts` files in the `angular` package - Re-generated the proxies file ## 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. --> |
|||
| 6b7d288536 |
fix(rtl): allow :host to use rtl() (#28353)
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
While working on a safe area padding mixin, I realized that `rtl()`
wasn't being applied for `:host` when using Firefox or Safari. This is
happening because the syntax for `:dir()` is wrong. The placement needs
to be updated for Firefox and Safari to register it.
```scss
:host {
@include rtl() { // <- won't work
// styles
}
}
// generates
:host-context([dir=rtl]) {
// styles
}
:host:dir(rtl) { // <- wrong syntax
// styles
}
```
```scss
:host(.class) {
@include rtl() { // <- won't work
// styles
}
}
// generates
:host-context([dir=rtl]):host(.class) {
// styles
}
:host-context([dir=rtl]).class {
// styles
}
:host(.class):dir(rtl) { // <- wrong syntax
// styles
}
```
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
I updated `rtl()` to use `:dir()` as the `addHostSelector` in the
`add-root-selector` function. This generates all the correct selectors
for Firefox and Safari. However, `:dir()` does not have the structure of
`:host-context()` so I had to add a new parameter to `add-root-selector`
to determine whether to use `:host-context()` or not. I set the default
to `true` since the function originally used `:host-context()`.
An extra win is that the updated function will be ready for when
`:host-context()` can be removed from the codebase.
```diff
:host {
@include rtl() { // <- works
// styles
}
}
// generates
:host-context([dir=rtl]) {
// styles
}
- :host:dir(rtl) {
+ :host(:dir(rtl)) {
// styles
}
```
```diff
:host(.class) {
@include rtl() { // <- works
// styles
}
}
// generates
:host-context([dir=rtl]):host(.class) {
padding-right: 40px;
}
:host-context([dir=rtl]).class {
// styles
}
- :host(.class):dir(rtl) {
+ :host(.class:dir(rtl)) {
// styles
}
```
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
N/A
---------
Co-authored-by: ionitron <hi@ionicframework.com>
|
|||
| 82d6309ef1 |
fix(angular): remove form control side effects (#28359)
Issue number: resolves #28358
---------
<!-- 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. -->
|
|||
| 416bb736a1 |
refactor(item-sliding): remove unused CSS from item options (#28367)
Issue number: Internal --------- ## What is the current behavior? Item sliding has some unused CSS and no tests for safe area padding based on the direction. This CSS is not used: |
|||
| 0188289e96 |
merge release-7.5.1
Release 7.5.1 |
|||
| e21085f15d | chore: clean up changelog | |||
| da0da54314 | chore(): update package lock files | |||
| 38f2a027f0 | v7.5.1 v7.5.1 | |||
| 3a3ebcf659 |
chore(ci): add workflow for testing ionicons dev build (#28345)
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. --> Testing Ionicons in Ionic is currently difficult. Developers need to a) create a dev build of Ionicons, b) create a branch in Ionic, c) install the dev build in Ionic core, d) push the branch, and e) create a draft PR to watch the CI process run. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Introduces a workflow dispatch option for our CI process. This allows developers to run the CI process for any branch without creating PR. - I also added an optional input so devs can specify the ionicons version if they want to pass a special version. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
|||
| feda7a0e96 |
chore(deps): Bump @stencil/core from 4.4.1 to 4.5.0 in /core (#28364)
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.4.1 to 4.5.0. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/stencil/blob/main/CHANGELOG.md"><code>@stencil/core</code>'s changelog</a>.</em></p> <blockquote> <h1>📢 <a href="https://github.com/ionic-team/stencil/compare/v4.4.1...v4.5.0">4.5.0</a> (2023-10-16)</h1> <h3>Features</h3> <ul> <li><strong>compiler, runtime:</strong> add support for form-associated elements (<a href="https://redirect.github.com/ionic-team/stencil/issues/4784">#4784</a>) (<a href=" |
|||
| ed7a5e5f4a |
chore(deps-dev): Bump @axe-core/playwright from 4.8.0 to 4.8.1 in /core (#28354)
Bumps [@axe-core/playwright](https://github.com/dequelabs/axe-core-npm) from 4.8.0 to 4.8.1. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/dequelabs/axe-core-npm/blob/develop/CHANGELOG.md"><code>@axe-core/playwright</code>'s changelog</a>.</em></p> <blockquote> <h1>Change Log</h1> <p>All notable changes to this project will be documented in this file. See <a href="https://conventionalcommits.org">Conventional Commits</a> for commit guidelines.</p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/dequelabs/axe-core-npm/commits">compare view</a></li> </ul> </details> <br /> [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> |
|||
| 3d96ccb7b2 |
chore(deps-dev): Bump @playwright/test from 1.38.1 to 1.39.0 in /core (#28339)
Bumps [@playwright/test](https://github.com/microsoft/playwright) from 1.38.1 to 1.39.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/microsoft/playwright/releases"><code>@playwright/test</code>'s releases</a>.</em></p> <blockquote> <h2>v1.39.0</h2> <h2>Add custom matchers to your expect</h2> <p>You can extend Playwright assertions by providing custom matchers. These matchers will be available on the expect object.</p> <pre lang="js"><code>import { expect as baseExpect } from '@playwright/test'; export const expect = baseExpect.extend({ async toHaveAmount(locator: Locator, expected: number, options?: { timeout?: number }) { // ... see documentation for how to write matchers. }, }); <p>test('pass', async ({ page }) => { await expect(page.getByTestId('cart')).toHaveAmount(5); }); </code></pre></p> <p>See the documentation <a href="https://playwright.dev/docs/test-configuration#add-custom-matchers-using-expectextend">for a full example</a>.</p> <h2>Merge test fixtures</h2> <p>You can now merge test fixtures from multiple files or modules:</p> <pre lang="js"><code>import { mergeTests } from '@playwright/test'; import { test as dbTest } from 'database-test-utils'; import { test as a11yTest } from 'a11y-test-utils'; <p>export const test = mergeTests(dbTest, a11yTest); </code></pre></p> <pre lang="js"><code>import { test } from './fixtures'; test('passes', async ({ database, page, a11y }) => { // use database and a11y fixtures. }); </code></pre> <h2>Merge custom expect matchers</h2> <p>You can now merge custom expect matchers from multiple files or modules:</p> <pre lang="js"><code>import { mergeTests, mergeExpects } from '@playwright/test'; import { test as dbTest, expect as dbExpect } from 'database-test-utils'; import { test as a11yTest, expect as a11yExpect } from 'a11y-test-utils'; <p>export const test = mergeTests(dbTest, a11yTest); </tr></table> </code></pre></p> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
|||
| fe47594dc0 |
feat(title): large title transition supports dynamic font scaling (#28290)
Issue number: resolves #28351 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The collapsible large title transition does not support Dynamic Font Scaling as the position values are all hardcoded. Additionally, I noticed that the title and the text do not align very well even at the default font scale. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> I made a few changes to support Dynamic Font Scaling, fix the default scale alignment, and generally make this code easier to maintain (or at least I hope it will): 1. Removed most hardcoded values in favor of bounding box calculations. The hardcoded values that remain have comments explaining what they are. 2. Modified the back button animation so the container handles the translation and have the back button text animation handle its scale. Having the back button text handle the translation and the scale at the same time made it hard to figure out what the correct values should be. 3. Added a lot of comments explaining what we are doing/why **When the Large Title and Back Button Texts Do Not Match** | `FW-4146` (default) | branch (default) | `FW-4146` (scaled) | branch (scale) | | - | - | - | - | | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/a6261499-c5ca-4ee3-af62-fa124718ca46"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/0648c0b1-e1f8-43c1-9e7e-91489cc8ec4a"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/0def6d88-22d0-48b9-98b3-0ed2bbb407aa"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/3650ceb1-f4cb-4530-b7c6-17194f4ccd66"></video> | **When the Large Title and Back Button Texts Do Match** | `FW-4146` (default) | branch (default) | `FW-4146` (scaled) | branch (scale) | | - | - | - | - | | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/2b8035a4-81aa-4901-99e1-fd49db1fd0d7"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/e3c66978-2015-484e-b337-73ac1c4c02a1"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/437483a8-2495-4c54-9c27-47c91af4c562"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/05ef08b0-cf0d-469d-8834-533071a8c583"></video> | ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Note that the alignment of the title/button will not exactly match native iOS. The goal of this PR is to get something that is pretty close (similar to how it was when we originally implemented this) --------- Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> |
|||
| fa78676d57 |
fix(angular): do not create duplicate menuController instances (#28343)
Issue number: resolves #28337
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Duplicate instances of `menuController` are being created in
`@ionic/angular`. `ion-menu` registers itself in the `menuController`
from `@ionic/core`, but the `MenuController` from `@ionic/angular` uses
the `menuController` from `@ionic/core/components`. This is how the
overlay providers work too. Normally, this is not a problem. However,
`menuController` caches references to registered menus in each
controller instances:
|
|||
| 1ba9973857 |
fix(react): cleanup functions are execute for lifecycle hooks (#28319)
Issue number: Resolves #28186 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Ionic lifecycle hooks do not execute a cleanup function when the underlying `useEffect` is unmounted. ```ts useEffect(() => { return () => { console.log('cleanup'); // called }; }); useIonViewWillEnter(() => { return () => { console.log('cleanup'); // never called }; }); ``` Ionic's implementation registers the lifecycle callback to be handled at a later time, by the page managers. However, it does not keep a reference to the returned callback, so it cannot execute it when the `useEffect` is unmounted. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Ionic lifecycle hooks execute dev-specified cleanup functions ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev-build: `7.4.4-dev.11696956070.1faa3cfe` This PR builds on the changes in #28316. --------- Co-authored-by: Maria Hutt <maria@ionic.io> Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> |
|||
| dd93e0b268 |
fix(angular): export missing lifecycle interfaces for standalone package (#28346)
Issue number: N/A
Resolves feedback identified here:
|
|||
| 79725d7d7a |
chore(deps-dev): Bump @capacitor/core from 5.4.2 to 5.5.0 in /core (#28340)
Bumps [@capacitor/core](https://github.com/ionic-team/capacitor) from 5.4.2 to 5.5.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/capacitor/releases"><code>@capacitor/core</code>'s releases</a>.</em></p> <blockquote> <h2>5.5.0</h2> <h1><a href="https://github.com/ionic-team/capacitor/compare/5.4.2...5.5.0">5.5.0</a> (2023-10-11)</h1> <h3>Features</h3> <ul> <li><strong>android:</strong> allow developers to provide logic for onRenderProcessGone in WebViewListener (<a href="https://redirect.github.com/ionic-team/capacitor/issues/6946">#6946</a>) (<a href=" |
|||
| d669fbefd2 |
chore(deps-dev): Bump @axe-core/playwright from 4.7.3 to 4.8.0 in /core (#28338)
Bumps [@axe-core/playwright](https://github.com/dequelabs/axe-core-npm) from 4.7.3 to 4.8.0. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/dequelabs/axe-core-npm/blob/develop/CHANGELOG.md"><code>@axe-core/playwright</code>'s changelog</a>.</em></p> <blockquote> <h1><a href="https://github.com/dequelabs/axe-core-npm/compare/v4.7.3...v4.8.0">4.8.0</a> (2023-09-28)</h1> <h3>Bug Fixes</h3> <ul> <li><strong>cli:</strong> better error message for ChromeDriver version mismatch (<a href="https://redirect.github.com/dequelabs/axe-core-npm/issues/680">#680</a>) (<a href=" |
|||
| f14a59c5e0 |
fix(react): lifecycle events are removed on page unmount (#28316)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> While debugging #28186, Maria and I identified that Ionic's lifecycle event listeners (`ionViewWillEnter`, etc.) were being registered multiple times on the same `.ion-page` element. This resulted in problematic behavior, where a user's implementation of our lifecycle hooks, would execute their callback multiple times. ```ts useIonViewWillEnter(() => { // This is called 2x for every time the `ionViewWillEnter` event is emitted (in React 18, dev mode) console.log('hello world'); }); ``` When the Ionic lifecycle event listeners are registered in React, we bind the scope of the class to the callback function. When removing the event listener we additional use the `.bind` syntax. ```tsx componentDidMount() { element.addEventListener('ionViewWillEnter', this.ionViewWillEnter.bind(this)); } componentWillUnmount() { // This creates a new instance of the function to remove! It doesn't remove the original event listener. element.removeEventListener('ionViewWillEnter', this.ionViewWillEnter.bind(this)); } ``` The `.bind` method returns a new instance of the function. This means in the implementation we are creating a new instance of the function when both adding and removing the event listener - resulting in the `removeEventListener` to never remove the original event listener. This behavior only occurred in React 18 in dev mode, as a result of the mount/unmount behavior running 2x for `useEffect` hooks. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Ionic lifecycle event listeners are removed from element references when they are unmounted. - User's lifecycle callback methods are only invoked once per event emission. |Before|After| |----|----| |<img alt="CleanShot 2023-10-09 at 18 32 08@2x" src="https://github.com/ionic-team/ionic-framework/assets/13732623/53f2ef5d-5900-4a84-b427-fa6c9d35d081">|<img alt="CleanShot 2023-10-09 at 18 29 37@2x" src="https://github.com/ionic-team/ionic-framework/assets/13732623/c8a9a657-a0bf-4d6d-9f21-a41a686de490">| ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: Maria Hutt <maria@ionic.io> Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> |
|||
| dcbf45101f |
chore: update codeowners (#28332)
Issue number: N/A "Owning" a test didn't really work out like I expected/hoped. A lot of changes to the test files were minor, so I ended up just getting assigned to more-or-less random PRs. It wasn't really hurting anything, but I might as well just let the bot assign me. --------- ## Does this introduce a breaking change? - [ ] Yes - [x] No |
