mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
01857dd31589403cb4bc6bef894415032026aa66
13038 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
ionitron
|
01857dd315 | chore(): update package lock files | ||
|
ionitron
|
dbe6f390ef | v7.2.2 v7.2.2 | ||
|
Liam DeBeasi
|
0c117cfe7f |
fix(select): popover uses modern form syntax (#27818)
Issue number: resolves #27071, resolves #27786 --------- <!-- 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-select-popover` is using the legacy syntax for `ion-checkbox` and `ion-radio`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Migrated checkbox and radio to use the modern syntax - Updated the visual rendering tests to also check the checked state. I noticed during development that I accidentally broke the checked state, so I added tests so we can't accidentally break it again. A couple notes on other screenshot diffs: - On iOS, the item border line now extends past the radio circle. This is an intentional behavior and aligns with native iOS. Having the radio in the "start" slot is typically only done when the content in the default slot is another interactive element (like and input) and not a text label. - On MD, the control heights are smaller. When comparing with https://material-components.github.io/material-components-web-catalog/#/component/select, the new behavior seems to be correct. Both the spec and Ionic item heights are 48px. Interestingly, the radios in `ion-select-popover` have always been 48px tall, but the checkboxes were 54px. Now both the radios and checkboxes are 48px. ## 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: amandaejohnston <amandaejohnston@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Liam DeBeasi
|
f14c440d63 |
fix(input, textarea): input does not block floating label (#27870)
Issue number: resolves #27812 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> We currently have CSS to ensure the floating/stacked label is not obscured by the input/textarea when using the outline styles. However, it was discovered that this scenario can happen with any floating/stacked label not just when the input/textarea is using the outline style. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Floating/stacked labels appear on top of the input/textarea regardless of fill mode. ## 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.2.1-dev.11690464203.1b2b4419` --------- Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Liam DeBeasi
|
bd1910ba69 |
fix(datetime-button): render correct text when passing partial date values (#27816)
Issue number: resolves #27797 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Datetime Button passes a parsed value to one of the many text formatting utilities we have, such as `getMonthAndYear`. However, developers can pass partial date values such as `2022` or `2022-04` (April 2022). According to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format, these are still valid date strings. However, the `parseDate` utility does not add fallback values. So passing `2022` will cause the `day` and `month` fields to be `undefined`. This means that `getNormalizedDate` passes `'//2022'` to the `Date` constructor. Some browsers, such as Chrome, will automatically account for the stray slashes and still return a valid date. Other browsers, such as Safari, do not do this and will either return "Invalid Date" or throw an error. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Date normalizing utility now has fallback values so we always pass in a valid date. In the example above, `getNormalizedDate` will now pass `'1/1/2022'` instead of `'//2022'` to the `Date` constructor. - Refactored other utils that use `new Date` to make use of `getNormalizedDate` since they are also impacted. Note: I added an E2E test instead of a spec test because I want to test cross-browser behavior to ensure consistency. ## 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. --> |
||
|
Liam DeBeasi
|
824033f1d4 |
fix(react, vue): custom animations are used when going back (#27895)
Issue number: resolves #27873 --------- <!-- 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. --> Custom animations are not always used when the `handleNavigateBack` method is called. This impacts both Ionic React and Ionic Vue. While we do set the `incomingRouteParams` with the animation: |
||
|
Liam DeBeasi
|
b8553d89f8 |
docs(popover): clarify size property (#27894)
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. --> See: https://github.com/ionic-team/ionic-framework/issues/27877 The current description does not accurately describe what `size="auto"` does. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Description clarifies that the width of the popover is set based on platform defaults. ## 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. --> |
||
|
Liam DeBeasi
|
ba2f49b8a4 |
fix(radio): radios can be focused and are announced with group (#27817)
Issue number: resolves #27438 --------- <!-- 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 a few issues with the modern radio syntax: 1. The native radio is inside the Shadow DOM. As a result, radios are not announced with their parent group with screen readers (i.e. "1 of 3") 2. The native radio cannot be focused inside of `ion-select-popover` on Firefox. 3. The `ionFocus` and `ionBlur` events do not fire. I also discovered an issue with item: 1. Items inside of a Radio Group have a role of `listitem` which prevent radios from being grouped correctly in some browsers. According to https://bugzilla.mozilla.org/show_bug.cgi?id=1840916, browsers are behaving correctly here. The `listitem` role should not be present when an item is used in a radio group (even if the radio group itself is inside a list). ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Most of the changes are test-related, but I broke it down per commit to make this easier to review: |
||
|
dependabot[bot]
|
a08a5894ba |
chore(deps-dev): Bump @stencil/sass from 3.0.4 to 3.0.5 in /core (#27850)
Bumps [@stencil/sass](https://github.com/ionic-team/stencil-sass) from 3.0.4 to 3.0.5. <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.5</h2> <h2>What's Changed</h2> <h3>Bug Fixes</h3> <ul> <li>fix(utils): only run plugin for sass files by <a href="https://github.com/rwaskiewicz"><code>@rwaskiewicz</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/361">ionic-team/stencil-sass#361</a></li> </ul> <h3>Chores</h3> <ul> <li>chore(package): add engines to package.json by <a href="https://github.com/rwaskiewicz"><code>@rwaskiewicz</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/337">ionic-team/stencil-sass#337</a></li> <li>chore(repo): remove dependabot by <a href="https://github.com/rwaskiewicz"><code>@rwaskiewicz</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/332">ionic-team/stencil-sass#332</a></li> <li>Configure Renovate by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/330">ionic-team/stencil-sass#330</a></li> <li>chore: replace stencil slack with discord channel by <a href="https://github.com/sean-perkins"><code>@sean-perkins</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/349">ionic-team/stencil-sass#349</a></li> <li>chore(repo): update ci workflow post-stencil v4 by <a href="https://github.com/rwaskiewicz"><code>@rwaskiewicz</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/355">ionic-team/stencil-sass#355</a></li> <li>chore(ci): don't fail fast for build job by <a href="https://github.com/rwaskiewicz"><code>@rwaskiewicz</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/363">ionic-team/stencil-sass#363</a></li> <li>chore(repo): ignore .tgz files by <a href="https://github.com/rwaskiewicz"><code>@rwaskiewicz</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/362">ionic-team/stencil-sass#362</a></li> </ul> <h3>Dependency Updates</h3> <p><code>@ionic/prettier-config</code></p> <ul> <li>chore(deps): update dependency <code>@ionic/prettier-config</code> to v3.1.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/371">ionic-team/stencil-sass#371</a></li> <li>chore(deps): update dependency <code>@ionic/prettier-config</code> 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/373">ionic-team/stencil-sass#373</a></li> </ul> <p><code>@stencil/core</code></p> <ul> <li>chore(deps-dev): bump <code>@stencil/core</code> from 3.3.0 to 3.3.1 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/328">ionic-team/stencil-sass#328</a></li> <li>chore(deps-dev): bump <code>@stencil/core</code> from 3.3.1 to 3.4.0 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/344">ionic-team/stencil-sass#344</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v3.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/354">ionic-team/stencil-sass#354</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> 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/360">ionic-team/stencil-sass#360</a></li> </ul> <p><code>@types/node</code></p> <ul> <li>chore(deps-dev): bump <code>@types/node</code> from 20.2.5 to 20.3.0 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/340">ionic-team/stencil-sass#340</a></li> <li>chore(deps-dev): bump <code>@types/node</code> from 20.3.0 to 20.3.1 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/343">ionic-team/stencil-sass#343</a></li> <li>chore(deps): update dependency <code>@types/node</code> to v20.3.2 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/359">ionic-team/stencil-sass#359</a></li> <li>chore(deps): update dependency <code>@types/node</code> to v20.3.3 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/365">ionic-team/stencil-sass#365</a></li> </ul> <p><code>actions/checkout</code></p> <ul> <li>chore(deps): bump actions/checkout from 3.5.2 to 3.5.3 by <a href="https://github.com/dependabot"><code>@dependabot</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/335">ionic-team/stencil-sass#335</a></li> </ul> <p><code>actions/setup-node</code></p> <ul> <li>chore(deps): update actions/setup-node action to v3.7.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/367">ionic-team/stencil-sass#367</a></li> </ul> <p><code>jest</code></p> <ul> <li>chore(deps): update jest to v29 (major) by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/352">ionic-team/stencil-sass#352</a></li> <li>chore(deps): update dependency jest to v29.6.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/368">ionic-team/stencil-sass#368</a></li> </ul> <p><code>node</code></p> <ul> <li>chore(deps): update node.js to v20.3.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/353">ionic-team/stencil-sass#353</a></li> <li>chore(deps): update node.js to v20.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/369">ionic-team/stencil-sass#369</a></li> <li>chore(deps): update node.js to v20.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/375">ionic-team/stencil-sass#375</a></li> </ul> <p><code>np</code></p> <!-- raw HTML omitted --> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
||
|
Liam DeBeasi
|
0b8f1bc7dd |
fix(item-options): use correct safe area padding (#27853)
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. --> Item sliding options in the "start" slot use the "left" safe area padding on the end edge. This causes the padding to be added in the wrong place. During development I also discovered that the RTL padding was wrong for both start and end options. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> LTR: - `side="start"` options set "left" safe area padding on left edge of first child - `side="end"` options set "right" safe area padding on right edge of last child RTL: - `side="start"` options set "right" safe area padding on right edge of first child - `side="end"` options set "left" safe area padding on the left edge of the last child ## 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. --> | side prop/text direction | `main` | `branch` | | - | - | - | | start/LTR |  |  | | end/LTR |  |  | | start/RTL |  |  | | end/RTL |  |  | |
||
|
Liam DeBeasi
|
bd71373f1a |
merge release-7.2.1
Release 7.2.1 |
||
|
ionitron
|
960adbbc5c | chore(): update package lock files | ||
|
ionitron
|
db29871654 | v7.2.1 v7.2.1 | ||
|
dependabot[bot]
|
e9ee96a443 |
chore(deps-dev): Bump @playwright/test from 1.36.1 to 1.36.2 in /core (#27857)
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from 1.36.1 to 1.36.2. <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>1.36.2</h2> <h3>Highlights</h3> <p><a href="https://redirect.github.com/microsoft/playwright/issues/24316">microsoft/playwright#24316</a> - [REGRESSION] Character classes are not working in globs in 1.36</p> <h3>Browser Versions</h3> <ul> <li>Chromium 115.0.5790.75</li> <li>Mozilla Firefox 115.0</li> <li>WebKit 17.0</li> </ul> <p>This version was also tested against the following stable channels:</p> <ul> <li>Google Chrome 114</li> <li>Microsoft Edge 114</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
||
|
Liam DeBeasi
|
38626d9680 |
fix(modal): body background is reset with inline card modals (#27835)
Issue number: resolves #27830 --------- <!-- 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. --> Card modals set the body background to `black` to match iOS. This color should be removed once the final card modal has been closed. When modals were updated to work inline, the code that removed the background color was never updated to account for this. As a result, opening multiple inline card modals never removes the background color because there are always >1 modals in the DOM. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The card modal now queries for _visible_ modals in the DOM to determine if it should remove the background color. ## 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.2.1-dev.11689879279.14e28634` |
||
|
Liam DeBeasi
|
6e4919caff |
fix(item-sliding): buttons are not interactive on close (#27829)
Issue number: resolves #22722 --------- <!-- 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. --> Item Sliding Options are not disabled until after a 600ms timeout. This timeout exists to allow the close transition to complete. Without the timeout, the item sliding options disappear without a transition. I explored waiting for the `transitionend` event instead of the `setTimeout`, but the bug persisted. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - If an item sliding is closing then we add a class to the host. This class disables pointer events on all `ion-item-options` children so the buttons cannot be accidentally tapped while closing. This class is then removed after the 600ms timeout. ## 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. --> |
||
|
dependabot[bot]
|
5122ced9e1 |
chore(deps-dev): Bump @capacitor/core from 5.2.1 to 5.2.2 in /core (#27832)
Bumps [@capacitor/core](https://github.com/ionic-team/capacitor) from 5.2.1 to 5.2.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/capacitor/releases"><code>@capacitor/core</code>'s releases</a>.</em></p> <blockquote> <h2>5.2.2</h2> <h2><a href="https://github.com/ionic-team/capacitor/compare/5.2.1...5.2.2">5.2.2</a> (2023-07-19)</h2> <h3>Bug Fixes</h3> <ul> <li>add http method to prototype.open (<a href="https://redirect.github.com/ionic-team/capacitor/issues/6740">#6740</a>) (<a href=" |
||
|
Liam DeBeasi
|
3c794d25d6 |
merge feature-7.2
Feature 7.2 |
||
|
Liam DeBeasi
|
9c799a6eea |
merge release-7.2
Release 7.2 |
||
|
ionitron
|
08cc3d93ae | chore(): update package lock files | ||
|
ionitron
|
8661e21674 | v7.2.0 v7.2.0 | ||
|
Liam DeBeasi
|
a32cd57f1d |
chore: sync with main
chore: sync with main |
||
|
Liam DeBeasi
|
ddfbc9faef | Merge remote-tracking branch 'origin/main' into final-7.2-sync | ||
|
Liam DeBeasi
|
c8dcf18b9b |
merge release-7.1.4
Release 7.1.4 |
||
|
ionitron
|
f18da214bc | chore(): update package lock files | ||
|
ionitron
|
7e174849b5 | v7.1.4 v7.1.4 | ||
|
Sean Perkins
|
90f41243d9 |
feat(angular): support binding routing data to component inputs (#27694)
Issue number: Resolves #27476 --------- <!-- 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 Angular application on Angular v16 cannot use the [`bindToComponentInputs`](https://angular.io/api/router/ExtraOptions#bindToComponentInputs) feature to assign route parameters, query parameters, route data and route resolve data to component inputs. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Ionic Angular developers can use the option on `RouterModule.forRoot` to enable the Angular feature for binding the route snapshot data to the component inputs. **Modules** ```ts @NgModule({ imports: [ RouterModule.forRoot([/* your routes */], { bindToComponentInputs: true // <-- enable this feature }) ] }) export class AppModule { } ``` **Standalone** ```ts import { withComponentInputBinding } from '@angular/router'; bootstrapApplication(App, { providers: [ provideRouter(routes, //... other features withComponentInputBinding() // <-- enable this feature ) ], }); ``` With this feature enabled, developers can bind route parameters, query parameters, route data and the returned value from a resolver to input bindings on their component. For example, with a route configuration of: ```ts RouterModule.forChild([ { path: ':id', data: { title: 'Hello world' }, resolve: { name: () => 'Resolved name' }, loadComponent: () => import('./example-component/example.component').then(c => c.ExampleComponent) } ]) ``` and a component configuration of: ```ts @Component({ }) export class ExampleComponent { @Input() id?: string; @Input() title?: string; @Input() name?: string; @Input() query?: string; } ``` Navigating to the component with a url of: `/2?query=searchphrase` The following would occur: - `id` would return `2` - `title` would return `Hello world` - `name` would return `Resolved name` - `query` would return `searchphrase` ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> This PR will need to be targeted to a minor release once a design doc is approved by the team. Dev-build: `7.1.3-dev.11689276547.129acb40` |
||
|
Sean Perkins
|
2cf1a0bcae |
fix(angular): menu button is enabled with Angular Universal builds (#27814)
Issue number: Resolves #27524 #22206 --------- <!-- 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. --> After destructive hydration from an Angular Universal build, the `ion-menu` is disabled. This results in a few problematic behaviors: - If used with an `ion-split-pane`, the split pane will not render with the menu. - If used with an `ion-menu-button`, the menu icon will not render and the menu will not be accessible. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removes automatically disabling the `ion-menu` when in a server environment. - Prevents setting an `ion-menu` that no longer exists in the DOM, as an active menu. This allows the most recent menu to be enabled when rendered from Angular Universal builds. Loom recording overviewing the change: https://www.loom.com/share/5a149218adc84cc2af435fc1b1f45124?sid=249028f4-be3d-4d4a-948a-597da83be95a ## 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.1.4-dev.11689625795.1d16532b` |
||
|
dependabot[bot]
|
aa9ea60357 |
chore(deps-dev): Bump @playwright/test from 1.36.0 to 1.36.1 in /core (#27809)
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from 1.36.0 to 1.36.1. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/Microsoft/playwright/releases"><code>@playwright/test</code>'s releases</a>.</em></p> <blockquote> <h2>v1.36.1</h2> <h3>Highlights</h3> <p><a href="https://redirect.github.com/microsoft/playwright/issues/24184">microsoft/playwright#24184</a> - [REGRESSION]: Snapshot name contains some random string after test name when tests are run in container</p> <h3>Browser Versions</h3> <ul> <li>Chromium 115.0.5790.75</li> <li>Mozilla Firefox 115.0</li> <li>WebKit 17.0</li> </ul> <p>This version was also tested against the following stable channels:</p> <ul> <li>Google Chrome 114</li> <li>Microsoft Edge 114</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
||
|
dependabot[bot]
|
2996c853a3 |
chore(deps-dev): Bump @capacitor/haptics from 5.0.5 to 5.0.6 in /core (#27804)
Bumps [@capacitor/haptics](https://github.com/ionic-team/capacitor-plugins) from 5.0.5 to 5.0.6. <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.6</h2> <h2><a href="https://github.com/ionic-team/capacitor-plugins/compare/@capacitor/haptics@5.0.5...@capacitor/haptics@5.0.6">5.0.6</a> (2023-07-12)</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=" |
||
|
Nicolas Sandron
|
71310372c9 |
feat(searchbar): add name property (#27737)
resolves #27675 |
||
|
dependabot[bot]
|
f7b0706f19 |
chore(deps-dev): Bump @capacitor/keyboard from 5.0.5 to 5.0.6 in /core (#27802)
Bumps [@capacitor/keyboard](https://github.com/ionic-team/capacitor-plugins) from 5.0.5 to 5.0.6. <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.6</h2> <h2><a href="https://github.com/ionic-team/capacitor-plugins/compare/@capacitor/keyboard@5.0.5...@capacitor/keyboard@5.0.6">5.0.6</a> (2023-07-12)</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=" |
||
|
dependabot[bot]
|
721fc6fd9a |
chore(deps-dev): Bump @capacitor/core from 5.1.1 to 5.2.1 in /core (#27805)
Bumps [@capacitor/core](https://github.com/ionic-team/capacitor) from 5.1.1 to 5.2.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.2.1</h2> <h2><a href="https://github.com/ionic-team/capacitor/compare/5.2.0...5.2.1">5.2.1</a> (2023-07-13)</h2> <h3>Bug Fixes</h3> <ul> <li>allow single parameter on setRequestBody (<a href="https://redirect.github.com/ionic-team/capacitor/issues/6728">#6728</a>) (<a href=" |
||
|
dependabot[bot]
|
d5f4e0a498 |
chore(deps-dev): Bump @capacitor/status-bar from 5.0.5 to 5.0.6 in /core (#27803)
Bumps [@capacitor/status-bar](https://github.com/ionic-team/capacitor-plugins) from 5.0.5 to 5.0.6. <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.6</h2> <h2><a href="https://github.com/ionic-team/capacitor-plugins/compare/@capacitor/status-bar@5.0.5...@capacitor/status-bar@5.0.6">5.0.6</a> (2023-07-12)</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=" |
||
|
Maria Hutt
|
b78af7598f |
fix(button): submit form when pressing enter key (#27790)
Issue number: resolves #19368 --------- <!-- 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? The form submits when clicking on the `ion-button`. However, users cannot submit the form when focused on a form element and pressing the `enter` button. This does not follow the behavior of the native button on a form. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Form now submits when a form element is focused and the `enter` button is pressed. - It also submits regardless of the amount of form elements present. - Form will not submit if the `ion-button` is disabled. ## 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 |
||
|
Sean Perkins
|
16c77ccdc8 |
refactor: use capacitor types for native plugins (#27755)
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. -->
Ionic currently detects and uses Capacitor APIs for different plugins
(haptics, status bar and keyboard). This implementation does not have
type safety and can result in unexpected behaviors.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds `@capacitor/core`, `@capacitor/keyboard`, `@capacitor/haptics`
and `@capacitor/status-bar` as dev dependencies. These should _only_ be
used with `import type { }`.
- Refactors the plugin usages to be typed against the plugin packages,
while using a duplicate enum when needing a value. This allows us to not
bundle the capacitor plugins with Ionic Framework.
- Introduces a `getCapacitor()` function for interacting with the
`window.Capacitor` object through a typed object.
**How does it work?**
The idea is we want the type safety from the Capacitor packages, without
directly bundling that source code within Ionic Framework. This means we
use the Capacitor deps where a type is needed, but clone any enums where
a value is referenced. If a Capacitor dep changes the supported values,
Typescript will fail to compile and that will signal to use to update
our enum values to match any changes.
## 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.1.2-dev.11688696027.1c4d4ad1`
Tested against a demo app for some of the core behavior:
https://github.com/sean-perkins/capacitor-ionic-plugins-demo
|
||
|
Liam DeBeasi
|
66584b03d0 |
fix: safari no longer adjusts text in landscape (#27787)
Issue number: resolves #27782 --------- <!-- 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 uses text-size-adjust to prevent browsers from resizing text in landscape mode in order to match native app behavior. However, WebKit only supports `-webkit-text-size-adjust`, so this fix never applied to iOS devices. https://caniuse.com/?search=text-size-adjust ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Add `-webkit-text-size-adjust` where we use `text-size-adjust` ## 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. --> **Landscape** | main | branch | | - | - | |  |  | **Portrait** (Should be no changes) | main | branch | | - | - | |  |  | |
||
|
Amanda Johnston
|
da2fc0a256 |
chore(toggle): rename item test to use correct component name (#27789)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The `item` test for `ion-toggle` uses `label` instead of `toggle` in the file name. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Test and corresponding screenshots folder renamed. ## 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. --> |
||
|
Sean Perkins
|
64b75f27ac |
Merge pull request #27791 from ionic-team/sp/sync-7.2-with-main-7-12
chore: sync with main |
||
|
Sean Perkins
|
03c830e9e9 | Merge remote-tracking branch 'origin/main' into sp/sync-7.2-with-main-7-12 | ||
|
Liam DeBeasi
|
2cb7013954 |
fix(textarea): stacked/floating textarea size is correct on safari (#27766)
Issue number: resolves #27345 --------- <!-- 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. --> WebKit has a bug where children of grid elements placed inside flex elements have the wrong size. This is causing textarea's dimensions to spill out of its grid container. Grid is used for autogrow functionality, and the grid itself is placed inside `.label-wrapper` which uses flexbox for aligning the label and control. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Adds `grid-auto-rows: 100%` to avoid the WebKit bug which specifies the size of implicitly-created grid rows. ## 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.1.3-dev.11688748118.18ff9e7d` WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=256781 --------- Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Amanda Johnston
|
35f0ec581a |
fix(radio, checkbox, toggle): add top and bottom margins when in ion-item (#27788)
Issue number: Resolves #27498 --------- <!-- 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 `ion-radio`, `ion-checkbox`, or `ion-toggle` is used within `ion-item`, top and bottom margins are not added to the label, while they are present when using the legacy syntax. We didn't catch this because the issue is only visible when using a label that breaks onto more than one line; otherwise, the height of the item exceeds what the margins would've added. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Margins added. Values were taken from `ion-item` styles [here]( |
||
|
dependabot[bot]
|
3bd1d7e1e5 |
chore(deps-dev): Bump @playwright/test from 1.35.1 to 1.36.0 in /core (#27778)
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from 1.35.1 to 1.36.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.36.0</h2> <h3>Highlights</h3> <p>🏝️ Summer maintenance release.</p> <h3>Browser Versions</h3> <ul> <li>Chromium 115.0.5790.75</li> <li>Mozilla Firefox 115.0</li> <li>WebKit 17.0</li> </ul> <p>This version was also tested against the following stable channels:</p> <ul> <li>Google Chrome 114</li> <li>Microsoft Edge 114</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
||
|
Liam DeBeasi
|
c1cd9a54f2 |
merge release-7.1.3
Release 7.1.3 |
||
|
ionitron
|
d6c812f785 | chore(): update package lock files | ||
|
ionitron
|
0c9392abd6 | v7.1.3 v7.1.3 | ||
|
Liam DeBeasi
|
82c568b8c8 |
fix(overlays): first button is not focused on backdrop tap (#27774)
Issue number: resolves #27773 --------- <!-- 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 focus trap util for scoped components moves focus back to the first focusable element inside of `.ion-overlay-wrapper` when clicking the backdrop. The reason for this is it (incorrectly) assumes that all focusable elements will be children of `.ion-overlay-wrapper`. This is true **except** for `ion-backdrop` which overlays the entire screen and therefore cannot be a child of `.ion-overlay-wrapper`. This does not impact modal and popover as the shadow focus trap utility makes use of the Shadow Root as the parent for all focusable elements, not `.ion-overlay-wrapper`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Scoped focus trap util no longer moves focus if the `ion-backdrop` was focused. I opted to explicitly account for `ion-backdrop` rather than come up with some new private API. As far as I can tell `ion-backdrop` is the only exception to this focus trapping rule with `.ion-overlay-wrapper`. Open to alternative ideas though. ## 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.1.3-dev.11689085446.181c2143` |
||
|
Liam DeBeasi
|
e7353946a1 |
test(picker-internal): re-enable basic screenshot test (#27768)
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. --> Test was skipped due to flakiness ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Re-enabled test - Removes directions tests because behavior does not vary across text directions - Updated screenshot to screenshot individual picker instead of the entire page ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Liam DeBeasi
|
096d9cc931 |
test(overlays): migrate to pageUtils and re-enable (#27769)
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. --> Focus trapping tests were disabled because they were flaky ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Re-enabled the test - Migrated the test to use the pageUtils fixture which seems to be more stable with keyboard focus than the built-in page.keyboard commands ## 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. --> |
||
|
Brandy Carney
|
6fe716fd13 |
feat(button): allow button to increase in height when text wraps (#27547)
Issue number: N/A - this does not completely resolve an issue but it enables users to opt-in to having text wrap in a button by setting a minimum height --------- ## What is the current behavior? The current behavior when text is really long in a button is: - Default buttons expand in width until part of the text (and button) is off the screen and not in the visible viewport - Block and full buttons horizontally align the text in the center and overflow it on both sides (but the overflow is not visible so the text is cut off at the beginning and end) ## What is the new behavior? Allow the button height to increase when text wraps and add some padding so that buttons with wrapped text still look nice. This does **NOT** wrap the text in a button by default. That will be done in FW-4599. - Removed `text-overflow: ellipsis` since this does not have any effect - Changes `height` setting to `min-height` on all button types (small, large, default) and buttons inside of an item, toolbar or list header - Increases `padding-top` and `padding-bottom` on the buttons so that overflowing buttons have padding around them - Changes `.button-native` display property from `block` to `flex` in order for anchor tags (`<ion-button href="#">` to align their text vertically - Sets `flex-shrink: 0` on slotted `start`/`end` elements to prevent icons (and other elements) from shrinking to make room for the text - Adds e2e test for button wrapping including the different types of buttons that were changed by this PR - Adds `ion-text-wrap` to the `ion-button` elements used in this test to verify the height / padding changes are working as desired (to be removed with FW-4599) - Screenshot diffs are in the following PR: https://github.com/ionic-team/ionic-framework/pull/27561 ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information This does **NOT** wrap the text in a button by default. It only enables buttons to look nicer and auto adjust their height/padding when the text is wrapping. After internal discussion we decided that automatically making the text wrap inside of a button may have undesired effects on existing apps. For example, if someone has a button inside of a list header with a long label, the button will now wrap if it has a space or dash in the text content. Developers should set `ion-text-wrap` on the `ion-button` to opt-in to text wrapping in a button, and this will become the default as part of FW-4599 (the next major release). --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> |