mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
8dd566b5c1241022e26cc91c0f415de20c0d0f34
105 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
renovate[bot]
|
c63ec2e98d |
chore(deps): update playwright (#29840)
This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | Type | Update | |---|---|---|---|---|---|---|---| | [@axe-core/playwright](https://redirect.github.com/dequelabs/axe-core-npm) | [`^4.10.0` -> `^4.10.1`](https://renovatebot.com/diffs/npm/@axe-core%2fplaywright/4.10.0/4.10.1) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | devDependencies | patch | | [@playwright/test](https://playwright.dev) ([source](https://redirect.github.com/microsoft/playwright)) | [`^1.46.1` -> `^1.51.0`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.46.1/1.51.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | devDependencies | minor | | mcr.microsoft.com/playwright | `v1.46.1` -> `v1.51.0` | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | final | minor | --- ### Release Notes <details> <summary>dequelabs/axe-core-npm (@​axe-core/playwright)</summary> ### [`v4.10.1`](https://redirect.github.com/dequelabs/axe-core-npm/blob/HEAD/CHANGELOG.md#4101-2024-10-29) [Compare Source](https://redirect.github.com/dequelabs/axe-core-npm/compare/v4.10.0...v4.10.1) ##### Bug Fixes - Update axe-core to v4.10.1 ([#​1124](https://redirect.github.com/dequelabs/axe-core-npm/issues/1124)) ([099818b]( |
||
|
Brandy Smith
|
94ca2e54cb |
feat(toggle): add helperText and errorText properties (#30161)
Issue number: N/A --------- ## What is the current behavior? Toggle does not support helper and error text. ## What is the new behavior? Adds support for helper and error text, similar to input and textarea. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information - [Bottom Content: Preview](https://ionic-framework-git-rou-11552-ionic1.vercel.app/src/components/toggle/test/bottom-content) - [Item: Preview](https://ionic-framework-git-rou-11552-ionic1.vercel.app/src/components/toggle/test/item) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
||
|
Giuliana Silva
|
0bbb9f37b4 |
feat(toggle): add required prop (#30156)
Issue number: resolves 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?
- Currently, the screen reader do not announce the component as required
when `required={true}`.
## What is the new behavior?
- Added a new `required` prop to be used for accessibility purposes that
adds the `required` attribute to toggle's inner native input.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
|
||
|
Brandy Carney
|
5efefe1024 | Merge branch 'main' into feature-8.3 | ||
|
renovate[bot]
|
a745c6f4bc |
chore(deps): update playwright (#29750)
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | Type | Update | |---|---|---|---|---|---|---|---| | [@playwright/test](https://playwright.dev) ([source](https://togithub.com/microsoft/playwright)) | [`^1.45.3` -> `^1.46.0`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.45.3/1.46.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | devDependencies | minor | | mcr.microsoft.com/playwright | `v1.45.3` -> `v1.46.0` | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | final | minor | --- ### Release Notes <details> <summary>microsoft/playwright (@​playwright/test)</summary> ### [`v1.46.0`](https://togithub.com/microsoft/playwright/compare/v1.45.3...99a36310570617222290c09b96a2026beb8b00f9) [Compare Source](https://togithub.com/microsoft/playwright/compare/v1.45.3...v1.46.0) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekday before 11am" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://togithub.com/renovatebot/renovate/discussions) if that's undesired. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View the [repository job log](https://developer.mend.io/github/ionic-team/ionic-framework). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40NDAuNyIsInVwZGF0ZWRJblZlciI6IjM4LjIwLjEiLCJ0YXJnZXRCcmFuY2giOiJtYWluIiwibGFiZWxzIjpbXX0=--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Maria Hutt <maria@ionic.io> |
||
|
Brandy Carney
|
0332c8c6ce |
feat(toggle): display as block when justify or alignment properties are defined (#29802)
- Change the toggle's `display` property to `block` when the `justify` or `alignment` property is set. - Set the default `justify-content` style to `space-between` so that a toggle with `width: 100%` set without `justify` or `alignment` set will still have the same default - Set the default `align-items` style to `center` so that a toggle with `width: 100%` and `label-placement="stacked"` set without `justify` or `alignment` set will still have the same default - Modifies the `label` e2e test to remove the explicit width as setting the property will make them full-width - Adds two examples to the `label` e2e test of labels that do not have `justify` set but use `width: 100%` to ensure they are working as expected without it - Adds one example to the `label` e2e test of a long label that uses `justify` to ensure it still wraps properly |
||
|
renovate[bot]
|
2ddc793e86 |
chore(deps): update playwright (#29658)
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | Type | Update | |---|---|---|---|---|---|---|---| | [@playwright/test](https://playwright.dev) ([source](https://togithub.com/microsoft/playwright)) | [`^1.44.1` -> `^1.45.0`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.44.1/1.45.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | devDependencies | minor | | mcr.microsoft.com/playwright | `v1.44.1` -> `v1.45.0` | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | final | minor | --- ### Release Notes <details> <summary>microsoft/playwright (@​playwright/test)</summary> ### [`v1.45.0`](https://togithub.com/microsoft/playwright/compare/v1.44.1...4f3f6eecae490af444dd9298c9eaeb0c596915b7) [Compare Source](https://togithub.com/microsoft/playwright/compare/v1.44.1...v1.45.0) </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekday before 11am" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://togithub.com/renovatebot/renovate/discussions) if that's undesired. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/ionic-team/ionic-framework). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40MTMuMiIsInVwZGF0ZWRJblZlciI6IjM3LjQyMS45IiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Maria Hutt <maria@ionic.io> |
||
|
Brandy Carney
|
5eb94130fa |
chore(tests): remove old screenshots without a test (#29472)
Issue number: internal
---------
## What is the current behavior?
Several screenshot images were not removed when their e2e test was.
## What is the new behavior?
I ran the following command in `ionic-framework/core` to find all
`*.png` files that did not have a parent `*.e2e.ts` file:
```bash
find ./src/components -iname '*.png' -exec bash -c 'cd "${1%/*}";
shopt -s nullglob; files=(../*.e2e.ts);
((${#files[@]} == 0)) && echo "$1"' _ {} \;
```
I have deleted all of these images.
Co-authored-by: Brandy Carney <brandy@ionic.io>
|
||
|
Brandy Carney
|
6b13e1323f |
test: remove hardcoded dark palette from tests (#29357)
Issue number: N/A
---------
## What is the current behavior?
Dark palette is hardcoded in style tags in tests.
## What is the new behavior?
Updated the following tests:
- **datetime/basic** - added an import for `dark.class.css` which works
with the checkbox to toggle the `ion-palette-dark` class
- does not update the e2e test to include dark palette because this was
not tested previously
- **datetime/color** - added an import for `dark.class.css` which works
with the checkbox to toggle the `ion-palette-dark` class
- updates the e2e test to use the dark palette
- **modal/dark-mode** - added an import for `dark.always.css` which
always applies the dark palette
- does not update the e2e test to include dark palette because this test
needs to be moved but I am not sure where it should go yet
- **toggle/enable-on-off-labels** - added an import for `dark.class.css`
which works with the checkbox to toggle the `ion-palette-dark` class
- updates the e2e test to use the dark palette & splits the color into a
separate screenshot test
Did not update the following tests:
- **item/buttons** - has already been updated to remove the dark palette
- **toggle/legacy/enable-on-off-labels** - test was removed in v8
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
- We could probably remove the checkbox toggles entirely when we add
support for the `palette` query param.
---------
Co-authored-by: ionitron <hi@ionicframework.com>
|
||
|
Liam DeBeasi
|
e8f63560eb | chore: sync with main | ||
|
Sean Perkins
|
b148b3225b |
chore(playwright): migrate themes to palettes (#29148)
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. --> ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Migrates the test infrastructure to use `palettes` instead of `themes` ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## 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 **does not** change where the light/dark/high contrast styles live or how they are consumed in the test infra. That work is done here: https://github.com/ionic-team/ionic-framework/pull/29149 Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> |
||
|
renovate[bot]
|
459a023bac |
chore(deps): update dependency @playwright/test to v1.42.0 (#29110)
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@playwright/test](https://playwright.dev) ([source](https://togithub.com/microsoft/playwright)) | [`1.41.2` -> `1.42.0`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.41.2/1.42.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>microsoft/playwright (@​playwright/test)</summary> ### [`v1.42.0`](https://togithub.com/microsoft/playwright/releases/tag/v1.42.0) [Compare Source](https://togithub.com/microsoft/playwright/compare/v1.41.2...v1.42.0) #### New APIs - **Test tags** [New tag syntax](https://playwright.dev/docs/test-annotations#tag-tests) for adding tags to the tests (@​-tokens in the test title are still supported). ```js test('test customer login', { tag: ['@​fast', '@​login'] }, async ({ page }) => { // ... }); ``` Use `--grep` command line option to run only tests with certain tags. ```sh npx playwright test --grep @​fast ``` - **Annotating skipped tests** [New annotation syntax](https://playwright.dev/docs/test-annotations#annotate-tests) for test annotations allows annotating the tests that do not run. ```js test('test full report', { annotation: [ { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/23180' }, { type: 'docs', description: 'https://playwright.dev/docs/test-annotations#tag-tests' }, ], }, async ({ page }) => { // ... }); ``` - **page.addLocatorHandler()** New method [page.addLocatorHandler()](https://playwright.dev/docs/api/class-page#page-add-locator-handler) registers a callback that will be invoked when specified element becomes visible and may block Playwright actions. The callback can get rid of the overlay. Here is an example that closes a cookie dialog when it appears. ```js // Setup the handler. await page.addLocatorHandler( page.getByRole('heading', { name: 'Hej! You are in control of your cookies.' }), async () => { await page.getByRole('button', { name: 'Accept all' }).click(); }); // Write the test as usual. await page.goto('https://www.ikea.com/'); await page.getByRole('link', { name: 'Collection of blue and white' }).click(); await expect(page.getByRole('heading', { name: 'Light and easy' })).toBeVisible(); ``` - **Project wildcard filter** Playwright command line [flag](https://playwright.dev/docs/test-cli#reference) now supports '\*' wildcard when filtering by project. ```sh npx playwright test --project='*mobile*' ``` - **Other APIs** - expect(callback).toPass({ timeout }) The timeout can now be configured by `expect.toPass.timeout` option [globally](https://playwright.dev/docs/api/class-testconfig#test-config-expect) or in [project config](https://playwright.dev/docs/api/class-testproject#test-project-expect) - electronApplication.on('console') [electronApplication.on('console')](https://playwright.dev/docs/api/class-electronapplication#electron-application-event-console) event is emitted when Electron main process calls console API methods. ```js electronApp.on('console', async msg => { const values = []; for (const arg of msg.args()) values.push(await arg.jsonValue()); console.log(...values); }); await electronApp.evaluate(() => console.log('hello', 5, { foo: 'bar' })); ``` - [page.pdf()](https://playwright.dev/docs/api/class-page#page-pdf) accepts two new options [`tagged`](https://playwright.dev/docs/api/class-page#page-pdf-option-tagged) and [`outline`](https://playwright.dev/docs/api/class-page#page-pdf-option-outline). #### Breaking changes Mixing the test instances in the same suite is no longer supported. Allowing it was an oversight as it makes reasoning about the semantics unnecessarily hard. ```js const test = baseTest.extend({ item: async ({}, use) => {} }); baseTest.describe('Admin user', () => { test('1', async ({ page, item }) => {}); test('2', async ({ page, item }) => {}); }); ``` #### Announcements - ⚠️ Ubuntu 18 is not supported anymore. #### Browser Versions - Chromium 123.0.6312.4 - Mozilla Firefox 123.0 - WebKit 17.4 This version was also tested against the following stable channels: - Google Chrome 122 - Microsoft Edge 123 </details> --- ### Configuration 📅 **Schedule**: Branch creation - "every weekday before 11am" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/ionic-team/ionic-framework). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yMjAuMiIsInVwZGF0ZWRJblZlciI6IjM3LjIyMC4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Maria Hutt <maria@ionic.io> |
||
|
Liam DeBeasi
|
c72ecedc09 |
refactor(toggle): remove legacy property and support for legacy syntax (#29037)
BREAKING CHANGE: The `legacy` property and support for the legacy syntax, which involved placing an `ion-toggle` inside of an `ion-item` with an `ion-label`, have been removed from toggle. For more information on migrating from the legacy toggle syntax, refer to the [Toggle documentation](https://ionicframework.com/docs/api/toggle#migrating-from-legacy-toggle-syntax). |
||
|
Liam DeBeasi
|
1091534397 | chore: sync with main | ||
|
ionitron
|
37aed8e577 | chore(): add updated snapshots | ||
|
Liam DeBeasi
|
7c8afdf1c6 | chore: sync with feature-8.0 | ||
|
Liam DeBeasi
|
bf34e0e247 |
test: migrate form control usages to modern syntax (#28897)
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. --> Several tests were still using the legacy form syntax. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Migrated tests in `core`, `angular`, and `vue` to use the modern form syntax (`react` did not have form controls). I opted not to migrate `item/test/highlight` and `item/test/counter` because those tests are going to be removed in the future once the deprecate item APIs are removed. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
||
|
Shawn Taylor
|
749df5bdce |
fix(toggle): set switch icon color correctly (#28812)
Issue number: None --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Similar to #28809, in my work for FW-5822, I found that I had unexpected screenshot diffs. `--ion-color-dark` was not defined in our test infrastructure, and this toggle icon was therefore displaying in the wrong color in the tests. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Toggle has the correct icon color even when the --ion-color-dark token is not defined ## Does this introduce a breaking change? - [ ] Yes - [x] No Introduces style changes if the token is undefined, but it should always be defined in real-world uses. <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Liam DeBeasi
|
15e368c378 |
feat(theme): improved color contrast with color palette (#28791)
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 team would like to ensure that Ionic Framework components that use an Ionic color (primary, secondary, etc) on top of a contrast color pass minimum contrast ratios as defined in the WCAG. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Introduces a revised set of Ionic colors that pass AA color contrast guidelines when with the appropriate contrast. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## 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: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Co-authored-by: Brandy Carney <brandy@ionic.io> Co-authored-by: Sean Perkins <sean@ionic.io> Co-authored-by: Shawn Taylor <shawn@ionic.io> Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com> Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Shawn Taylor
|
0ce0693af1 |
feat(toggle): update styles to iOS 17 specs (#28722)
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 Toggle styles do not match iOS 17. | iOS 17 Screenshot | New Design | Ionic | | --------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------- | | : expose label wrapper as shadow part (#28585) | ||
|
Liam DeBeasi
|
fd36b953d6 | chore: sync | ||
|
Sean Perkins
|
4f1b4cdc29 |
chore(core): type checking for unit tests (#28529)
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. --> Type checking inside of the Stencil unit tests have been disabled for a long time. This has resulted in a difficult developer experience and numerous issues (both types and implementation) within our unit tests. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Type checking is now enabled for all Stencil unit tests - Tests have been updated to resolve type errors and implementation errors - Many `as any` casts were introduced, as many legacy tests test invalid configurations of functions that require it (for example passing `undefined` to an argument that cannot be `undefined`). ## Does this 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. --> To test this PR you can checkout the branch locally. Install dependencies in the `/core` directory to make sure you are on at least `@stencil/core@4.7.2`. Opening either a `.spec.ts` or `.spec.tsx` file, validate that your IDE detects types and can provide auto completions for jest global types. If you desire, you can provide an invalid type and try building the project - you will observe the build will fail due to the invalid type. |
||
|
Brandy Carney
|
6438e3e919 |
fix(item): wrap elements and label contents when the font size increases or the elements do not fit (#28146)
1) Wraps the label text and other content in an item when there is not enough room for everything to fit, instead of truncating the label with an ellipsis. Does not apply to items containing legacy inputs. 2) Passes the legacy property up to item from checkbox, input, radio, range, select, textarea and toggle. Item adds classes for all of these and does not wrap its contents if that class exists. If a developer is using a legacy input without the legacy property on it then they will need to add the legacy property to prevent the wrapping. 3) If a developer does not want the text to wrap for labels in modern items, the `ion-text-nowrap` class can be added to the label. |
||
|
Liam DeBeasi
|
c70432e693 |
fix(checkbox, radio, toggle): disabled elements are not interactive (#28294)
Issue number: resolves #28293 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Disabled toggles, radios, and checkboxes can still be enabled by manually dispatching a click event on them. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Toggles, radios, and checkboxes no longer activate if `disabled` is set to `true` ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: `7.4.4-dev.11696545130.1171e7a9` |
||
|
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. --> |
||
|
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=" |
||
|
Liam DeBeasi
|
8cb878669e | fix(many): add correct scale to stacked labels (#28163) | ||
|
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> |
||
|
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> |
||
|
Amanda Johnston
|
da2fc0a256 |
chore(toggle): rename item test to use correct component name (#27789)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The `item` test for `ion-toggle` uses `label` instead of `toggle` in the file name. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Test and corresponding screenshots folder renamed. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
||
|
Amanda Johnston
|
35f0ec581a |
fix(radio, checkbox, toggle): add top and bottom margins when in ion-item (#27788)
Issue number: Resolves #27498 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> When `ion-radio`, `ion-checkbox`, or `ion-toggle` is used within `ion-item`, top and bottom margins are not added to the label, while they are present when using the legacy syntax. We didn't catch this because the issue is only visible when using a label that breaks onto more than one line; otherwise, the height of the item exceeds what the margins would've added. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Margins added. Values were taken from `ion-item` styles [here]( |
||
|
dependabot[bot]
|
3bd1d7e1e5 |
chore(deps-dev): Bump @playwright/test from 1.35.1 to 1.36.0 in /core (#27778)
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from 1.35.1 to 1.36.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/Microsoft/playwright/releases"><code>@playwright/test</code>'s releases</a>.</em></p> <blockquote> <h2>v1.36.0</h2> <h3>Highlights</h3> <p>🏝️ Summer maintenance release.</p> <h3>Browser Versions</h3> <ul> <li>Chromium 115.0.5790.75</li> <li>Mozilla Firefox 115.0</li> <li>WebKit 17.0</li> </ul> <p>This version was also tested against the following stable channels:</p> <ul> <li>Google Chrome 114</li> <li>Microsoft Edge 114</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
||
|
Sean Perkins
|
e75fa582c4 |
fix(header, footer): resolve CSP violations with box shadow (#27560)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The `ion-header` and `ion-footer` use a base64 encoded image for a box shadow instead of using the CSS box-shadow property directly. The use of the background image creates CSP violations. The historic reasoning of using an image instead of box shadow was to improve scroll performance. Browsers and devices have improved a lot since that was implemented (5 years ago). ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updates the usage of `ion-header` and `ion-footer` to use a box shadow. The value comes from Material's web implementation: https://material-components.github.io/material-components-web-catalog/#/component/top-app-bar ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
dependabot[bot]
|
58d6dae9a1 |
chore(deps-dev): Bump @playwright/test from 1.33.0 to 1.34.1 in /core (#27533)
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from 1.33.0 to 1.34.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/Microsoft/playwright/releases"><code>@playwright/test</code>'s releases</a>.</em></p> <blockquote> <h2>v1.34.0</h2> <h3>Highlights</h3> <ul> <li> <p>UI Mode now shows steps, fixtures and attachments: <!-- raw HTML omitted --></p> </li> <li> <p>New property <a href="https://playwright.dev/docs/api/class-testproject#test-project-teardown"><code>testProject.teardown</code></a> to specify a project that needs to run after this and all dependent projects have finished. Teardown is useful to cleanup any resources acquired by this project.</p> <p>A common pattern would be a <code>setup</code> dependency with a corresponding <code>teardown</code>:</p> <pre lang="js"><code>// playwright.config.ts import { defineConfig } from '@playwright/test'; <p>export default defineConfig({ projects: [ { name: 'setup', testMatch: /global.setup.ts/, teardown: 'teardown', }, { name: 'teardown', testMatch: /global.teardown.ts/, }, { name: 'chromium', use: devices['Desktop Chrome'], dependencies: ['setup'], }, { name: 'firefox', use: devices['Desktop Firefox'], dependencies: ['setup'], }, { name: 'webkit', use: devices['Desktop Safari'], dependencies: ['setup'], }, ], }); </code></pre></p> </li> <li> <p>New method <a href="https://playwright.dev/docs/test-assertions#expectconfigure"><code>expect.configure</code></a> to create pre-configured expect instance with its own defaults such as <code>timeout</code> and <code>soft</code>.</p> <pre lang="js"><code>const slowExpect = expect.configure({ timeout: 10000 }); await slowExpect(locator).toHaveText('Submit'); <p>// Always do soft assertions. const softExpect = expect.configure({ soft: true }); </code></pre></p> </li> </ul> <!-- raw HTML omitted --> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
||
|
Liam DeBeasi
|
381de0b3d3 |
fix(many): form controls labels have increased margin (#27447)
Issue number: resolves #27129 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Material Design has 16px of margin between the form control and the label, but we have 8px: https://m2.material.io/components/selection-controls#usage ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updates default margin from 8px to 16px for checkbox, input, radio, range, select, textarea, and toggle. Note: This should only apply to labels that are on the same line as the form control. In other words, they do not apply to stacked/floating labels. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Liam DeBeasi
|
7176af714d |
test: update playwright threshold to 0.1 (#27423)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The team has observed that Playwright's default screenshot diff threshold of 0.2 is not sensitive enough, and screenshots that should be getting updated are not getting updated. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updates the threshold to 0.1 ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Liam DeBeasi
|
c1fe9402a6 |
test(toggle): migrate to generators (#27390)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Toggle tests are using legacy syntax ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Toggle tests are using modern syntax |
||
|
Liam DeBeasi
|
4826a3d9f5 |
test(config): introduce legacy and modern playwright projects (#27228)
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: |
||
|
Sean Perkins
|
7ad84cbbc5 |
test(toggle): use legacy form syntax for legacy tests (#27197)
<!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing --> <!-- Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation for details. --> <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The legacy toggle tests without a label do not manually specify to render in legacy mode. <!-- Issues are required for both bug fixes and features. --> Issue URL: N/A ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Adds the `legacy="true"` property to legacy toggle tests ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
||
|
Amanda Johnston
|
78f5d960cf | fix(item): prevent slotted form controls from taking whole width of item (#26897) | ||
|
ionitron
|
b90d6bba7f | chore(): add updated snapshots | ||
|
Liam DeBeasi
|
df3735765a |
fix(button): update for ios spec (#26864)
BREAKING CHANGE: Button is updated to align with the design specification for iOS. **Design tokens** | Token | Previous Value | New Value | | ---------------------------------- | -------------- | --------- | | `$button-ios-letter-spacing` | `-0.03em` | `0` | | `$button-ios-clear-letter-spacing` | `0` | Removed | | `$button-ios-height` | `2.8em` | `3.1em` | | `$button-ios-border-radius` | `10px` | `14px` | | `$button-ios-large-height` | `2.8em` | `3.1em` | | `$button-ios-large-border-radius` | `12px` | `16px` | |
||
|
ionitron
|
c3b619f76f | chore(): add updated snapshots | ||
|
Liam DeBeasi
|
799871e95d | chore(): sync with main | ||
|
Liam DeBeasi
|
804e54e5ca | test(many): migrate to new toHaveScreenshot API (#26797) | ||
|
Liam DeBeasi
|
96147ec1b0 | fix(item): ios mode has correct padding (#26511) | ||
|
ionitron
|
20829f54cd | chore(): add updated snapshots | ||
|
Liam DeBeasi
|
d54b9dfdc0 | chore(): sync with main | ||
|
Liam DeBeasi
|
bd05fccf58 | test(config): update to playwright 1.29.0 (#26388) |
