mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
814c2e5ccd6d5bfda12bdf13a566cd66ff830d5b
238 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Brandy Smith
|
fac1a6673c |
feat(range): add classes to the range when the value is at the min or max (#30932)
## What is the current behavior? Range adds classes to the knobs at `min` and `max`, but the host element doesn't reflect those states. ## What is the new behavior? - Adds `range-value-min` and `range-value-max` when the value is at the `min` or `max`, respectively. - Adds a spec test verifying the classes are applied properly. --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
renovate[bot]
|
b49ba6bdfe |
chore(deps): update playwright (#30643)
This PR contains the following updates: | Package | Change | Age | Confidence | Type | Update | |---|---|---|---|---|---| | [@playwright/test](https://playwright.dev) ([source](https://redirect.github.com/microsoft/playwright)) | [`^1.54.2` -> `^1.55.0`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.54.2/1.55.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | devDependencies | minor | | mcr.microsoft.com/playwright | `v1.54.2` -> `v1.55.0` | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | final | minor | --- ### Release Notes <details> <summary>microsoft/playwright (@​playwright/test)</summary> ### [`v1.55.0`](https://redirect.github.com/microsoft/playwright/compare/v1.54.2...f992162f04ae0b0b5a0f4b6114b894215be98995) [Compare Source](https://redirect.github.com/microsoft/playwright/compare/v1.54.2...v1.55.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://redirect.github.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://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/ionic-team/ionic-framework). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MS44MS4yIiwidXBkYXRlZEluVmVyIjoiNDEuODEuMiIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Shane
|
6811fe5cc8 |
fix(range): improve focus and blur handling for dual knobs (#30482)
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? <!-- Please describe the current behavior that you are modifying. --> Currently, if you use keyboard navigation to move between dual range slider knobs, only the first knob you navigate to is highlighted. This is because both elements in the same component are marked as focusable and the code that manages focusable doesn't take into account multiple elements in the same component. https://github.com/user-attachments/assets/36d84eed-6928-446e-becd-ffa2a97e3cc2 ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> After these changes, we manage focusing on dual knob range sliders manually, so using tab navigation through dual knob range sliders focuses knobs as expected. ## 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. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> [Test - Range - Basic screen](https://ionic-framework-git-fw-6401-ionic1.vercel.app/src/components/range/test/basic) |
||
|
renovate[bot]
|
8ef79cf4fb |
chore(deps): update playwright (#30367)
This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | Type | Update | |---|---|---|---|---|---|---|---| | [@playwright/test](https://playwright.dev) ([source](https://redirect.github.com/microsoft/playwright)) | [`^1.51.1` -> `^1.52.0`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.51.1/1.52.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.51.1` -> `v1.52.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.52.0`](https://redirect.github.com/microsoft/playwright/compare/v1.51.1...471930b1ceae03c9e66e0eb80c1364a1a788e7db) [Compare Source](https://redirect.github.com/microsoft/playwright/compare/v1.51.1...v1.52.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://redirect.github.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://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/ionic-team/ionic-framework). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOS4yNDguNCIsInVwZGF0ZWRJblZlciI6IjM5LjI1Ny4zIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
Brandy Smith
|
d52fca084c |
fix(config): allow LogLevel to work with isolatedModules and update all warns and errors to respect logLevel (#30350)
Issue number: internal --------- ## What is the current behavior? - `LogLevel` throws error `Error: Cannot access ambient const enums when 'isolatedModules' is enabled` - Several existing console warns and errors are not calling the function that respects the `logLevel` config ## What is the new behavior? - Remove `const` from the `enum` to work with `isolatedModules` - Update `console.warn`s to `printIonWarning` - Update `console.error`s to `printIonError` ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Dev build: `8.5.5-dev.11744729748.174bf7e0` --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
||
|
Maria Hutt
|
7789bb59ee |
fix(range): emit ionInput when value changes (#30293)
Issue number: resolves #29619
---------
<!-- Please do not submit updates to dependencies 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 `ionInput` emits for range even when the value hasn't changed. This
does not match our documentation. It should only emit when the value
changes (and continuously while the user is dragging the knob).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Moved the emitter to the value watch function, to determine if the
value has changed.
- Added a test
-
## 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.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
How to test:
1. Navigate to the [range basic HTML
file](
|
||
|
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]( |
||
|
fudom
|
322319397c |
fix(range): handle unsupported values for range min and max (#30070)
Issue number: resolves #29667 --------- ## What is the current behavior? Currently, if min/max are set to undefined on `IonRange` (which is an accepted value), it breaks the DOM. ## What is the new behavior? After these changes, if min/max are set to undefined or any unsupported value (such as infinity or a NaN), it will fall back to the default values for min and max (currently, 1 and 100 respectively). ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information --------- Co-authored-by: ShaneK <shane@shanessite.net> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
||
|
Maria Hutt
|
35b1a45929 |
fix(range): disable scroll when range is being dragged (#29241)
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. --> There are a few tests that were disabled due to being flaky from gestures. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> While fixing the tests, I found a bug that the scroll was never being disabled on scroll. Additionally, we were not taking into account that a custom scroll target could be used so it was never disabled either. - Fixed the flaky tests. - Content doesn't scroll when range is being dragged. - Content can be either `ion-content` or a custom scroll target. ## 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. --> [Preview for `ion-content`](https://ionic-framework-git-fw-2873-ionic1.vercel.app/src/components/range/test/scroll) [Preview for custom scroll target](https://ionic-framework-git-fw-2873-ionic1.vercel.app/src/components/range/test/scroll-target) How to test: 1. Open either of the previews 2. Render the screen with the device simulator from the browser 3. Verify that you can scroll the page 4. Drag the range but don't let go 5. Verify that you cannot scroll the page 6. Repeat steps 2-5 with the other preview |
||
|
Sean Perkins
|
6a3d7c7247 |
fix(range): emit correct value when knob is at start of bar (#29820)
Issue number: resolves #29792 --------- <!-- Please do not submit updates to dependencies 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 the user drags the range knob (most easily reproduced in fullscreen mode) and the gesture emits a current x position of `0`, the range incorrectly emits a value of `NaN`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `ion-range` does not emit `NaN` and instead emits the correct range value for the knob ## Does this introduce a breaking change? - [ ] Yes - [ ] 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. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
||
|
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
|
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>
|
||
|
Sean Perkins
|
ca01fe807f |
docs(core): ionChange will not emit from programmatically changing value (#29407)
Issue number: resolves https://github.com/ionic-team/ionic-docs/issues/3588 --------- <!-- Please do not submit updates to dependencies 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 documentation around `ionChange` not being emitted when programmatically changing the property associated to the "value" is either inconsistent or missing from certain components. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Adds the documentation to the missing components. - Makes the documentation consistent across components. ## 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. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
||
|
Liam DeBeasi
|
6e8bf4914f |
chore(theming): remove Sass default flags (#29401)
Issue number: N/A --------- ## What is the current behavior? Currently, every Sass variable in Ionic has the `!default` flag added to the end. From the [Sass variables documentation](https://sass-lang.com/documentation/variables/): > Normally when you assign a value to a variable, if that variable already had a value, its old value is overwritten. But if you’re writing a Sass library, you might want to allow your users to configure your library’s variables before you use them to generate CSS. > > To make this possible, Sass provides the `!default` flag. This assigns a value to a variable only if that variable isn’t defined or its value is [null](https://sass-lang.com/documentation/values/null). Otherwise, the existing value will be used. In past versions of Ionic Framework, developers wrote Sass variables to rebuild Ionic Framework using their own values. In the latest versions of Ionic Framework, this is not possible. ## What is the new behavior? Removes the `!default` flag from all Sass variables. ## Does this introduce a breaking change? - [ ] Yes - [x] No ------- Co-authored-by: brandyscarney <brandyscarney@users.noreply.github.com> |
||
|
Liam DeBeasi
|
e8f63560eb | chore: sync with main | ||
|
Liam DeBeasi
|
56014cf64c | fix(range, select): prefer labels passed by developer (#29145) | ||
|
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
|
3c1d8ccd85 | chore: sync with main | ||
|
Maria Hutt
|
84f5defe33 |
refactor(range): update value on touchEnd or drag (#29005)
Issue number: resolves #28487 --------- <!-- Please do not submit updates to dependencies 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 behaviors that need to be addressed. 1. The range value is updated when the gesture `onStart` event is fired. This can lead to the values being accidentally updated when the user is scrolling on the view. The user might tap on the range to scroll on the view, but the range value is updated instead. 2. The component prevents the view from scrolling while the user has touched any part of the range. The user might want to scroll and they happen to touch the range. This can lead to the user feeling disoriented because they can't scroll on the view anymore. These behaviors do not follow the native behavior of mobile devices. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The range value is updated on touch end or when the knob is being dragged. - The view can be scrolled while the user is not dragging the knob. - A new variable `isScrollingView` is used to determine if the user is scrolling on the view regardless of whether the user is dragging the knob or not. This determines what logic to apply. - The `pressedKnob` variable is no longer being set in the `onStart` event. It is now being set in the `onMove` and `onEnd` events. (the reason behind this can be found within the newly added comments) - The `initialContentScrollY` variable is no longer being set in the `onStart` event. It is now being set in the `onMove` event. (the reason behind this can be found within the newly added comments) I did not change the behavior of the range when the user is dragging the knob. The view should not scroll while the user is dragging the knob. ## 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. --> The new behavior aligns with the native mobile devices. |
||
|
Liam DeBeasi
|
58c795f315 |
refactor(range): remove legacy property and support for legacy syntax (#29040)
BREAKING CHANGE: The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed from range. For more information on migrating from the legacy range syntax, refer to the [Range documentation](https://ionicframework.com/docs/api/range#migrating-from-legacy-range-syntax). |
||
|
Liam DeBeasi
|
ca61e5061b |
feat: add high contrast themes (#29010)
⚠️ This is a combination of previously approved PRs with the
exception of
|
||
|
Brandy Carney
|
1543b0e608 |
refactor(themes): update border radius to new logical properties (#29002)
Issue number: internal
---------
## What is the current behavior?
The old `border-radius` mixin added additional selectors and styles
depending on whether the direction was set to `ltr` or `rtl`.
Old mixin usage:
```scss
.old-border-radius {
@include border-radius(5px, 6px, 7px, 8px)
}
```
generates:
```css
.old-border-radius {
border-top-left-radius: 5px;
border-top-right-radius: 6px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 8px;
}
:host-context([dir=rtl]) .old-border-radius {
border-top-left-radius: 6px;
border-top-right-radius: 5px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 7px;
}
[dir=rtl] .old-border-radius {
border-top-left-radius: 6px;
border-top-right-radius: 5px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 7px;
}
@supports selector(:dir(rtl)) {
.old-border-radius:dir(rtl) {
border-top-left-radius: 6px;
border-top-right-radius: 5px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 7px;
}
}
```
## What is the new behavior?
The new `border-radius` mixin uses the [logical
properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Margins_borders_padding)
which handles switching based on the
[writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode),
[direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction),
and
[text-orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation):
| Before | After |
| -----------------------------| ----------------------------|
| `border-top-left-radius` | `border-start-start-radius` |
| `border-bottom-left-radius` | `border-end-start-radius` |
| `border-top-right-radius` | `border-start-end-radius` |
| `border-bottom-right-radius` | `border-end-end-radius` |
New mixin usage:
```scss
.new-border-radius {
@include border-radius(5px, 6px, 7px, 8px)
}
```
```css
.new-border-radius {
border-start-start-radius: 5px;
border-start-end-radius: 6px;
border-end-end-radius: 7px;
border-end-start-radius: 8px;
}
```
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
The `select` styles have been updated to use the mixin instead of
hardcoding `border-radius`.
|
||
|
ionitron
|
7c5ccdc2fa | chore(): add updated snapshots | ||
|
Liam DeBeasi
|
1091534397 | chore: sync with main | ||
|
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> |
||
|
Liam DeBeasi
|
74de16f862 | chore(): sync | ||
|
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> |
||
|
Liam DeBeasi
|
4cf948fb47 |
docs: account for this context (#28720)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> In https://github.com/ionic-team/ionic-framework/issues/28694 there was some confusion around how to access `this` inside of a callback function passed to a property on Ionic components. The root issue was due to how the `this` context is determined with developers being responsible for setting the appropriate `this` context. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - While this isn't an Ionic bug, I think it's worth calling out this behavior so developers are aware of how to account for it. ## 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. --> Note: The link in the docs will not work until https://github.com/ionic-team/ionic-docs/pull/3333 is merged. --------- Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> |
||
|
Liam DeBeasi
|
52ed2bf637 | feat(range): expose label wrapper as shadow part (#28601) | ||
|
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. |
||
|
Sean Perkins
|
11fd074972 | Merge remote-tracking branch 'origin/main' into sp/sync-feature-7-6-with-main | ||
|
Liam DeBeasi
|
c801e2ada9 |
chore: remove unused sass variables (#28363)
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. --> This project has several unused Sass variables still in the code base. The team would like to remove these. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removed unused Sass variables ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> The original scope of this ticket was for checkbox only, but many other components had unused sass variables, so I decided to tackle everything all at once. Since these variables are not used anywhere: 1. The build should pass 2. There should be no screenshot diffs |
||
|
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
|
f8067819ee |
feat(a11y): add dynamic font scaling (#28314)
Issue number: resolves #24638, resolves #18592 --------- <!-- Please do not submit updates to dependencies 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. --> Developers have requested that Ionic Framework support the dynamic type feature on iOS for accessibility purposes. Ionic applications do not respond to font scaling on iOS which can create inaccessible applications particularly for users with low vision. Ionic apps on Android devices currently support the Android equivalent due to functionality in the Chromium webview. Developers have also requested a way of adjusting the fonts in their Ionic UI components consistently. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Ionic components now use `rem` instead of `px` where appropriate. This means devs can change the font size on `html` and the text in supported Ionic components will scale up/down appropriately - Add support for Dynamic Type on iOS (the iOS version of Dynamic Font Scaling) ## 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: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com> Co-authored-by: Shawn Taylor <shawn@ionic.io> Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Sean Perkins <sean@ionic.io> Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> |
||
|
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` |
||
|
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> |
||
|
Liam DeBeasi
|
1d2b867f22 | fix(range): add correct margin in item (#28161) | ||
|
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
|
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> |
||
|
Maria Hutt
|
eafa7b5dc6 |
test(many): gestures flakiness (#27808)
Issue number: multiple internals --------- <!-- Please do not submit updates to dependencies 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. --> Multiple tests that use gestures are flaky on GitHub. Due to that those tests are being skipped. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `page.mouse.move` will not work as expected if it the mouse moves outside of the viewport. This may lead to events to not fire every time. There's now a check to determine if the coordinates are valid. If they are not, then it will update the coordinates to be as close to the viewport's edge instead of being outside. - Safari doesn't repaint the frame as often as the other browsers. This causes the tests on GitHub to appear to be lagging. Now the frame is forced to repaint only for Safari. - Most tests are no longer being skipped. - Range is still having issues on GitHub. It is no longer flaky locally with the changes in this PR. I've had to revert them back to skip until further notice. ## 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. --> If this PR is merged, then: - FW-3006, FW-2795, and FW-3079 can be closed - FW-4556 still needs to remain open since range is still flaky on GitHub --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> |
||
|
Liam DeBeasi
|
6fab2a98b3 | chore(): sync with main | ||
|
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> |
||
|
Sean Perkins
|
66d959f5bf | Merge remote-tracking branch 'origin/main' into sp/sync-feature-7.1-with-main | ||
|
Brandy Carney
|
995a848575 |
fix(many): update form controls (radio, checkbox, toggle, input, select) to have consistent disabled opacity (#27396)
Issue number: resolves #27184 --------- ## What is the current behavior? The modern form controls do not use the same opacity for their labels when disabled, resulting in inconsistent UI when using two different types in the same view (select vs checkbox, for example). ## What is the new behavior? The checkbox, input, radio, range, select, textarea and toggle labels have been updated on both modes to use the same opacity as each other when disabled. The checkbox and radio icons have been updated to use a different opacity than the label for `md` mode. - Updates `ios` mode so all form controls use the same opacity of `0.3` - I could not find any guidelines by Apple for what color these should be, so I decided to just make them the same as what is most commonly used & match item - Updates `md` mode so all form control labels use the same opacity of `0.38` - I used the [Material Design 3 documentation](https://m2.material.io/components) to get this number as well as the opacity of the disabled selection controls in the [Material Design 2 figma design kit](https://www.figma.com/community/file/778763161265841481). The Material Design 2 documentation does not mention the opacity, but this is also the number used by Material Design 1 so it's safe to assume it is what the disabled form labels should also use for Material Design 2. - Updates the `md` range so the slotted elements are also included when setting the opacity on the label - Updates the range, radio & checkbox tests to make sure there are screenshots in the different disabled states - Updates the item/disabled test to include radio & textarea so you can see all form controls side by side ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information I downloaded screenshots of the item disabled tests and put them side by side for `main` and this branch in order to see the differences in the labels. The grey boxes to the left of each item are just a bigger version of the label color for that item, so it's easier to see when they aren't the same.   --------- Co-authored-by: ionitron <hi@ionicframework.com> |
||
|
ionitron
|
f08cb31b39 | chore(): add updated snapshots | ||
|
Liam DeBeasi
|
19ec41c965 | chore: sync with main | ||
|
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> |
