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. -->
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: 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 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. -->
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. -->
`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. -->
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 team decided on some new processes for adding tests. One of those
processes is that test directories should use kebab case.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates test directories to use kebab case
## 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. -->
<!-- Issues are required for both bug fixes and features. -->
Issue URL: N/A
Playwright recommends using Locators with web-first assertions instead
of using `waitForSelector`:
https://playwright.dev/docs/api/class-frame#frame-wait-for-selector
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removes waitForSelector usages for checking if components are visible
in favor of the `toBeVisible` or `toBeHidden` assertions.
## 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. -->
BREAKING CHANGE:
The `innerHTMLTemplatesEnabled` Ionic Config now defaults to `false`. Developers can set this option to `true` if they would like to continue to use custom HTML features in `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast`.
styles the item option properly when icons are slotted. This was not working before at all for `top` and `bottom` slots.
- removes the e2e test from item/sliding in favor of all of them being under item-sliding
- adds more usage examples for all frameworks
- updates the styling for an anchor option so that it displays properly
- updates the standalone e2e test to take screenshots of the start icon, top icon, and anchor options
- updates the interactive e2e test to work locally
- cleaned up the CSS for start/end icons
- verified the styles for ben approval 💪closes#17737fixes#17402
Reviews the `--width` and `--height` variables in each component to either remove or add them based on need.
- fixes a bug where the spinner color wasn't being set properly in loading
- adds css variables for customizing background, color, some borders in overlays
- fixes a bug where prefix, suffix are taking up too much width in picker
closes#16097
references ionic-team/ionic-docs#228
BREAKING CHANGES
## Core Components
Removes the `--width` and `--height` variables from the following components, in favor of CSS:
- Button
- FAB Button
- Checkbox
- Removes the `--width`/`--height` and adds a `--size` variable that is set on the width and height, allowing width and height to still be set and border-radius to still use it as a variable
- Radio
- Removes the `--width`/`--height` and `--inner-width`/`--inner-height` variables. Calculates inner values based on parent element size.
## Overlay Components
The following components have all be converted to shadow (or scoped) and have CSS variables for width/height:
- Action Sheet _(scoped)_
- Alert _(scoped)_
- Loading _(scoped)_
- Menu _(shadow)_
- Modal _(scoped)_
- Picker _(scoped)_
- Popover _(scoped)_
- Toast _(shadow)_
The above components will now have the following CSS variables for consistency among overlays:
| Name |
| ----------------- |
| `--height` |
| `--max-height` |
| `--max-width` |
| `--min-height` |
| `--min-width` |
| `--width` |
If the component does not set the value, it will default to `auto`.
## Removed CSS Variables
The following CSS properties have been removed:
| Component | Property | Reason |
| ---------------| --------------------| --------------------------------|
| **Button** | `--height` | Use CSS instead |
| **Button** | `--margin-bottom` | Use CSS instead |
| **Button** | `--margin-end` | Use CSS instead |
| **Button** | `--margin-start` | Use CSS instead |
| **Button** | `--margin-top` | Use CSS instead |
| **Button** | `--width` | Use CSS instead |
| **Checkbox** | `--height` | Use CSS or `--size` |
| **Checkbox** | `--width` | Use CSS or `--size` |
| **FAB Button** | `--width` | Use CSS instead |
| **FAB Button** | `--height` | Use CSS instead |
| **FAB Button** | `--margin-bottom` | Use CSS instead |
| **FAB Button** | `--margin-end` | Use CSS instead |
| **FAB Button** | `--margin-start` | Use CSS instead |
| **FAB Button** | `--margin-top | Use CSS instead |
| **Menu** | `--width-small` | Use a media query and `--width` |
| **Radio** | `--width` | Use CSS instead |
| **Radio** | `--height` | Use CSS instead |
| **Radio** | `--inner-height` | Calculated based on parent |
| **Radio** | `--inner-width` | Calculated based on parent |
