mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
3067 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
| 01ae835ad5 | chore: sync with main | |||
| 487ffca11e |
chore: fix typo with close watcher const (#29146)
The variable was spelled incorrectly. |
|||
| 8f0ea0dd58 | chore: sync with main | |||
| 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. |
|||
| b2d636f14d |
fix(checkbox): set aria-checked of indeterminate checkbox to 'mixed' (#29115)
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. --> We are not ever explicitly setting `aria-checked`. For checked and unchecked states (i.e. `true` and `false` for aria-checked), we don't need to set `aria-checked` because an input with a type of 'checkbox' has built-in semantics making `aria-checked` redundant. However, when the checkbox is in an indeterminate state, `aria-checked` should have a value of 'mixed'. We are not currently ever setting it to 'mixed'. See [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked#description) for more details. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The checkbox's `aria-checked` has a value of 'true' when it is checked - The checkbox's `aria-checked` has a value of 'false' when it is unchecked - The checkbox's `aria-checked` has a value of 'mixed' when it is indeterminate ## 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. --> |
|||
| a0a77f799d |
feat(searchbar): autocapitalize, dir, lang, maxlength, and minlength are inherited to native input (#29098)
Issue number: resolves #27606 --------- <!-- 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. --> Certain attributes are not be inherited to the inner searchbar. Developers need control over these attributes to provide important context to users for things like language and text direction. Additionally, being able to control things like autocapitalize, maxlength, and minlength can help improve the user experience by a) guiding what should be entered into an input and b) removing autocapitalize where it's not appropriate. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Added autocapitalize, maxlength, and minlength properties - lang and dir are global attributes, so adding them as properties will cause issues. However, developers can still set them as attributes and they will be inherited to the native `input` element. We also watch them so any changes to the attributes are also inherited to the native `input`. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.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: We expanded the scope of this work to also include input and textarea, and this work will be handled separately. However, the original request was only for searchbar so that's why I associated this PR with the linked issue. Dev build: `7.7.3-dev.11709159644.114cd8b1` |
|||
| 02ec5d09a1 |
chore(deps): update dependency @playwright/test to v1.41.2 (#29046)
[](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.39.0` -> `1.41.2`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.39.0/1.41.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/) | --- ### Release Notes <details> <summary>microsoft/playwright (@​playwright/test)</summary> ### [`v1.41.2`](https://togithub.com/microsoft/playwright/releases/tag/v1.41.2) [Compare Source](https://togithub.com/microsoft/playwright/compare/v1.41.1...v1.41.2) ##### Highlights [https://github.com/microsoft/playwright/issues/29123](https://togithub.com/microsoft/playwright/issues/29123) - \[REGRESSION] route.continue: Protocol error (Fetch.continueRequest): Invalid InterceptionId. #### Browser Versions - Chromium 121.0.6167.57 - Mozilla Firefox 121.0 - WebKit 17.4 This version was also tested against the following stable channels: - Google Chrome 120 - Microsoft Edge 120 ### [`v1.41.1`](https://togithub.com/microsoft/playwright/releases/tag/v1.41.1) [Compare Source](https://togithub.com/microsoft/playwright/compare/v1.41.0...v1.41.1) ##### Highlights [https://github.com/microsoft/playwright/issues/29067](https://togithub.com/microsoft/playwright/issues/29067) - \[REGRESSION] Codegen/Recorder: not all clicks are being actioned nor recorded[https://github.com/microsoft/playwright/issues/29028](https://togithub.com/microsoft/playwright/issues/29028)8 - \[REGRESSION] React component tests throw type error when passing null/undefined to componen[https://github.com/microsoft/playwright/issues/29027](https://togithub.com/microsoft/playwright/issues/29027)27 - \[REGRESSION] React component tests not passing Date prop valu[https://github.com/microsoft/playwright/issues/29023](https://togithub.com/microsoft/playwright/issues/29023)023 - \[REGRESSION] React component tests not rendering children p[https://github.com/microsoft/playwright/issues/29019](https://togithub.com/microsoft/playwright/issues/29019)9019 - \[REGRESSION] trace.playwright.dev does not currently support the loading from URL #### Browser Versions - Chromium 121.0.6167.57 - Mozilla Firefox 121.0 - WebKit 17.4 This version was also tested against the following stable channels: - Google Chrome 120 - Microsoft Edge 120 ### [`v1.41.0`](https://togithub.com/microsoft/playwright/releases/tag/v1.41.0) [Compare Source](https://togithub.com/microsoft/playwright/compare/v1.40.1...v1.41.0) #### New APIs - New method [page.unrouteAll(\[options\])](https://playwright.dev/docs/api/class-page#page-unroute-all) removes all routes registered by [page.route(url, handler, handler\[, options\])](https://playwright.dev/docs/api/class-page#page-route) and [page.routeFromHAR(har\[, options\])](https://playwright.dev/docs/api/class-page#page-route-from-har). Optionally allows to wait for ongoing routes to finish, or ignore any errors from them. - New method [browserContext.unrouteAll(\[options\])](https://playwright.dev/docs/api/class-browsercontext#browser-context-unroute-all) removes all routes registered by [browserContext.route(url, handler, handler\[, options\])](https://playwright.dev/docs/api/class-browsercontext#browser-context-route) and [browserContext.routeFromHAR(har\[, options\])](https://playwright.dev/docs/api/class-browsercontext#browser-context-route-from-har). Optionally allows to wait for ongoing routes to finish, or ignore any errors from them. - New option `style` in [page.screenshot(\[options\])](https://playwright.dev/docs/api/class-page#page-screenshot) and [locator.screenshot(\[options\])](https://playwright.dev/docs/api/class-locator#locator-screenshot) to add custom CSS to the page before taking a screenshot. - New option `stylePath` for methods [expect(page).toHaveScreenshot(name\[, options\])](https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1) and [expect(locator).toHaveScreenshot(name\[, options\])](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-screenshot-1) to apply a custom stylesheet while making the screenshot. - New `fileName` option for [Blob reporter](https://playwright.dev/docs/test-reporters#blob-reporter), to specify the name of the report to be created. #### Browser Versions - Chromium 121.0.6167.57 - Mozilla Firefox 121.0 - WebKit 17.4 This version was also tested against the following stable channels: - Google Chrome 120 - Microsoft Edge 120 ### [`v1.40.1`](https://togithub.com/microsoft/playwright/releases/tag/v1.40.1) [Compare Source](https://togithub.com/microsoft/playwright/compare/v1.40.0...v1.40.1) ##### Highlights [https://github.com/microsoft/playwright/issues/28319](https://togithub.com/microsoft/playwright/issues/28319) - \[REGRESSION]: Version 1.40.0 Produces corrupted traces[https://github.com/microsoft/playwright/issues/28371](https://togithub.com/microsoft/playwright/issues/28371)1 - \[BUG] The color of the 'ok' text did not change to green in the vs code test results sectio[https://github.com/microsoft/playwright/issues/28321](https://togithub.com/microsoft/playwright/issues/28321)21 - \[BUG] Ambiguous test outcome and status for serial mo[https://github.com/microsoft/playwright/issues/28362](https://togithub.com/microsoft/playwright/issues/28362)362 - \[BUG] Merging blobs ends up in Error: Cannot create a string longer than 0x1fffffe8 charact[https://github.com/microsoft/playwright/pull/28239](https://togithub.com/microsoft/playwright/pull/28239)8239 - fix: collect all errors in removeFolders ##### Browser Versions - Chromium 120.0.6099.28 - Mozilla Firefox 119.0 - WebKit 17.4 This version was also tested against the following stable channels: - Google Chrome 119 - Microsoft Edge 119 ### [`v1.40.0`](https://togithub.com/microsoft/playwright/releases/tag/v1.40.0) [Compare Source](https://togithub.com/microsoft/playwright/compare/v1.39.0...v1.40.0) #### Test Generator Update  New tools to generate assertions: - "Assert visibility" tool generates [expect(locator).toBeVisible()](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-be-visible). - "Assert value" tool generates [expect(locator).toHaveValue(value)](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-value). - "Assert text" tool generates [expect(locator).toContainText(text)](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-contain-text). Here is an example of a generated test with assertions: ```js import { test, expect } from '@​playwright/test'; test('test', async ({ page }) => { await page.goto('https://playwright.dev/'); await page.getByRole('link', { name: 'Get started' }).click(); await expect(page.getByLabel('Breadcrumbs').getByRole('list')).toContainText('Installation'); await expect(page.getByLabel('Search')).toBeVisible(); await page.getByLabel('Search').click(); await page.getByPlaceholder('Search docs').fill('locator'); await expect(page.getByPlaceholder('Search docs')).toHaveValue('locator'); }); ``` #### New APIs - Option `reason` in [page.close()](https://playwright.dev/docs/api/class-page#page-close), [browserContext.close()](https://playwright.dev/docs/api/class-browsercontext#browser-context-close) and [browser.close()](https://playwright.dev/docs/api/class-browser#browser-close). Close reason is reported for all operations interrupted by the closure. - Option `firefoxUserPrefs` in [browserType.launchPersistentContext(userDataDir)](https://playwright.dev/docs/api/class-browsertype#browser-type-launch-persistent-context). #### Other Changes - Methods [download.path()](https://playwright.dev/docs/api/class-download#download-path) and [download.createReadStream()](https://playwright.dev/docs/api/class-download#download-create-read-stream) throw an error for failed and cancelled downloads. - Playwright [docker image](https://playwright.dev/docs/docker) now comes with Node.js v20. #### Browser Versions - Chromium 120.0.6099.28 - Mozilla Firefox 119.0 - WebKit 17.4 This version was also tested against the following stable channels: - Google Chrome 119 - Microsoft Edge 119 </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:eyJjcmVhdGVkSW5WZXIiOiIzNy4xNzMuMCIsInVwZGF0ZWRJblZlciI6IjM3LjE3My4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| de13633a18 |
fix(modal): ariaLabel and role are inherited when set via htmlAttributes (#29099)
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. --> Modal inherits `aria-label` and `role` to an element inside of its Shadow DOM. However, this only works if developers set the attributes on the host element directly. Setting the attributes via the `htmlAttributes` property causes the attributes to be set on the host and not inherited. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `aria-label` and `role` are inherited even when set using `htmlAttributes`. ## 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. --> Dev build: `7.7.4-dev.11709154993.1b49c313` |
|||
| 7cdbc1b5ad |
feat(datetime): formatOptions property for Datetime (#29065)
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 Datetime header, Datetime time button, and Datetime Button have default date formatting that cannot be set by the developer. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The developer can customize the date and time formatting for the Datetime header and time button - The developer can customize the date and time formatting for the Datetime Button - A warning will appear in the console if they try to provide a time zone (the time zone will not get used) - A warning will be logged if they do not include the date or time object for formatOptions as needed for the presentation of the Datetime ## 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. --> These changes have been reviewed in #29009 and #29059. This PR just adds them to the feature branch now that the separate tickets are complete. --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> |
|||
| 2ed0ada923 |
fix(overlays): focus is returned to last focus element when focusing toast (#28950)
Issue number: resolves #28261 --------- <!-- 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 moving focus from a focus-trapped overlay to a toast, focus is moved back to the overlay. This is the correct behavior as focus should never leave a focus-trapped overlay (unless the overlay is dismissed or focus is moved to a _new_ top-most overlay). However, the way we return focus is a bit unexpected because it always returns focus to the last focusable element in the overlay. This means that if you were focused on the first focusable element, presented the toast, and then focused the toast, focus might not be moved back to that first focusable element. In the case of the linked issue, this was causing an unexpected scroll so that the last focused element could be in view. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - This fix adds an exception for `ion-toast` (as it is the only overlay that is **not** focus trapped) that ensures that focus is moved back to the last focus 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/.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. --> Dev build: `7.7.1-dev.11707253408.186eea70` Note: We don't recommend this pattern in general because it would be impossible for a screen reader user to focus the toast. However, we can at least improve the experience for developers who continue to implement this pattern by returning focus in a more predictable manner. Docs: https://github.com/ionic-team/ionic-docs/pull/3432 Testing: Reviewers should manually test the following behaviors: 1. Create a modal with 2 buttons. Have one of the buttons present a toast. Open the toast and verify that you can still Tab to cycle through the buttons in the modal. 2. Create a modal with 2 buttons. Have one of the buttons present a toast. Open the toast. Move focus to the toast and verify that you can still Tab to cycle through the buttons in the modal (once focus is returned to the modal). |
|||
| 1fc4b76f59 |
fix(label): do not grow when in end slot (#29036)
Issue number: resolves #29033 --------- <!-- 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/28773 I resolved several incorrect behaviors with Items related to text wrapping. However, it looks like I missed the removal of https://github.com/ionic-team/ionic-framework/pull/28146/files#diff-4a1156704dbf45b0dad273b6909b190ca45e4380aa7378ba88d0dd7d48d7d473R37 which caused the issue to persist when adding a label to the end slot. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removed logic that caused `ion-label` to grow larger than it needed to be | `main` | branch | | - | - | |  |  | ## 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. --> Dev build: `7.7.2-dev.11707840956.16e27b4c` --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| d47be8165a |
refactor(item): remove build conditional for test environment (#29007)
- Fix Internal issue (FW-5205) - Removed the build conditional in the `item` component since the previous issue is already fixed in Stencil. --------- <!-- 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. --> - No changes were made in terms of behavior. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - No changes were made in terms of behavior so it will work as before. ## 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. --> - Spec tests still pass even after this change (we can see below the results before and after the change) - Ran the command `npm run test.spec src/components/item/test/item.spec.ts src/components/item/test/item.spec.tsx`  |
|||
| 1ca9aa5246 |
test(toast): reset config to avoid unnecessary setTimeouts (#29004)
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. --> Team members are running into unexpected errors running spec tests: ``` TypeError: Cannot read properties of undefined (reading '$instanceValues$') ``` This line is the culprit: |
|||
| e833ad4649 |
docs(overlays): clarify how to remove an overlay (#28989)
In https://github.com/ionic-team/ionic-framework/issues/28981 there was some confusion surrounding how to remove an overlay from the DOM if it was never presented. The `dismiss` method will remove the overlay from the DOM, but only if the overlay is visible. Otherwise, it's a no-op. This PR updates the `dismiss` method docs for each overlay component to note that developers can use the browser's remove method to remove the element from the DOM. |
|||
| 0a8964d30c |
fix(popover): render arrow above backdrop (#28986)
Issue number: resolves #28985 --------- <!-- 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. --> <!-- Please describe the current behavior that you are modifying. --> When a popover is being rendered in iOS mode, the arrow renders under the backdrop.  <!-- Please describe the behavior or changes that are being added by this PR. --> - The arrow renders at the same level as the content.  - [ ] 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. --> <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Credit [Sahil-B07](https://github.com/Sahil-B07) for providing the [fix](https://github.com/ionic-team/ionic-framework/pull/28430). A new PR had to be created in order to update snapshots. --------- Co-authored-by: Sahil Bhor <92709590+Sahil-B07@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| 7449fb4fed |
fix(action-sheet): iOS dismiss animation respects safe area (#28915)
Issue number: resolves #28541
---------
<!-- 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. -->
On iOS when dismissing the `ion-action-sheet`, the animation does not
account for the safe area of the device. This results in the action
sheet not completely animating off the visible viewport on a device with
safe area enabled.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The `ion-action-sheet` will animate consistently off the viewport when
dismissing, including the safe area.
To better support custom animations not needing to account for the safe
area, the safe area has been added to the padding of the action sheet
container. This results in the height increasing based on the bottom
safe area and animating correctly when translating between [`100%` and
`0%`](
|
|||
| 35ab6b4816 |
fix(select): popover can be scrolled (#28965)
Issue number: resolves #28963 --------- <!-- 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/28861 I fixed an issue that caused the wrong content inside of a popover to be scrollable. This CSS should have been applied, but it broke back when popover was converted to the Shadow DOM. Fixing this issue revealed a misconfiguration with the select-popover that caused the select-popover to no longer be scrollable. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Content inside of `ion-select-popover` can now be scrolled Note that I am considering this a bug fix instead of a regression. While scrolling used to work in select-popover, it only worked by chance. The `.popover-viewport` styles should have always applied to the select-popover, thus requiring the use of `overflow-y: auto` in select-popover. ## 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. --> Dev build: `7.7.1-dev.11706893059.1bef4b38` |
|||
| 59543af4e9 |
merge release-7.7.0
Release 7.7.0 |
|||
| 950fa40c55 |
fix(overlays): tear down animations after dismiss (#28907)
Issue number: resolves #28352 --------- <!-- 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. --> Not all animations are getting properly destroyed after they run. This means that styles can get stuck at the end value of their animation. Specifically for this reproduction (as reported in the bug ticket), if the modal animates from 1 to 0 opacity and then the modal gets reopened with a different animation where the opacity should be 1 throughout (i.e. the opacity isn't supposed to animate at all), the modal is invisible because the opacity got stuck at 0 and never got reset to the default value of 1. This bug is probably causing some incorrect behavior on other edge cases with overlays, but this is the only one I've identified. ### Reproduction steps Note: you cannot reproduce this when using a modalController 1. Open a modal, e.g. [this one](http://localhost:3333/src/components/modal/test/card-nav?ionic:mode=ios) in `ios` mode on a screen wider than 768px 1. Close the modal 1. Open the same modal on a screen narrower than 768px 1. See that the modal does not appear ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Animations are properly destroyed after the animation completes - The modal now appears as expected after following the reproduction steps above ## 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: Liam DeBeasi <liamdebeasi@users.noreply.github.com> |
|||
| 219e630ed5 | chore: sync with main | |||
| 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> |
|||
| f6fc22bba6 |
fix(action-sheet, alert, toast): button roles autocomplete with available options (#27940)
Issue number: resolves #27965 --------- https://www.youtube.com/watch?v=a_m7jxrTlaw&list=PLIvujZeVDLMx040-j1W4WFs1BxuTGdI_b&index=3 <!-- 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 is a lack of autocomplete support for AlertButton attribute of `role` (there may be similar situations for other components too, however, I was working on this component and found it). ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Support for autocomplete for the two types defined `cancel` and `destructive`, and also supports any arbitrary string if passed in. ## 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. --> I suggest there to be some global interface similar to the following: ``` interface LooseAutocomplete<T extends string> = T | Omit<string, T>; ``` I referenced this great [video](https://youtu.be/a_m7jxrTlaw) from Matt @mattpocock --------- Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> |
|||
| 9448783bb1 |
fix(item): only default slot content wraps (#28773)
Issue number: resolves #28769 --------- <!-- 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. --> As part of https://github.com/ionic-team/ionic-framework/pull/28146, we allowed text wrapping inside of `ion-item` for accessibility purposes. One of the behaviors we added was to allow start, default, and end slotted containers to wrap to the next line to align with the iOS spec. However, this decision was based on an incorrect assumption. The following screenshot shows the Settings app on iOS: | default scale | 310% scale | | - | - | | <img width="1170" alt="Frame 4" src="https://github.com/ionic-team/ionic-framework/assets/2721089/462ef153-a060-41c8-9a00-f0aad17839be"> | <img width="1170" alt="Frame 5" src="https://github.com/ionic-team/ionic-framework/assets/2721089/f047f880-7b80-4710-939b-96da075fbbf9"> | At the default scale, the blue icon is in the iOS equivalent of the "start" slot, "Bluetooth" is in the default slot, and "On" is in the "end" slot. We incorrectly assumed the same markup was true when scaling the text up. However, at 310% scale the icon, "Bluetooth" text, and "On" text all become part of the default slot in a single container that wraps. You can tell because the bottom border runs underneath the blue icon at 310% whereas it does not at the default scale. This allows the text to wrap underneath the blue icon. When we originally implemented #28146 we thought that this meant the start, default, and end slot containers should wrap to the next line. I further validated this behavior by creating an app with Swift UI. I created a list of items where each item has the native equivalent of a checkbox in the `start` slot and multiple `ion-labels` in the default slot of the item: | Default Scale | 310% Scale | | - | - | |  |  | The content within each label wraps within the container, but the containers themselves never wrap to the next line. Demo code: ```swift import SwiftUI struct ContentView: View { struct Item: Identifiable, Hashable { let id = UUID() } private var items = [ Item(), Item(), Item(), Item(), Item() ] @State private var multiSelection = Set<UUID>() var body: some View { NavigationView { List(items, selection: $multiSelection) {_ in HStack { Text("Column 1 with really long text") Text("Column 2 with really long text") Text("Column 3 with really long text") Text("Column 4 with really long text") } } .toolbar { EditButton() } } Text("\(multiSelection.count) selections") } } #Preview { ContentView() } ``` ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - This PR removes the ability for the start, default, and end slot containers to wrap to the next line. This behavior aligns with pre-v7.6.0 behaviors. The containers inside of the default slot will not wrap to the next line. However, content within each container (such as text within an `ion-label`) will continue to wrap to meet the team's accessibility requirements. ## 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. --> Dev build: `7.6.5-dev.11704916749.1e64a3a7` --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| bf7922c8b3 |
fix(item): ensure button focus state on property change (#28892)
Issue number: resolves #28525 --------- <!-- 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 navigated via tab-key, the ion-item is not highlighted correctly after switching from button=false to button=true. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Now, when dynamically changing the the `button` option to `True`, there's a `@watch` callback that will make sure the internal `isFocusable` `@state` will be updated. - A new unit test was added to item/test. As there was still any unit test for the `ion-item`, a new files was created - `item.spec.tsx` ## 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. --> New behavior in runtime:  --------- Co-authored-by: Sean Perkins <sean@ionic.io> |
|||
| 2a3c26e44d |
test(many): replace waitForSelector with waitFor (#28888)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> There are some tests that use Playwright's `waitForSelector` [function](https://playwright.dev/docs/api/class-page#page-wait-for-selector). However, Playwright has informed the community to not use this function by labeling it as [discouraged](https://playwright.dev/docs/api/class-page#page-wait-for-selector). ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Replaced `waitForSelector` with the [recommended](https://playwright.dev/docs/api/class-page#page-wait-for-selector) `waitFor` [function](https://playwright.dev/docs/api/class-locator#locator-wait-for). ## 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. --> N/A |
|||
| e10f49c43d |
fix(accordion): prevent opening of readonly accordion using keyboard (#28865)
Issue number: resolves #28344 --------- <!-- 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 an Accordion is inside an Accordion Group, and the Accordion Group is enabled and not readonly but the Accordion is disabled and/or readonly, it is possible to navigate to the accordion and open it using the keyboard. This should not be allowed, just like opening it on click is not allowed. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - A disabled Accordion inside an Accordion Group may not be opened via the keyboard. - A readonly Accordion inside an Accordion Group may not be opened via the keyboard. ## 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. --> |
|||
| 10c38d0354 |
fix(popover): content inside of popover scrolls correctly (#28861)
Issue number: resolves #28455 --------- <!-- 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 main `ion-content` inside of a popover is not scrollable. Instead, the `.popover-viewport` container is scrolled because certain styles no longer applied once we moved popover to the Shadow DOM. This bug impacted the linked issue because it meant that the infinite scroll inside of the content never fires (since the content never scrolls). ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The `.popover-viewport` rule now targets slotted content with the`.popover-viewport` class. This class is added to the root node that is slotted. This enables us to target the user's content in the light dom. ## 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. --> Dev build: `7.6.6-dev.11705696534.177666f8` --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| 9262f7da15 |
fix(datetime): do not animate to new value when multiple values in different months are set (#28847)
Issue number: resolves #28602 --------- <!-- 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 animate to the new date when the value is changed, but we do not account for multiple selection. This behavior is valuable for when the value is set asynchronously on a different month than what it shown. However, this is confusing when there are multiple dates selected in different months, because we do not reasonably know which date to animate to. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Datetime no longer animates to the new value if more than one date is selected, and the selected dates aren't all in the same month. An alternative strategy would be to always animate unless one of the selected dates is in the month currently being viewed. However, this would still mean guessing at which value the user wants to see, which we are trying to avoid. Based on this PR: https://github.com/ionic-team/ionic-framework/pull/28605 ## 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: Liam DeBeasi <liamdebeasi@users.noreply.github.com> --------- Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> |
|||
| c47a16d6c3 |
fix(datetime): enter closes keyboard when typing time (#28848)
Issue number: resolves #28325 --------- <!-- 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 typing the time into the date picker pressing "Enter" does not close the on-screen keyboard. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Pressing "Enter" closes the on-screen keyboard ## 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: ⚠️ While I have a test for this, please also test this on a physical Android device. 1. Go to `src/components/datetime/test/basic` 2. Open the time picker (in any of the date times) 3. Tap the time to open the keyboard 4. Press "Enter" on Android. Observe that the keyboard closes. Dev build: `7.6.6-dev.11705528328.1ef5e17b` |
|||
| 0847c2ac2c |
fix(segment): setting value via binding updates button state (#28837)
Issue number: resolves #28816 --------- <!-- 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 value is set on Segment asynchronously when binding it in Angular. However, the timing works out such that the value changes after `connectedCallback` is fired but before any Stencil Watchers are configured. As a result, our `value` property watcher does not fire which causes `ionSelect` to not be emitted. Segment Buttons rely on this event to know when to update their state (if the value changes such that a segment button is now selected). This results in a checked segment button not appearing checked. This is similar to other issues that have been fixed: https://github.com/ionic-team/ionic-framework/pull/28510 https://github.com/ionic-team/ionic-framework/pull/28488 https://github.com/ionic-team/ionic-framework/pull/28526 ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Segment now emits `ionSelect` on `componentDidLoad` so that any descendant segment buttons can update correctly. ## 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. --> Dev build: `7.6.5-dev.11705415448.16878103` This is a timing issue with Stencil, so I am unable to write a reliable automated test. Reviewers should test the dev build in the repro provided in the linked issue. |
|||
| ad65824722 |
fix(alert): remove border-right on ios stacked buttons (#28821)
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 iOS alert has 3 or more buttons, those are rendered vertically. All but the last button will have a right border. There shouldn't be a right border when the buttons are stacked.  ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Vertical buttons don't have a right border. - Separated the test in order to also test dark theme.   ## 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. --> N/A --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| aed7a03532 |
fix(select): click handlers on slotted content fire (#28839)
Issue number: resolves #28818 --------- <!-- 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. --> Select has logic in place to prevent the overlay from opening when clicking the slotted content. As part of this, we need to deal with the `<label>` element dispatching another click that then bubbles up and causes the overlay to open when clicking the slotted content. We currently deal with this by calling `preventDefault` which prevents this extra event from being dispatched only when clicking the slotted content. We also call `stopPropagation`. This code is not necessary, and in most cases should not have any adverse effects on developer applications. However, this does impact React applications due to how React handles events. When a developer places `onClick` on a slotted element, a native "click" listener is not immediately applied to that element. Instead, React adds a native "click" listener to the root element of an application. When that listener's callback fires, React will dispatch a synthetic click event on the slotted element. Since we are calling `stopPropagation`, the click event never bubbles up to this root node's listener. As a result, the synthetic event is never dispatched on the slotted element, and the developed `onClick` callback never fires. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Select no longer prevents events from bubbling. The existing `event.preventDefault` is sufficient to prevent the label from dispatching another click (thereby causing the select overlay to open) when clicking the slotted content. ## 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. --> Dev build: `7.6.5-dev.11705430252.1023daf3` |
|||
| dbaaa5bd9f |
fix(list): remove uneeded border radius from items in inset list (#28830)
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 MD mode, items in an inset list currently receive their own border radius, separate from the border radius also applied to the inset list itself. The original intent was likely to ensure that the corners of the items don't spill out of the list. However, the item's border radius is no longer needed, for two reasons: 1. MD has since added top/bottom padding to their lists ([spec](https://m2.material.io/components/lists#specs)), which we've mirrored. This means the borders no longer line up anyway. 2. Even if a developer removes the list's vertical padding (we set it on the host [here]( |
|||
| 33aa8e36d9 |
chore(alert): remove ion-buttons from tests (#28823)
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. --> `ion-button` is being used as a way to open the alerts. It's not being used to test functionality. When `ion-button` is updated then the screenshots in the alert tests must be updated. This shouldn't happen when `ion-button` isn't necessary to have in these tests. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Replaced `ion-button` with `button` ## 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. --> N/A --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| bb822b3ed0 |
chore: remove matchMedia check (#28783)
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. --> As part of FW-2832 the team has an initiative to remove much of the `any` usage in favor of stronger types. This will make modifications to this codebase safer as we will have access to proper type checking. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removed the `any` case from window.matchMedia. This causes the linter to fail because `window.matchMedia` is always defined. I removed the check altogether. `matchMedia` is supported on all browsers that Ionic 7 supports. This should not cause any changes for Ionic developers, but I want to ship this a) in a separate patch and b) in a minor release to de-risk just in case there's an edge case I am not considering ## 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. --> |
|||
| 4fde5f07f6 |
chore: add strong types in several places (#28781)
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. --> As part of FW-2832 the team has an initiative to remove much of the `any` usage in favor of stronger types. This will make modifications to this codebase safer as we will have access to proper type checking. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removed several `any` usages in favor of stronger types. Note that not all of the `any` types within these files have been removed. I mainly stuck to the low hanging fruit 😄 ## Does this introduce a breaking change? - [ ] Yes - [x] No I intentionally made type changes that do not impact public APIs. Any incorrect type changes would cause our CI checks to fail. <!-- 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. --> |
|||
| 658d1caccd |
feat: add experimental hardware back button support in browsers (#28705)
resolves #28703 |
|||
| 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
|
|||
| 75ffeee933 |
fix(radio-group): radio disabled prop can be undefined (#28712)
Issue number: resolves #28677 --------- <!-- 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. --> Defining disabled a `@Prop() disabled = false` causes Stencil to mark this property as optional. This behavior is not desired on our end, but making the property required would be a breaking change. Additionally, the root issue is due to how Stencil resolves types. For example, `disabled` is [optional in the LocalJSX namespace]( |
|||
| 878eec6ea2 |
fix(nav, router-outlet): ios page transition does not cover menu on larger screens (#28745)
Issue number: resolves #28737 --------- <!-- 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/28246 we removed the overflow on Nav and Router Outlet to allow content to flow outside of these containers. This allows the translucent tab effect to work (otherwise content would be clipped and there would be no translucency). However, this had the unintended side effect of causing page transitions to flow outside of these components. This is most noticeable on larger displays when using SplitPane because the page can cover the menu mid-transition. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Overflow is no longer allowed on the main content. I originally set the overflow on the router outlet/nav itself, but that caused the translucent tab bar behavior to regress. Since this issue only happens with split pane, I decided to apply the fix there. ## 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. --> ### Dev build `7.6.3-dev.11703103144.148eb1f6` ⚠️ Please test in a physical app too ### Before/After Demo | `main` | branch | | - | - | | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/2f3f0d74-9a7e-4ebe-b58a-6e1a6ea3636e"></video> | <video src="https://github.com/ionic-team/ionic-framework/assets/2721089/cdbf8fb5-e217-48cf-8c1e-4bdecee4de4c"></video> | ### Screenshot Diffs The `menu-custom` screenshot diffs ([Example](https://github.com/ionic-team/ionic-framework/pull/28745/files)) are correct. By adding `overflow: hidden`, the box shadow from the "Content" header no longer flows outside of the container. The menu [border on MD has an opacity of 0.18]( |
|||
| 204a861b27 |
test(radio): re-enable keyboard navigation (#28747)
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 keyboard navigation tests for radio were disable due to flakiness with Safari when it came to the CI. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Re-enabled the tests. Debugging was done with a saved artifact. The artifact didn't provide a clear reason of why it flakes. But it did seem that the test was tabbing before the Safari page finished loading. I've added a `waitFor()` to verify that the radios have rendered. This was done for Safari only to prevent any additional wait time. ## 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. --> There is no great way to test this since it only flakes on GitHub. |
|||
| e5226016a0 |
fix(refresher): native ios refresher works on iPadOS (#28620)
Issue number: resolves #28617
---------
<!-- 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 currently check to see if `webkitOverflowScrolling` is supported on
the refresher's style object in order to enable to native iOS refresher.
This works well for iOS, but it does not work for iPadOS. This is
because this property was removed in iPadOS 13:
https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes
> Disabled -webkit-overflow-scrolling: touch on iPad. All frames and
scrollable overflow areas now use accelerated one-finger scrolling
without changing stacking.
As a result, the native iOS refresher does not activate on iPadOS.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- I think it's safe to assume that `webkitOverflowScrolling` may be
removed on iOS in the future too since it was already removed on iPadOS.
As a result, I implemented a solution that avoids checking this.
- The `CSS.supports` check is required because otherwise the native iOS
refresher would be activated in an emulated environment such as Chrome
dev tools because the user agent is spoofed. The `apple-pay-logo-black`
named image is only supported on Apple devices.
Risks:
- Apple could remove the `apple-pay-logo-black` named image in the
future. However, we currently use this check elsewhere in Ionic too and
it has worked well:
|
|||
| 2f99aeae6f |
fix(datetime): selected today button renders correctly on ios (#28740)
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 removed the background color from today's calendar day button if
selected when implementing the calendar-day button shadow part feature:
|
|||
| 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> |
|||
| 7ce1031c17 |
fix(refresher): mode property can be used in typescript (#28717)
Issue number: resolves #28716
---------
<!-- 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. -->
All components that have per-mode stylesheets can have their mode
adjusted by setting `mode` on the component. We use the `setMode`
function to determine which mode to use on the component:
|
|||
| 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> |
|||
| bc51dd05cf |
fix(item): label does not expand indefinitely (#28700)
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. --> While working on an unrelated task, I noticed the list items in the list starter app run off the page. This is due to the text wrapping behavior in v7.6 where we allows the labels to grow/shrink. However, we do not set a limit on how much they can grow. This means that child elements inside of `ion-label` with long text can cause the label container to grow indefinitely. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Labels in item have a max-width of 100% ## 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. --> Dev build: `7.6.1-dev.11702498225.1ad6eda6` | before | after | | - | - | |  |  | --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| 8ee23d20d5 |
fix(menu): allow styling of the box shadow and transform when visible inside of a split pane (#28691)
Issue number: resolves #21530 --------- ## What is the current behavior? The `box-shadow` and `transform` properties cannot be styled on a menu when it is inside of a split pane and visible due to the following: 1) The `box-shadow` and `transform` properties are set to `none` with `!important` 2) The menu itself is not on "top" of the split pane content so the content hides any box shadow ## What is the new behavior? - Removes all uses of `!important` in split pane and menu - Developers will need to change the `z-index` from `0` to `1` on the `ion-menu` so the menu will sit on top of the split pane and show the `box-shadow` ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information I considered putting the test for this in `split-pane` but I thought since it was styling the `ion-menu` it should go in menu. I can move this if others think it makes more sense in `split-pane`. --------- 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
|
|||
| e886e3ff2f |
fix(datetime): prefer wheel sets working value on confirmation (#28520)
Issue number: resolves #25839 --------- <!-- 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. --> Confirming the working day when a datetime using a wheel picker without an initial value will result in a value of `undefined` instead of the displayed working day the user sees. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `preferWheel` uses the working value on confirmation ## 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.7-dev.11701896424.13d40ac9` Co-authored-by: liamdebeasi <liamdebeasi@users.noreply.github.com> |
