Commit Graph

3252 Commits

Author SHA1 Message Date
Sean Perkins
ac2c8e6c22 fix(range): knob positions are correct on initial render with custom elements build (#28257)
Issue number: Resolves #25444

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- 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 the custom elements build, currently used by React and Vue packages,
the range knob can be rendered incorrectly if the value is assigned
after the `connectedCallback` but before the initial render of the
component. This is most apparent with the dual knobs implementation in
React (referenced issue).

This results in the range's value being correct, but the visual
representation of the range to be incorrect.

This also causes issues with the custom elements build in the standalone
implementation of Ionic's components in Angular. If a range is presented
in a modal via a controller, the range will never render with the value
that is initially assigned to it.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updates the range knob positioning when the range has initially
rendered.

## 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 change needs to be pulled into the Ionic angular standalone work. 

Dev-build: `7.4.3-dev.11695926109.13b1266a`
2023-09-28 20:15:46 +00:00
Sean Perkins
70e9177e2c chore: add script for updating local snapshots (#28254)
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. -->

Team members often need to update the ground truth screenshots when
validating visual regressions or working on a design change. The command
may be unfamiliar to them or they may be new to the project/playwright.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adds a new script to the `core` package for updating the local (to the
file system) ground truth 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. -->
2023-09-28 16:47:09 +00:00
Liam DeBeasi
51b7ceb5be test: remove deprecated getSnapshotSettings method (#28250)
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 `getSnapshotSettings` method was used in the pre-generator test
infrastructure. It was deprecated at the start of the generator
migration.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Now that the generator migration is complete, this method is no longer
needed. As a result, I removed it. Developers should use the
`screenshot` function:
https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/test/playwright/docs/api.md#using-the-return-value-from-each-configuration

## 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. -->
2023-09-28 16:02:18 +00:00
Liam DeBeasi
597bec7534 test(docs): add info on how to run tests and update screenshots (#28229)
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. -->

During planning the team discussed that some of our internal docs are
outdated. Additionally, some of this info would be useful for
contributors.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Ported remaining E2E docs to GitHub
- Added info on installing deps, running tests, and updating
screenshots. API and best practices are already on 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. -->

---------

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2023-09-28 15:03:34 +00:00
Liam DeBeasi
eb41b556b5 fix(fab-button): position is correct with custom sizes (#28195)
Issue number: resolves #22564

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- 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. -->

Changing the size of the FAB button causes it to be positioned
incorrectly. This was happening because we set position values based on
the assumption that the default FAB button would always be 56px x 56px.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- FAB and FAB List positioning is now computed based on intrinsic size

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.4.1-dev.11695395641.14897417`

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-09-28 14:45:10 +00:00
Liam DeBeasi
71a7af0f52 fix(title): large title uses custom font on transition (#28231)
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 testing Dynamic Font Scaling with a custom font I noticed that the
large title does not respect `--ion-font-family` on transition.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The cloned large title now respect `--ion-font-family`

Note: This happens in `main` too which is why I am merging into there
instead of the Dynamic Font Scaling branch.

| `main` | branch |
| - | - |
|
![IMG_0182](https://github.com/ionic-team/ionic-framework/assets/2721089/8e09669b-5e76-4736-a1cb-bea87dc25258)
|
![IMG_0183](https://github.com/ionic-team/ionic-framework/assets/2721089/bde88ff1-6024-40ec-99ab-c71e73386dc9)
|

## 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. -->
2023-09-26 16:12:04 +00:00
Amanda Johnston
82a5b310da chore(item): add deprecated flag to fill prop (#28210)
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 `fill` prop on `ion-item` is currently deprecated (see warning
[here](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/item/item.tsx#L248-L253))
but the docs have not been updated to reflect this.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

`@deprecated` flag added to the `fill` prop.

## 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. -->
2023-09-22 14:50:33 +00:00
Brandy Carney
b02f1aff2b test(radio): skip flaky tests (#28211) 2023-09-21 21:14:03 +00:00
Maria Hutt
5e016a6616 test(item-sliding): re-enable flaky tests (#28192)
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. -->

Some of the tests for `item-sliding` were being skipped due to
flakiness.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updated the tests to use the stable function, `dragElementBy` to
handle gestures, removing the gesture flakiness.
- Separated the basic test to lessen the gesture complexity else it
becomes flaky since it can't handle opening and closing and opening in
the same test.
- Tests are now checking all modes and all directions.
- Updated a utils function with a warning regarding an open issue with
RTL.


## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

N/A

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2023-09-20 17:32:58 +00:00
Sean Perkins
5b7e422dc0 fix(radio,toggle,checkbox,select): padded space is clickable in items (#28136)
Issue number: Resolves #27169

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- 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. -->

Clicking the padded space within an `ion-item` will not pass the click
event to the slotted `ion-radio`, `ion-checkbox`, `ion-select` or
`ion-toggle`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The padded space at the start of `.item-native` and at the end of
`.item-inner` is clickable to activate a control.
- When the item is clicked, we check if the event is a result of
clicking the control or clicking the item's padded space. If the click
event is on the control, we don't need to do anything and let the
default behavior occur. If the click event is on the padded space, we
manually call the `.click()` method for the interactive element.
- The cursor pointer displays when hovering over the padded space when a
slotted interactive control is 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. -->
2023-09-20 03:27:36 +00:00
Liam DeBeasi
0104d89927 fix(range): knob is not cut off in item with modern syntax (#28199)
Issue number: resolves #27199

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- 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 the modern range in an item, the knob will get cut off by the
item when the value is at either the min or the max.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Range knob is no longer cut off by the item

## 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 is an extension of
https://github.com/ionic-team/ionic-framework/pull/27188. I decided to
make a separate branch/PR since I added tests and changed the
implementation a bit. Feel free to take all/some/none of this code.

---------

Co-authored-by: Sean Perkins <sean-perkins@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
2023-09-20 03:01:50 +00:00
Liam DeBeasi
3f06da4cfc fix(scroll-assist): re-run when keyboard changes (#28174)
Issue number: resolves #22940

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- 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. -->

Scroll assist does not run when changing keyboards. This means that
inputs can be hidden under the keyboard if the new keyboard is larger
than the previous keyboard.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- On Browsers/PWAs scroll assist will re-run when the keyboard geometry
changes. We don't have a cross-browser way of detecting keyboard changes
yet, so this is the best we have for now.
- On Cordova/Capacitor scroll assist will re-run when the keyboard
changes, even if the overall keyboard geometry does not change.


In the example below, we are changing keyboards while an input is
focused:
| `main` | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/715e176a-6724-4308-ae3e-15b5bea308ac"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/b9ccd482-720a-409b-a089-b3330c1e405c"></video>
|

Breakdown per-resize mode:

| Native | None | Ionic | Body |
| - | - | - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/b930ac5f-3398-4887-a8ca-a57708adc66d"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/68465854-94d0-4e00-940c-c4674a43b6a3"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/561f313a-9caf-4c9e-ab15-9c4383f0e3ee"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/300b8894-ad2a-43bc-8e82-ecd68afd407e"></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. -->

Dev build: `7.3.4-dev.11694706860.14b2710d`

---------

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
2023-09-19 19:02:20 +00:00
Liam DeBeasi
5ff32b7786 test(docs): update viewport docs (#28197)
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 needed this constant for a different PR but realized the docs were
outdated:
81714d45bd/core/src/utils/test/playwright/viewports/index.ts

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Docs reference correct constant name 

## 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. -->
2023-09-19 17:37:55 +00:00
Liam DeBeasi
b5c736f5ac fix(scroll-assist): improve input scroll accuracy with native resizing (#28169)
Issue number: Part of #22940

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

While working on a fix for #22940, I discovered another bug that
impacted the reliability of my proposed fix for #22940. When we compute
the scroll data (i.e. how much the input needs to be scrolled by), we
subtract the `keyboardHeight` from the `platformHeight` (i.e. the
viewport height):
1015c06cbe/core/src/utils/input-shims/hacks/scroll-data.ts (L34)

Every time we tap between inputs (even if the keyboard is already open)
we re-run scroll assist because the newly focused input could be
partially obscured by the keyboard. However, in this case we scroll by
too much because we effectively subtract the keyboard height twice. This
is because by the time we compute `platformHeight`, the platform
dimensions have already shrunk to account for the keyboard (when the
webview resizes).

As a result, when we subtract `keyboardHeight` we get a visible area
that is much smaller than the actual visible area.

Examples below with different resize modes. Notice that with the
"Native" resize mode (entire webview resizes when keyboard is open)
tapping into other inputs scrolls the content by much more than it needs
to.

| Body | Native | Ionic | None |
| - | - | - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/06d1cd20-0349-4a59-ad85-c1c8a8a03caa"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/1d4e8363-a69b-45c4-931c-d6227e548ec9"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/7e4304c1-7d56-48c8-aed8-16fc7e51641a"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/7869c5e0-b202-46e1-af82-49e41b3b067e"></video>
|

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- We now compute the viewport height on load rather than on focus. This
ensures that we always use the full viewport height when computing the
visible area.

| Body | Native | Ionic | None |
| - | - | - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/c5a66287-0cad-42db-bece-da16edad60e3"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/372a45c8-e8bd-43d2-bf50-d87b7250e9b3"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/3d656467-8e2e-48cc-8d72-dc89a67ef8b1"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/19969535-7d06-404c-98e4-ae49957e0ffe"></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. -->

Dev build: `7.3.4-dev.11694548895.1578981b`
2023-09-19 16:11:15 +00:00
Liam DeBeasi
81714d45bd fix(overlays): correctly re-add root to accessibility tree (#28183)
Issue number: resolves #28180

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- 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 presenting an overlay, we remove the root (usually
`ion-router-outlet`) from the accessibility tree. This makes it so you
cannot accidentally focus elements behind the overlay. When dismissing
an overlay we re-add the root to the accessibility tree. However, we
fail to consider if there are multiple presented overlays. For example,
if you present a modal, then an alert, then dismiss the alert, then the
root is re-added to the accessibility tree even though the modal is
still presented.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The root is now re-added to the accessibility tree only if it is the
last presented overlay.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.4.1-dev.11694783260.13da477f`
2023-09-19 14:46:14 +00:00
Maria Hutt
574d762594 test(menu): safe area and proper var reset (#28177)
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 no tests for menu when safe area is applied.
- The safe area variables on menu weren't being reset properly to allow
easy local customization.

Currently, some of the variables are being set to `env()`. This is the
same structure that is being used in core. However, this doesn't
prevents users from mocking the safe area when using
`--ion-safe-area-left: 50px` on `html`. It makes it hard to create tests
to validate that padding is being applied to the safe area.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Tests have been added.
- The safe area variables on menu are now being reset to use the values
from `:root`.

The variables are being `unset` in order for the variables to [default
to parent styles](https://stackoverflow.com/a/69491310/5374225). Since
core styles has already declared the variables, then developers can use
`--ion-safe-area-left: 50px` on `html`.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

N/A

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-09-18 17:36:58 +00:00
dependabot[bot]
a5f14e3933 chore(deps-dev): Bump @playwright/test from 1.37.1 to 1.38.0 in /core (#28171)
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from
1.37.1 to 1.38.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.38.0</h2>
<h2>UI Mode Updates</h2>
<p><img
src="https://github.com/microsoft/playwright/assets/746130/8ba27be0-58fd-4f62-8561-950480610369"
alt="Playwright UI Mode" /></p>
<ol>
<li>Zoom into time range.</li>
<li>Network panel redesign.</li>
</ol>
<h2>New APIs</h2>
<ul>
<li>[<code>browserContext.on('weberror')</code>]</li>
<li>[<code>locator.pressSequentially()</code>]</li>
<li>The [<code>reporter.onEnd()</code>] now reports
<code>startTime</code> and total run <code>duration</code>.</li>
</ul>
<h2>Deprecations</h2>
<ul>
<li>The following methods were deprecated: [<code>page.type()</code>],
[<code>frame.type()</code>], [<code>locator.type()</code>] and
[<code>elementHandle.type()</code>].
Please use [<code>locator.fill()</code>] instead which is much faster.
Use [<code>locator.pressSequentially()</code>] only if there is a
special keyboard handling on the page, and you need to press keys
one-by-one.</li>
<li>The method [<code>expect(value).toMatchSnapshot()</code>] is
deprecated in favor of [<code>expect(page).toHaveScreenshot()</code>]
and [<code>expect(locator).toHaveScreenshot()</code>].</li>
</ul>
<h2>Breaking Changes: Playwright no longer downloads browsers
automatically</h2>
<blockquote>
<p>[!NOTE]
If you are using <code>@playwright/test</code> package, this change
<strong>does not</strong> affect you.</p>
</blockquote>
<p>Playwright recommends to use <code>@playwright/test</code> package
and download browsers via <code>npx playwright install</code> command.
If you are following this recommendation, nothing has changed for
you.</p>
<p>However, up to v1.38, installing the <code>playwright</code> package
instead of <code>@playwright/test</code> did automatically download
browsers. This is no longer the case, and we recommend to explicitly
download browsers via <code>npx playwright install</code> command.</p>
<p><strong>v1.37 and earlier</strong></p>
<p><code>playwright</code> package was downloading browsers during
<code>npm install</code>, while <code>@playwright/test</code> was
not.</p>
<p><strong>v1.38 and later</strong></p>
<p><code>playwright</code> and <code>@playwright/test</code> packages do
not download browsers during <code>npm install</code>.</p>
<p><strong>Recommended migration</strong></p>
<p>Run <code>npx playwright install</code> to download browsers after
<code>npm install</code>. For example, in your CI configuration:</p>
<pre lang="yml"><code>- run: npm ci
- run: npx playwright install --with-deps
</code></pre>
<p><strong>Alternative migration option - not recommended</strong></p>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="da997ee8c0"><code>da997ee</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/27067">#27067</a>):
docs: fix line wrapping in release notes</li>
<li><a
href="94b6fe1bdb"><code>94b6fe1</code></a>
chore: mark 1.38.0 (<a
href="https://redirect.github.com/Microsoft/playwright/issues/27030">#27030</a>)</li>
<li><a
href="55cf8eae25"><code>55cf8ea</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/27028">#27028</a>):
docs: add release notes for 1.38</li>
<li><a
href="a0a099fe4a"><code>a0a099f</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/27049">#27049</a>):
feat(webkit): roll to r1908 (<a
href="https://redirect.github.com/Microsoft/playwright/issues/27055">#27055</a>)</li>
<li><a
href="cd8b12c0d5"><code>cd8b12c</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/27041">#27041</a>):
feat(chromium): roll to r1080 (<a
href="https://redirect.github.com/Microsoft/playwright/issues/27045">#27045</a>)</li>
<li><a
href="9981f1418a"><code>9981f14</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/27008">#27008</a>):
chore: polish ui mode for better mac appearance</li>
<li><a
href="5f78f27a7a"><code>5f78f27</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/27006">#27006</a>):
chore: document new onEnd params</li>
<li><a
href="7c838653d6"><code>7c83865</code></a>
chore: fix the split view, reset window on timeline click (<a
href="https://redirect.github.com/Microsoft/playwright/issues/27007">#27007</a>)</li>
<li><a
href="d9eabda09d"><code>d9eabda</code></a>
fix(locators): escape quotes in regular expressions (<a
href="https://redirect.github.com/Microsoft/playwright/issues/27002">#27002</a>)</li>
<li><a
href="6bbc09c96c"><code>6bbc09c</code></a>
chore: show channel name in trace viewer metadata (<a
href="https://redirect.github.com/Microsoft/playwright/issues/26987">#26987</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/Microsoft/playwright/compare/v1.37.1...v1.38.0">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@playwright/test&package-manager=npm_and_yarn&previous-version=1.37.1&new-version=1.38.0)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)


</details>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2023-09-14 17:03:09 +00:00
Liam DeBeasi
1d2b867f22 fix(range): add correct margin in item (#28161) 2023-09-13 16:39:09 -04:00
Liam DeBeasi
8cb878669e fix(many): add correct scale to stacked labels (#28163) 2023-09-13 13:46:02 -04:00
Liam DeBeasi
474308618d Merge remote-tracking branch 'origin/main' into sync-feat-74 2023-09-11 09:23:16 -04:00
hoi4
19f3bb23fd feat: export TransitionOptions interface and getIonPageElement (#28140)
Issue number: resolves #28137

---------

Changes according to [this
comment](https://github.com/ionic-team/ionic-framework/issues/28137#issuecomment-1710283096)

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

@liamdebeasi Sorry for replacing the previous PR. I only copied the main
branch to my fork so I couldn't rebase properly. I am unfortunately not
extremely familiar with Github.

---------

Co-authored-by: Philipp Heuer <philipp@studysmarter.de>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2023-09-11 08:53:56 -04:00
Liam DeBeasi
cd8d5091a1 feat(datetime): add disabled part (#28134) 2023-09-07 15:57:38 -04:00
Maria Hutt
e0542a7867 fix(menu): remove app dir from safe area padding (#28123)
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The `--ion-safe-area-left` and `--ion-safe-area-right` variables in
`ion-menu` are being set as if they use the app's direction. It's been
determined that safe area is not logical and uses the device's
direction. The current implementation is adding padding in the wrong
sides for `ion-toolbar` and `ion-content` within a `ion-menu`.

Additionally, `ion-menu` does not use the entire screen so the safe area
only needs to be applied to the side that is touching the device screen.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Set the `--ion-safe-area-left` and `--ion-safe-area-right` variables
to the correct values based on the device's direction.
- Padding is only added to the side that is not in the safe area.
- `ion-toolbar` is adding `--ion-safe-area-left` and
`--ion-safe-area-right` based on the device's direction.
- `ion-toolbar` can now inherit the correct values from
`--ion-safe-area-left` and `--ion-safe-area-right`.
- `ion-content` can now inherit the correct values from
`--ion-safe-area-left` and `--ion-safe-area-right`.

## 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.3.4-dev.11694015543.18bc484f
2023-09-07 18:33:20 +00:00
Brandy Carney
79b005da70 feat(datetime): add parts for calendar day, active, and today (#27641)
Issue number: resolves #25340

---------

- Exposes the following parts for a calendar day: `calendar-day`,
`today`, and `active`
- Combines the `calendar-day-highlight` element with the `calendar-day`
element so developers don't have to know to style two different elements
& we don't have to expose them as separate parts
- Improves height parity of the calendar day across browsers
- Updates the `custom` e2e test to include an example of styling days
using the newly exposed CSS parts
- Adds tests for the focus states of the calendar day
2023-09-06 11:58:41 -04:00
Liam DeBeasi
176585f446 fix(modal): swipe to dismiss resets status bar style (#28110)
Issue number: resolves #28105

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- 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 swiping to dismiss the card modal, the status bar style is reset
too late. Since we are using 1 animation for the card modal, the dismiss
animation is played _then_ the `dismiss` method is called (which resets
the status bar style). This means the status bar style is wrong for the
duration of the dismiss animation.

This does not impact dragging to close the modal such that the status
bar changes mid-gesture or calling the `dismiss` method directly -- only
quickly swiping to dismiss.

Also one of the changes in core/src/components/modal/modal.tsx
accidentally changed the modal behavior so that the status bar is
changed _after_ the present transition finishes.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- When the card modal is swiped to dismiss the `onDismiss` callback will
also reset the status bar style.
- When the card modal is presented the status bar is set correctly as
the animation begins

| `main` | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/8a18419d-a7ec-4629-8632-62e2ed401912"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/62ffcf00-8dbd-4e0c-83a3-5af5d463bccc"></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. -->


Dev build: `7.3.3-dev.11693592322.138d91e6`
2023-09-05 16:15:30 +00:00
Sean Perkins
f74ad6300d test(progress-bar): remove range from basic screenshot tests (#28035)
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 progress bar basic test makes use of the `ion-range` component in
the captured screenshot. This results in tight coupling when the
appearance of the range changes.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Decouples `ion-range` from the progress bar basic screenshot captures
- Splits out dynamic behavior that was used with `ion-range` to test
files that can be manually interacted with

## 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>
2023-09-01 17:08:40 +00:00
Maria Hutt
e6c7bb60e7 feat(checkbox, radio, toggle, range): stacked labels for form controls (#28075)
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
2023-09-01 09:30:59 -07:00
Maria Hutt
a079d202c5 test(radio): correct screenshot name from toggle (#28099)
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 has a test with the wrong screenshot name of toggle.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Radio has a test with the correct screenshot name.

## 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
2023-09-01 15:04:25 +00:00
Liam DeBeasi
6d4eabcc10 fix(textarea): cols property is respected (#28081)
Issue number: resolves #22142

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- 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 always takes up the entire width of a line which prevents the
`cols` property from working correctly.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The textarea respects the `col` property value only when `autoGrow` is
`false`

## 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.3.2-dev.11693402720.1adb3bcf`

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-09-01 14:56:41 +00:00
Liam DeBeasi
e6c09291f5 Merge remote-tracking branch 'origin/main' into sync-feature-7.4 2023-09-01 09:51:09 -04:00
Liam DeBeasi
7dc9d2d55e test(textarea): migrate to toHaveScreenshot (#28087)
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. -->

Several tests for this component are still using Playwright's old
`toMatchSnapshot` assertion. It's now recommended to use the newer
`toHaveScreenshot` assertion. This new assertion reduces the size of
each screenshot and brings anti-flake improvements such as disabling
animations by default.

We previously migrated most of our codebase to use `toHaveScreenshot`,
but it looks like we missed the tests that were written during the
development of Ionic 7 in a separate branch off `main`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Migrate component tests to use `toHaveScreenshot`.

Note: There should be no layout changes to any of the screenshots. The
only difference between the old and new screenshots should be image and
file size.

## 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>
2023-08-31 16:48:17 +00:00
Shawn Taylor
584e9d3be2 fix(overlays): prevent overlays from getting stuck open (#28069)
Issue number: resolves #27200 

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- 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 bug occurs when you click twice quickly to open an overlay with a
small timeout. In some cases, the overlay will present, dismiss,
present, then not dismiss the second time, getting stuck open. You can
reproduce manually this by grabbing the test HTML included in this PR
and putting it in a branch that doesn't include a fix.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- When an overlay with a short timeout is triggered twice quickly, it
will open-close-open-close.
- The behavior is the same for all overlay components

## 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. -->

Relevant links:
* https://github.com/ionic-team/ionic-framework/issues/27200
* https://ionic-cloud.atlassian.net/browse/FW-4374
* https://ionic-cloud.atlassian.net/browse/FW-4053

I'm not sure how to write an automated test for this bug due to the
short timeout required.

You can manually test the fix in [this
Stackblitz](https://stackblitz.com/edit/g1kjci?file=package.json) by
changing the Ionic version between 7.3.1 and
7.3.2-dev.11693262117.17edbf6d

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2023-08-31 16:30:43 +00:00
Liam DeBeasi
e1fdbb344a test(datetime): un-flake presentation test (#28090)
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 two problems with this test:

1. The screenshots are not capturing the correct UI. For example, the
following screenshot should capture the date and time grid picker, but
it's only capturing the year wheel picker:
8ab3476ac7/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Safari-linux.png
2. These screenshots are flaky. This is possibly due to how they were
written where they iterate through an array, select a value from the
`select`, and then wait a timeout for the view to change.
3. I also discovered that we'll have some visual diffs once 2024 hits.
The current value of the datetime on the wheel picker is 2022. 2023 is
shown, but 2024 is not (since we are still in 2023). Once Jan 1 2024
hits, these tests will likely start to fail with visual diffs.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Refactored these tests to use a test fixture where each presentation
is a separate test. This ensures that the tests are correct. Because
there is less interaction going on with the page (i.e. the correct
presentation is set on load), my hope is that this also reduces test
flakiness.
- Also changed the date used to be several years ago so we don't have
new years showing up in the wheel picker screenshots as time goes on.

## 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>
2023-08-31 16:03:41 +00:00
Liam DeBeasi
2a80eb6bd0 fix(popover): dynamic width popover is positioned correctly (#28072)
Issue number: resolves #27190, resolves #24780

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- 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. -->

Popovers with dynamic widths were not being positioned correctly
relative to the trigger element. This was happening because the child
component always had dimensions of 0 x 0. Ionic has logic built-in to
wait for the child components to be rendered, but this was not working
as intended for two reasons:

1. `this.usersElement` was referencing the popover element itself not
the user’s component. When calling `deepReady` on
01fc9b4511/core/src/components/popover/popover.tsx (L477)
we are waiting for the popover to be hydrated, not the child content.
The popover was already hydrated on page load, so this resolves
immediately. However, the child content that was just added to the DOM
has not yet been hydrated, so we aren’t waiting long enough.

This is happening because we return `BaseComponent `from
`attachComponent` which is a reference to the overlay:
01fc9b4511/core/src/utils/framework-delegate.ts (L133)

Other framework delegates return the actual child content:

- Core delegate with controller:
01fc9b4511/core/src/utils/framework-delegate.ts (L35)
(this is part of why the controller popover works but the inline popover
does not)
- React delegate:
01fc9b4511/packages/react/src/framework-delegate.tsx (L31)
- Vue delegate:
01fc9b4511/packages/vue/src/framework-delegate.ts (L45)

2. `attachComponent` is unable to return the correct element currently
because the child content has not been mounted yet in this scenario.
`ionMount` is emitted after `attachComponent` resolves:
01fc9b4511/core/src/components/popover/popover.tsx (L466)

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `ionMount` is emitted before `attachComponent` runs
- `attachComponent` now consistently returns the child view if present
in the DOM
- Added a 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. -->

Dev build: `7.3.2-dev.11693321763.15a54694`

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-08-31 13:10:36 +00:00
Liam DeBeasi
cddefd1548 test(input): migrate input to toHaveScreenshot (#28084)
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. -->

Several tests for this component are still using Playwright's old
`toMatchSnapshot` assertion. It's now recommended to use the newer
`toHaveScreenshot` assertion. This new assertion reduces the size of
each screenshot and brings anti-flake improvements such as disabling
animations by default.

We previously migrated most of our codebase to use `toHaveScreenshot`,
but it looks like we missed the tests that were written during the
development of Ionic 7 in a separate branch off `main`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Migrate component tests to use `toHaveScreenshot`.

Note: There should be no layout changes to any of the screenshots. The
only difference between the old and new screenshots should be image and
file size.

## 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>
2023-08-30 20:59:51 +00:00
Liam DeBeasi
437ef16d1d test(select): migrate to toHaveScreenshot (#28088)
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. -->

Several tests for this component are still using Playwright's old
`toMatchSnapshot` assertion. It's now recommended to use the newer
`toHaveScreenshot` assertion. This new assertion reduces the size of
each screenshot and brings anti-flake improvements such as disabling
animations by default.

We previously migrated most of our codebase to use `toHaveScreenshot`,
but it looks like we missed the tests that were written during the
development of Ionic 7 in a separate branch off `main`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Migrate component tests to use `toHaveScreenshot`.

Note: There should be no layout changes to any of the screenshots. The
only difference between the old and new screenshots should be image and
file size.

## 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>
2023-08-30 20:40:17 +00:00
Liam DeBeasi
7babf6178c test(datetime): remove duplicate test (#28092)
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. -->

That particular test is flaky. When going to try and fix the flakiness,
I realized that this behavior is already tested by another test. This
test presents the `ion-picker-internal` components which are also tested
in
7c2b6aed05/core/src/components/datetime/test/custom/datetime.e2e.ts (L10).
These show the same components which have the same APIs, so this test
shouldn't even be needed.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removed the duplicate 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. -->
2023-08-30 19:16:08 +00:00
Liam DeBeasi
271b90deca test(toggle): migrate to toHaveScreenshot (#28086)
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. -->

Several tests for this component are still using Playwright's old
`toMatchSnapshot` assertion. It's now recommended to use the newer
`toHaveScreenshot` assertion. This new assertion reduces the size of
each screenshot and brings anti-flake improvements such as disabling
animations by default.

We previously migrated most of our codebase to use `toHaveScreenshot`,
but it looks like we missed the tests that were written during the
development of Ionic 7 in a separate branch off `main`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Migrate component tests to use `toHaveScreenshot`.

Note: There should be no layout changes to any of the screenshots. The
only difference between the old and new screenshots should be image and
file size.

## 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>
2023-08-30 18:11:07 +00:00
Liam DeBeasi
9dfdfe2ed6 test(checkbox): migrate to toHaveScreenshot (#28085)
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. -->

Several tests for this component are still using Playwright's old
`toMatchSnapshot` assertion. It's now recommended to use the newer
`toHaveScreenshot` assertion. This new assertion reduces the size of
each screenshot and brings anti-flake improvements such as disabling
animations by default.

We previously migrated most of our codebase to use `toHaveScreenshot`,
but it looks like we missed the tests that were written during the
development of Ionic 7 in a separate branch off `main`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Migrate component tests to use `toHaveScreenshot`.

Note: There should be no layout changes to any of the screenshots. The
only difference between the old and new screenshots should be image and
file size.

## 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>
2023-08-30 16:33:11 +00:00
Liam DeBeasi
0f5ce8e329 test(range): migrate to toHaveScreenshot (#28089)
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. -->

Several tests for this component are still using Playwright's old
`toMatchSnapshot` assertion. It's now recommended to use the newer
`toHaveScreenshot` assertion. This new assertion reduces the size of
each screenshot and brings anti-flake improvements such as disabling
animations by default.

We previously migrated most of our codebase to use `toHaveScreenshot`,
but it looks like we missed the tests that were written during the
development of Ionic 7 in a separate branch off `main`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Migrate component tests to use `toHaveScreenshot`.

Note: There should be no layout changes to any of the screenshots. The
only difference between the old and new screenshots should be image and
file size.

## 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>
2023-08-30 15:20:35 +00:00
Liam DeBeasi
abc8118ef6 test(radio): migrate to toHaveScreenshot (#28083)
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. -->

Several tests for this component are still using Playwright's old
`toMatchSnapshot` assertion. It's now recommended to use the newer
`toHaveScreenshot` assertion. This new assertion reduces the size of
each screenshot and brings anti-flake improvements such as disabling
animations by default.

We previously migrated most of our codebase to use `toHaveScreenshot`,
but it looks like we missed the tests that were written during the
development of Ionic 7 in a separate branch off `main`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Migrate component tests to use `toHaveScreenshot`.

Note: There should be no layout changes to any of the screenshots. The
only difference between the old and new screenshots should be image and
file size.

## 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>
2023-08-30 15:18:27 +00:00
Liam DeBeasi
f379c72d92 chore: remove deprecated attribute selectors (#28082)
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-wrap` attribute was removed in Ionic v5, but references to it
still exist in the `ion-label` stylesheets.


https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v5.md#css-utilities

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removed references to the unsupported `text-wrap` attributed.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

Note: This is not a breaking change because support for `text-wrap` was
removed in Ionic v5.

<!-- 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. -->
2023-08-30 14:53:50 +00:00
Shawn Taylor
d4875df644 chore(router-outlet): rename files (#28074)
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 outlet files can be hard to find when searching for them.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Router outlet files are named what you'd expect.

## 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. -->
2023-08-29 17:49:24 +00:00
Liam DeBeasi
b655067867 chore: sync with main 2023-08-29 09:58:37 -04:00
Liam DeBeasi
01fc9b4511 fix(datetime): gracefully handle invalid min/max (#28054)
Issue number: resolves #28041

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- 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. -->

`parseDate` returns `undefined` when given an invalid value. However,
our min/max processing functions did not account for this. As a result,
we would attempt to destructure an undefined value which resulted in an
error.

Note regarding linked issue: The developer is calling
`setMin(undefined)`. However, this is triggering a React quirk with
Custom Elements where `undefined` is being set to `null` inside of
React. The type signature on min/max is `string | undefined`, so `null`
is being treated as an invalid date value.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Min/Max processing functions now return `undefined` if the input was
invalid.

## 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.3.2-dev.11692887667.1614d10a`
2023-08-28 13:39:19 +00:00
Liam DeBeasi
fa4113117d fix(menu): emit ionMenuChange when re-mounted (#28049)
Issue number: resolves #28030

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

`ion-menu` registers itself with the menu controller when
`connectedCallback` fires and then unregisters itself when
`disconnectedCallback` fires. When the menu was removed from the DOM,
`disconnectedCallback` was not always being fired due to
https://github.com/ionic-team/stencil/issues/4070.

`ion-menu-button` checks to see if it should be visible by grabbing the
current menu in
314055cf7a/core/src/components/menu-button/menu-button.tsx (L74).

Since `disconnectedCallback` was not being fired, `ion-menu-button`
would still find the menu even when it was no longer in the DOM. In this
case, the menu was not being unregistered due to `disconnectedCallback`
not firing.

When the linked Stencil bug was resolved in Stencil 4.0.3, the menu
button started to disappear. This is happening because
`disconnectedCallback` is now correctly called when the menu is removed
from the DOM. Since `disconnectedCallback` is called, the menu is
un-registered from the menu controller, and the menu button can no
longer find it.

However, this revealed a long-standing bug where re-adding the menu
would not fire `ionMenuChange` again. As a result, the menu button
remained hidden.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The menu now fires `ionMenuChange` on `connectedCallback` as long as
`componentDidLoad` has already been 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. -->

Dev build: `7.3.2-dev.11692803611.15c1bc87`

---------

Co-authored-by: Sean Perkins <sean@ionic.io>
2023-08-24 14:37:49 +00:00
Amanda Johnston
32244fbdd1 fix(datetime): scroll to newly selected date when value changes (#27806)
Issue number: Resolves #26391

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- 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 updating the `value` programmatically on an `ion-datetime` after it
has already been created:
- With grid style: The selected date visually updates, but the calendar
does not scroll to the newly selected month.
- With wheel style: The selected date does not visually update, i.e. the
wheels do not move to show the newly selected date.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Grid style datetimes now scroll to the selected date using the same
animation as when clicking the next/prev month buttons.
- This animation mirrors the behavior in both MUI and native iOS. See
the [design
doc](https://github.com/ionic-team/ionic-framework-design-documents/blob/main/projects/ionic-framework/components/datetime/0003-datetime-async-value.md)
for more information and screen recordings.
- The animation will not occur if the month/year did not change, or when
the datetime is hidden.
- Wheel style datetimes now visually update to the selected date. No
animation occurs, also mirroring native.
- The `parseDate` util has also had its type signatures updated to
account for returning `undefined` when the date string is improperly
formatted. This was missed when the util was refactored to support
multiple date selection.

## 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/3053
- While this can technically be considered a bug fix, we are merging it
into a feature branch for safety; it's a fairly significant change to
how datetime behaves, and may interfere with custom logic when updating
a datetime's value async.
- Jumping to the newly selected value is handled by replacing everything
[here](https://github.com/ionic-team/ionic-framework/pull/27806/files#diff-4a407530c60e3cf72bcc11acdd21c4803a94bf47ea81b99e757db1c93d2735b8L364-L407)
with `processValue()`. This covers both wheel and grid datetimes.
- `activePartsClone` as a whole was also removed. It was added in
https://github.com/ionic-team/ionic-framework/pull/24244 to enable
changing `activeParts` without triggering a rerender (and thus jumping
to the new value) but since we now want to do that jump, the clone is no
longer needed.
- The animation code might be tricky to follow, so I recorded going
through it:
https://github.com/ionic-team/ionic-framework/assets/90629384/1afa5762-f493-441a-b662-f0429f2d86a7
2023-08-23 13:49:19 -05:00
Liam DeBeasi
ae9f1ab43e refactor(toast): deprecate cssClass on ToastButton (#27959) 2023-08-23 09:21:20 -04:00
Damian Tarnawsky
e2be7fdf3a docs(picker): describe how to set the initial value of a picker column (#28034)
## What is the current behavior?
There is no description of how to set the value of a picker.

## What is the new behavior?
Readers can find this description in the documentation.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2023-08-22 14:36:30 +00:00
Liam DeBeasi
444acc1f1b fix(input, textarea): clearOnEdit does not clear when pressing Tab (#28005)
Issue number: resolves #27746

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- 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. -->

Pressing the Tab key when focused on an input/textarea with
`clearOnEdit` clears the text field and then moves focus to the next
focusable element.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Pressing the Tab key does not clear the text field even when
clearOnEdit is enabled.
- Added test coverage
- I also noticed that input did not have an `index.html` file in the
basic directory, so I added that.

## 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.3.1-dev.11692202566.13cd16c4`
2023-08-18 17:06:54 +00:00