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:
a08a5894ba/packages/react-router/src/ReactRouter/IonRouter.tsx (L247-L252)
We do sometimes call `handleNavigate`:
a08a5894ba/packages/react-router/src/ReactRouter/IonRouter.tsx (L273-L279)
This `handleNavigate` method sets `incomingRouteParams` again:
a08a5894ba/packages/react-router/src/ReactRouter/IonRouter.tsx (L225-L230)
Since we do not re-pass `routeAnimation`, that field gets set to
`undefined` and the custom animation does not get used.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Custom animation is now passed to `handleNavigate`
## 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.2-dev.11690810887.180000d1`
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. -->
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:
ae77002afd
- Item no longer has `role="listitem"` when used inside of a radio
group.
- Added spec tests to verify the role behavior
0a9b7fb91d
- I discovered that some the legacy basic test were accidentally using
the modern syntax. I corrected this by adding `legacy="true"` to the
radios.
a8a90e53b2,
412d1d54e7,
and
1d1179b69a
- The current radio group tests only tested the legacy radio syntax, and
not the modern syntax.
- I created a `legacy` directory to house the legacy syntax tests.
- I created new tests in the root test directory for the modern syntax.
- I also deleted the screenshots for the modern tests here because the
tests for `ion-radio` already take screenshots of the radio (even in an
item).
e2c966e68b
- Moved radio roles to the host. This allows Firefox to focus radios and
for screen readers to announce the radios as part of a group.
- I also added focus/blur listeners so ionFocus and ionBlur fire
f10eff47a5
- I cleaned up the tests here to use a common radio fixture
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
I tested this with the following setups. ✅ indicates the screen reader
announces the group count (i.e. "1 of 4"). ❌ indicates the screen reader
does not announce the group count.
**Radio in Radio Group:**
- iOS + VoiceOver: ✅
- Android + TalkBack: ✅
- macOS + VoiceOver + Safari: ✅
- macOS + VoiceOver + Firefox: ✅
- macOS + VoiceOver + Chrome: ✅
- Windows + NVDA + Chrome: ✅
- Windows + NVDA + Firefox: ✅
**Radio in Item in Radio Group :**
- iOS + VoiceOver: ✅
- Android + TalkBack: ❌
(https://bugs.chromium.org/p/chromium/issues/detail?id=1459006)
- macOS + VoiceOver + Safari: ✅
- macOS + VoiceOver + Firefox: ✅
- macOS + VoiceOver + Chrome: ❌
(https://bugs.chromium.org/p/chromium/issues/detail?id=1459003)
- Windows + NVDA + Chrome: ✅
- Windows + NVDA + Firefox: ✅
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="1f983acac0"><code>1f983ac</code></a>
chore: mark 1.36.2 (<a
href="https://redirect.github.com/Microsoft/playwright/issues/24379">#24379</a>)</li>
<li><a
href="40e2096fbc"><code>40e2096</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/24371">#24371</a>):
fix: properly handle character sets in globs</li>
<li>See full diff in <a
href="https://github.com/Microsoft/playwright/compare/v1.36.1...v1.36.2">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
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`
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. -->
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`
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`
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="4417b78552"><code>4417b78</code></a>
chore: mark 1.36.1 (<a
href="https://redirect.github.com/Microsoft/playwright/issues/24230">#24230</a>)</li>
<li><a
href="cf5900f142"><code>cf5900f</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/24213">#24213</a>):
Revert "fix: do not collide with other tests when test n...</li>
<li>See full diff in <a
href="https://github.com/Microsoft/playwright/compare/v1.36.0...v1.36.1">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
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
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
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. -->
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>
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](096d9cc931/core/src/components/item/item.ios.scss (L203-L206))
and
[here](096d9cc931/core/src/components/item/item.md.scss (L298-L301)),
which no longer get applied because the `ion-label` is nested in an
additional shadow component. Note that left/right margins are already
included in the modern syntax labels.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This PR is a combination of the following:
- https://github.com/ionic-team/ionic-framework/pull/27771
- https://github.com/ionic-team/ionic-framework/pull/27783
- https://github.com/ionic-team/ionic-framework/pull/27784
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
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`
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>
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. -->
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>
Issue number: resolves#27762
---------
<!-- 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. -->
Stencil 3.4.1 regressed the tsconfig alias path transpilation. This is
fixed in 4.0.0 though.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Downgrade to Stencil 3.4.0. Stencil 4.0 has breaking changes, so I'd
like to wait on upgrading until we can work through any of the changes
that impact Ionic.
This reverts commit 9793b3c0a0.
## 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. -->
Stencil issue: https://github.com/ionic-team/stencil/issues/4550
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. -->
We do not have screenshots that verify the focus states are being
applied correctly.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added screenshot tests to verify focus states are being captured for
non-translucent tab bars (iOS and MD) as well as translucent tab bars
(iOS only)
## 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>
Issue number: resolves#27722
---------
<!-- 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 back button on iOS uses the same background and foreground colors on
hover + focus making it impossible to read
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Back button uses a transparent background color on hover + focus to
match the behavior of `ion-button`
| `main` | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/e8bed785-66d7-40cd-beb3-54636c7fc59a"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/2c4a9a5c-f1a9-4a83-879f-8b0e9ce18558"></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. -->
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 `angular` directory sits at the root of the project instead of in
`packages` with all the other JS Framework integrations. This does not
cause any functional issues with Ionic, but it is confusing since
integrations are not in a consistent place.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Moves the `angular` directory to `packages/angular`
Note: Most files should remain unchanged. The only files I changed are
the files that had direct paths to the old `angular` directory:
1. Removes the `angular` path in `lerna.json`. This is now covered by
`packages/*`
2. Updated the angular file path in `.gitignore`
3. Updates the path to the angular package in `stencil.config.ts` for
the Angular Output Targets
4. Updates some of Angular's sync scripts to correctly get the core
stylesheets as well as the core package.
5. Updates the test app sync script to correctly sync core and
angular-server
~I'm not entirely sure why GitHub thinks
https://github.com/ionic-team/ionic-framework/pull/27719/files#diff-f5bba7e7c7c75426e2b9c89868310cb03890493b4efe0252adf8d12cc8398962
is a new file since it exists in `main` here:
1f06be4a31/angular/test/base/scripts/build-ionic.sh~
Fixed in
6e7fc49827
## 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.11688052109.13454f5c`
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 outline select uses `border-left` and `border-right` properties to
handle LTR vs RTL borders. However, our border mixin takes care of this
by using logical border properties.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the outline select to use the border mixin.
Note 1: There should be no visual changes as a result of this. This is
simpler way of doing what we are already doing.
Note 2: There do exist logical border radius properties (for the other
explicit LTR vs RTL work we do), but Ionic 7 supports browsers that do
not support these properties yet. (I created FW-4661 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. -->
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. -->
Stencil nightly builds are broken
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
this commit updates the name of the dependent job for building the
angular server (`build-angular-server`).
## 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. -->
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. -->
`@ionic/angular-server` has a dependency on `@ionic/core` not
`@ionic/angular` (see
1f06be4a31/packages/angular-server/package.json).
As a result, once `@ionic/core` is built there is no reason for
`@ionic/angular-server` to also wait for `@ionic/angular` to build
before it can build.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `@ionic/angular-server` now waits for `@ionic/core` to build instead
of `@ionic/angular`
## 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 sample run:
https://github.com/ionic-team/ionic-framework/actions/runs/5414097033
Issue number: Resolves#27146
---------
<!-- 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 `ion-nav` is presented multiple times in an overlay, the user's
`root` component will attempt to be attached twice. This results in the
view being mounted without the `rootParams` being defined, causing an
exception in a user's application.
This behavior occurs due to the `root` watch callback firing twice. The
second time the `ion-nav` is presented in an overlay, the watch callback
will execute _before_ `componentDidLoad` fires. This results in the
watch callback firing twice, once from the underlying change detection
and the second time from [manually calling the
function](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/nav/nav.tsx#L115)
from `componentDidLoad`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `ion-nav` includes a new flag to track when `componentDidLoad`
executes. This allows us to prevent the behavior of the `rootChanged`
callback from happening when the component has not loaded.
- `ion-nav` consistently attaches the `rootParams` to the `root`
component.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev-build: `7.0.15-dev.11687924603.10a1e477`.
### How to test
You can install against the reproduction app in the linked issue to
verify the behavior before and after.
- Before, the app will throw an exception when presenting the modal the
second time.
- After, the app will not throw an exception when presenting the modal
the second time. Information that you fill out on the main screen form
will be rendered inside the modal content.
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/27709
The `ionInput` description is vague and does not clarify that it only
fires as the user types.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Clarified the ionInput description for input and textarea
## 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. -->
Issue number: N/A
---------
## What is the current behavior?
Nightly build and release broken in #27711 due to missing shell property
in GitHub Actions workflow.
## What is the new behavior?
- Nightly build and release works.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Issue number: internal ticket
---------
<!-- 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. -->
Size tests were being skipped.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Size tests are no longer being skipped.
- Size tests have been provided comments to explain flakiness.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
I recommend adding a `.only` to the `popover: visible backdrop` and
running the test with `npm run test.e2e popover -- --repeat-each 100` a
few times
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: #
---------
## What is the current behavior?
Package provenance was disabled in #27656.
## What is the new behavior?
- Package provenance is enabled.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
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. -->
We have a workflow that is no longer needed (that I wrote 🙃)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
remove the stencil v4 nightly workflow following the stencil v4 release
on 2023.06.26
## 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
I'll have to take a look at the Actions tab at GitHub after this is
merged. I may have to do some manual cleanup (deleting workflow runs)
once this file is no longer in the repo.
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
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 forgot to address the tests when working on FW-2608 to address issue
#26103
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated the visual regressions tests to verify that the item-sliding
displays correctly on LTR/RTL.
- Updated the item sliding tests to use the generators
## 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 tests for item-sliding are disabled due to gesture flakiness. This
will be addressed in another ticket. I recommend testing locally by
adding the `.only` to all tests called `should not have visual
regressions` and running `npm run test.e2e item-sliding`.
Issue number: resolves#27688
---------
<!-- 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. -->
Autogrow broke as a result of
8bcd9e8b35.
`white-space: pre-wrap` used to be on the host, but it was discovered
that this caused textareas that had any white space to break visually.
As a result, I moved `white-space: pre-wrap` to apply on the host only
for the legacy textarea. The modern textarea had `white-space: pre-wrap`
set on the native textarea.
We also had `white-space: pre-wrap` set on the `::after` pseudo element
for autogrow:
f29c66aee2/core/src/components/textarea/textarea.scss (L311)
However, we also use the `text-inherit` mixin:
f29c66aee2/core/src/components/textarea/textarea.scss (L322)
This mixin sets `white-space: inherit` and also overrides the `pre-wrap`
we had set. As a result, the whitespace was being inherited from the
default white space instead of `pre-wrap`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Textarea no longer overrides the explicit `white-space: pre-wrap` on
the `::after` element.
- Re-enabled a skipped autogrow test that would have caught this bug
- Fixed a whitespace issue in another autogrow test
Note: The legacy screenshot diffs in
6ba2093166
are unrelated to this PR. Now that we are unskipping them the
screenshots have been updated. I verified this in
https://github.com/ionic-team/ionic-framework/pull/27692. This PR shows
a branch created off `7.0.x` (which does not have the reported
regression) and the tests enabled w/ the screenshots updated. The linked
verification PR can be closed when this PR merges.
## 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.1-dev.11687532007.11a1a9a4
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
There is a known bug in a dependency that Stencil uses to process CSS
that causes the build to fail on Ionicons 7.1.1+. Our
`package-lock.json` always installs 7.1.0, but if you remove the package
lock you'll get a newer version of Ionicons that triggers the bug.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Core installs only ionicons 7.1.0 until the underlying bug is resolved
(tracked internally)
## 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. -->
Issue number: resolves#27061
---------
<!-- 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. -->
Textarea does not accept custom HTML labels
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Textarea accepts custom HTML labels as an experimental feature. We
marked this as experimental because it makes use of "scoped slots" which
is an emulated version of Web Component slots. As a result, there may be
instances where the slot behavior does not exactly match the native slot
behavior.
Note to reviewers: This is a combination of previously reviewed PRs. The
implementation is complete, so feel free to bikeshed.
## 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. -->
Docs PR: https://github.com/ionic-team/ionic-docs/pull/3001
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#17248
---------
<!-- 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 the `icon` shadow part allows customization of the existing toggle
icon, developers do not have a way to specify a different icon to use
entirely.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
New props `toggleIcon` and `expandedIcon` added. (Design docs are
[here](https://github.com/ionic-team/ionic-framework-design-documents/blob/main/projects/ionic-framework/components/select/0002-custom-icons.md)
and
[here](https://github.com/ionic-team/ionic-framework-design-documents/blob/main/projects/ionic-framework/components/select/0003-custom-icon-on-open.md)
respectively.)
## 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. -->
Docs PR: https://github.com/ionic-team/ionic-docs/pull/2996
Dev build: `7.0.15-dev.11687278023.161b97d8`
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#27061
---------
<!-- 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. -->
Input does not accept custom HTML labels
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Input accepts custom HTML labels as an experimental feature. We marked
this as experimental because it makes use of "scoped slots" which is an
emulated version of Web Component slots. As a result, there may be
instances where the slot behavior does not exactly match the native slot
behavior.
Note to reviewers: This is a combination of previously reviewed PRs. The
implementation is complete, so feel free to bikeshed.
## 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. -->
Docs PR: https://github.com/ionic-team/ionic-docs/pull/2997
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
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. -->
[GitHub Actions comes with Lerna 7
preinstalled](https://github.com/actions/runner-images/blob/main/images/linux/Ubuntu2204-Readme.md#project-management)
which has a breaking change for `lerna bootstrap`. This is causing Dev
builds and releases to intermittently fail despite our `package.json`
wanting Lerna 5.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Ensure that the local version of Lerna is used instead of the global
Lerna. Long term we should look to update to Lerna 7 and migrate off
`lerna bootstrap`.
## 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. -->
Issue number: resolves#27654
---------
<!-- 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 Capacitor and the Keyboard plugin are available,
`Keyboard.getEngine()` returns an object:
d3232dcc00/core/src/utils/native/keyboard.ts (L19)
When Capacitor is _not_ available this method returns `undefined`.
However, when Capacitor is available but the Keyboard plugin is not,
`Keyboard.getEngine()` returns `false`.
In https://github.com/ionic-team/ionic-framework/pull/27569 I fixed a
bug where the wrong listeners were being used to emit keyboard lifecycle
events. However, I did not know that method can return `false`, and our
tests only account for the `undefined` or defined edge cases. As a
result, if you are using Capacitor in an app that is deployed to the
browser then the visual viewport Ionic keyboard events never fire.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Visual viewport Ionic keyboard events fire in browser
## 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. -->
Issue number: resolves#27567
---------
<!-- 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?
Translucent toasts do not have the appropriate background color when the
`color` property is set on the toast.
<!-- Please describe the current behavior that you are
modifying. -->
<img width="554" alt="Screenshot 2023-06-14 at 5 46 45 PM"
src="https://github.com/ionic-team/ionic-framework/assets/14926794/05f7522c-23bc-44f8-af42-b82034cbe067">
## What is the new behavior?
- Translucent toasts can have a background color based on the `color`
property of the toast.
<!-- Please describe the behavior or changes that are being added by
this PR. -->
<img width="553" alt="Screenshot 2023-06-14 at 5 46 28 PM"
src="https://github.com/ionic-team/ionic-framework/assets/14926794/28a6345b-5bf3-494c-af81-0d53877295df">
## 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
Note: Translucent toasts are only available in `ios` mode.
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
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. -->
Ionic Framework references a deprecated object,`Context`, exposed by
Stencil
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
starting with stencil v4, the deprecated `Context` object will no longer
be exposed by stencil. this change was introduced in
https://github.com/ionic-team/stencil/pull/4437, and will be present in
the first v4 prerelease following v4.0.0-beta.2. in anticipation for
this change, we seek to remove references to `Context` early.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No - To the best of my knowledge
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
ATM, the Stencil v4 nightly build is passing, as it's grabbing
`@stencil/core@4.0.0-beta.2`. The change in which we remove the
`Context` object will occur in the _next_ pre-release. I'm removing
`Context` here to try to get a jump on things.
The current iteration of the code that I'm deleting was added in
c415bbe1d7 (diff-ce62e75f0c31a76aac491f13a64e9c7771a6cbae8ca6635541164b69f0479bf1)
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Bumps [@axe-core/playwright](https://github.com/dequelabs/axe-core-npm)
from 4.7.2 to 4.7.3.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/dequelabs/axe-core-npm/releases"><code>@axe-core/playwright</code>'s
releases</a>.</em></p>
<blockquote>
<h2>Release 4.7.3</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>webdriverjs:</strong> skip unloaded iframes (<a
href="https://redirect.github.com/dequelabs/axe-core-npm/issues/743">#743</a>)
(<a
href="9cb50ebb6b">9cb50eb</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/dequelabs/axe-core-npm/blob/develop/CHANGELOG.md"><code>@axe-core/playwright</code>'s
changelog</a>.</em></p>
<blockquote>
<h1>Change Log</h1>
<p>All notable changes to this project will be documented in this file.
See <a href="https://conventionalcommits.org">Conventional Commits</a>
for commit guidelines.</p>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="9cb50ebb6b"><code>9cb50eb</code></a>
fix(webdriverjs): skip unloaded iframes (<a
href="https://redirect.github.com/dequelabs/axe-core-npm/issues/743">#743</a>)</li>
<li><a
href="48e222e87d"><code>48e222e</code></a>
Merge pull request <a
href="https://redirect.github.com/dequelabs/axe-core-npm/issues/740">#740</a>
from dequelabs/master</li>
<li><a
href="4a5591347a"><code>4a55913</code></a>
docs: update docs to use named import and create example.js (<a
href="https://redirect.github.com/dequelabs/axe-core-npm/issues/741">#741</a>)</li>
<li><a
href="c0b063144d"><code>c0b0631</code></a>
Merge pull request <a
href="https://redirect.github.com/dequelabs/axe-core-npm/issues/736">#736</a>
from dequelabs/release-1685630602</li>
<li><a
href="281ca6955d"><code>281ca69</code></a>
chore: release v4.7.2</li>
<li>See full diff in <a
href="https://github.com/dequelabs/axe-core-npm/compare/v4.7.2...v4.7.3">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Issue number: resolves#26596
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
There is no way to customize the month/year toggle button using CSS.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds a Shadow Part to the month/year toggle button.
## 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>
Issue number: Resolves#21320
---------
<!-- 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. -->
`onDoubleClick` bindings on Ionic components do not fire when the
element is double clicked.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `onDoubleClick` fires on Ionic components
- Fixed the unit testing set-up for the react test apps
## 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. -->
Issue number: resolves#27601
---------
## What is the current behavior?
The current behavior restores overflow styles while moving (within the
setCSS function).
## What is the new behavior?
Overflow styles are restored when refresher gesture ends.
## 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. -->
Honestly, I don't know exactly. From code perspective I would say 'Yes',
but I can't get the impact of the change.
Ionic Team edit: There are no changes to the public API, and this is
fixing a behavior that used to work so there are no breaking changes.
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The keyboard navigation was being skipped due to flakiness.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The keyboard navigation is no longer being skipped.
- Using the `pageUtils` to Tab
- Verify the buttons are visible before keyboard press
## 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 flaky test would occur due to the keyboard being pressed before the
buttons have loaded in. Weirdly, this only happens when testing "Mobile
Chrome" but works fine outside testing.
I would recommend adding `only` to the test and using `npm run test.e2e
segment -- --repeat-each 50` to verify that it works.
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 `navigation` test for `ion-back-button` errors out in the console
and doesn't display when attempting to host it locally.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Test removed, since it had no E2E file and the functionality appears to
be redundant with the tests for `ion-nav`.
## 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. -->
Issue number: Resolves#19484
---------
<!-- 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 Angular implementation of `ion-tabs` does not support conditional
binding the `slot` property on `ion-tab-bar` or assigning a variable as
the slot.
For example, this usage is invalid:
```html
<ion-tabs>
<ion-tab-bar [slot]="slot"></ion-tab-bar>
</ion-tabs>
```
This occurs because `ng-content` only supports static content
projection. It is not intended for scenarios where the content can be
relocated or conditionally rendered.
An example of static content projection would be:
```html
<ion-tabs>
<ion-tab-bar slot="top"></ion-tab-bar>
</ion-tabs>
```
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `ion-tabs` supports conditional slot bindings or a slot that is bound
to a variable in Angular.
The revised implementation relocates the tab bar in the `ion-tabs`
template, based on it's current slot attribute. The implementation
checks the tab bar slot whenever the content 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.0.11-dev.11685631370.18980633`
---------
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The `ion-header` and `ion-footer` use a base64 encoded image for a box
shadow instead of using the CSS box-shadow property directly. The use of
the background image creates CSP violations. The historic reasoning of
using an image instead of box shadow was to improve scroll performance.
Browsers and devices have improved a lot since that was implemented (5
years ago).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the usage of `ion-header` and `ion-footer` to use a box
shadow. The value comes from Material's web implementation:
https://material-components.github.io/material-components-web-catalog/#/component/top-app-bar
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Reverts ionic-team/ionic-framework#27570
-------
The team is reconsidering this approach as it causes us to fight against
the browser. Discussions are ongoing internally, so I am going to revert
this patch until we can reach consensus.
Bumps
[@stencil/angular-output-target](https://github.com/ionic-team/stencil-ds-output-targets)
from 0.7.0 to 0.7.1.
<details>
<summary>Commits</summary>
<ul>
<li>See full diff in <a
href="https://github.com/ionic-team/stencil-ds-output-targets/commits">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Issue number: resolves#25945
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Datetime wheel pickers cannot be styled.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Adds styling APIs in accordance with the Wheel Pickers and Time Picker
sections of [this design
doc](https://github.com/ionic-team/ionic-framework-design-documents/blob/main/projects/ionic-framework/components/datetime/datetime-styling.md).
Shadow parts added:
- `wheel-item`
- `wheel-item active`
- `time-button`
- `time-button active`
CSS properties added:
- `--wheel-highlight-background`
- `--wheel-fade-background-rgb`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.0.7-dev.11685554390.10c2ca9b`
Docs PR: https://github.com/ionic-team/ionic-docs/pull/2982
Issue number: resolves#25578
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
If `ion-item-option`s are added or removed from an `ion-item-sliding`
asyncronously/after it has initialized, the sliding behavior of the item
will not update. If options are added to an item that didn't have any,
the item will not be openable. If all options are removed, the item will
still be openable, though no options will render.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The item now re-checks its options when it detects that any have been
added or removed, using the same utility/behavior as `ion-select`.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
In https://github.com/ionic-team/ionic-framework/pull/27598, I failed to
push a change that used the correct tag in the new Stencil v4 tag
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
this commit updates the stencil-version field for the Stencil v4
workflow to use the correct tag
## 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
log](https://github.com/ionic-team/ionic-framework/actions/runs/5190015779)
shows it being used properly:
<img width="579" alt="Screenshot 2023-06-06 at 10 53 18 AM"
src="https://github.com/ionic-team/ionic-framework/assets/1930213/eca96936-a114-4fb5-b473-cbd6bfc71b3a">
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Bumps
[@stencil/react-output-target](https://github.com/ionic-team/stencil-ds-output-targets)
from 0.5.0 to 0.5.1.
<details>
<summary>Commits</summary>
<ul>
<li>See full diff in <a
href="https://github.com/ionic-team/stencil-ds-output-targets/commits">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
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. -->
we have no way to test stencil v4 as a part of the nightly build
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
this commit adds a new ci cron job, 'stencil v4 build'. the purpose of
this job is to run the ionic framework ci suite on an nightly basis,
similar to the stencil nightly build.
a separate workflow has been created, as opposed to adding a `matrix` to
the pre-existing workflow, as doing so would require a great deal of
refactoring to the existing workflow. instead, a separate workflow
allows us to simply delete the this workflow once stencil v4 is
released.
as a part of this commit, we add a new input to the
'build-core-stencil-prerelease' action, allowing users of the action to
input the npm tag of `@stencil/core` to install
## 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
I tested the Stencil nightly job manually -
https://github.com/ionic-team/ionic-framework/actions/runs/5180201562
I was unable to run the v4 job, as it's not in `main` (yet 😉 ). But, I
can diff it against the known-to-be-good nightly workflow. The following
shows only the name of the job & npm tag are different:
```diff
diff stencil-v4.yml stencil-nightly.yml
3c3
< name: 'Stencil v4 Build'
---
> name: 'Stencil Nightly Build'
21c21
< build-core-with-stencil-v4:
---
> build-core-with-stencil-nightly:
27c27
< stencil-version: v4-next
---
> stencil-version: nightly
30c30
< needs: [build-core-with-stencil-v4]
---
> needs: [build-core-with-stencil-nightly]
37c37
< needs: [build-core-with-stencil-v4]
---
> needs: [build-core-with-stencil-nightly]
44c44
< needs: [build-core-with-stencil-v4]
---
> needs: [build-core-with-stencil-nightly]
65c65
< needs: [build-core-with-stencil-v4]
---
> needs: [build-core-with-stencil-nightly]
93c93
< needs: [build-core-with-stencil-v4]
---
> needs: [build-core-with-stencil-nightly]
129c129
< needs: [build-core-with-stencil-v4]
---
> needs: [build-core-with-stencil-nightly]
165c165
< needs: [build-core-with-stencil-v4]
---
> needs: [build-core-with-stencil-nightly]
```
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from
1.34.1 to 1.34.3.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/Microsoft/playwright/releases"><code>@playwright/test</code>'s
releases</a>.</em></p>
<blockquote>
<h2>v1.34.3</h2>
<h2>Highlights</h2>
<p><a
href="https://redirect.github.com/microsoft/playwright/issues/23228">microsoft/playwright#23228</a>
- [BUG] Getting "Please install <code>@playwright/test</code>
package..." after upgrading from 1.34.0 to 1.34.1</p>
<h2>Browser Versions</h2>
<ul>
<li>Chromium 114.0.5735.26</li>
<li>Mozilla Firefox 113.0</li>
<li>WebKit 16.4</li>
</ul>
<p>This version was also tested against the following stable
channels:</p>
<ul>
<li>Google Chrome 113</li>
<li>Microsoft Edge 113</li>
</ul>
<h2>v1.34.2</h2>
<h2>Highlights</h2>
<p><a
href="https://redirect.github.com/microsoft/playwright/issues/23225">microsoft/playwright#23225</a>
- [BUG] VSCode Extension broken with Playwright 1.34.1</p>
<h2>Browser Versions</h2>
<ul>
<li>Chromium 114.0.5735.26</li>
<li>Mozilla Firefox 113.0</li>
<li>WebKit 16.4</li>
</ul>
<p>This version was also tested against the following stable
channels:</p>
<ul>
<li>Google Chrome 113</li>
<li>Microsoft Edge 113</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="f11873a895"><code>f11873a</code></a>
chore: mark 1.34.3 (<a
href="https://redirect.github.com/Microsoft/playwright/issues/23268">#23268</a>)</li>
<li><a
href="b5ff463779"><code>b5ff463</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/23213">#23213</a>):
devops: do not use NPX during docker container build</li>
<li><a
href="4417a97482"><code>4417a97</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/23260">#23260</a>):
chore: move to npx playwright-core install when using core</li>
<li><a
href="2f3d88f3d5"><code>2f3d88f</code></a>
chore: mark 1.34.2 (<a
href="https://redirect.github.com/Microsoft/playwright/issues/23242">#23242</a>)</li>
<li><a
href="ba85623f40"><code>ba85623</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/23241">#23241</a>):
chore: keep <code>@playwright/test/</code>cli exposed</li>
<li>See full diff in <a
href="https://github.com/Microsoft/playwright/compare/v1.34.1...v1.34.3">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
---------
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The click event was firing twice.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The click event fires once.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
You can use the test file to see that the event now fires once, and
before this change it fired twice. I couldn't figure out how to write an
automated test for this that fails before the change and passes after
the change. (Perhaps because of how Jest "clicks" elements? Not sure.)
Also, you can use the repro repo in the Jira ticket and update it to
`"@ionic/angular": "7.0.10-dev.11685472954.170be0cc",` and see that the
issue is fixed.
Issue number: resolves#27268
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When tabbing on a radio group (modern syntax), it focuses on the next
radio option inside the radio group. It replicates the behavior of the
up/down keys.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- When tabbing on a radio group (modern syntax), it focuses on the next
radio option of the next radio group.
A spike ticket has been created to further investigate web accessibility
and browser compatibility.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
N/A
Issue number: resolves#27558
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The keyboard lifecycle util was always listening on visual viewport
events even when in native environments. The visual viewport API is not
reliable due to how the Ionic webview customizes how it resizes. We
should only be listening on the native keyboard events in native
environments.
https://github.com/ionic-team/capacitor/issues/37302e883f3932/keyboard/ios/Plugin/Keyboard.m (L90-L98)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Keyboard lifecycle util listens on native keyboard events only when in
native environment
## 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. -->
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Sometimes the datetime picker hasn't scrolled to the correct date yet
before the screenshot is taken. (See JIRA ticket for a failing build.)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The test waits until the picker has scrolled before taking the
screenshot.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Hopefully this is all that's needed. I did a few runs and it hasn't
failed, but it's hard to know with flaky tests 🙃
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The basic list test screenshots capture a portion of the box shadow from
the `ion-header`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removes the `ion-header` from the test template for screenshot capture
- Only visually captures the `ion-list`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
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. -->
PRs are first assigned to the team before being assigned to a single
team member. This causes reviews to show up
https://github.com/notifications for everyone even if they are not the
final reviewer.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- GitHub automatically assigns reviewers now, so I removed the global
Framework team codeowner. All PRs in this repo should have a team member
automatically assigned.
## 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. -->
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from
1.33.0 to 1.34.0.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/Microsoft/playwright/releases"><code>@playwright/test</code>'s
releases</a>.</em></p>
<blockquote>
<h2>v1.34.0</h2>
<h3>Highlights</h3>
<ul>
<li>
<p>UI Mode now shows steps, fixtures and attachments:
<!-- raw HTML omitted --></p>
</li>
<li>
<p>New property <a
href="https://playwright.dev/docs/api/class-testproject#test-project-teardown"><code>testProject.teardown</code></a>
to specify a project that needs to run after this
and all dependent projects have finished. Teardown is useful to cleanup
any resources acquired by this project.</p>
<p>A common pattern would be a <code>setup</code> dependency with a
corresponding <code>teardown</code>:</p>
<pre lang="js"><code>// playwright.config.ts
import { defineConfig } from '@playwright/test';
<p>export default defineConfig({
projects: [
{
name: 'setup',
testMatch: /global.setup.ts/,
teardown: 'teardown',
},
{
name: 'teardown',
testMatch: /global.teardown.ts/,
},
{
name: 'chromium',
use: devices['Desktop Chrome'],
dependencies: ['setup'],
},
{
name: 'firefox',
use: devices['Desktop Firefox'],
dependencies: ['setup'],
},
{
name: 'webkit',
use: devices['Desktop Safari'],
dependencies: ['setup'],
},
],
});
</code></pre></p>
</li>
<li>
<p>New method <a
href="https://playwright.dev/docs/test-assertions#expectconfigure"><code>expect.configure</code></a>
to create pre-configured expect instance with its own defaults such as
<code>timeout</code> and <code>soft</code>.</p>
<pre lang="js"><code>const slowExpect = expect.configure({ timeout:
10000 });
await slowExpect(locator).toHaveText('Submit');
<p>// Always do soft assertions.
const softExpect = expect.configure({ soft: true });
</code></pre></p>
</li>
</ul>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="4aee014caf"><code>4aee014</code></a>
chore: mark 1.34.0 (<a
href="https://redirect.github.com/Microsoft/playwright/issues/23123">#23123</a>)</li>
<li><a
href="bf25a93617"><code>bf25a93</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/23171">#23171</a>):
fix(tracing): when zipping remotely, use correct file na...</li>
<li><a
href="7effaf4f22"><code>7effaf4</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/23166">#23166</a>):
chore: fix file view padding</li>
<li><a
href="ef18287266"><code>ef18287</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/23165">#23165</a>):
docs: update release notes</li>
<li><a
href="552cba8c05"><code>552cba8</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/23148">#23148</a>):
chore: do not annotate actions after failed ones as time...</li>
<li><a
href="cd94a3f01d"><code>cd94a3f</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/23144">#23144</a>):
feat(connect): <code>pw:server:channel</code> and <code>pw:socks</code>
debug ...</li>
<li><a
href="3543a741fd"><code>3543a74</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/23140">#23140</a>):
docs: add dialog/consoleMessage helper methods for langu...</li>
<li><a
href="7196f82e52"><code>7196f82</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/23143">#23143</a>):
test: add attachment tests</li>
<li><a
href="32c247b815"><code>32c247b</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/23139">#23139</a>):
chore: opt out of trace attachments</li>
<li><a
href="c551cce74e"><code>c551cce</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/23130">#23130</a>):
feat(chromium): roll to r1064 (<a
href="https://redirect.github.com/Microsoft/playwright/issues/23132">#23132</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/Microsoft/playwright/compare/v1.33.0...v1.34.0">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
---------
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#27566
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The `touchstart` listener for focus visible is not marked as passive.
This causes a browser delay in case `touchstart` calls
`ev.preventDefault()`. However, we are not doing that in this block of
code.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added `passive: true` to the `touchstart` listener to avoid the
browser delay.
Note that this is only needed for touch and wheel events which is why I
only modified `touchstart`:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
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 Angular implementation of `ion-tabs` uses SASS styles in the inline
usage for styles:
```ts
styles: [`
:host {
z-index: $z-index-page-container;
}
`]
```
However Angular is expecting CSS mark-up by default. This results in an
invalid value being assigned to the `z-index`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removes the invalid style from the tabs stylesheet
- Removes unnecessary leading whitespace from the template
## 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. -->
resolves#27422
Co-authored-by: Jón Prüßmeier <jon-pruessmeier@users.noreply.github.com>
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Years in the date picker are displayed in descending order.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Years in the date picker are displayed in ascending order
- This matches the native behavior
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
This is not a breaking change, but it may be unexpected and also may
cause users' visual diff tests to fail. As such, we'll target this to
7.1
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
The updated snapshots show the change
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: Resolves#27503
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Ionic Framework wraps the implementation around Capacitor's Keyboard
plugin API, to provide additional functionality and behavior
"automatically" in Ionic, when the plugin is installed.
Certain methods such as `getResizeMode()` are only available for certain
platforms and will cause an error when running in the unsupported
platform.
Ionic Framework does not check to see if that platform is active before
calling potentially unsupported methods, which leads to an exception for
scenarios such as this - calling `getResizeMode()` on Android.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Handles the uncaught exception by returning `undefined` if the plugin
method is unavailable.
- Developers do not receive an uncaught exception on Android when using
the Capacitor Keyboard plugin with Ionic Framework
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev-build: `7.0.8-dev.11684444351.1b1ab142` (outdated)
Issue number: resolves#27112
---------
## What is the current behavior?
The select does not expose the label or the container for the
value/placeholder as a CSS shadow part in order to style it.
## What is the new behavior?
- Exposed `label` and `container` parts for custom styling
- Added an e2e test to verify the parts are working
- Renamed the existing screenshots for the custom tests to fix a typo
from "custon" to "custom"
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#27338
---------
## What is the current behavior?
Segment button on `md` mode shows two ripple effects: once on
pointerdown and again on pointerup
## What is the new behavior?
Segment button on `md` mode only shows a ripple effect on pointerdown
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Brandy Carney <brandy@ionic.io>
Issue number: resolves#27221
---------
## What is the current behavior?
The value property of the segment component in Ionic Framework currently
only accepts string values.
## What is the new behavior?
This pull request updates the "value" property of the segment component
to accept a union of string and number types. This allows for more
versatile data input in the segment component, particularly for users
who work with numerical data.
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
## Other information
N/A
Issue number: resolves#27470
---------
<!-- 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. -->
Passing multiple elements in to an inline modal causes `.ion-page` to
not get set. This causes content to get pushed off the bottom of the
modal equal to the height of the header. React has some special CSS that
prevents this:
eb2772c0ce/packages/react/src/components/createInlineOverlayComponent.tsx (L137-L140)
However, I think this should be delegated to `.ion-page` instead so the
behavior is consistent across frameworks. For example, Angular uses
`.ion-page`:
eb2772c0ce/angular/src/directives/overlays/modal.ts (L82)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Inline overlays in Ionic React and Ionic Vue wrap child content in
`.ion-delegate-host.ion-page`.
- Removed the custom flex styles from Ionic React as `.ion-page` has its
own 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. -->
Revised Design Doc:
https://github.com/ionic-team/ionic-framework-design-documents/pull/84
Issue number: N/A
[The Stencil team has moved their community from Slack to
Discord](https://twitter.com/stenciljs/status/1658561079767887873).
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
There is a link to the Slack.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- There is a link to the Discord.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: resolves#21205
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
`picker-column` keeps using LTR display when using RTL.
LTR:
`Column 1 Column 2`
RTL:
`Column 1 Column 2`
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
`picker-column` correctly displays for RTL.
LTR:
`Column 1 Column 2`
RTL:
`Column 2 Column 1`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This PR is already being tested through the `picker -> basic` and
`picker -> value` screenshots. Due to those tests, a new test is not
needed to verify the fix.
The current fix is only changing the `picker` and `picker-column`. The
`datetime` and `datetime-button` do not change, leaving the format up to
the users. It wouldn't change the functionality that was provided
through PR ionic-team/ionic-framework#17018.
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: Resolves#27403
---------
## What is the current behavior?
NavController.pop() returns `Promise<void>`.
## What is the new behavior?
NavController.pop() returns `Promise<boolean>` propagating success/fail
from underlying outlet.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The `basic` test for `ion-select` contains a lot of content that is
either duplicated within the test, duplicated by other tests, or simply
not used/needed. Additionally, some select options (notably gender and
hair color) are not inclusive.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Test template cleaned up, and options replaced with less personal ones
as needed. Legacy test HTML was intentionally left alone since we'll be
removing that in the near future anyway, though I did have to tweak a
legacy E2E test since it was visiting the non-legacy page.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: resolves#27205
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
If an Angular component that makes use of `ModalController` or
`PopoverController` has a property of its own named `modal` or `popover`
respectively, this will collide with an internal reference to the
modal/popover element and cause errors.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The actual behavior is unchanged, but a console error is logged guiding
the developer on how to fix the issue.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
I used the original reproduction from the issue to test. Full steps:
1. Clone the repo: https://github.com/Asac2142/expenses
2. Run `git checkout ef95c2e80a9991fe958d628f17ecc4e862c834ef` to get to
the app's state from when the issue was originally posted. Observe that
the component in `src/app/home/create-transaction` has a private prop
named `modal`.
3. Run `npm install`, then install the dev build: `npm install
@ionic/angular@7.0.7-dev.11684263140.15c242cf`
4. Run `ionic serve`. Click the fab button in the lower right. Observe
the console error. If you scroll down in the modal and click the
Category button, this will trigger the originally-reported issue.
5. Rename the private `modal` variable to something else, like `_modal`.
6. Refresh the page and re-open the modal. Note that no error is logged,
and the Category button can be clicked to open another modal without
issue.
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. -->
Screenshots in a branch are currently compared against the screenshots
on `main`. While we ultimately need to compare against ground truths in
`main`, this can cause tests to seemingly fail at random. For example,
this branch was created based on
eb2772c0ce.
However,
381de0b3d3
was added to `main` after the first commit and has new screenshot diffs.
I do not have the latest ground truths for the changed screenshots in
this branch, so the screenshot tests failed in
https://github.com/ionic-team/ionic-framework/actions/runs/4995702351/jobs/8947969061
even though I did not change any component implementations.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Test runs in CI now run against the ground truths available in the
branch. When a commit is added to the merge queue, it will be tested
against the latest `main` and any commits ahead of it in the queue. As a
result, if there _is_ a conflict then the test run will fail at that
point and the commit will be removed from the merge queue.
## 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. -->
Bumps
[@stencil/vue-output-target](https://github.com/ionic-team/stencil-ds-output-targets)
from 0.8.4 to 0.8.5.
<details>
<summary>Commits</summary>
<ul>
<li>See full diff in <a
href="https://github.com/ionic-team/stencil-ds-output-targets/commits">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
---------
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: Resolves#22176
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Translucent popovers do not get blurred in Chromium
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Translucent popover gets blurred in Chromium
Note: existing screenshot tests nicely show the change in behavior.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
Because of the [existing, apparently
intentional](https://bugs.chromium.org/p/chromium/issues/detail?id=1148826)
behavior in Chromium browsers with `backdrop-filter` and animation, we
need to either animate the arrow and content instead of the wrapper or
apply the filter to a different element. Here, I've animated the arrow
and content instead of the wrapper.
The fix only needs to apply in `ios` mode. The translucent option is not
supported in `md` mode.
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#27184
---------
## What is the current behavior?
The modern form controls do not use the same opacity for their labels
when disabled, resulting in inconsistent UI when using two different
types in the same view (select vs checkbox, for example).
## What is the new behavior?
The checkbox, input, radio, range, select, textarea and toggle labels
have been updated on both modes to use the same opacity as each other
when disabled. The checkbox and radio icons have been updated to use a
different opacity than the label for `md` mode.
- Updates `ios` mode so all form controls use the same opacity of `0.3`
- I could not find any guidelines by Apple for what color these should
be, so I decided to just make them the same as what is most commonly
used & match item
- Updates `md` mode so all form control labels use the same opacity of
`0.38`
- I used the [Material Design 3
documentation](https://m2.material.io/components) to get this number as
well as the opacity of the disabled selection controls in the [Material
Design 2 figma design
kit](https://www.figma.com/community/file/778763161265841481). The
Material Design 2 documentation does not mention the opacity, but this
is also the number used by Material Design 1 so it's safe to assume it
is what the disabled form labels should also use for Material Design 2.
- Updates the `md` range so the slotted elements are also included when
setting the opacity on the label
- Updates the range, radio & checkbox tests to make sure there are
screenshots in the different disabled states
- Updates the item/disabled test to include radio & textarea so you can
see all form controls side by side
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
I downloaded screenshots of the item disabled tests and put them side by
side for `main` and this branch in order to see the differences in the
labels. The grey boxes to the left of each item are just a bigger
version of the label color for that item, so it's easier to see when
they aren't the same.
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#25990
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The tab bar and footer are being shown too soon after the keyboard
begins to hide. This is happening because the webview resizes _after_
the keyboard begins to dismiss. As a result, it is possible for the tab
bar and footer to briefly appear on the top of the keyboard in
environments where the webview resizes.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The tab bar and footer wait until after the webview has resized before
showing again
| before | after |
| - | - |
| <video
src="https://user-images.githubusercontent.com/2721089/236905066-42ac17a5-a5bf-458b-9c62-005fcce05e20.MP4"></video>
| <video
src="https://user-images.githubusercontent.com/2721089/236905185-d2f539d1-6d93-4385-b1cb-24dd7aa06393.MP4"></video>
|
This code works by adding an optional parameter to the keyboard
controller callback called `waitForResize`. When defined, code within
Ionic can wait for the webview to resize as a result of the keyboard
opening or closing. Tab bar and footer wait for this `waitForResize`
promise to resolve before re-showing the relevant elements.
This `waitForResize` parameter is only only defined when all of the
following are two:
**1. The webview resize mode is known and is _not_ "None".**
If the webview resize mode is unknown then either the Keyboard plugin is
not installed (in which case the tab bar/footer are never hidden in the
first place) or the app is being deployed in a browser/PWA environment
(in which case the web content typically does not resize). If the
webview resize mode is "None" then that means the keyboard plugin is
installed, but the webview is configured to never resize when the
keyboard opens/closes. As a result, there is no need to wait for the
webview to resize.
**2. The webview has previously resized.**
If the keyboard is closed _before_ the opening keyboard animation
completes then it is possible for the webview to never resize. In this
case, the webview is at full height and the tab bar/footer can
immediately be re-shown.
------
Under the hood, we use a
[ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
to listen for when the web content resizes. Which element we listen on
depends on the resize mode set in the developer's Capacitor app. We
determine this in the `getResizeContainer` function.
From there, we wait for the ResizeObserver callback, then wait 1 more
frame so the promise resolves _after_ the resize has finished.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.0.6-dev.11683905366.13943af0`
Issue number: resolves#21764
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The `prevSelected` returns the same value as `selectedIndex`.
When a user has selected the first option then the second:
- `prevSelected` returns `1`
- `selectedIndex` returns `1`
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The `prevSelected` returns the index of the last selected option.
When a user has selected the first option then the second:
- `prevSelected` returns `0`
- `selectedIndex` returns `1`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Read the comment below regarding `toHaveReceivedEventDetail`.
Issue number: resolves#27478
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The modern syntax render function was missing `renderHiddenInput` which
caused modern `ion-select` instances to not participate in form
submission. Legacy syntax is not affected.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Modern syntax calls `renderHiddenInput`.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.0.7-dev.11684158250.1920157d`
Issue number: resolves#27129
---------
<!-- 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. -->
Material Design has 16px of margin between the form control and the
label, but we have 8px:
https://m2.material.io/components/selection-controls#usage
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates default margin from 8px to 16px for checkbox, input, radio,
range, select, textarea, and toggle.
Note: This should only apply to labels that are on the same line as the
form control. In other words, they do not apply to stacked/floating
labels.
## 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>
Issue number: resolves#27116
---------
<!-- 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. -->
With `ion-input`, `ion-select`, or `ion-textarea` using
`fill="outline"`, applying a large value for the `--border-radius` CSS
prop causes the radius to render differently on the left and right
sides:
This is due to the structure of the outline container, which is used to
render the empty space in the border when a `stacked` or `floating`
label floats upwards. The container has three pieces, which combine to
form a seamless-looking border:
The issue is that the browser will only render a radius that fits within
the element's dimensions, and the piece on the left side (or right on
RTL) is not wide enough.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
While we could fix this issue by making the left-side piece wider (and
there was originally a PR for this at
https://github.com/ionic-team/ionic-framework/pull/27459), it was
decided to not include this fix in Ionic automatically. This is because
the fix does not work for `label-placement="stacked"` or `"floating"`;
the notch spacer (the middle piece of the outline) is pushed to the
side, leading to broken visuals:
We decided that introducing inconsistent behavior across different
values for `label-placement` would be confusing for developers. Even if
we did restructure the outline container to position the notch spacer
correctly, it could easily be made to fall on the curve of the border,
creating awkward visuals.
Instead, developers looking to use a large `--border-radius` with
`fill="outline"` should either increase `--padding-start` to be at least
as high as the `--border-radius` (which will increase the width of the
left outline piece while also moving the floating label in step), or use
`shape="round"` (which will change both the padding and border radius
automatically). This PR documents this workaround in the
`--border-radius` description.
## 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. -->
Issue number: Resolves#18115
---------
<!-- 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. -->
Resizing the `ion-spinner` by setting the width & height using CSS works
for most spinner variants, but not for `dots`, `bubbles`, and `circles`.
The spacing between the circles on these spinner variants is not scaling
with the spinner.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `ion-spinner` may now be resized by setting the width & height using
CSS for all variants.
## 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. -->
### Before
<img width="371" alt="Screenshot 2023-05-08 at 5 17 59 PM"
src="https://user-images.githubusercontent.com/14926794/236937361-b8139bb3-192d-4fbf-839c-f9262b7c112a.png">
### After
<img width="373" alt="Screenshot 2023-05-08 at 5 18 45 PM"
src="https://user-images.githubusercontent.com/14926794/236937508-9a8fa74e-60c8-47d9-9d56-c287da03a33f.png">
---------
Co-authored-by: ionitron <hi@ionicframework.com>
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. -->
Chip tests currently take screenshots are entire pages with lots of
chips. This makes it hard to understand what exactly is being tested.
Additionally, there are redundant configurations are being tested.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Broke the chip tests up into the following checks:
1. Basic rendering. This checks rendering across text directions.
2. Outline rendering
3. Solid + Color rendering
4. Solid + Outline rendering
5. Disabled state rendering
6. Customization/CSS Variable rendering
## 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>
Issue number: resolves#27461
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
If an accordion group has a value, and an accordion updates its value to
equal the accordion group value then the state of the accordion does not
change.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- If an accordion value changes it will call `this.updateState` to see
if it should open in the event its value now matches the value of the
parent accordion group.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.0.7-dev.11683898881.13edb102`
Issue number: resolves#27201
---------
<!-- 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. -->
Selects with a floating label, no value, and a placeholder should have
the label cover the placeholder when blurred. One focus, the label
should translate to the top of the select, and the placeholder should be
visible.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Floating label now covers the select and hides the placeholder when
the select is blurred, matching the `ion-input` and `ion-textarea`
behaviors.
## 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>
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. -->
An issue was filed in
https://github.com/ionic-team/ionic-framework/issues/27452 where the
`presentation` property was not being respected. The problem ended up
being that the ID passed to `ion-datetime-button` was not associated
with an `ion-datetime` instance, so it did not pick up on the
`presentation` property. I think we can handle this better by logging an
error if the ID passed does not belong to an `ion-datetime`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Log an error if the ID passed to `ion-datetime-button` exists but does
not belong to an `ion-datetime` instance.
## 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. -->
Issue number: N/A
---------
- Changes the default Material Design tab color to
`$text-color-step-350` or `#a6a6a6`
- Changes the default iOS tab color to `$text-color-step-400` or
`#999999`
- Removes the axe skip in the e2e test
These were the minimum color changes needed to pass axe.
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
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. -->
Input had two spec files for the same behavior. The only difference was
the file type: `.ts` and `.tsx`
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Merged the spec test into one 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. -->
N/A
Bumps
[@stencil/vue-output-target](https://github.com/ionic-team/stencil-ds-output-targets)
from 0.8.2 to 0.8.4.
<details>
<summary>Commits</summary>
<ul>
<li><a
href="b2a78e9b90"><code>b2a78e9</code></a>
release(vue): v0.8.4</li>
<li><a
href="97b1d3cf48"><code>97b1d3c</code></a>
chore(release): swapping lerna to use independent mode for versioning.
(<a
href="https://redirect.github.com/ionic-team/stencil-ds-output-targets/issues/337">#337</a>)</li>
<li><a
href="284cbbec23"><code>284cbbe</code></a>
chore(release): was accidentally running an action as a workflow. (<a
href="https://redirect.github.com/ionic-team/stencil-ds-output-targets/issues/335">#335</a>)</li>
<li><a
href="594920bbc6"><code>594920b</code></a>
chore(ci): bumping which github action version we use for node. (<a
href="https://redirect.github.com/ionic-team/stencil-ds-output-targets/issues/333">#333</a>)</li>
<li><a
href="35693763bb"><code>3569376</code></a>
chore(release): Adding the ability to cut a manual release from GH
Actions (#...</li>
<li><a
href="e693e4c9cc"><code>e693e4c</code></a>
chore(dev): Adding Volta to the package.json (<a
href="https://redirect.github.com/ionic-team/stencil-ds-output-targets/issues/328">#328</a>)</li>
<li><a
href="cc2452b8d3"><code>cc2452b</code></a>
release(vue): v0.8.2</li>
<li>See full diff in <a
href="https://github.com/ionic-team/stencil-ds-output-targets/compare/v0.8.2...v0.8.4">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot 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>
Issue number: resolves#27170
---------
Updates the Material Design border colors for checkbox and radio to
`rgb($text-color-rgb, 0.60)` or `#666666`. This is based on the
[Material Design 2
kit](https://www.figma.com/community/file/778763161265841481/Material-2-Design-Kit).
The border color when disabled is also wrong, but changing this affects
the label so I have reverted this to do as part of FW-4037.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: resolves#21763
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Picker options do not render correctly when dynamically changed. It
throws an error when the original options' length is no longer the same
as the updated options' length. This is due to `refresh()` being called
with `this.optsEl` having a stale list of children. The list doesn't get
updated until the upcoming render.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The column will call `refresh()` when it detects the columns has
changed. The call needs to be done after `this.optsEl` gets updated with
the correct number of children.
`componentShouldUpdate()` will check if options has changed ->
re-renders with the updated options -> `componentDidUpdate()` calls
`refresh()` based on `componentShouldUpdate()`
The standalone test page has been updated to include a way to test this
fix.
## 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. -->
It might be beneficial to review the [component
lifecycle](https://stenciljs.com/docs/component-lifecycle).
Co-authored-by: liamdebeasi <liamdebeasi@users.noreply.github.com>
---------
Co-authored-by: ionitron <hi@ionicframework.com>
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. -->
Labels on `ion-range` can only be set via the `label` slot. When only
plain text is needed, this is cumbersome because you need to add an
entire new element to wrap the label.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Label prop added. If both the prop and slot are used, the prop will take
priority.
## 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. -->
- Docs PR: https://github.com/ionic-team/ionic-docs/pull/2955
- Dev build: `7.0.6-dev.11683657201.139d03f4`
Issue number: Resolves#27411,
https://github.com/ionic-team/stencil/issues/2429,
https://github.com/ionic-team/stencil/issues/4076
---------
<!-- 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. -->
Rendering `<ion-content fullscreen="true">` in an Angular Universal
project will result in a javascript heap exception and the browser tab
timing out.
`forceUpdate` is not a compatible API with pre-rendering and results in
calling itself indefinitely.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the fullscreen implementation of `ion-content` to only call
`forceUpdate` and related functionality when running in a browser
environment.
- `<ion-content fullscreen="true">` is compatible with Angular Universal
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev-build: `7.0.6-dev.11683653232.1ddc5840` ✅
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
There are several redundant tests I missed during my generator pass.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
ec529cfe12
- The isOpen tests are testing that you can open/close the modal by
triggering the `isOpen` property. I combined the two tests into 1 test
since they are doing the same thing: Checking that the modal opens when
`isOpen` is `true` and closes when `isOpen` is false. This also avoids
the 500ms timeout of the 2nd test which should speed up execution.
3771d8e5b2
- Removed the "standalone" screenshot in favor of just checking that the
overlay is visible. Rendering of the contents of the overlay are not
dependent on `ion-app` being present.
## 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. -->
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
There are several redundant tests I missed during my generator pass.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
feb1f6c138
- The isOpen tests are testing that you can open/close the modal by
triggering the `isOpen` property. I combined the two tests into 1 test
since they are doing the same thing: Checking that the modal opens when
`isOpen` is `true` and closes when `isOpen` is false. This also avoids
the 500ms timeout of the 2nd test which should speed up execution.
f14b15beca
- Removed the "standalone" screenshot in favor of just checking that the
overlay is visible. Rendering of the contents of the overlay are not
dependent on `ion-app` being present.
## 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. -->
Issue URL: resolves#26103, resolves#25285
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Options in `item-sliding` will not display when using RTL with Firefox
and Safari.
<!-- Issues are required for both bug fixes and features. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Issue was coming from `:host-context`. Firefox would keep [removing the
entire](https://www.w3.org/TR/selectors-3/#grouping) compiled style when
using this unsupported style. This would led to the RTL styles to not
being applied to the component.
- Split the CSS group from `add-root-selector()`
- Added comments to make it easier to navigate through
`add-root-selector()`
- Added `:dir()`
## 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: brandyscarney <brandyscarney@users.noreply.github.com>
- Updating `add-root-selector()` would also fix another
[issue](https://github.com/ionic-team/ionic-framework/issues/25285)
unintentionally
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
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. -->
As noted in https://github.com/ionic-team/ionic-framework/issues/27415,
`IonicReactProps` still has `class` as an exposed attribute on Ionic
React components. React components should use the `className` property
instead. It looks like this was left over code from the Ionic React beta
that never got removed.
`class` was originally added in
c79e74b91f (diff-065219c56a8c5dfc32564fac317b8cc9c03f1fbcb7f9cc2de0c5581970f21b51)
And `className` was added in
ab0f92e01f (diff-065219c56a8c5dfc32564fac317b8cc9c03f1fbcb7f9cc2de0c5581970f21b51)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removes the `class` key
## 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. -->
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. -->
`@stencil/core` is the only package checked by dependabot
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
this commit updates the allow list for dependabot to allow additional
stencil-scoped packages. the motivation for this is to allow the other
stencil dependencies used in ionic framework to be automatically bumped
by automation, rather than making it a manual process. this is intended
to help with the stencil v4 rollout, where new versions on stencil
packages (other than core) will be released with early v4 support.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
I arbitrarily alphabetized the `@stencil/*` section of this allow-list.
LMK if you'd prefer something different here
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
There were several redundant tests I missed during the initial generator
pass.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
3044c2dc4b
- Sheet rendering does not vary across directions, so I removed those
additional checks. Note: Modal _does_ have some RTL-specific styles but
those are already captured in the basic screenshots.
- The backdrop interaction behavior does not vary across modes, so I
removed those additional checks.
f5ff834196
- Similar to above, the card rendering does not vary across directions.
aba6c5c2a2
- During my generator pass, I had broke the `card/modal.e2e.ts` tests
into `card/modal-card.e2e.ts` and `card/modal-sheet.e2e.ts`, but I
forgot to delete the original `card/modal.e2e.ts` file, so we had
redundant tests running.
ae762d190e
- The isOpen tests are testing that you can open/close the modal by
triggering the `isOpen` property. I combined the two tests into 1 test
since they are doing the same thing: Checking that the modal opens when
`isOpen` is `true` and closes when `isOpen` is false. This also avoids
the 500ms timeout of the 2nd test which should speed up execution.
## 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. -->
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
There were several redundant tests I missed during the initial generator
pass.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
b8a3df049e
- Moved the `htmlAttributes` e2e test to a spec test
fb3f96840c
- Removed the HTML content screenshot test. HTML content is already
tested in `test/loading.spec.ts`.
fc7c166e0e
- Removed the per-direction checks on the non-basic tests as these
behaviors do not vary across directions. The basic test still has
per-direction checks
- Also removed the per-mode check on the translucent test since this
feature is available on iOS only
8524b6c9d6
- The isOpen tests are testing that you can open/close the modal by
triggering the `isOpen` property. I combined the two tests into 1 test
since they are doing the same thing: Checking that the modal opens when
`isOpen` is `true` and closes when `isOpen` is false. This also avoids
the 500ms timeout of the 2nd test which should speed up execution.
f6dac8b47c
- Removed the "standalone" screenshot in favor of just checking that the
overlay is visible. Rendering of the contents of the overlay are not
dependent on `ion-app` being present.
a2d6289101
- The `runVisualTests` util in `test/basic` was checking that every
loading instance could also dismiss. This is only needed for the basic
test, so I removed this logic from the shared util and add it just to
the basic test.
## 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. -->
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 generator migration is complete, so we can safely remove the legacy
test infrastructure.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removes the legacy test infrastructure
## 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: There's still a bit of sharding imbalance that I need to look into
(test runner 17 is a few minutes longer than all the other test
runners), but I will handle that in a separate PR.
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from
1.32.3 to 1.33.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.33.0</h2>
<h3>Locators Update</h3>
<ul>
<li>
<p>Use [<code>locator.or()</code>] to create a locator that matches
either of the two locators.
Consider a scenario where you'd like to click on a "New email"
button, but sometimes a security settings dialog shows up instead.
In this case, you can wait for either a "New email" button, or
a dialog and act accordingly:</p>
<pre lang="js"><code>const newEmail = page.getByRole('button', { name:
'New' });
const dialog = page.getByText('Confirm security settings');
await expect(newEmail.or(dialog)).toBeVisible();
if (await dialog.isVisible())
await page.getByRole('button', { name: 'Dismiss' }).click();
await newEmail.click();
</code></pre>
</li>
<li>
<p>Use new options <code>hasNot</code> and <code>hasNotText</code> in
[<code>locator.filter()</code>]
to find elements that <strong>do not match</strong> certain
conditions.</p>
<pre lang="js"><code>const rowLocator = page.locator('tr');
await rowLocator
.filter({ hasNotText: 'text in column 1' })
.filter({ hasNot: page.getByRole('button', { name: 'column 2 button' })
})
.screenshot();
</code></pre>
</li>
<li>
<p>Use new web-first assertion
[<code>locatorAssertions.toBeAttached()</code>] to ensure that the
element
is present in the page's DOM. Do not confuse with the
[<code>locatorAssertions.toBeVisible()</code>] that ensures that
element is both attached & visible.</p>
</li>
</ul>
<h3>New APIs</h3>
<ul>
<li>[<code>locator.or()</code>]</li>
<li>New option <code>hasNot</code> in
[<code>locator.filter()</code>]</li>
<li>New option <code>hasNotText</code> in
[<code>locator.filter()</code>]</li>
<li>[<code>locatorAssertions.toBeAttached()</code>]</li>
<li>New option <code>timeout</code> in [<code>route.fetch()</code>]</li>
<li>[<code>reporter.onExit()</code>]</li>
</ul>
<h3>⚠️ Breaking change</h3>
<ul>
<li>The <code>mcr.microsoft.com/playwright:v1.33.0</code> now serves a
Playwright image based on Ubuntu Jammy.
To use the focal-based image, please use
<code>mcr.microsoft.com/playwright:v1.33.0-focal</code> instead.</li>
</ul>
<h3>Browser Versions</h3>
<ul>
<li>Chromium 113.0.5672.53</li>
<li>Mozilla Firefox 112.0</li>
<li>WebKit 16.4</li>
</ul>
<p>This version was also tested against the following stable
channels:</p>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="b64516e146"><code>b64516e</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/22673">#22673</a>):
devops: fix workflow publishing</li>
<li><a
href="2ca4cd018f"><code>2ca4cd0</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/22667">#22667</a>):
chore(chromium): remove --disable-sync CLI switch</li>
<li><a
href="0d61e314f6"><code>0d61e31</code></a>
chore: mark 1.33.0 (<a
href="https://redirect.github.com/Microsoft/playwright/issues/22602">#22602</a>)</li>
<li><a
href="64bca2269b"><code>64bca22</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/22615">#22615</a>):
docs: release notes 1.33</li>
<li><a
href="9a3c4e45e3"><code>9a3c4e4</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/22628">#22628</a>):
docs: add UI mode doc (<a
href="https://redirect.github.com/Microsoft/playwright/issues/22632">#22632</a>)</li>
<li><a
href="adef765405"><code>adef765</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/22609">#22609</a>):
chore: fix list-files</li>
<li><a
href="eed6c33283"><code>eed6c33</code></a>
feat(webkit): roll to r1837 (<a
href="https://redirect.github.com/Microsoft/playwright/issues/22566">#22566</a>)</li>
<li><a
href="05b113f050"><code>05b113f</code></a>
docs: add warning to locator.all (<a
href="https://redirect.github.com/Microsoft/playwright/issues/22537">#22537</a>)</li>
<li><a
href="62bd41912d"><code>62bd419</code></a>
chore: cleanup bandaid firefox pref (<a
href="https://redirect.github.com/Microsoft/playwright/issues/22570">#22570</a>)</li>
<li><a
href="99d4887053"><code>99d4887</code></a>
feat(firefox): roll to r1403 (<a
href="https://redirect.github.com/Microsoft/playwright/issues/22540">#22540</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/Microsoft/playwright/compare/v1.32.3...v1.33.0">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
---------
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
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 team has observed that Playwright's default screenshot diff
threshold of 0.2 is not sensitive enough, and screenshots that should be
getting updated are not getting updated.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the threshold to 0.1
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
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 text appears too cramped. I'd like there to be more space between
each paragraph.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Increase spacing between paragraphs
## 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. -->
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 team would like to provide more context surrounding the `community
feedback wanted` label in terms of setting expectations that we may
accept or reject the feedback after a community feedback period.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Ionitron will now comment on `community feedback wanted` issues.
## 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. -->
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 missed the `inputs` tests when migration `ion-item` to generators.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The item input tests use the generator syntax.
a6f8563f31
- I removed the RTL checks for the disabled state screenshots since that
behavior does not vary across directions.
## 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. -->
Issue number: Resolves#21968
---------
<!-- 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 using fractional values for `min`, `max`, or `step`, it is possible
for floating point rounding errors to cause unexpected values to be
emitted. For example, `step="0.05" min="0.1" max="1"` emits a value of
`0.150000000004` after moving one step.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Values are rounded to the max number of decimal places between the three
props. Note that it isn't mathematically possible to arrive at a value
with more decimal places than the props*, since addition (i.e. starting
at `min` and adding multiples of `step`) can't increase the precision of
a number.
\* Unless the `value` is set manually, but in that case, `ion-range`
currently snaps to a multiple of `step` as soon as the slider is moved,
resuming normal behavior.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When doing https://github.com/ionic-team/ionic-framework/pull/27331 I
noticed a noticeable increase in the amount of time it took to run all
the modal tests.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
b29077228d
- The a11y custom role E2E test was ported to a spec test.
dd9e2bc5d6
- The htmlAttributes e2e test was ported to a spec test
fa348eabe3
- The e2e tests that looked at basic functionality of canDismiss were
ported to spec tests (tests that check canDismiss when swiping remain as
e2e tests)
325b115a32
- The basic rendering test checks LTR and RTL rendering for the card
modal. However, the other scenarios such as stacked cards, custom
modals, tablet viewport, etc does not have RTL-specific behavior. As a
result, I removed the RTL checks/screenshots. The basic test continues
to check LTR/RTL.
04286300f5
- The card tests were still slow after making the previous change, so I
broke the mobile and tablet tests up into multiple files so they can be
parallelized on CI better.
e5236c09fc
- The sheet functionality tests do not vary across modes, so I removed
the extra check.
## 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. -->
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. -->
Select and select popover tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Select and select popover tests are using generator syntax
915bb49fad
- The select custom behavior does not vary across directions, so I
removed the extra RTL checks.
01555bd44b
- The single value screenshots were not being used, so I removed them.
8b4cffcaf8
- The spec screenshots were not being used, so I removed them.
e50b08b2ed
- The legacy standalone check does not vary across directions, so I
removed the RTL checks.
43e26bab77
- The legacy single value tests do not vary across directions, so I
removed the the RTL checks
4935a68aab
- The basic tests were creating screenshots of each overlay as they were
opened. However, we already have test coverage for how each overlay is
rendered in each overlay test suite. As a result, I removed the
screenshots in favor of a `toBeVisible` assertion. This ensures that
overlays are presented with the select, which is what I think we want to
prioritize testing.
- These same tests were also waiting for overlays to dismiss. This
behavior is already tested in the respective overlay test suites, so I
removed the dismiss calls.
8cc6c426f1
- The legacy basic tests were creating screenshots of each overlay as
they were opened. However, we already have test coverage for how each
overlay is rendered in each overlay test suite. As a result, I removed
the screenshots in favor of a `toBeVisible` assertion. This ensures that
overlays are presented with the select, which is what I think we want to
prioritize testing.
- These same tests were also waiting for overlays to dismiss. This
behavior is already tested in the respective overlay test suites, so I
removed the dismiss calls.
## 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>
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Modal tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Modal tests use generator syntax
e3e83ef92f
- This had an unused screenshot test, so I removed it
## 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: Some of these tests are quite slow, so you may see a CI slowdown
if this merges. However, I am working on addressing this in
https://github.com/ionic-team/ionic-framework/pull/27397.
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 noticed some test slowdowns with the introduction of action sheet
tests, so I wanted to try and find a way to speed these tests up.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- htmlAttributes test was ported to a spec test
- the functionality/behavioral tests were being run per-mode when they
did not need to be, so I removed the per-mode checks
- Moved screenshot tests to a separate file so they can be better
paralellelized
## 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. -->
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. -->
A skipped popover test was missing a screenshot function
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added missing screenshot function
## 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. -->
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. -->
We've been using the custom elements bundle in Ionic for a few years
now. The underlying behavior is stable in Stencil, so we should remove
the "experimental" verbiage from the README.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed experimental wording
## 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. -->
Issue number: FW-4092
---------
<!-- 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. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the Angular 16 test app to the official dependencies
- Removes the legacy peer dependency install flag (needed during the RC
cycle)
## 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. -->
Issue number: Resolves#27353
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
`DatetimeHighlightStyle` is not automatically exported from
`@ionic/core`, since the type is not directly referenced on a prop.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Manually exports `DatetimeHighlightStyle` to consumers
## 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. -->
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. -->
Toast tests are using legacy syntax.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Toast tests are using generator syntax.
6cfddff994
- htmlAttributes and duration config tests were converted to spec tests.
## 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. -->
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. -->
Toggle tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Toggle tests are using modern syntax
16bb695631
- The basic directory had unused screenshots, so I removed them.
8b2480c391
- The on/off dark mode tests do not vary across directions, so I removed
the RTL checks
## 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. -->
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. -->
Toolbar tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Toolbar tests are using generator syntax
7ca8c57ed3
- The color behavior tests do not vary across directions, so I removed
the extra RTL checks.
## 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. -->
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. -->
Skipped reorder group tests were missing `page` which caused compilation
errors on re-build
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added `page` to affected tests
## 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. -->
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. -->
Ripple effect tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Ripple effect tests are using modern syntax
## 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. -->
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. -->
Animation, framework delegate, and overlay tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Animation, framework delegate, and overlay tests are using generator
syntax
513e850842
The overlay focus tests do not vary across modes, so I removed the extra
checks.
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Popover tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Popover tests are using modern syntax
8195bc6b09
- The adjustment behavior test is only looking at y-axis values, which
does not vary across mode/directions, so I removed those additional
checks.
cb5649c73b
- The arrow behavior only exists on iOS, so I removed the MD checks.
2956b8564f
- The dismiss on select behavior does not vary across modes/directions,
so I removed those additional checks.
2cc055063a
- The inline behavior does not vary across modes/directions, so I
removed those additional checks.
9ccc3a5e78
- The sizing tests do not vary across modes/directions, so I removed
those additional checks.
9d95261e5d
- The htmlAttributes test is now a spec test
- I split the translucent tests into its own block and removed
mode/direction tests+screenshots since this behavior only exists on iOS
and does not vary across directions
- All the other variants do not vary across directions, so I also split
them into their own blocks and disabled RTL checks.
-------
I ran into some difficulty integrating generators into some of the
tests, so I decided to break some of the more complex tests up into
multiple tests. The old utility functions were also calling
`scrollIntoView` which can cause slowdowns on CI.
4cc1cac45b
- I created a popover test fixture and broke the basic tests into
separate tests.
e25c76977d
- I Broke the reference screenshots into separate tests and had them use
the fixture
23a60c73cf
- I updated the standalone test to use the fixture
Note: The previous `scrollIntoView` usage seemed to cause Safari
screenshots be sized 1px taller than if `scrollIntoView` was not used.
As a result, there are some screenshot changes:
7eb7d86413
However, they should be limited to Safari and only contain the 1px
height difference.
## 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>
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. -->
Range tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Range tests are using generator syntax
849e127974
- The scroll target tests do not vary across modes so I removed those
additional checks.
0b8c15838a
- The standalone directory had some screenshots that were not in use, so
I deleted them
5b306f28b7
- The modern range event tests do not vary across modes/directions, so I
removed the additional checks.
699fb62789
- The legacy scroll target tests do not vary across modes so I removed
those additional checks.
c7dbb2d380
- The legacy range functional tests do not vary across modes/directions,
so I removed the additional checks.
aa06ba8ebf
- The legacy range event tests do not vary across modes/directions, so I
removed the additional checks.
## 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. -->
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. -->
Reorder tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Reorder tests are using generator syntax
## 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. -->
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. -->
Text tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Text tests are using modern syntax
## 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. -->
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. -->
Thumbnail tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Thumbnail tests are using modern syntax
## 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. -->
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. -->
Title tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Title tests are using modern syntax
## 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. -->
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. -->
Split-pane tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Split-pane tests are using modern syntax
## 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. -->
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. -->
Spinner tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Spinner tests are using generator syntax
93e189af52
The color tests do not vary across directions, so I removed the extra
checks.
## 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. -->
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. -->
Searchbar tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Searchbar tests are using generator syntax
343458dc57
The searchbar event tests do not vary across modes, so I removed those
additional checks.
## 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. -->
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. -->
Router and router outlet tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Router and router outlet tests are using generator syntax
## 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. -->
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. -->
Refresher tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Refresher tests are using modern syntax
299b562d52
- These tests check the pull to refresh behavior which does not vary
across directions, so I removed the extra checks.
## 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. -->
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. -->
Segment tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Segment tests are using generator syntax
3f05ad247f
The segment events tests do not vary across modes, so I removed the
extra checks.
## 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. -->
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. -->
Skeleton text tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Skeleton text tests are using generator syntax
## 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. -->
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. -->
Progress bar tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Progress bar tests use modern syntax
## 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. -->
Issue number: Internal
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 counter for incrementing the `id` and `z-index` of an overlay is
incremented whenever the `connectedCallback` is fired for an overlay.
When an overlay is presented and/or conditionally rendered, the overlay
`id` can increment by `n+2` instead of `n+1`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Increments all overlay ids consistently
- Removes legacy `ion-modal-{id}` and `ion-popover-{id}` logic
- Adds unit tests for the id behavior
- Tests are split up into separate files so that the counter is always
starting from `0`
- Adds an integration test with the Angular test app to verify
conditional rendering behavior
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
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. -->
`set-output` usage is deprecated in favor of environment files.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the `test-core-screenshot` workflow to remove `set-output` in
favor of environment files.
## 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. -->
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. -->
Radio and radio group tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Radio and radio group tests are using generator syntax
c0256f3ce1
- The radio group basic interaction tests do not vary across modes, so I
removed those extra checks.
579bcacab2
- The basic radio directory had some old screenshots that were not being
used, so I removed them.
997d652864
- The legacy radio keyboard behavior does not vary across modes, so I
removed that extra check
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Tabs, tab bar, and tab button are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Tabs, tab bar, and tab button are using modern syntax
962754d094
- A translucent screenshot test was written in `tab-bar/test/basic` but
it is already being tested in `tab-bar/test/translucent`, so I deleted
the duplicate test/screenshots.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Picker internal and picker column internal tests are using legacy
syntax.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Picker internal and picker column internal tests use generator syntax.
38187b744c
I updated these tests to disable multi-mode and direction testing since
the behaviors this file is testing do not vary across modes/directions.
89436784b0
- I removed the RTL screenshots here because the disabled state does not
vary across directions.
8d31eba5f2
- I removed the RTL screenshots here because the overlay rendering
behavior does not vary across directions. There is RTL behavior that we
need to test, but that is already captured in the screenshots in
`picker-internal/basic`.
d2a1531e6a
- Removed the mode and direction tests because this behavior does not
vary across modes/directions.
## 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. -->
Issue number: resolves#27343
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
In
30e3a1485d
I removed the `deepWait` call from popover/modal in custom element
bundle environments (React and Vue as of writing). This had an
unintended side effect where WebKit/iOS would not play the modal enter
animation correctly because the inner contents are mounted
mid-animation. This does not impact other mobile platforms.
This only impacted the modal because popover had a patch in
be9a399eee
which causes it to wait for the JS Framework to finish mounting before
proceeding with the transition.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Modal now emits `ionMount` event and waits 2 frames before proceeding
with the animation.
Note 1: The JS Framework overlay components were already updated to
support this `ionMount` event in
be9a399eee.
I also updated the modal Angular component to listen for `ionMount`. It
is not needed right now because Angular does not use the custom elements
bundle and therefore does not call `ionMount` (it runs the `deepReady`
function though). However, if we move Angular to support the custom
elements bundle in the future this may become an issue. This behavior
currently exists in the popover component for Angular too.
Note 2: This does appear to be a WebKit bug since it does not happen on
Android. However, this patch seems fairly safe which is why I've opted
to try and fix it internally instead of waiting for a patch from Apple.
| before | after |
| - | - |
| <video
src="https://user-images.githubusercontent.com/2721089/235495325-2f258526-0c43-422b-84c3-ac4f5e228bbd.MP4"></video>
| <video
src="https://user-images.githubusercontent.com/2721089/235495362-9b3bb35d-782c-4a8f-ac13-8aaa8f17729b.MP4"></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. -->
Removes the comments about reading the contributing guide from our pull
request template. GitHub recommends the contributing guide in a popup to
new contributors, and it also recommends it if anything has changed
recently.
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Picker and picker column tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Picker and picker column tests use generator syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Both react and the react-router packages are on v3 of Typescript.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the react and reac-router package to a minimum dev-dependency
of Typescript 4.0.5 (aligning with core)
- Fixes a conflict with the react router types when upgrading to v4 of
Typescript
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Textarea tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Textarea tests use generator syntax
A few notable changes:
3d44815462
I removed the RTL tests as autogrow behavior does not vary across
directions. I removed the associated screenshot files too.
4fcb9a8c57
I added an `index.html` file as per the E2E test best practices. There
were some screenshots that were no longer in use, so I removed them.
753d95fd55
There were some screenshots that were not being tested here as well in
the `bottom-content.e2e-legacy.ts` directories (the associated test file
no longer exists).
bc0d15fed6
I updated the legacy autogrow tests to not check RTL. Same reasoning as
the other autogrow tests above.
3c373b5aef
I updated the event tests to not run across modes because that behavior
does not vary.
All other tests were ported directly to generator syntax.
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Input tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Input tests use modern syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 tests were missing a `screenshot` function
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added the function
- Also removed stray `config` params
This was not caught because these tests are currently skipped.
## 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. -->
Issue number: Internal
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
`Tab` keyboard navigation tests are disabled for `ion-radio` because
they were extremely flaky in CI.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Re-enables `ion-radio` `Tab` keyboard navigation tests
- Ports a slimmed down version of Wordpress' playwright utilities for
using modifier keys with `Tab` keyboard navigation on environments that
do not support "natural tab navigation"
## 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 utility should likely be used in all places where we are using the
`Alt+Tab` logic for webkit-based browsers today. If/when the changes are
agreed upon, I can follow-up with PR that adds this behavior to those
tests.
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Note tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Note tests use modern syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Nav tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Nav tests use modern syntax
## 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. -->
Issue number: resolves#27305
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Checkbox, radio, range, select, and toggle take up 100% of its width
even when in a start/end slot.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Checkbox, radio, range, select, and toggle do not take up 100% of its
width even when in a start/end slot.
. The "no slot" behavior is unchanged and aligns with the legacy select.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Menu sliding tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Menu sliding tests use modern syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Item tests use modern syntax
414494a56d
- This behavior does not vary across directions, so I removed the RTL
screenshots.
8e9d0d5cbd
- This behavior does not vary across directions, so I removed the RTL
screenshots.
0d46d00eb0
- This behavior does not vary across directions, so I removed the RTL
screenshots.
505c054bd8
- This behavior does not vary across directions, so I removed the RTL
screenshots.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 tests use the legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Datetime tests use the generator syntax
**Note to reviewers:**
I recommend reviewing this commit by commit because datetime has a lot
of tests. A few commits I'd like to call out:
77d9ab0ff2
- I removed several screenshots that were not being tested anymore. It
seems the actual test was modified/removed in the past, but the
screenshot ground truths remained.
ed45c7fa05
- This test checks that the datetime can properly expand in width based
on the `cover` property. As a result, no RTL tests are needed because
the behavior does not vary across directions. I narrowed the config of
this test to only check LTR and removed extraneous screenshots.
96c08410f2
- This test only checks that the correct text content is used within the
component. As a result, I narrowed the config to only check LTR
direction and removed extraneous screenshots.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Label sliding tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Label sliding tests use modern syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
List sliding tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- List sliding tests use modern syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Loading sliding tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Loading sliding tests use modern syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Item sliding tests use modern syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 divider tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Item divider tests use modern syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Icon tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Icon tests use modern syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Img tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Img tests use modern syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Infinite scroll tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Infinite scroll tests use modern syntax
## 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. -->
Issue number: #
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 legacy screenshot test verification step can fail due to improper
configuration
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
this commit updates the name of the legacy screenshot test so that we
properly gate on verifying that the legacy tests passed
## 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
I tested this by kicking off the workflow -
https://github.com/ionic-team/ionic-framework/actions/runs/4830665737
Yesterday, I [put up a
PR](https://github.com/ionic-team/ionic-framework/pull/27298) that did
the same. However, I failed to verify it succeeded (since we don't gate
on Stencil nightly) - only that it started (since that was the point of
failure yesterday).
Today, I have verified that it passes all the way through
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Header tests us legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Header tests us generator syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Checkbox tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Checkbox tests use generator syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Grid tests use legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Grid tests use modern syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
- Fab and fab button tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Fab and fab button tests use generator syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 tests use the legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Datetime button tests use the generator syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Footer tests us legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Footer tests us generator syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Button is using legacy test format
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Button uses generator test format
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Content tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Content tests use generator syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 and card header are using the legacy test syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Card and card header use generators
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Avatar E2E tests are using legacy format
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- E2E tests use generator format
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Chip tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Chip tests are using generator syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
App tests are using legacy E2E format
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- App E2E tests us generator format
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
- Breadcrumbs uses legacy test format
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Breadcrumbs uses generator syntax
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Badge uses legacy test format
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Badge uses generator format
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Back button uses legacy E2E format
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Back button uses generator format
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 Stencil nightly job fails with the following error:
```
The workflow is not valid. .github/workflows/stencil-nightly.yml (Line: 101, Col: 13): Job 'test-core-screenshot-legacy' depends on unknown job 'build-core'.
.github/workflows/stencil-nightly.yml (Line: 122, Col: 12): Job 'verify-screenshots-legacy' depends on job 'test-core-screenshot-legacy' which creates a cycle in the dependency graph.
```
This started to fail last night. I believe this is a result of
https://github.com/ionic-team/ionic-framework/pull/27228, specifically
this line
4fe8de7df7 (diff-2f087e8fac034d51c50fc9350e10ceb4034298c16dd0d4f414f79d88ebb71aa0R101)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
this commit updates the job dependency hierarchy for
test-core-screenshot-legacy from `build-core` to
`build-core-with-stencil-nightly`. the former is not a valid job name
for the `stencil-nightly` workflow, likely just a copy/paste error
## 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
To test this, I was able to kick off a version of this job with this
branch:
https://github.com/ionic-team/ionic-framework/actions/runs/4819613134
and saw the new/legacy screenshot tests running:
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
This PR migrates the alert tests to use the generator infrastructure.
In
91ba3a1290
I migrated the basic test to use [Playwright
Fixtures](https://playwright.dev/docs/test-fixtures#creating-a-fixture)
instead since it is a) a best practice and b) easier to add the
generator support to.
Issue number: N/A
---------
This PR adds documentation for the following:
1. A step-by-step guide for migrating to generators.
2. Documentation on the custom tooling we built on top of Playwright
3. A best practice guide. Note: This was originally in the Ionic
internal Notion, but I moved it here because it is of value to community
contributors.
I also added a few new best practices that were not on the Notion guide:
- Components must have a `basic` test with an `index.html` file
- Slow tests should be broken up across multiple files for CI
performance
- Rendering and functionality tests should be broken up across multiple
test.describe blocks or files
---------
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: N/A
---------
This PR adds support for writing tests with generators.
8febaddee9
- Adds the underlying generator code necessary to create multiple
variants of a single test
- Note: This PR does not add support for dark mode generators. This will
be added in a separate PR.
5c498d8daf
- Adds the type declarations on `page.goto` and `page.setContent`
necessary to accept the config result provided by the `configs`
generator function.
df8c44b563
- Updates the `goto` and `setContent` functionality to support the
generator config with backwards compatibility for the legacy tests.
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
This is the first PR to introduce the infrastructure required to add
test generators to the Ionic Framework project. This PR introduces the
file name changes necessary to support two playwright configs, so I
recommend reviewing the PR by commit:
1e5012cea1
- Created a `playwright.config-legacy.ts` file and updates
`package.json`.
- Running `npm run test.e2e` will run the generator tests, and running
`npm run test.e2e.legacy` will run the legacy tests.
4fe8de7df7
- Updates the GitHub Action scripts to run both the modern and legacy
E2E tests. I added command modifiers to avoid collisions with output
directories.
e8bcfaf926
- Updates `*.e2e.ts` files to have the legacy format name:
`*.e2e-legacy.ts`. This naming scheme is required for the two Playwright
configs to pull in the correct files. When migrating tests to
generators, team members will rename the file to remove the `-legacy`
part.
5bf196c36d
(warning: lots of files!)
- Updates the `*.e2e.ts-snapshots` directories to have the legacy format
name: `*.e2e-legacy.ts-snapshots`. The screenshot directory in
Playwright is generated based on the test file name which is why we are
updating the screenshot directory. When migrating tests to generators,
team members will rename the directory to remove the `-legacy` part.
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 outdated links to a dead heroku app in the repo
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
this commit removes old links within the repo that point to a heroku app
that is no longer working/maintained. the original intent was to update
stencil-related links initially (as stencil still focuses on slack for
community communications). however, there were two references to the
ionic worldwide slack, which has been since replaced with discord. i've
updated those link (which were only in comments) as well. after applying
this commit, there are no references to 'heroku' in the repo
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Feel free to reject this/request we remove these links altogether. I'm
not entirely sure we want to continue to provide them in the `core/` and
`angular/` directories (when we don't have them in `packages/react/` nor
`packages/vue/`
When using Angular, React, or Vue, the use of tabs is coupled to the
framework's routing. These methods are only available when using tabs
with vanilla JavaScript.
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds more context to the description of the methods on tabs
## 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. -->
Issue number: resolves#27257
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
1. Scroll assist was appending padding data every time it ran which
caused the amount of padding to infinitely grow until an input was
blurred
2. Calling `inputEl.focus()` caused scroll assist to run again which
caused unexpected scrolls
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `currentPadding` is either preserved or set, never incremented
- Added a special attribute to inputs that are manually focused so
scroll assist knows not to re-run
## 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. -->
Issue number: resolves#27254
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 swipe gesture is currently applied to the entire `ion-toggle`
element. This was fine for the legacy syntax, but with the modern syntax
it means users can swipe on the label text which is not correct.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The toggle now creates the gesture on the `.toggle-icon` element which
is the container for the knob for both modern and legacy syntaxes.
- Moved `touch-action: none` to the host of the legacy toggle. This was
preventing scrolling from happening on the modern toggle. I double
checked with native iOS and you can scroll when a pointer moves over a
toggle.
The structure of this fix was designed to match what `ion-range` does:
a8749929e0/core/src/components/range/range.tsx (L282-L296)
| Modern | Legacy |
| - | - |
| <video
src="https://user-images.githubusercontent.com/2721089/233431240-11f0c94f-d86b-4975-afd5-e534262a6f16.mov"></video>
| <video
src="https://user-images.githubusercontent.com/2721089/233431275-6c6f7fef-6cc0-4adc-8915-6fd5c3795ade.mov"></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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Original Discussion:
https://github.com/ionic-team/stencil-ds-output-targets/pull/327#discussion_r1176950960
This flag was left over from our migration from custom build scripts to
Lerna. Since we use `npm ci` the `--no-package-lock` flag is not needed.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removes `--no-package-lock` from build scripts.
- Here is an example test run of a dev build succeeding without the
`--no-package-lock` flag:
https://github.com/ionic-team/ionic-framework/actions/runs/4801503002
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 adding the Angular 16 test infrastructure, I accidentally regressed
ng14/ng15 test apps to run in production mode when serving locally.
This resulted in slower serve time and the vendor code being code split,
making it difficult to debug locally.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Angular test apps run in dev mode when served locally
- Angular test apps run in prod mode when built with `npm run build`
## 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. -->
We can share the same `angular.json` across all the major versions of
Angular we currently support.
Issue number: resolves#27273
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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?
When breadcrumb is focused in md mode, background is not set.
## What is the new behavior?
A slight background should have applied on breadcrumb when focused.
## 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. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
`page.locator` is synchronous, but we were `await`ing the calls:
https://playwright.dev/docs/api/class-page#page-locator
We were also doing `page.locator(...).click()` when we can just do
`page.click([selector])` directly,
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removes `await` usage from `page.locator`
- Removes `page.locator().click()` usage in favor of `page.click()`
## 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. -->
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Occurs only when using modal with datetime: text does not update
appropriately based on light or dark mode. For example, when using Ionic
dark theme, the calendar days does not switch to white.
<!-- Issues are required for both bug fixes and features. -->
Issue URL: resolves#26060
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Text (days and time) changes to the text color set via light (default)
or dark mode. The color change applies to days and time that are not
selected: not the current day.
## 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. -->
Recommendation:
- Test both `datetime` and `datetime-button`
The bug originates when modal's content is not wrapped by `ion-content`
and because the modal renders outside of `<main />`. Text color is
passed to components properly inside `main` because `main` is rendered
inside another `ion-content`. `ion-content` provides the correct
text-color based on light or dark mode.
Example of text color working for modal when wrapped by `ion-content`:
```html
<ion-modal trigger="open-modal">
...
<ion-content class="ion-padding">
<div>Hello world</div>
</ion-content>
</ion-modal>
```
However, there are times that the modal does not require this wrap:
```html
<ion-modal>
<ion-datetime id="datetime"></ion-datetime>
</ion-modal>
```
The same bug would have occurred on `popover` if it wasn't for the fact
that the component provides the [text
color](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss#L42).
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue URL: resolves#27086
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 `ion-select` is inside a card, the label is slightly lower than
it should be, making it out of alignment with the label of an
`ion-input`.
<!-- Issues are required for both bug fixes and features. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- When inside a card, the labels of `ion-input` and `ion-select` are in
line with each other.
## 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 bug was occurring because the label of ion-select is in the shadow
DOM. [As
recommended](https://github.com/ionic-team/ionic-framework/issues/27086#issuecomment-1494427311),
this fix was also added to ion-input and ion-textarea in case those
labels are also later moved to the shadow DOM.
Before:
<img width="534" alt="Screenshot 2023-04-13 at 4 35 44 PM"
src="https://user-images.githubusercontent.com/14926794/231877123-02f8e381-2137-4d3c-8dab-ae9051ad3591.png">
After:
<img width="535" alt="Screenshot 2023-04-13 at 4 36 02 PM"
src="https://user-images.githubusercontent.com/14926794/231877151-bd49b87b-762a-4d20-b6b7-57c1ab3bb368.png">
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#27249
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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 cloned input/textarea for scroll assist is not sized correctly. For
legacy inputs, this causes the clone to be off by ~1px because it does
not have the correct height. For modern inputs, this causes the same bug
as the legacy inputs plus cloned inputs overlap any floating/stacked
labels. This was not a concern for legacy inputs because those inputs
did not contain the label element where modern inputs do.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Sets `bottom: 0` for cloned inputs so they have the correct height
- Sets `position: relative` on the `.native-wrapper` so the cloned input
does not flow outside of the parent container.
**Before**
| Modern Input | Legacy Input |
| - | - |
| <video
src="https://user-images.githubusercontent.com/2721089/233385644-3c15f98e-2646-41e1-b206-34c505791bde.MP4"></video>
| <video
src="https://user-images.githubusercontent.com/2721089/233385681-8d682222-44b4-4cdc-b0de-96ed3fd38792.MP4"></video>
|
(Note: The legacy input bug is subtle -- the input only shifts by ~1px)
**After**
| Modern Input | Legacy Input |
| - | - |
| <video
src="https://user-images.githubusercontent.com/2721089/233385911-243dea95-39b4-4d81-bfe9-26e52382a702.mp4"></video>
| <video
src="https://user-images.githubusercontent.com/2721089/233386237-2c9eede3-ca91-429b-8a35-15428529a883.mp4"></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. -->
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Picker internal overlay tests are disabled.
<!-- Issues are required for both bug fixes and features. -->
Issue URL: Internal
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Enables picker internal overlay tests
- Fixes issue with screenshot captures
## 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>
Issue #: resolves#25753
----------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
## Pull request checklist
Please check if your PR fulfills the following requirements:
- [x] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been reviewed and added / updated if needed (for bug
fixes / features)
- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See the [contributing
guide](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation)
for details.
- [x] Build (`npm run build`) was run locally and any changes were
pushed
- [x] Lint (`npm run lint`) has passed locally and any fixes were made
for failures
## Pull request type
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type, submit multiple
pull requests if needed. -->
Please check the type of change your PR introduces:
- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, renaming)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] Documentation content changes
- [ ] Other (please describe):
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When `IonNav` performs a pop operation (navigating to root, back, etc.)
the views are not removed from the DOM.
<!-- Issues are required for both bug fixes and features. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `IonNav` removes pages from the DOM when they are popped (navigate
back, navigate to root, etc.)
- Memoized constructing React delegate (was reconstructing on each
render)
## 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: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
<!-- Issues are required for both bug fixes and features. -->
Issue URL: Internal
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds Angular 16 test app
- Introduces version test to validate which major version of Angular is
being tested
## 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. -->
3. If a new test is needed, the easiest way is to copy the `basic/` directory from the component's `test/` directory, rename it, and edit the content in both the `index.html` and `e2e.ts` file (see [Screenshot Tests](#screenshot-tests) for more information on this file).
4. The `preview/` directory is used in the documentation as a demo. Only update this test if there is a bug in the test or if the API has a change that hasn't been updated in the test.
See [Ionic's E2E testing guide](../core/src/utils/test/playwright/docs/README.md) for information regarding the tools you can use to test Ionic.
##### Screenshot Tests
1. If the test exists in screenshot, there will be a file named `e2e.ts` in the directory of the test.
2. If there are lint errors, run `npm run lint.fix` to automatically fix any errors. Repeat step 1 to ensure the errors have been fixed, and manually fix them if not.
@@ -328,7 +330,7 @@ Follow the steps to [preview changes in core](#preview-changes).
#### Modifying Tests
1. Locate the e2e test to modify inside the relevant test app directory:
<!-- Please make sure you are posting an issue pertaining to the Ionic Framework. If you are having an issue with the Ionic Appflow services (Ionic View, Ionic Deploy, etc.) please consult the Ionic Appflow support portal (https://ionic.zendesk.com/hc/en-us) -->
<!-- Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/ -->
<!-- Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or https://ionic.link/discord/ -->
<!-- ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION. -->
@@ -17,7 +17,7 @@
[ ] bug report
[ ] feature request
<!-- Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/ -->
<!-- Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or https://ionic.link/discord -->
<!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing -->
<!-- Please do not submit updates to dependencies unless it fixes an issue. -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation for details. -->
<!-- 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. -->
<!-- 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. -->
For a guide on how to create a good reproduction, see our [Contributing Guide](https://ionicframework.com/docs/contributing/how-to-contribute#creating-a-good-code-reproduction).
- label:"community feedback wanted"
message:>
This issue has been labeled as `community feedback wanted`. This label is added to issues that we would like to hear from the community on before moving forward with any final decision on the feature request.
If the requested feature is something you would find useful for your applications, please react to the original post with 👍 (`+1`). If you would like to provide an additional use case for the feature, please post a comment.
The team will review this feedback and make a final decision. Any decision will be posted on this thread, but please note that we may ultimately decide not to pursue this feature.
* **item-sliding:** buttons are not interactive on close ([#27829](https://github.com/ionic-team/ionic-framework/issues/27829)) ([6e4919c](https://github.com/ionic-team/ionic-framework/commit/6e4919caff90fc60988e5cc85ad7161844eb5b51)), closes [#22722](https://github.com/ionic-team/ionic-framework/issues/22722)
* **modal:** body background is reset with inline card modals ([#27835](https://github.com/ionic-team/ionic-framework/issues/27835)) ([38626d9](https://github.com/ionic-team/ionic-framework/commit/38626d96809d1c6be523ea62a4fac1dec73ee891)), closes [#27830](https://github.com/ionic-team/ionic-framework/issues/27830)
* **angular:** support binding routing data to component inputs ([#27694](https://github.com/ionic-team/ionic-framework/issues/27694)) ([90f4124](https://github.com/ionic-team/ionic-framework/commit/90f41243d9404caaad99076965b7cd649ddf7f33)), closes [#27476](https://github.com/ionic-team/ionic-framework/issues/27476)
* **button:** allow button to increase in height when text wraps ([#27547](https://github.com/ionic-team/ionic-framework/issues/27547)) ([6fe716f](https://github.com/ionic-team/ionic-framework/commit/6fe716fd1320935632854e5d4f741b57801bda92))
* **searchbar:** add name property ([#27737](https://github.com/ionic-team/ionic-framework/issues/27737)) ([7131037](https://github.com/ionic-team/ionic-framework/commit/71310372c94862342d607007ece127340df92a8c)), closes [#27675](https://github.com/ionic-team/ionic-framework/issues/27675)
* **angular:** menu button is enabled with Angular Universal builds ([#27814](https://github.com/ionic-team/ionic-framework/issues/27814)) ([2cf1a0b](https://github.com/ionic-team/ionic-framework/commit/2cf1a0bcae7d766aa25951c53470876f9569906c)), closes [#27524](https://github.com/ionic-team/ionic-framework/issues/27524) [#22206](https://github.com/ionic-team/ionic-framework/issues/22206)
* **button:** submit form when pressing enter key ([#27790](https://github.com/ionic-team/ionic-framework/issues/27790)) ([b78af75](https://github.com/ionic-team/ionic-framework/commit/b78af7598f19ca5e1b440ddc0091a62d86321066)), closes [#19368](https://github.com/ionic-team/ionic-framework/issues/19368)
* **radio, checkbox, toggle:** add top and bottom margins when in ion-item ([#27788](https://github.com/ionic-team/ionic-framework/issues/27788)) ([35f0ec5](https://github.com/ionic-team/ionic-framework/commit/35f0ec581a55e0cb080f0793fb94d3e424c06d4d)), closes [#27498](https://github.com/ionic-team/ionic-framework/issues/27498)
* safari no longer adjusts text in landscape ([#27787](https://github.com/ionic-team/ionic-framework/issues/27787)) ([66584b0](https://github.com/ionic-team/ionic-framework/commit/66584b03d0b33507170f954009998c72fb3f7755)), closes [#27782](https://github.com/ionic-team/ionic-framework/issues/27782)
* **textarea:** stacked/floating textarea size is correct on safari ([#27766](https://github.com/ionic-team/ionic-framework/issues/27766)) ([2cb7013](https://github.com/ionic-team/ionic-framework/commit/2cb701395487c6a0304400f6b821659ae6def820)), closes [#27345](https://github.com/ionic-team/ionic-framework/issues/27345)
* **overlays:** first button is not focused on backdrop tap ([#27774](https://github.com/ionic-team/ionic-framework/issues/27774)) ([82c568b](https://github.com/ionic-team/ionic-framework/commit/82c568b8c8e1e9934e1928452aa5216619290e7b)), closes [#27773](https://github.com/ionic-team/ionic-framework/issues/27773)
* **back-button:** show correct background on focus + hover with ios ([#27723](https://github.com/ionic-team/ionic-framework/issues/27723)) ([db9a001](https://github.com/ionic-team/ionic-framework/commit/db9a0010df3c7fd0fcd0dbcd8c4ad3b30d022b5c)), closes [#27722](https://github.com/ionic-team/ionic-framework/issues/27722)
* **nav:** root component is mounted with root params ([#27676](https://github.com/ionic-team/ionic-framework/issues/27676)) ([1f06be4](https://github.com/ionic-team/ionic-framework/commit/1f06be4a31965f2a949b4866a585aee6af0af29d)), closes [#27146](https://github.com/ionic-team/ionic-framework/issues/27146)
* **datetime:** ascending order for years ([#27551](https://github.com/ionic-team/ionic-framework/issues/27551)) ([2098806](https://github.com/ionic-team/ionic-framework/commit/209880622a4600f88c4878e82975ad0492bd55db)), closes [#27422](https://github.com/ionic-team/ionic-framework/issues/27422)
* return if the pop on NavController was successful ([#27404](https://github.com/ionic-team/ionic-framework/issues/27404)) ([e80f0b2](https://github.com/ionic-team/ionic-framework/commit/e80f0b240968de0d642463e95a35adf8dbffd2e1)), closes [#27403](https://github.com/ionic-team/ionic-framework/issues/27403)
* **segment, segment-button:** update segment value property to accept numbers ([#27222](https://github.com/ionic-team/ionic-framework/issues/27222)) ([ec95ae5](https://github.com/ionic-team/ionic-framework/commit/ec95ae5cd38e3d2b9ec9fdbc9e237fa1241f7a4e)), closes [#27221](https://github.com/ionic-team/ionic-framework/issues/27221)
* **segment:** display segment as a grid and add an ellipsis to overflowing text in a segment button ([#27457](https://github.com/ionic-team/ionic-framework/issues/27457)) ([448e63f](https://github.com/ionic-team/ionic-framework/commit/448e63fef0aca603214cb357dec37e1db2a0f052)), closes [#16532](https://github.com/ionic-team/ionic-framework/issues/16532)
* **select:** expose container and label as CSS parts ([#27541](https://github.com/ionic-team/ionic-framework/issues/27541)) ([5c10f88](https://github.com/ionic-team/ionic-framework/commit/5c10f88b2eb4d869966ea9a6d1db34185cefe676)), closes [#27112](https://github.com/ionic-team/ionic-framework/issues/27112)
* **keyboard:** keyboard events emit correctly when Capacitor is available but the Keyboard plugin is not ([#27655](https://github.com/ionic-team/ionic-framework/issues/27655)) ([7a38a00](https://github.com/ionic-team/ionic-framework/commit/7a38a006a94f1240d93102f2f42bbfc4d76a679e)), closes [#27654](https://github.com/ionic-team/ionic-framework/issues/27654)
* **toast:** allow color for translucent toast ([#27652](https://github.com/ionic-team/ionic-framework/issues/27652)) ([d555375](https://github.com/ionic-team/ionic-framework/commit/d555375c146639b32e85c57a8cdd4d52313ef4cf)), closes [#27567](https://github.com/ionic-team/ionic-framework/issues/27567)
* **refresher:** scroll styles are reset when using non-native refresher ([#27602](https://github.com/ionic-team/ionic-framework/issues/27602)) ([92c5545](https://github.com/ionic-team/ionic-framework/commit/92c55452fdf4ac7b8d15ce75a4e867aab9321cfb)), closes [#27601](https://github.com/ionic-team/ionic-framework/issues/27601)
* **item-sliding:** refresh sliding behavior when options are added or removed asynchronously ([#27572](https://github.com/ionic-team/ionic-framework/issues/27572)) ([b2a226a](https://github.com/ionic-team/ionic-framework/commit/b2a226ae663695be0666cd862510d8d843c80b9a)), closes [#25578](https://github.com/ionic-team/ionic-framework/issues/25578)
* **keyboard:** listen on correct events for keyboard lifecycle ([#27569](https://github.com/ionic-team/ionic-framework/issues/27569)) ([7871210](https://github.com/ionic-team/ionic-framework/commit/7871210e9e4ecc09353b821b60f977498a01ee8d)), closes [#27558](https://github.com/ionic-team/ionic-framework/issues/27558)
* **radio:** radio with modern syntax is keyboard navigable ([#27530](https://github.com/ionic-team/ionic-framework/issues/27530)) ([d87e692](https://github.com/ionic-team/ionic-framework/commit/d87e692c6c2c3d146514b093853d5e262137a9e5)), closes [#27268](https://github.com/ionic-team/ionic-framework/issues/27268)
* **select:** prevent click event from firing twice ([#27570](https://github.com/ionic-team/ionic-framework/issues/27570)) ([ba7e60e](https://github.com/ionic-team/ionic-framework/commit/ba7e60e8669b1980b9a0c6267617894e16b4a2d4))
* **accordion:** state updates if value changes ([#27463](https://github.com/ionic-team/ionic-framework/issues/27463)) ([3cbc592](https://github.com/ionic-team/ionic-framework/commit/3cbc592154a2b76cf63dfef67cb63de94dcec887)), closes [#27461](https://github.com/ionic-team/ionic-framework/issues/27461)
* **checkbox, radio:** update border colors to match MD2 spec ([#27357](https://github.com/ionic-team/ionic-framework/issues/27357)) ([eabc6f3](https://github.com/ionic-team/ionic-framework/commit/eabc6f357675919dd82bea29a1776c0ca1bf89fd)), closes [#27170](https://github.com/ionic-team/ionic-framework/issues/27170)
* **datetime-button:** log error if non-datetime instance is passed ([#27456](https://github.com/ionic-team/ionic-framework/issues/27456)) ([7b7e05a](https://github.com/ionic-team/ionic-framework/commit/7b7e05aa697a51ebfac42f96aa9510d4d96336de))
* **footer, tab-bar:** wait for resize before re-showing ([#27417](https://github.com/ionic-team/ionic-framework/issues/27417)) ([70d9854](https://github.com/ionic-team/ionic-framework/commit/70d9854d8df5259ed715e282a6ca40ca3bea6192)), closes [#25990](https://github.com/ionic-team/ionic-framework/issues/25990)
* **many:** form controls labels have increased margin ([#27447](https://github.com/ionic-team/ionic-framework/issues/27447)) ([381de0b](https://github.com/ionic-team/ionic-framework/commit/381de0b3d324805161232d8556fffd7022fcd84c)), closes [#27129](https://github.com/ionic-team/ionic-framework/issues/27129)
* **picker-column:** prevSelected is set to the correct value ([#27458](https://github.com/ionic-team/ionic-framework/issues/27458)) ([9dc126d](https://github.com/ionic-team/ionic-framework/commit/9dc126d38727c1ca16a75cfa65daab9a630be678)), closes [#21764](https://github.com/ionic-team/ionic-framework/issues/21764)
* **select:** floating label covers placeholder when when blurred ([#27446](https://github.com/ionic-team/ionic-framework/issues/27446)) ([921bfae](https://github.com/ionic-team/ionic-framework/commit/921bfae9e68257734a9695cab9245bb335eb88fa)), closes [#27201](https://github.com/ionic-team/ionic-framework/issues/27201)
* **select:** modern syntax works with forms ([#27480](https://github.com/ionic-team/ionic-framework/issues/27480)) ([13d2d11](https://github.com/ionic-team/ionic-framework/commit/13d2d115d44f109c3ea2a47bcb518c6090126325)), closes [#27478](https://github.com/ionic-team/ionic-framework/issues/27478)
* **spinner:** allow resizing of dots, bubbles, and circles ([#27424](https://github.com/ionic-team/ionic-framework/issues/27424)) ([e5ae45d](https://github.com/ionic-team/ionic-framework/commit/e5ae45d32fde7328a704a6ffa18940106a069fa2)), closes [#18115](https://github.com/ionic-team/ionic-framework/issues/18115)
* **tab-button:** use darker text to pass a11y ([#27355](https://github.com/ionic-team/ionic-framework/issues/27355)) ([0b23814](https://github.com/ionic-team/ionic-framework/commit/0b23814e0ba167ee6b2a2e430c47823d312d8c3c))
* **content:** prevent forceUpdate in SSR ([#27440](https://github.com/ionic-team/ionic-framework/issues/27440)) ([e930988](https://github.com/ionic-team/ionic-framework/commit/e9309880d18cf03c1c139b00fe4b80794804e3de)), closes [#27411](https://github.com/ionic-team/ionic-framework/issues/27411)
* **modal, popover:** wait for contents to mount ([#27344](https://github.com/ionic-team/ionic-framework/issues/27344)) ([c98ad6f](https://github.com/ionic-team/ionic-framework/commit/c98ad6f16ab147024fb74c179218fd8ff7f87db1)), closes [#27343](https://github.com/ionic-team/ionic-framework/issues/27343)
* **overlays:** assign incremental id to overlay host ([#27278](https://github.com/ionic-team/ionic-framework/issues/27278)) ([9313a91](https://github.com/ionic-team/ionic-framework/commit/9313a914b7802dd4327caa970906ea18e882a3ce))
* **range:** round value to same number of decimal places as props to avoid floating point rounding errors ([#27375](https://github.com/ionic-team/ionic-framework/issues/27375)) ([6e83ba4](https://github.com/ionic-team/ionic-framework/commit/6e83ba4051922da0a179a370d5baa0c57df8b01d)), closes [#21968](https://github.com/ionic-team/ionic-framework/issues/21968)
* **react:** remove incorrect class key from IonicReactProps ([#27432](https://github.com/ionic-team/ionic-framework/issues/27432)) ([415c44c](https://github.com/ionic-team/ionic-framework/commit/415c44c0adc231367727c14f355c982afc385172))
* **many:** form components do not take up full width in slot ([#27306](https://github.com/ionic-team/ionic-framework/issues/27306)) ([bfe7b38](https://github.com/ionic-team/ionic-framework/commit/bfe7b388318aca98014a0748f678e41a0f3910ae)), closes [#27305](https://github.com/ionic-team/ionic-framework/issues/27305)
* **scroll-assist:** set correct scroll padding ([#27261](https://github.com/ionic-team/ionic-framework/issues/27261)) ([7e1f996](https://github.com/ionic-team/ionic-framework/commit/7e1f996dc63cd414b30b22aebbfc09b0b6b4f6fc)), closes [#27257](https://github.com/ionic-team/ionic-framework/issues/27257)
* **breadcumb:** set background when focused on md ([#27274](https://github.com/ionic-team/ionic-framework/issues/27274)) ([01e028b](https://github.com/ionic-team/ionic-framework/commit/01e028b789f84e80f20ce2be7be7f8519f925211)), closes [#27273](https://github.com/ionic-team/ionic-framework/issues/27273)
* **modal:** set default text color ([#27207](https://github.com/ionic-team/ionic-framework/issues/27207)) ([c267b43](https://github.com/ionic-team/ionic-framework/commit/c267b43396057d9fab344a30bd83d00523911dc1)), closes [#26060](https://github.com/ionic-team/ionic-framework/issues/26060) [/github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss#L42](https://github.com//github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss/issues/L42)
* **react:** nav will remove components from the DOM ([#25763](https://github.com/ionic-team/ionic-framework/issues/25763)) ([beb46bf](https://github.com/ionic-team/ionic-framework/commit/beb46bf9def466c4bf54aeed2b5ccdcfcf5cd579)), closes [#25753](https://github.com/ionic-team/ionic-framework/issues/25753)
* **select:** adjust label alignment when in a card ([#27202](https://github.com/ionic-team/ionic-framework/issues/27202)) ([5a2b87c](https://github.com/ionic-team/ionic-framework/commit/5a2b87cbcc5c789d02b29e776e2b9768d7ad5631)), closes [#27086](https://github.com/ionic-team/ionic-framework/issues/27086)
* **datetime:** clamp date between min and max when using month picker ([#27185](https://github.com/ionic-team/ionic-framework/issues/27185)) ([0385c08](https://github.com/ionic-team/ionic-framework/commit/0385c0862c98c9387b38d3a4416d74a2cc132ddd)), closes [#27027](https://github.com/ionic-team/ionic-framework/issues/27027)
* **input:** string values are emitted ([#27226](https://github.com/ionic-team/ionic-framework/issues/27226)) ([cdb0627](https://github.com/ionic-team/ionic-framework/commit/cdb0627c87299ba36da670c81f9d4e3446bb500d))
* **item:** ios active state has correct contrast ([#27134](https://github.com/ionic-team/ionic-framework/issues/27134)) ([bbdb0ca](https://github.com/ionic-team/ionic-framework/commit/bbdb0ca480d7cd46c030d1947ced712653cf122b)), closes [#000](https://github.com/ionic-team/ionic-framework/issues/000) [#000](https://github.com/ionic-team/ionic-framework/issues/000)
* **many:** dynamic label support for modern form controls ([#27156](https://github.com/ionic-team/ionic-framework/issues/27156)) ([30b548b](https://github.com/ionic-team/ionic-framework/commit/30b548b167883f0a657b0410d3bcf76dbb6895e0)), closes [#27085](https://github.com/ionic-team/ionic-framework/issues/27085)
* **menu:** export menu interfaces ([#27227](https://github.com/ionic-team/ionic-framework/issues/27227)) ([80d8c66](https://github.com/ionic-team/ionic-framework/commit/80d8c667666ffdb6b8e668ef94cc58a93045bd0e))
* **menu:** refs are not destroyed on unmount ([#27141](https://github.com/ionic-team/ionic-framework/issues/27141)) ([b81b0d1](https://github.com/ionic-team/ionic-framework/commit/b81b0d14258d7b8caf028e6cfe81772ed2f5f119)), closes [/github.com/ionic-team/ionic-framework/blob/687b37ad3e3237b874473817bb7b59143ac113ce/packages/core/src/components/menu/menu.tsx#L136-L137](https://github.com//github.com/ionic-team/ionic-framework/blob/687b37ad3e3237b874473817bb7b59143ac113ce/packages/core/src/components/menu/menu.tsx/issues/L136-L137)
* **radio:** takes up full height in item ([#27168](https://github.com/ionic-team/ionic-framework/issues/27168)) ([987c79f](https://github.com/ionic-team/ionic-framework/commit/987c79f05b6791084c4526d80c8c28a28047dd58)), closes [/github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/checkbox/checkbox.scss#L42](https://github.com//github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/checkbox/checkbox.scss/issues/L42) [/github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/toggle/toggle.scss#L43](https://github.com//github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/toggle/toggle.scss/issues/L43)
* **segment-button:** update checked state on render ([#26970](https://github.com/ionic-team/ionic-framework/issues/26970)) ([16aa977](https://github.com/ionic-team/ionic-framework/commit/16aa9770bba983705d807ad363498693a0e7969b)), closes [#26830](https://github.com/ionic-team/ionic-framework/issues/26830)
* **segment:** segment disables segment buttons created asyncronously ([#27155](https://github.com/ionic-team/ionic-framework/issues/27155)) ([ad6b130](https://github.com/ionic-team/ionic-framework/commit/ad6b1301cf8528f7c9ad3c52730f01861117b380))
* **select:** respect --border-radius with modern template ([#27213](https://github.com/ionic-team/ionic-framework/issues/27213)) ([6ffbdbb](https://github.com/ionic-team/ionic-framework/commit/6ffbdbb3b2b69290cf25753d535bc7483bd7c6e8)), closes [#27208](https://github.com/ionic-team/ionic-framework/issues/27208)
* **select:** text does not overlap icon ([#27125](https://github.com/ionic-team/ionic-framework/issues/27125)) ([6fc0024](https://github.com/ionic-team/ionic-framework/commit/6fc002458ad23b129a214fd34d3a2fdc33800373)), closes [#27081](https://github.com/ionic-team/ionic-framework/issues/27081)
* **item-sliding:** buttons are not interactive on close ([#27829](https://github.com/ionic-team/ionic-framework/issues/27829)) ([6e4919c](https://github.com/ionic-team/ionic-framework/commit/6e4919caff90fc60988e5cc85ad7161844eb5b51)), closes [#22722](https://github.com/ionic-team/ionic-framework/issues/22722)
* **modal:** body background is reset with inline card modals ([#27835](https://github.com/ionic-team/ionic-framework/issues/27835)) ([38626d9](https://github.com/ionic-team/ionic-framework/commit/38626d96809d1c6be523ea62a4fac1dec73ee891)), closes [#27830](https://github.com/ionic-team/ionic-framework/issues/27830)
* **button:** allow button to increase in height when text wraps ([#27547](https://github.com/ionic-team/ionic-framework/issues/27547)) ([6fe716f](https://github.com/ionic-team/ionic-framework/commit/6fe716fd1320935632854e5d4f741b57801bda92))
* **searchbar:** add name property ([#27737](https://github.com/ionic-team/ionic-framework/issues/27737)) ([7131037](https://github.com/ionic-team/ionic-framework/commit/71310372c94862342d607007ece127340df92a8c)), closes [#27675](https://github.com/ionic-team/ionic-framework/issues/27675)
* **angular:** menu button is enabled with Angular Universal builds ([#27814](https://github.com/ionic-team/ionic-framework/issues/27814)) ([2cf1a0b](https://github.com/ionic-team/ionic-framework/commit/2cf1a0bcae7d766aa25951c53470876f9569906c)), closes [#27524](https://github.com/ionic-team/ionic-framework/issues/27524) [#22206](https://github.com/ionic-team/ionic-framework/issues/22206)
* **button:** submit form when pressing enter key ([#27790](https://github.com/ionic-team/ionic-framework/issues/27790)) ([b78af75](https://github.com/ionic-team/ionic-framework/commit/b78af7598f19ca5e1b440ddc0091a62d86321066)), closes [#19368](https://github.com/ionic-team/ionic-framework/issues/19368)
* **radio, checkbox, toggle:** add top and bottom margins when in ion-item ([#27788](https://github.com/ionic-team/ionic-framework/issues/27788)) ([35f0ec5](https://github.com/ionic-team/ionic-framework/commit/35f0ec581a55e0cb080f0793fb94d3e424c06d4d)), closes [#27498](https://github.com/ionic-team/ionic-framework/issues/27498)
* safari no longer adjusts text in landscape ([#27787](https://github.com/ionic-team/ionic-framework/issues/27787)) ([66584b0](https://github.com/ionic-team/ionic-framework/commit/66584b03d0b33507170f954009998c72fb3f7755)), closes [#27782](https://github.com/ionic-team/ionic-framework/issues/27782)
* **textarea:** stacked/floating textarea size is correct on safari ([#27766](https://github.com/ionic-team/ionic-framework/issues/27766)) ([2cb7013](https://github.com/ionic-team/ionic-framework/commit/2cb701395487c6a0304400f6b821659ae6def820)), closes [#27345](https://github.com/ionic-team/ionic-framework/issues/27345)
* **overlays:** first button is not focused on backdrop tap ([#27774](https://github.com/ionic-team/ionic-framework/issues/27774)) ([82c568b](https://github.com/ionic-team/ionic-framework/commit/82c568b8c8e1e9934e1928452aa5216619290e7b)), closes [#27773](https://github.com/ionic-team/ionic-framework/issues/27773)
* **back-button:** show correct background on focus + hover with ios ([#27723](https://github.com/ionic-team/ionic-framework/issues/27723)) ([db9a001](https://github.com/ionic-team/ionic-framework/commit/db9a0010df3c7fd0fcd0dbcd8c4ad3b30d022b5c)), closes [#27722](https://github.com/ionic-team/ionic-framework/issues/27722)
* **nav:** root component is mounted with root params ([#27676](https://github.com/ionic-team/ionic-framework/issues/27676)) ([1f06be4](https://github.com/ionic-team/ionic-framework/commit/1f06be4a31965f2a949b4866a585aee6af0af29d)), closes [#27146](https://github.com/ionic-team/ionic-framework/issues/27146)
* **datetime:** ascending order for years ([#27551](https://github.com/ionic-team/ionic-framework/issues/27551)) ([2098806](https://github.com/ionic-team/ionic-framework/commit/209880622a4600f88c4878e82975ad0492bd55db)), closes [#27422](https://github.com/ionic-team/ionic-framework/issues/27422)
* **select:** hide notch cutout if no visible label provided ([#27649](https://github.com/ionic-team/ionic-framework/issues/27649)) ([606a892](https://github.com/ionic-team/ionic-framework/commit/606a892e400a531cac5c413dc7492a54ae0e1fea))
### Features
* **datetime:** add part for month/year button ([#27618](https://github.com/ionic-team/ionic-framework/issues/27618)) ([d44422e](https://github.com/ionic-team/ionic-framework/commit/d44422e224374804010746a12f398d3c0d6a9f2c)), closes [#26596](https://github.com/ionic-team/ionic-framework/issues/26596)
* **datetime:** add shadow parts and CSS variables for styling wheel pickers ([#27529](https://github.com/ionic-team/ionic-framework/issues/27529)) ([f2c1845](https://github.com/ionic-team/ionic-framework/commit/f2c1845fba11d8273331c601052f0f34457b6649)), closes [#25945](https://github.com/ionic-team/ionic-framework/issues/25945)
* **segment, segment-button:** update segment value property to accept numbers ([#27222](https://github.com/ionic-team/ionic-framework/issues/27222)) ([ec95ae5](https://github.com/ionic-team/ionic-framework/commit/ec95ae5cd38e3d2b9ec9fdbc9e237fa1241f7a4e)), closes [#27221](https://github.com/ionic-team/ionic-framework/issues/27221)
* **segment:** display segment as a grid and add an ellipsis to overflowing text in a segment button ([#27457](https://github.com/ionic-team/ionic-framework/issues/27457)) ([448e63f](https://github.com/ionic-team/ionic-framework/commit/448e63fef0aca603214cb357dec37e1db2a0f052)), closes [#16532](https://github.com/ionic-team/ionic-framework/issues/16532)
* **select:** expose container and label as CSS parts ([#27541](https://github.com/ionic-team/ionic-framework/issues/27541)) ([5c10f88](https://github.com/ionic-team/ionic-framework/commit/5c10f88b2eb4d869966ea9a6d1db34185cefe676)), closes [#27112](https://github.com/ionic-team/ionic-framework/issues/27112)
* **keyboard:** keyboard events emit correctly when Capacitor is available but the Keyboard plugin is not ([#27655](https://github.com/ionic-team/ionic-framework/issues/27655)) ([7a38a00](https://github.com/ionic-team/ionic-framework/commit/7a38a006a94f1240d93102f2f42bbfc4d76a679e)), closes [#27654](https://github.com/ionic-team/ionic-framework/issues/27654)
* **toast:** allow color for translucent toast ([#27652](https://github.com/ionic-team/ionic-framework/issues/27652)) ([d555375](https://github.com/ionic-team/ionic-framework/commit/d555375c146639b32e85c57a8cdd4d52313ef4cf)), closes [#27567](https://github.com/ionic-team/ionic-framework/issues/27567)
* **refresher:** scroll styles are reset when using non-native refresher ([#27602](https://github.com/ionic-team/ionic-framework/issues/27602)) ([92c5545](https://github.com/ionic-team/ionic-framework/commit/92c55452fdf4ac7b8d15ce75a4e867aab9321cfb)), closes [#27601](https://github.com/ionic-team/ionic-framework/issues/27601)
* **item-sliding:** refresh sliding behavior when options are added or removed asynchronously ([#27572](https://github.com/ionic-team/ionic-framework/issues/27572)) ([b2a226a](https://github.com/ionic-team/ionic-framework/commit/b2a226ae663695be0666cd862510d8d843c80b9a)), closes [#25578](https://github.com/ionic-team/ionic-framework/issues/25578)
* **keyboard:** listen on correct events for keyboard lifecycle ([#27569](https://github.com/ionic-team/ionic-framework/issues/27569)) ([7871210](https://github.com/ionic-team/ionic-framework/commit/7871210e9e4ecc09353b821b60f977498a01ee8d)), closes [#27558](https://github.com/ionic-team/ionic-framework/issues/27558)
* **radio:** radio with modern syntax is keyboard navigable ([#27530](https://github.com/ionic-team/ionic-framework/issues/27530)) ([d87e692](https://github.com/ionic-team/ionic-framework/commit/d87e692c6c2c3d146514b093853d5e262137a9e5)), closes [#27268](https://github.com/ionic-team/ionic-framework/issues/27268)
* **select:** prevent click event from firing twice ([#27570](https://github.com/ionic-team/ionic-framework/issues/27570)) ([ba7e60e](https://github.com/ionic-team/ionic-framework/commit/ba7e60e8669b1980b9a0c6267617894e16b4a2d4))
* **accordion:** state updates if value changes ([#27463](https://github.com/ionic-team/ionic-framework/issues/27463)) ([3cbc592](https://github.com/ionic-team/ionic-framework/commit/3cbc592154a2b76cf63dfef67cb63de94dcec887)), closes [#27461](https://github.com/ionic-team/ionic-framework/issues/27461)
* **checkbox, radio:** update border colors to match MD2 spec ([#27357](https://github.com/ionic-team/ionic-framework/issues/27357)) ([eabc6f3](https://github.com/ionic-team/ionic-framework/commit/eabc6f357675919dd82bea29a1776c0ca1bf89fd)), closes [#27170](https://github.com/ionic-team/ionic-framework/issues/27170)
* **datetime-button:** log error if non-datetime instance is passed ([#27456](https://github.com/ionic-team/ionic-framework/issues/27456)) ([7b7e05a](https://github.com/ionic-team/ionic-framework/commit/7b7e05aa697a51ebfac42f96aa9510d4d96336de))
* **footer, tab-bar:** wait for resize before re-showing ([#27417](https://github.com/ionic-team/ionic-framework/issues/27417)) ([70d9854](https://github.com/ionic-team/ionic-framework/commit/70d9854d8df5259ed715e282a6ca40ca3bea6192)), closes [#25990](https://github.com/ionic-team/ionic-framework/issues/25990)
* **many:** form controls labels have increased margin ([#27447](https://github.com/ionic-team/ionic-framework/issues/27447)) ([381de0b](https://github.com/ionic-team/ionic-framework/commit/381de0b3d324805161232d8556fffd7022fcd84c)), closes [#27129](https://github.com/ionic-team/ionic-framework/issues/27129)
* **picker-column:** prevSelected is set to the correct value ([#27458](https://github.com/ionic-team/ionic-framework/issues/27458)) ([9dc126d](https://github.com/ionic-team/ionic-framework/commit/9dc126d38727c1ca16a75cfa65daab9a630be678)), closes [#21764](https://github.com/ionic-team/ionic-framework/issues/21764)
* **select:** floating label covers placeholder when when blurred ([#27446](https://github.com/ionic-team/ionic-framework/issues/27446)) ([921bfae](https://github.com/ionic-team/ionic-framework/commit/921bfae9e68257734a9695cab9245bb335eb88fa)), closes [#27201](https://github.com/ionic-team/ionic-framework/issues/27201)
* **select:** modern syntax works with forms ([#27480](https://github.com/ionic-team/ionic-framework/issues/27480)) ([13d2d11](https://github.com/ionic-team/ionic-framework/commit/13d2d115d44f109c3ea2a47bcb518c6090126325)), closes [#27478](https://github.com/ionic-team/ionic-framework/issues/27478)
* **spinner:** allow resizing of dots, bubbles, and circles ([#27424](https://github.com/ionic-team/ionic-framework/issues/27424)) ([e5ae45d](https://github.com/ionic-team/ionic-framework/commit/e5ae45d32fde7328a704a6ffa18940106a069fa2)), closes [#18115](https://github.com/ionic-team/ionic-framework/issues/18115)
* **tab-button:** use darker text to pass a11y ([#27355](https://github.com/ionic-team/ionic-framework/issues/27355)) ([0b23814](https://github.com/ionic-team/ionic-framework/commit/0b23814e0ba167ee6b2a2e430c47823d312d8c3c))
* **content:** prevent forceUpdate in SSR ([#27440](https://github.com/ionic-team/ionic-framework/issues/27440)) ([e930988](https://github.com/ionic-team/ionic-framework/commit/e9309880d18cf03c1c139b00fe4b80794804e3de)), closes [#27411](https://github.com/ionic-team/ionic-framework/issues/27411)
* **modal, popover:** wait for contents to mount ([#27344](https://github.com/ionic-team/ionic-framework/issues/27344)) ([c98ad6f](https://github.com/ionic-team/ionic-framework/commit/c98ad6f16ab147024fb74c179218fd8ff7f87db1)), closes [#27343](https://github.com/ionic-team/ionic-framework/issues/27343)
* **overlays:** assign incremental id to overlay host ([#27278](https://github.com/ionic-team/ionic-framework/issues/27278)) ([9313a91](https://github.com/ionic-team/ionic-framework/commit/9313a914b7802dd4327caa970906ea18e882a3ce))
* **range:** round value to same number of decimal places as props to avoid floating point rounding errors ([#27375](https://github.com/ionic-team/ionic-framework/issues/27375)) ([6e83ba4](https://github.com/ionic-team/ionic-framework/commit/6e83ba4051922da0a179a370d5baa0c57df8b01d)), closes [#21968](https://github.com/ionic-team/ionic-framework/issues/21968)
* **many:** form components do not take up full width in slot ([#27306](https://github.com/ionic-team/ionic-framework/issues/27306)) ([bfe7b38](https://github.com/ionic-team/ionic-framework/commit/bfe7b388318aca98014a0748f678e41a0f3910ae)), closes [#27305](https://github.com/ionic-team/ionic-framework/issues/27305)
* **scroll-assist:** set correct scroll padding ([#27261](https://github.com/ionic-team/ionic-framework/issues/27261)) ([7e1f996](https://github.com/ionic-team/ionic-framework/commit/7e1f996dc63cd414b30b22aebbfc09b0b6b4f6fc)), closes [#27257](https://github.com/ionic-team/ionic-framework/issues/27257)
* **breadcumb:** set background when focused on md ([#27274](https://github.com/ionic-team/ionic-framework/issues/27274)) ([01e028b](https://github.com/ionic-team/ionic-framework/commit/01e028b789f84e80f20ce2be7be7f8519f925211)), closes [#27273](https://github.com/ionic-team/ionic-framework/issues/27273)
* **modal:** set default text color ([#27207](https://github.com/ionic-team/ionic-framework/issues/27207)) ([c267b43](https://github.com/ionic-team/ionic-framework/commit/c267b43396057d9fab344a30bd83d00523911dc1)), closes [#26060](https://github.com/ionic-team/ionic-framework/issues/26060) [/github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss#L42](https://github.com//github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss/issues/L42)
* **select:** adjust label alignment when in a card ([#27202](https://github.com/ionic-team/ionic-framework/issues/27202)) ([5a2b87c](https://github.com/ionic-team/ionic-framework/commit/5a2b87cbcc5c789d02b29e776e2b9768d7ad5631)), closes [#27086](https://github.com/ionic-team/ionic-framework/issues/27086)
In addition to the default, self lazy-loading components built by Stencil, this package also comes with each component exported as a stand-alone custom element within `@ionic/core/components`. Each component extends `HTMLElement`, and does not lazy-load itself. Instead, this package is useful for projects already using a bundler such as Webpack or Rollup. While all components are available to be imported, the custom elements build also ensures bundlers only import what's used, and tree-shakes any unused components.
* Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
* Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2008,2012,2016,2020,2024"`.
* The visible label associated with the input. Use this if you need to render a plaintext label. The `label` property will take priority over the `label` slot if both are used.
* Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be determined by the content in the popover.
* Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be set to a static default value.
* The text to display as the control's label. Use this over the `label` slot if you only need plain text. The `label` property will take priority over the `label` slot if both are used.
*/
"label"?:string;
/**
* Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
* The mode determines which platform styles to use.
*/
"mode"?:"ios"|"md";
/**
* If used in a form, set the name of the control, which is submitted with the form data.
*/
"name":string;
/**
* Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
* If `true`, the user cannot interact with the select.
*/
"disabled":boolean;
/**
* The toggle icon to show when the select is open. If defined, the icon rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon` will be used for when the select is both open and closed.
*/
"expandedIcon"?:string;
/**
* The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
* The visible label associated with the select. Use this if you need to render a plaintext label. The `label` property will take priority over the `label` slot if both are used.
* Get the currently selected tab. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
*/
"getSelected":()=>Promise<string|undefined>;
/**
* Get a specific tab by the value of its `tab` property or an element reference.
* Get a specific tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
* @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
* Select a tab by the value of its `tab` property or an element reference.
* Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
* @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
* The visible label associated with the textarea. Use this if you need to render a plaintext label. The `label` property will take priority over the `label` slot if both are used.
* Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
* Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2008,2012,2016,2020,2024"`.
* The visible label associated with the input. Use this if you need to render a plaintext label. The `label` property will take priority over the `label` slot if both are used.
* The `ionChange` event is fired for `<ion-input>` elements when the user modifies the element's value. Unlike the `ionInput` event, the `ionChange` event is not necessarily fired for each alteration to an element's value. Depending on the way the users interacts with the element, the `ionChange` event fires at a different moment: - When the user commits the change explicitly (e.g. by selecting a date from a date picker for `<ion-input type="date">`, pressing the "Enter" key, etc.). - When the element loses focus after its value has changed: for elements where the user's interaction is typing.
* The `ionChange` event is fired when the user modifies the input's value. Unlike the `ionInput` event, the `ionChange` event is only fired when changes are committed, not as the user types. Depending on the way the users interacts with the element, the `ionChange` event fires at a different moment: - When the user commits the change explicitly (e.g. by selecting a date from a date picker for `<ion-input type="date">`, pressing the "Enter" key, etc.). - When the element loses focus after its value has changed: for elements where the user's interaction is typing.
* The `ionInput` event fires when the `value` of an `<ion-input>` element has been changed. For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type is `null`.
* The `ionInput` event is fired each time the user modifies the input's value. Unlike the `ionChange` event, the `ionInput` event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types. For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type is `null`.
* Emitted before the modal has presented, but after the component has been mounted in the DOM. This event exists so iOS can run the entering transition properly
* Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be determined by the content in the popover.
* Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be set to a static default value.
* The text to display as the control's label. Use this over the `label` slot if you only need plain text. The `label` property will take priority over the `label` slot if both are used.
*/
"label"?:string;
/**
* Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
* If `true`, the user cannot interact with the select.
*/
"disabled"?:boolean;
/**
* The toggle icon to show when the select is open. If defined, the icon rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon` will be used for when the select is both open and closed.
*/
"expandedIcon"?:string;
/**
* The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
* The visible label associated with the select. Use this if you need to render a plaintext label. The `label` property will take priority over the `label` slot if both are used.
* The visible label associated with the textarea. Use this if you need to render a plaintext label. The `label` property will take priority over the `label` slot if both are used.
* The `ionChange` event is fired for `<ion-textarea>` elements when the user modifies the element's value. Unlike the `ionInput` event, the `ionChange` event is not necessarily fired for each alteration to an element's value. The `ionChange` event is fired when the element loses focus after its value has been modified.
* The `ionChange` event is fired when the user modifies the textarea's value. Unlike the `ionInput` event, the `ionChange` event is fired when the element loses focus after its value has been modified.
* The `ionInput` event fires when the `value` of an `<ion-textarea>` element has been changed. When `clearOnEdit` is enabled, the `ionInput` event will be fired when the user clears the textarea by performing a keydown event.
* The `ionInput` event is fired each time the user modifies the textarea's value. Unlike the `ionChange` event, the `ionInput` event is fired for each alteration to the textarea's value. This typically happens for each keystroke as the user types. When `clearOnEdit` is enabled, the `ionInput` event will be fired when the user clears the textarea by performing a keydown event.
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
