mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-05 21:58:20 +08:00
4302 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
| 9cc3fdea18 |
chore(deps): Bump @stencil/core from 4.8.2 to 4.9.0 in /core (#28732)
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.8.2 to 4.9.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/stencil/releases"><code>@stencil/core</code>'s releases</a>.</em></p> <blockquote> <h2>🐏 v4.9.0 (2023-12-18)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>compiler:</strong> fix transforming method parameters into docs (<a href="https://redirect.github.com/ionic-team/stencil/issues/5166">#5166</a>) (<a href=" |
|||
| 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. --> |
|||
| e22c78d682 |
chore: remove any and resolve lint (#28782)
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. --> - Added stronger types to the `animationTimeout` variable. Making this change causes our linter to fail because we are using a number value in a conditional which we do not allow. To avoid this, I needed to check if `animationTimeout` was `undefined`. 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. --> |
|||
| f65235ac47 |
feat(progress-bar): update styles to iOS 17 specs (#28759)
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. --> Ionic's progress bar implementation deviates from the appearance of a progress bar on iOS 17. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Progress bar is updated to have rounded corners (around the container). - Increases progress bar height to `4px` - Solid progress bars (progress bars with a buffer value of `1`) will have a consistent background appearance. - Buffer progress bars will continue to have the colored background appearance as they do in v7. ## 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. --> ### Breaking Changes - `--buffer-background` has been removed in favor of `--background`. ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Accomplishing rounded caps for the inner progress with Ionic's scale transformation was not viable. To maintain 60fps animations for the progress, rounded corners were applied to the container. --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> |
|||
| 658d1caccd |
feat: add experimental hardware back button support in browsers (#28705)
resolves #28703 |
|||
| 48c0d2c0dd |
feat(searchbar): update styles to iOS 17 specs (#28728)
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 searchbar implementation for Ionic's iOS mode does not align with
the appearance of a native search control in iOS 17.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The spacing between the searchbar and the cancel button has increased
to `12px`.
- The cancel button font size has increased to `17px`.
|iOS 17|Ionic|Diff|
|----|----|----|
||||
- Ionic's text and background color is different than iOS, this is
expected. Ionic uses the `$text-color-rgb`, which is compatible with
dark mode appearance. Ionic does not currently have rgb variables for
step colors to closer align to iOS color when requiring opacity.
- iOS reference image is from the Notes app. Ionic reference image is
from `searchbar/test/basic`, with a modified content background color of
`#f2f2f7` to closer align to the Notes app.
## 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 additional screenshot diffs that are a part of this PR are valid
changes. When updating the color palette for AA contrast, these
reference images were not updated. We currently use a
[threshold](
|
|||
| 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
|
|||
| ebb9ae9c11 | v7.6.3 | |||
| 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]( |
|||
| ff8015511a |
feat(modal): update styles to iOS 17 specs (#28748)
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 card presentation of a presented view from a modal does not match iOS 17 design. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updates the transform scale of the presenting element with a modal to have a similar width to iOS 17. In my discovery `0.91` is the closest scale value. - The presenting element refers to the view pushed behind the modal when displayed with a card appearance. |iOS|Ionic|Diff| |----|----|----| |||| The iOS reference is from the Events app, when creating a new event. The Ionic reference is from the `modal/tests/card` example in the repository (with the changes in this PR). ## 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> |
|||
| 63ea967d02 |
feat(tab-button): update styles to iOS 17 specs (#28754)
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. --> Tab Button icons on iOS are all 30px font size with or without a label.  ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Tab button icons are still 30px font size when there is no label - Tab button icons are 24px font size when there is a label  ## 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> |
|||
| 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]( |
|||
| 0ce0693af1 |
feat(toggle): update styles to iOS 17 specs (#28722)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The Toggle styles do not match iOS 17. | iOS 17 Screenshot | New Design | Ionic | | --------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------- | | : Bump @capacitor/core from 5.5.1 to 5.6.0 in /core (#28706)
Bumps [@capacitor/core](https://github.com/ionic-team/capacitor) from 5.5.1 to 5.6.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/capacitor/releases"><code>@capacitor/core</code>'s releases</a>.</em></p> <blockquote> <h2>5.6.0</h2> <h1><a href="https://github.com/ionic-team/capacitor/compare/5.5.1...5.6.0">5.6.0</a> (2023-12-14)</h1> <h3>Bug Fixes</h3> <ul> <li><strong>cli:</strong> Use latest native-run (<a href="https://redirect.github.com/ionic-team/capacitor/issues/7030">#7030</a>) (<a href=" |
|||
| c794583abf |
chore(deps-dev): Bump @stencil/sass from 3.0.7 to 3.0.8 in /core (#28731)
Bumps [@stencil/sass](https://github.com/ionic-team/stencil-sass) from 3.0.7 to 3.0.8. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/stencil-sass/releases"><code>@stencil/sass</code>'s releases</a>.</em></p> <blockquote> <h2>v3.0.8</h2> <h2>What's Changed</h2> <ul> <li>chore(deps): update actions/setup-node action to v3.8.2 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/423">ionic-team/stencil-sass#423</a></li> <li>chore(deps): update actions/setup-node action to v4 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/425">ionic-team/stencil-sass#425</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.6.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/424">ionic-team/stencil-sass#424</a></li> <li>chore(deps): update node.js to v20.9.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/426">ionic-team/stencil-sass#426</a></li> <li>chore(deps): update dependency rollup to v4.1.5 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/427">ionic-team/stencil-sass#427</a></li> <li>chore(deps): update dependency rollup to v4.1.6 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/430">ionic-team/stencil-sass#430</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.7.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/428">ionic-team/stencil-sass#428</a></li> <li>chore(deps): update dependency terser to v5.23.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/429">ionic-team/stencil-sass#429</a></li> <li>chore(deps): update dependency terser to v5.24.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/433">ionic-team/stencil-sass#433</a></li> <li>chore(deps): update dependency rollup to v4.2.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/432">ionic-team/stencil-sass#432</a></li> <li>chore(deps): update dependency npm to v10.2.3 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/431">ionic-team/stencil-sass#431</a></li> <li>chore(deps): update dependency rollup to v4.3.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/434">ionic-team/stencil-sass#434</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.7.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/435">ionic-team/stencil-sass#435</a></li> <li>chore(deps): update dependency rollup to v4.3.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/436">ionic-team/stencil-sass#436</a></li> <li>chore(deps): update dependency rollup to v4.4.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/437">ionic-team/stencil-sass#437</a></li> <li>chore(deps): update dependency prettier to v3.1.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/438">ionic-team/stencil-sass#438</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.7.2 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/439">ionic-team/stencil-sass#439</a></li> <li>chore(deps): update dependency rollup to v4.4.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/440">ionic-team/stencil-sass#440</a></li> <li>chore(deps): update dependency npm to v10.2.4 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/441">ionic-team/stencil-sass#441</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.8.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/444">ionic-team/stencil-sass#444</a></li> <li>chore(deps): update dependency np to v9 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/445">ionic-team/stencil-sass#445</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.8.1 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/446">ionic-team/stencil-sass#446</a></li> <li>chore(deps): update dependency terser to v5.25.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/447">ionic-team/stencil-sass#447</a></li> <li>chore(deps): update dependency np to v9.1.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/449">ionic-team/stencil-sass#449</a></li> <li>chore(deps): update dependency npm to v10.2.5 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/448">ionic-team/stencil-sass#448</a></li> <li>chore(deps): update dependency terser to v5.26.0 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/450">ionic-team/stencil-sass#450</a></li> <li>chore(deps): update dependency <code>@stencil/core</code> to v4.8.2 by <a href="https://github.com/renovate"><code>@renovate</code></a> in <a href="https://redirect.github.com/ionic-team/stencil-sass/pull/453">ionic-team/stencil-sass#453</a></li> </ul> <p><strong>Full Changelog</strong>: <a href="https://github.com/ionic-team/stencil-sass/compare/v3.0.7...v3.0.8">https://github.com/ionic-team/stencil-sass/compare/v3.0.7...v3.0.8</a></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href=" |
|||
| 45907aa907 | feat(checkbox): update styles to iOS 17 specs (#28729) | |||
| 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. |
|||
| dc1dd9c395 |
chore(deps): Bump ionicons from 7.2.1 to 7.2.2 in /core (#28702)
Bumps [ionicons](https://github.com/ionic-team/ionicons) from 7.2.1 to 7.2.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/ionicons/releases">ionicons's releases</a>.</em></p> <blockquote> <h2>v7.2.2</h2> <h2><a href="https://github.com/ionic-team/ionicons/compare/v7.2.1...v7.2.2">7.2.2</a> (2023-12-13)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>icon:</strong> add better warning when loading icons (<a href="https://redirect.github.com/ionic-team/ionicons/issues/1297">#1297</a>) (<a href=" |
|||
| 4649637ad9 |
feat(datetime-button): update design to match iOS 17 spec (#28730)
Issue number: N/A --------- ## What is the current behavior? Datetime button combines Material Design and iOS styles. ## What is the new behavior? - Splits the styles into their own mode files for Material Design & iOS and updates the iOS styles to match iOS 17. - Updates the basic test to include a screenshot test in both modes & directions. I removed all of the datetime button screenshots before running the action to generate screenshots. Some screenshots were not added back but this is correct for the following reasons: - [datetime-button-disabled](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts#L4) does not run for `ios` or `rtl` so those were removed - [datetime-overlay-modal and datetime-overlay-popover](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts#L9) do not run for `rtl` so those were removed - [datetime-overlay-popover](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts#L31) skips the test in firefox so that was removed I can add these back if you want since they aren't part of this PR but they should have probably been removed when the test was updated to exclude directions/modes. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information I compared the datetime button against native iOS 17.1.2: | iOS 17 | Ionic | | ---| ---| |  |  | |  |  | Diff:  --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| a3b825475e |
feat(datetime): align active datetime font size with ios 17 (#28738)
Issue number: N/A --------- ## What is the current behavior? The active day in a datetime uses the same font size as the other days. ## What is the new behavior? Increase the font size of the active day to match the iOS 17 spec. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information | iOS 17 | Ionic | | ---| ---| |  |  | > [!NOTE] > In the above screenshot for Ionic I have added `background: current-color(base);` to the active day. This code should be there for "today" but it is not due to a bug ([FW-5808](https://ionic-cloud.atlassian.net/browse/FW-5808)). --------- Co-authored-by: ionitron <hi@ionicframework.com> |
|||
| 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:
|
|||
| 979b2f68f0 |
feat(alert): update styles to iOS 17 specs (#28726)
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. --> Alerts don't match the iOS 17 spec for styling. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Overlay border radius increased. - Input font size increased. - Input padding increased. ## 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 difference in the MD screenshots is the box shadow on the header in the background. This was a change made a while back that probably wasn't caught due to the pixel threshold on the screenshot update job. Deleting all screenshots and running again got it updated. --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com> |
|||
| 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> |
|||
| e76d72989a |
feat(action-sheet): add disabled button (#28723)
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. --> Action sheet buttons cannot be disabled. This behavior exists in iOS 17. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Action sheet buttons can be disabled ## 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> |
|||
| 8d841b4225 | v7.6.2 | |||
| ee6ba200d1 |
chore(deps-dev): Bump @capacitor/keyboard from 5.0.6 to 5.0.7 in /core (#28713)
Bumps [@capacitor/keyboard](https://github.com/ionic-team/capacitor-plugins) from 5.0.6 to 5.0.7. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/capacitor-plugins/releases"><code>@capacitor/keyboard</code>'s releases</a>.</em></p> <blockquote> <h2><code>@capacitor/keyboard</code><a href="https://github.com/5"><code>@5</code></a>.0.7</h2> <h2><a href="https://github.com/ionic-team/capacitor-plugins/compare/@capacitor/keyboard@5.0.6...@capacitor/keyboard@5.0.7">5.0.7</a> (2023-12-15)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>keyboard:</strong> Change keyboard style during setStyle (<a href="https://redirect.github.com/ionic-team/capacitor-plugins/issues/1935">#1935</a>) (<a href=" |
|||
| 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:
|
|||
| 7cec5337a4 | chore: sync | |||
| e574ffe85a | chore(picker): mark ionInputModeChange as internal (#28701) | |||
| 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> |
|||
| ae6c353b51 |
docs(test): add locale best practice (#28699)
This best practice currently resides in our internal testing process docs. I think this is valuable information for contributors to have as well, so I've added it to our public best practices doc. |
|||
| cd5c099dd3 |
feat(picker): add inline picker (#28689)
Issue number: resolves #24905, resolves #26840, resolves #15710 --------- <!-- 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 current picker is only displayed as an overlay which makes it impossible to use inline with the rest of the application. Additionally, there are several bugs and missing features. For example, it is impossible to know when the value of the picker column has changed using public APIs. This is valuable for updating other columns in response to that data. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Introduces `ion-picker` as an inline wheel picker component. The overlay picker is still available using `ion-picker-legacy`. - The implementation of this component resolves linked bugs. It also resolves linked features by exposing an `ionChange` event for developers to listen for. ## 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.8-dev.11702398696.1ab62ea9` --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Shawn Taylor <shawn@ionic.io> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com> |
|||
| 150ea1a8ad | v7.6.1 | |||
| 666a01dd6e |
fix(button): wrap text by default (#28682)
Issue number: resolves #8700 BREAKING CHANGE: Button text now wraps by default. |
|||
| 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> |
|||
| 8f66acdffb |
chore(deps): Bump @stencil/core from 4.8.1 to 4.8.2 in /core (#28692)
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.8.1 to 4.8.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/ionic-team/stencil/releases"><code>@stencil/core</code>'s releases</a>.</em></p> <blockquote> <h2>🐳 v4.8.2 (2023-12-11)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>compiler:</strong> make sure typesDir exist before writing to it (<a href="https://redirect.github.com/ionic-team/stencil/issues/5109">#5109</a>) (<a href=" |
|||
| dc51b33db5 |
chore: remove safari 11 code (#28690)
Older versions of WebKit used an old `constant()` syntax for safe area variables: https://caniuse.com/?search=env As of Safari 11.3, `env()` is supported instead. We haven't supported Safari 11 in years, so I think this is safe to remove. |
|||
| 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> |
|||
| 37290df7ef |
test(radio): skip flaky radio tabbing test (#28668)
Skips the keyboard navigation test in the radio a11y due to it being flaky: https://github.com/ionic-team/ionic-framework/actions/runs/7131071726 |
|||
| c680ad9988 |
chore(deps-dev): Bump @axe-core/playwright from 4.8.1 to 4.8.2 in /core (#28658)
Bumps [@axe-core/playwright](https://github.com/dequelabs/axe-core-npm) from 4.8.1 to 4.8.2. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/dequelabs/axe-core-npm/blob/develop/CHANGELOG.md"><code>@axe-core/playwright</code>'s changelog</a>.</em></p> <blockquote> <h1>Change Log</h1> <p>All notable changes to this project will be documented in this file. See <a href="https://conventionalcommits.org">Conventional Commits</a> for commit guidelines.</p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/dequelabs/axe-core-npm/commits">compare view</a></li> </ul> </details> <br /> [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> |
|||
| 90ce7f00fa | v7.6.0 | |||
| ede9c6e3c8 | Merge remote-tracking branch 'origin/main' into sync-76-final | |||
| 507d5ee1da | v7.5.8 | |||
| e71e7a0690 |
fix(select): do not collapse to width: 0 when placed in flex container (#28631)
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 currently apply a workaround to `ion-select` so it can wrap correctly inside of `ion-item`: |
|||
| 8c235fd30c |
fix(infinite-scroll): remaining in threshold after ionInfinite can trigger event again on scroll (#28569)
Issue number: resolves #18071 --------- <!-- 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 adding elements to the DOM in the `ionInfinite` callback, scrolling again would sometimes not cause `ionInfinite` to trigger again. We [set the didFire flag to `true`]( |
|||
| 8dc3d1a16d | Merge remote-tracking branch 'origin/main' into sync-80-125 | |||
| e51deed21c | Merge remote-tracking branch 'origin/main' into sync-76-125 |
