mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
317 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
| f1defba2ac |
fix(input): prevent layout shift when hiding password toggle (#30533)
Issue number: resolves #29562 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? When an input with a password toggle is given `disabled` or `readonly`, hiding the password toggle causes a layout shift as it shrinks the height of the input component. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Password toggle is given `visibility: hidden` instead of removing it from the DOM with `display: none` so it retains it's space but is still hidden and still removed from the accessibility tree. ## 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 This solution was suggested by @piotr-cz in the bug report. <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
|||
| 4b8863b6d6 |
chore(deps): update playwright (#30513)
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.52.0` -> `^1.53.2`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.52.0/1.53.2) | [](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.52.0` -> `v1.53.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/) | final | minor | --- ### Release Notes <details> <summary>microsoft/playwright (@​playwright/test)</summary> ### [`v1.53.2`](https://redirect.github.com/microsoft/playwright/compare/v1.53.1...8c38de4d13d1e8e28cc97d4ad81cc398a6b2fb32) [Compare Source](https://redirect.github.com/microsoft/playwright/compare/v1.53.1...8c38de4d13d1e8e28cc97d4ad81cc398a6b2fb32) ### [`v1.53.1`](https://redirect.github.com/microsoft/playwright/compare/v1.53.0...3c60cb476613ee50c040b488d96f390be3985a89) [Compare Source](https://redirect.github.com/microsoft/playwright/compare/v1.53.0...v1.53.1) ### [`v1.53.0`](https://redirect.github.com/microsoft/playwright/releases/tag/v1.53.0) [Compare Source](https://redirect.github.com/microsoft/playwright/compare/v1.52.0...v1.53.0) #### Trace Viewer and HTML Reporter Updates - New Steps in Trace Viewer and HTML reporter: <img src="https://github.com/user-attachments/assets/1963ff7d-4070-41be-a79b-4333176921a2" alt="New Trace Viewer Steps" height="500"> - New option in `'html'` reporter to set the title of a specific test run: ```js import { defineConfig } from '@​playwright/test'; export default defineConfig({ reporter: [['html', { title: 'Custom test run #​1028' }]] }); ``` #### Miscellaneous - New option [`kind`](https://playwright.dev/docs/api/class-testinfo#test-info-snapshot-path-option-kind) in [testInfo.snapshotPath()](https://playwright.dev/docs/api/class-testinfo#test-info-snapshot-path) controls which snapshot path template is used. - New method [locator.describe()](https://playwright.dev/docs/api/class-locator#locator-describe) to describe a locator. Used for trace viewer and reports. ```js const button = page.getByTestId('btn-sub').describe('Subscribe button'); await button.click(); ``` - `npx playwright install --list` will now list all installed browsers, versions and locations. #### Browser Versions - Chromium 138.0.7204.4 - Mozilla Firefox 139.0 - WebKit 18.5 This version was also tested against the following stable channels: - Google Chrome 137 - Microsoft Edge 137 </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:eyJjcmVhdGVkSW5WZXIiOiI0MC42Mi4xIiwidXBkYXRlZEluVmVyIjoiNDAuNjIuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| 6afcd530e6 | Merge branch 'main' into chore/update-from-main | |||
| 2dea6071db |
fix(scroll-assist): allow focus on input's siblings (#30409)
Co-authored-by: Shane <shane@shanessite.net> |
|||
| 7d639b0412 |
fix(labels): prevent clicking a label from triggering onClick twice on several components (#30384)
Issue number: resolves #30165 --------- <!-- Please do not submit updates to dependencies 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, several components will trigger their `onClick` twice if you click on their labels. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> After this fix, the affected components will only trigger `onClick` once per click of their labels or click directly on the element. ## 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. --> The affected components are: - Checkbox - Select - Textarea - Toggle - Input I also tested radio and range but could not reproduce the issue for them. Note that two of the components, checkbox and toggle, had to have special implementations for both their test and fix because of how the host component acts as the component for accessibility purposes. Current dev build: `8.5.7-dev.11746044124.147aab6c` --------- Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
|||
| 7a9d138e3d |
fix(item): emit click event once when clicking padded space on item and emit correct element (#30373)
Issue number: resolves #29758 resolves #29761 --------- ## What is the current behavior? When an `ion-item` has a click event listener, the following issues occur: 1. **Double Click Events**: - Clicking the padding around interactive elements (`ion-checkbox`, `ion-toggle`, `ion-radio`, `ion-textarea`, `ion-input`) triggers the click event twice. 2. **Incorrect Event Targets**: - For `ion-input` and `ion-textarea`, clicking their native inputs reports the wrong element as the event target. - Clicking the padding within the `native-wrapper` of `ion-input` emits a separate click event with an incorrect target element. ## What is the new behavior? - Fires `firstInteractive.click()` in Item for all interactives (no longer excludes input/textarea). - Stops immediate propagation in item when the click event is in the padding of an item, preventing two click events from firing. - Updates input and textarea to always emit from their host elements `ion-input`/`ion-textarea` instead of the native input elements. - Updates input to make the native input take up 100% height. This is necessary to avoid the `native-wrapper` triggering its own click event when clicking on its padding. - Adds e2e tests to check for the above behavior to avoid future regressions. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information **Dev build**: `8.5.6-dev.11745613928.16440384` **Previews**: - [Checkbox Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/checkbox/test/item) - [Input Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/input/test/item) - [Radio Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/radio/test/item) - [Select Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/select/test/item) - [Textarea Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/textarea/test/item) - [Toggle Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/toggle/test/item) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
|||
| 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> |
|||
| cad1c61528 |
fix(select): update icon color and use correct focused class (#30342)
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 items to note: - Styles are using a non-existing focus class. It currently uses `.has-focus` which isn't being used anywhere within `select.tsx`. It seems that `.has-focus` comes a copy and paste that wasn't updated. - Icon uses the highlight color when expanded, in item, and no fill. This leads to the styling looking weird compared to when it's not in an item especially since labels do not change colors. Only applies to `md` mode. | List no lines | List with lines | | --- | ----------- | |  |  | - The focus without a validation status does not update the border correctly when inside an item and has a solid fill. Only applies to `md` mode. | Outside item | Inside item | |--------|--------| |  |  | ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Styles are now using the correct focus class: `.has-focus`, removing `ion-focused`. - If the select is inside an item and has no fill then the icon will not use the highlight color. Only applies to `md` mode. | List no lines | List with lines | | --- | ----------- | |  |  | - The focus without a validation status uses the highlight color when inside an item and has a solid fill. Only applies to `md` mode. | Outside item | Inside item | |--------|--------| |  |  | ## 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. --> Dev build: `8.5.4-dev.11744743162.1ec9251d` Select cannot have a focused class and an expanded class at the same time. It's one or the other. --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> |
|||
| 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> |
|||
| 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]( |
|||
| 504fb6a25f |
feat(input, textarea): dir is inherited to native form control (#30102)
Issue number: resolves #30193 resolves #29577 Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
|||
| fdd52832c6 |
fix(input): update helper text and counter color (#30149)
Issue number: N/A --------- ## What is the current behavior? Helper text is lighter than it should be. ## What is the new behavior? - Updates helper and counter text to match MD design - Updates e2e test to include more coverage ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [Preview](https://ionic-framework-git-rou-11558-ionic1.vercel.app/src/components/input/test/bottom-content) > Note that the fill toggle will only work in `md` mode --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> |
|||
| 5a7314553a |
fix(input, textarea): ensure screen readers announce helper and error text when focused (#29958)
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. --> Screen readers do not announce helper and error text when user is focused on the input or textarea. This does not align with the accessibility guidelines. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The appropriate `aria` tags are added to the native input and textarea in order to associate them to the helper and error texts. - `aria-describedBy` will only be added to the native element based on helper or error text. If helper text exists then the helper text ID will be used. If the error text exists and the component has the `ion-touched ion-invalid` classes, then the error text ID will be used. - `aria-invalid` will only be added if the error text exists and the component has the `ion-touched ion-invalid` classes. - Added tests. ## 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 [input page](https://ionic-framework-lio43tje7-ionic1.vercel.app/src/components/input/test/bottom-content) on the `main` branch 2. Turn on the screen reader of your choice 3. Notice that the screen reader does not announce the helper or error text when the input is focused 4. Navigate to the [input page](https://ionic-framework-git-rou-11274-ionic1.vercel.app/src/components/input/test/bottom-content) on the `ROU-11274` branch 5. Turn on the screen reader of your choice 6. Verify that the screen reader announces the helper or error text when the input is focused on 7. Navigate to the [textarea page](https://ionic-framework-lio43tje7-ionic1.vercel.app/src/components/textarea/test/bottom-content) on the `main` branch 8. Repeat steps 2-3 9. Navigate to the [textarea page](https://ionic-framework-git-rou-11274-ionic1.vercel.app/src/components/textarea/test/bottom-content) on the `ROU-11274` branch 10. Repeat steps 5-6 Known Webkit issues: This fix will not work on macOS [16](https://bugs.webkit.org/show_bug.cgi?id=254081) and [17](https://bugs.webkit.org/show_bug.cgi?id=262895) as VoiceOver will not read any text using `aria-describedby`. Works fine on macOS 18. |
|||
| 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> |
|||
| 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> |
|||
| 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>
|
|||
| 72711bba2e | chore: sync with main | |||
| 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. --> |
|||
| 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> |
|||
| ee49824a84 |
fix(input): clear button can be navigated using screen reader (#29366)
Issue number: resolves #29358
---------
<!-- Please do not submit updates to dependencies 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 clear button is focused, `focusin` is dispatched and bubbles up
to the `ion-input`. Our [scroll assist utility listens for
`focusin`](
|
|||
| a804d3170c | chore: sync with main | |||
| 23321f7ab2 |
fix(input): debounce is set with binding syntax in angular on load (#29377)
Issue number: resolves #29374 --------- <!-- Please do not submit updates to dependencies 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 Angular binding syntax, the `debounce` value can be set after `connectedCallback`, but before `componentDidLoad`. This results in the internal representation of the `debounce` value to be the default and the watch callback to never fire. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The callback handler for `debounce` is called on component load, identical to what we do for the same exact reasons for the input `type`. - `debounce` will correctly reflect and apply the developers value when using binding syntax on initial load ## 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. --> Dev-build: `8.0.1-dev.11713879639.102f51a0` Forked reproduction with the dev-build is available here: https://github.com/ionic-team/ionic-framework/issues/29374#issuecomment-2072377087 |
|||
| 0f5d1c02d2 |
feat(input): add clearInputIcon property (#29246)
Issue number: resolves #26974 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> In https://github.com/ionic-team/ionic-framework/pull/26354 we updated the clear icon to use an ionicon instead of an hardcoded SVG. This has made it challenging to customize the icon. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Added `clearInputIcon` property to allow developers to customize the ionicon used. ## 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. --> |
|||
| 6c500fd6b2 |
feat(input): add input-password-toggle component (#29175)
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. --> When given a password input it is hard to know what users are typing as the contents of the input are obscured. As a result, it is a common pattern to have a button that lets users temporarily toggle the visibility of the password so they can correct any mistakes. Ionic currently has the infrastructure for developers to implement this on their own, but this use case is so common that the team thinks it is worth having this functionality built-in to Ionic. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Introduces the `ion-input-password-toggle` component. This component is a button that toggles the visibility of the text in the input it is slotted into. ## 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. --> ⚠️ Give co-author credit to https://github.com/ionic-team/ionic-framework/pull/29141 on merge. Docs PR: https://github.com/ionic-team/ionic-docs/pull/3541 Note: We did not do the approach listed in the other PR due to https://github.com/ionic-team/ionic-framework/pull/29141#discussion_r1523631811. --------- Co-authored-by: OS-giulianasilva <OS-giulianasilva@users.noreply.github.com> |
|||
| 44529f0a62 |
feat(button): add circular shape as round (#29161)
Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com> |
|||
| 63a2d4fb44 | refactor(input, textarea) remove unused event (#29183) | |||
| acc1042124 |
fix(input, textarea, select): account for multiple start/end slot elements (#29172)
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. --> We add margin on content in the start/end slots so they do not run up against either the visible text label of the text in the input. However, we did not account for when multiple elements are placed into the same slot. As a result, this margin is added more times than it needs to be. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated the selector so the margin is only applied to either the last or first element in the slot. ## 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. --> Test Steps: 1. Check out `feature-8.0` 2. Add multiple `ion-button` elements into either the start or end slot on an input (you can reuse the template in `src/components/input/test/slots` 3. Observe that margin is added to every `ion-button`. --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| 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> |
|||
| 13b7f8ac3a |
feat(input,textarea,select): add --highlight-height variable (#29090)
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. --> In v7, using the legacy syntax, the height of the highlight on an item could be adjusted using the `--highlight-height` variable. This variable was not added to input and therefore would not work using the modern syntax. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Adds the `--highlight-height` variable to `ion-input`, `ion-textarea` and `ion-select` so that developers can customize this height in `md` mode. Since the highlight element is not added for `ios` mode, this variable won't do anything for `ios`. Note that this diverges from the v7 behavior, where setting `--highlight-height` enabled the highlight for `ios`. A design document outlining this has been proposed here: https://github.com/ionic-team/ionic-framework-design-documents/pull/252 ## 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: Brandy Carney <brandyscarney@users.noreply.github.com> |
|||
| 05e721db1c |
refactor(item): do not automatically delegate focus (#29091)
resolves #21982 BREAKING CHANGE: - Item no longer automatically delegates focus to the first focusable element. While most developers should not need to make any changes to account for this update, usages of `ion-item` with interactive elements such as form controls (inputs, textareas, etc) should be evaluated to verify that interactions still work as expected. |
|||
| 76abf2778b |
refactor(input): remove legacy property and support for legacy syntax (#29017)
Issue number: internal --------- ## What is the current behavior? In Ionic Framework v7, we [simplified the input syntax](https://ionic.io/blog/ionic-7-is-here#simplified-form-control-syntax) so that it was no longer required to be placed inside of an `ion-item`. We maintained backwards compatibility by adding a `legacy` property which allowed it to continue to be styled properly when written in the following way: ```html <ion-item> <ion-label>Label</ion-label> <ion-input></ion-input> </ion-item> ``` While this was supported in v7, console warnings were logged to notify developers that they needed to update this syntax for the best accessibility experience. ## What is the new behavior? - Removes the `legacy` property and support for the legacy syntax. Developers should follow the [migration guide](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax) in the input documentation to update their apps. The new syntax requires a `label` or `aria-label` on `ion-input`: ```html <ion-item> <ion-input label="Label"></ion-input> </ion-item> ``` - Removes the legacy tests under under `input/test/legacy/` and all related screenshots - Removes the input usage from `item/test/a11y`, `item/test/counter`, `item/test/disabled`, `item/test/highlight`, `item/test/legacy/alignment`, `item/test/legacy/disabled`, `item/test/legacy/fill`, and `item/test/legacy/form` and all related screenshots if the test was removed ## Does this introduce a breaking change? - [x] Yes - [ ] No 1. Developers have had console warnings when using the legacy syntax since the v7 release. The migration guide for the new input syntax is outlined in the [Input documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax). 2. This change has been documented in the Breaking Changes document with a link to the migration guide. BREAKING CHANGE: The `legacy` property and support for the legacy syntax, which involved placing an `ion-input` inside of an `ion-item` with an `ion-label`, have been removed from input. For more information on migrating from the legacy input syntax, refer to the [Input documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax). --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| ca61e5061b |
feat: add high contrast themes (#29010)
⚠️ This is a combination of previously approved PRs with the
exception of
|
|||
| 92d810338d |
refactor(textarea): remove legacy property and support for legacy syntax (#28993)
Issue number: internal --------- ## What is the current behavior? In Ionic Framework v7, we [simplified the textarea syntax](https://ionic.io/blog/ionic-7-is-here#simplified-form-control-syntax) so that it was no longer required to be placed inside of an `ion-item`. We maintained backwards compatibility by adding a `legacy` property which allowed it to continue to be styled properly when written in the following way: ```html <ion-item> <ion-label>Label</ion-label> <ion-textarea></ion-textarea> </ion-item> ``` While this was supported in v7, console warnings were logged to notify developers that they needed to update this syntax for the best accessibility experience. ## What is the new behavior? - Removes the `legacy` property and support for the legacy syntax. Developers should follow the [migration guide](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax) in the textarea documentation to update their apps. The new syntax requires a `label` or `aria-label` on `ion-textarea`: ```html <ion-item> <ion-textarea label="Label"></ion-textarea> </ion-item> ``` - Removes the legacy tests under `textarea/test/legacy/` and all related screenshots - Removes the textarea usage in `input/test/legacy/spec`, `item/test/disabled`, `item/test/legacy/disabled` and `item/test/legacy/fill` ## Does this introduce a breaking change? - [x] Yes - [ ] No 1. Developers have had console warnings when using the legacy syntax since the v7 release. The migration guide for the new textarea syntax is outlined in the [Textarea documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax). 2. This change has been documented in the Breaking Changes document with a link to the migration guide. BREAKING CHANGE: The `legacy` property and support for the legacy syntax, which involved placing an `ion-textarea` inside of an `ion-item` with an `ion-label`, have been removed from textarea. For more information on migrating from the legacy textarea syntax, refer to the [Textarea documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax). --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| 2816b87ba6 |
refactor(input): remove accept property (#28946)
BREAKING CHANGE: The `accept` property has been removed from `ion-input`. |
|||
| a393d2a86c |
feat(input): remove size property in favor of CSS styling (#28903)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The `ion-input` component currently specifies a `size` attribute to align with the HTML `input` implementation. However, Ionic's custom appearance for MD and iOS is not compatible and should not be used with the `size` attribute: https://github.com/ionic-team/ionic-framework/issues/27945#issuecomment-1669702274. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The `size` property has been removed from `ion-input`. ## Does this introduce a breaking change? - [x] 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/.github/CONTRIBUTING.md#footer for more information. --> The `size` attribute has been removed from `ion-input`. As it was not compatible before, this is likely to have a minimal impact to developers. If your application is using the `size` attribute, replace the usage with CSS styling to control the width of the `ion-input`. ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
|||
| 74de16f862 | chore(): sync | |||
| 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> |
|||
| 4ccc150edf |
fix(input): slotted buttons are clickable (#28772)
Issue number: resolves #28762
---------
<!-- Please do not submit updates to dependencies 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. -->
Focused inputs have `pointer-events: none`. This code was added in
|
|||
| 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> |
|||
| 516b84475e |
fix(input, textarea, select): reduce padding on slotted buttons (#28676)
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. --> Buttons slotted in the start/end slots of input, textarea, or select have a lot of excess padding that can cause them to look misaligned from other pieces such as the control's label, especially when using `fill="clear"`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Padding removed, and a border radius added so that non-clear buttons as well as the focus state on clear buttons still look okay. Existing screenshot tests have also been updated to include buttons (non-clear ones so you can see the border radius in the screenshots). Let me know if you think this should go on a feature branch instead. I chose `main` because the current experience looks somewhat broken and we just did a minor release recently, but this could be considered a notable enough behavior change. ## 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> |
|||
| 8f7d87c680 |
fix(input, textarea): clearOnInput ignores key modifiers (#28639)
Issue number: resolves #28633
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
In https://github.com/ionic-team/ionic-framework/pull/28005 I introduced
a fix that causes "clearOnEdit" to not clear input/textarea when the Tab
key was pressed. However, there were several edge cases I missed. For
instance, pressing the "shift" key and then the "tab" key would still
clear the input because "shift" was not explicitly excluded.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Input and textarea now explicitly ignores modifier keys that do not
change the value of the input
- `didInputClearOnEdit` is not set to `true` when an ignored key is
pressed. Otherwise, pressing an ignored key and then an accepted key
would not cause the input to be cleared. For example, pressing "shift",
releasing "shift", then pressing "A" should cause the input to still get
cleared.
- Added test coverage
## 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. -->
Playwright bug report for
|
|||
| e51deed21c | Merge remote-tracking branch 'origin/main' into sync-76-125 | |||
| fe3c3d500a |
docs(input, searchbar, textarea): improve docs for managing focus (#28614)
Issue number: Related to #18132 --------- <!-- Please do not submit updates to dependencies 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 about the `autofocus` prop is unclear and does not accurately reflect how it actually works across browsers and devices. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The documentation for `autofocus` and `setFocus` are more detailed. - The documentation links to the relevant page in the docs. ## 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. --> |
|||
| 357b8b2beb |
feat(input, textarea, select): add start and end slots (#28583)
Issue number: Resolves #26297 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> With the modern form control syntax, it is not possible to add icon buttons or other decorators to the sides of `ion-input`, `ion-textarea`, or `ion-select`, as you can with `ion-item`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> `start` and `end` slots added to each component. This PR is a combination of several others that were already approved. If needed, it might be easiest to review the PRs individually by looking at the commit history here. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Docs PR: https://github.com/ionic-team/ionic-docs/pull/3271 Dev build: `7.5.4-dev.11701112913.1ea61220` --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> |
|||
| fd36b953d6 | chore: sync | |||
| 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. |
|||
| 11fd074972 | Merge remote-tracking branch 'origin/main' into sp/sync-feature-7-6-with-main | |||
| b31ecbbfe8 |
fix(input, textarea, select): use consistent sizes (#28390)
aIssue number: resolves #28388 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> We added a `min-height: 56px` to the input, textarea, and select components for MD mode. However, these were added for the outline/solid style inputs to align with the Material Design spec: https://material-components.github.io/material-components-web-catalog/#/component/text-field They should not apply to regular inputs in an item. The end result is inconsistently sized items when used with non-control items. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Non-filled and non-stacked/floating label controls are now have a minimum height of 44px. There should be **no changes** to the following types of controls: 1. iOS controls (all variants) 2. MD filled controls 3. MD stacked controls ## 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.5.2-dev.11697818830.1a33c881` --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| 2b015b2214 |
fix(input, searchbar, textarea): ensure nativeInput is always available (#28362)
Issue number: resolves #28283 --------- <!-- Please do not submit updates to dependencies 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. --> `getInputElement()` is used to access the native input. If the component has yet to render, then the function will return `undefined`. This happens mostly when using `ref` on React. ```tsx <IonInput ref={async input => { const nativeInput = await input.getInputElement(); // nativeInput is undefined }} /> ``` ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `getInputElement()` will wait to return once the component is ready. ## 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.5.1-dev.11697488622.175c9183` |
|||
| 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 |
