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 evaluating step colors for high contrast themes I discovered that
this code is not actually applied anywhere.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Remove unused code
## 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. -->
Issue number: resolves#28356
---------
<!-- 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-radio-group` would not set the radio value when using it as a
Angular standalone component and data binding:
```html
<ion-radio-group [value]="fromValue">
<ion-radio value="dogs">Dogs</ion-radio><br />
<ion-radio value="cats">Cats</ion-radio><br />
<ion-radio value="turtles">Turtles</ion-radio><br />
<ion-radio value="fish">Fish</ion-radio><br />
</ion-radio-group>
```
This is happening because the value is set before the [value
watcher](c5dd622bbe/core/src/components/radio-group/radio-group.tsx (L34))
has been configured. The event, `ionValueChange`, does not get
[dispatched](c5dd622bbe/core/src/components/radio-group/radio-group.tsx (L37)).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Run `valueChanged()` in `componentDidLoad()`.
- `valueChanged()` function is tied to the [value
watcher](c5dd622bbe/core/src/components/radio-group/radio-group.tsx (L34))
so it will
[dispatch](c5dd622bbe/core/src/components/radio-group/radio-group.tsx (L37))
the `ionValueChange`.
## 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. -->
In our testing, we observed that the issue described below only occurs
when assigning a value to the radio group within the primary content,
such as rendering within the app component template.
When the template is isolated to a route, the value is assigned
correctly. To address this issue, we need to ensure that the watcher is
called after the component has finished loading, allowing the emit to be
dispatched correctly.
Dev build: 7.5.4-dev.11699404450.136700d7
Issue number: #
---------
<!-- 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 Framework uses Jest 27. Previously, this was due to a limitation
of Stencil. As of Stencil v4.7.0, this limitation no longer exists & the
Framework can upgrade to the latest version of Jest.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
There was a top level dependency on `@jest/core` that I could not find
to be used anywhere. This dependency is included in `jest` by default,
and has been removed as a top level/`package.json` dependency.
Otherwise, all jest packages have been upgraded to jest v29. This is two
major version bumps and a switch to the jest-circus runtime (instead of
jest-jasmine2).
## 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
There is some inherent risk of _something_ breaking when someone like me
who doesn't work on this project day-to-day bumps packages. I did this
as a part of testing Jest 29 when implementing its support in Stencil
and thought "Well, why not?". Feel free to reject this PR if you feel
it's not worth the risk/effort at the moment.
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: resolves#28466
---------
<!-- 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/27060 I fixed an
issue where the main title would be visible briefly before the
collapsible large title a) was configured and b) hid the main title. I
accomplished this by using CSS to target
`ion-header[collapse="condense"]`. However, I failed to account for when
the property is not reflected on the host. Some JS frameworks allow the
property to remain on the element but some do not.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- I improved this fix by also targeting the class set on the host. This
class is set regardless of property reflection status.
| main | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/991523da-8549-451b-930f-5df45c2783de"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/149c9546-2d9b-42a2-89f1-a17fa146aee6"></video>
|
## 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.4-dev.11699282935.1db450b0`
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Issue number: resolves#28468
---------
<!-- 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 cancel button in the searchbar used to align with the back button,
but that behavior gradually regressed between Ionic v4 and Ionic v7.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adjusted the padding on the searchbar back button
- Reduced the size of the searchbar back button. It was currently set to
25.6px whereas the `ion-back-button` icon was 24px. This caused the
icons to never align even with 9px. (This should cause a few additional
diffs)
- Added a screenshot test
| v4 | v5 | v6 | v7 | branch |
| - | - | - | - | - |
| 
|
|
|
|
|
Note that in v4 the alignment was slightly off. It was fixed in v5, but
then broke in v6 and remained unchanged in v7 (until now).
## 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.4-dev.11699310489.151b2717`
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
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 safe area for Item Divider would change sides when the direction
changed. e.g., if the safe area padding should be on the left, it would
be on the left when the direction was LTR but would be on the right when
the direction was RTL. It should always be on the left.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The left safe area padding is on the left side of an Item Divider
whether the direction is LTR or RTL.
- The right safe area padding is on the right side of an Item Divider
whether the direction is LTR or RTL.
- Updated LTR and RTL screenshots for item to include an item divider
Similar to #28403 but for Item Divider.
## 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>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.7.0
to 4.7.1.
<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.7.1 (2023-11-06)</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>compiler:</strong> correctly generate CSS rules using
<code>::slotted</code> outside shadow DOM (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4969">#4969</a>)
(<a
href="4fd0ecd17e">4fd0ecd</a>)</li>
<li><strong>compiler:</strong> ignore TS diagnostics on builds where
typedef file changes (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5013">#5013</a>)
(<a
href="2a75b6501f">2a75b65</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/ionic-team/stencil/blob/main/CHANGELOG.md"><code>@stencil/core</code>'s
changelog</a>.</em></p>
<blockquote>
<h2>🍿 <a
href="https://github.com/ionic-team/stencil/compare/v4.7.0...v4.7.1">4.7.1</a>
(2023-11-06)</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>compiler:</strong> correctly generate CSS rules using
<code>::slotted</code> outside shadow DOM (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4969">#4969</a>)
(<a
href="4fd0ecd17e">4fd0ecd</a>)</li>
<li><strong>compiler:</strong> ignore TS diagnostics on builds where
typedef file changes (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5013">#5013</a>)
(<a
href="2a75b6501f">2a75b65</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="ac812d74bc"><code>ac812d7</code></a>
v4.7.1 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5025">#5025</a>)</li>
<li><a
href="b6387a36d2"><code>b6387a3</code></a>
chore(deps): update dependency terser to v5.24.0 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5024">#5024</a>)</li>
<li><a
href="2a75b6501f"><code>2a75b65</code></a>
fix(compiler): ignore TS diagnostics on builds where typedef file
changes (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5">#5</a>...</li>
<li><a
href="9062e1a967"><code>9062e1a</code></a>
refactor(sys): move logger impl to <code>sys/node/logger</code> (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5009">#5009</a>)</li>
<li><a
href="4fd0ecd17e"><code>4fd0ecd</code></a>
fix(compiler): correctly generate CSS rules using <code>::slotted</code>
outside shadow ...</li>
<li>See full diff in <a
href="https://github.com/ionic-team/stencil/compare/v4.7.0...v4.7.1">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>
Issue number: N/A
---------
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When using an `ion-label` as a `label` slot inside of an `ion-input`,
`ion-textarea` or `ion-select` it erroneously flags the input as a
legacy component and ignores the `label-placement`:
<table>
<tr>
<td>
Code
</td>
<td>
Result
</td>
</tr>
<tr>
<td>
<pre lang="html">
<ion-item>
<ion-input label-placement="floating">
<ion-label slot="label">
<ion-icon name="home"></ion-icon>
Slotted Label
</ion-label>
</ion-input>
</ion-item>
<ion-item>
<ion-input label-placement="floating" value="Value">
<ion-label slot="label">
<ion-icon name="person"></ion-icon>
Slotted Label
</ion-label>
</ion-input>
</ion-item>
</pre>
</td>
<td>
<img
src="https://github.com/ionic-team/ionic-framework/assets/6577830/91ef5470-aba4-4bb6-b277-09e2b1a4650c">
</td>
</tr>
</table>
<img width="1005" alt="Screenshot 2023-11-07 at 10 37 43 AM"
src="https://github.com/ionic-team/ionic-framework/assets/6577830/00208625-2bdb-4b60-b7ce-e487dd89c47e">
## What is the new behavior?
Adds `ion-input`, `ion-textarea`, and `ion-select` as components that
can contain a named label slot so it no longer assumes that they are
legacy components.
<table>
<tr>
<td>
Code
</td>
<td>
Result
</td>
</tr>
<tr>
<td>
<pre lang="html">
<ion-item>
<ion-input label-placement="floating">
<ion-label slot="label">
<ion-icon name="home"></ion-icon>
Slotted Label
</ion-label>
</ion-input>
</ion-item>
<ion-item>
<ion-input label-placement="floating" value="Value">
<ion-label slot="label">
<ion-icon name="person"></ion-icon>
Slotted Label
</ion-label>
</ion-input>
</ion-item>
</pre>
</td>
<td>
<img
src="https://github.com/ionic-team/ionic-framework/assets/6577830/75f06c5e-6887-4e8e-8022-264b716b3e62">
</td>
</tr>
</table>
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The "prerelease" script hasn't been used since we switched off our
custom release scripts.
The "test.spec.debug" script doesn't do anything special now because the
`--node-arg` argument has been removed:
```
liamdebeasi@MacBook-Pro core % npx --node-arg=\"--inspect-brk\" stencil test --spec
npx: the --node-arg argument has been removed.
See `npm help exec` for more information
```
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed the "prerelease" and "test.spec.debug" scripts from "core"
## 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. -->
Issue number: resolves#28435
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The item in the last item-sliding still has a border in an inset list.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Item in last item-sliding no longer has a border
I originally only added `ion-item-sliding:last-of-type ion-item` but I
discovered that the original `ion-item:last-child` causes items in
item-sliding where the item is the last element in the item-sliding
container to not have a border, so the original fix was incomplete.
I added comments as to what each line does and why we didn't just do
`ion-item:last-child`.
## 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: Brandy Carney <brandyscarney@users.noreply.github.com>
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
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. -->
<!-- Please describe the current behavior that you are modifying. -->
Sometimes the screenshot gets captured as
when it should be
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Hopefully the screenshot will be more consistent.
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
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 safe area for Item would change sides when the direction changed.
e.g., if the safe area padding should be on the left, it would be on the
left when the direction was LTR but would be on the right when the
direction was RTL. It should always be on the left.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The left safe area padding is on the left side of Item whether the
direction is LTR or RTL.
- The right safe area padding is on the right side of Item whether the
direction is LTR or RTL.
- There's now a screenshot test for left and right padding for both
directions.
Note: There is a separate ticket for updating the safe area padding for
ion-item-divider.
## 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>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Issue number: Resolves#23942
---------
<!-- 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 overlay is created (inserted in the DOM), but not presented, the
scroll gesture is prevented. This behavior comes from the
`connectedCallback` of `ion-backdrop`, where the gesture is prevented as
soon as the backdrop is inserted in the DOM.
This means in situations where a developer creates an overlay, but does
not present it immediately, the user cannot scroll. This is not desired.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Scroll blocking behavior tied to the gesture has been removed from
`ion-backdrop` and implemented into the overlays directly.
- When an overlay is presented, scroll blocking is enabled on the `body`
element (the user cannot scroll on the main content).
- When the last presented overlay is dismissed, scroll blocking is
disabled on the `body` element (the user can scroll on the main
content).
## Does this introduce a breaking change?
- [x] Yes
- [ ] No
`ion-backdrop` no longer prevents scrolling on the main content when the
backdrop is either inserted into the DOM or removed from the DOM.
Developers using Ionic overlays do not need to migrate their
implementations.
Developers with custom overlays using `ion-backdrop` internally can
either use Ionic's gesture controller to disable scrolling when their
overlay is presented/dismissed or can manually add the
`backdrop-no-scroll` Ionic global class to the `body` element.
<!-- 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. -->
---------
Issue number: #28121
---------
<!-- 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. -->
It is not possible to navigate between months when ion-datetime is in
readonly mode. This means that if there are multiple dates selected, the
user cannot browse to view them all.
Also, keyboard navigation is not prevented in `readonly` or `disabled`
mode where it should be.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
When `readonly`:
- Clicking the month-year button changes the month & year in readonly
mode
- Clicking the next & prev buttons changes the month in readonly mode
- Left and right arrow keys change the month in readonly mode
- Swiping/scrolling changes the month in readonly mode
- The selected date does not change when doing any of the above
- You cannot clear the value using keyboard navigation of the clear
button in readonly mode
When `disabled`:
- You cannot navigate months via keyboard navigation of the month-year
button in disabled mode
- You cannot navigate months using keyboard navigation of the previous &
next buttons in disabled mode
- You cannot navigate months via the left and right arrow keys in
disabled mode
- The selected date does not change when doing any of the above
- You cannot clear the value using keyboard navigation of the clear
button in disabled mode
Known bug:
- It is still possible to navigate through dates in `prefers-wheel` when
`disabled`. This bug existed prior to this PR. I created FW-5408 to
track this.
## 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>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: Resolves#28256
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
In the form integrations for Angular and Vue, the value of a range does
not update while the knob is actively being dragged, only when the knob
is released.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The form integrations now update the range's value when the `ionInput`
event fires, rather than `ionChange`.
## 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 wasn't sure how to add reliable automated tests for this behavior. The
difference only applies when actively dragging the knob, and we've had
issues with such gestures being flaky in the past. I did add value
displays to the test apps so the behavior can be manually tested.
Issue number: resolves#28418
---------
<!-- 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. -->
Due to
https://github.com/ionic-team/stencil-ds-output-targets/issues/397,
calling `proxyInputs` for the form controls caused an error to be logged
in developer applications.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated to a version of the Angular output targets with a patch for
this error
- I also excluded the `utils.ts` from all `angular-component-lib`
directories from prettier since it was causing a diff. These changes are
autogenerated so we should not be linting them anyways.
## 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.3-dev.11698340692.18daff2f`
Bumps [@capacitor/core](https://github.com/ionic-team/capacitor) from
5.5.0 to 5.5.1.
<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.5.1</h2>
<h2><a
href="https://github.com/ionic-team/capacitor/compare/5.5.0...5.5.1">5.5.1</a>
(2023-10-25)</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>ios:</strong> CAPWebView config update (<a
href="https://redirect.github.com/ionic-team/capacitor/issues/7004">#7004</a>)
(<a
href="f3e8be0453">f3e8be0</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/ionic-team/capacitor/blob/5.5.1/CHANGELOG.md"><code>@capacitor/core</code>'s
changelog</a>.</em></p>
<blockquote>
<h2><a
href="https://github.com/ionic-team/capacitor/compare/5.5.0...5.5.1">5.5.1</a>
(2023-10-25)</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>ios:</strong> CAPWebView config update (<a
href="https://redirect.github.com/ionic-team/capacitor/issues/7004">#7004</a>)
(<a
href="f3e8be0453">f3e8be0</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="a0f61ed020"><code>a0f61ed</code></a>
Release 5.5.1</li>
<li><a
href="f3e8be0453"><code>f3e8be0</code></a>
fix(ios): CAPWebView config update (<a
href="https://redirect.github.com/ionic-team/capacitor/issues/7004">#7004</a>)</li>
<li>See full diff in <a
href="https://github.com/ionic-team/capacitor/compare/5.5.0...5.5.1">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>
aIssue number: resolves#28388
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
We added a `min-height: 56px` to the input, textarea, and select
components for MD mode. However, these were added for the outline/solid
style inputs to align with the Material Design spec:
https://material-components.github.io/material-components-web-catalog/#/component/text-field
They should not apply to regular inputs in an item. The end result is
inconsistently sized items when used with non-control items.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Non-filled and non-stacked/floating label controls are now have a
minimum height of 44px.
There should be **no changes** to the following types of controls:
1. iOS controls (all variants)
2. MD filled controls
3. MD stacked controls
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.5.2-dev.11697818830.1a33c881`
---------
Co-authored-by: ionitron <hi@ionicframework.com>
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. -->
I forgot to add annotations to tests to indicate the bug fix they are
validating: https://github.com/ionic-team/ionic-framework/pull/28408
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added annotations
## 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. -->
Issue number: resolves#28373
---------
🚨 Reviewers: Please test this on Chrome, Firefox, and Safari
<!-- 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 fix in
1167a9325f
uncovered a WebKit bug where scrolling an element using `scrollIntoView`
during an accelerated transition causes the segment to jump during the
transition. `scrollIntoView` can cause parent elements to also scroll,
and given that the entering view begins outside the viewport, it's
possible this triggered some sort of WebKit bug where it was trying to
scroll the element into view.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated the internal implementation to use `scrollBy` instead of
`scrollIntoView`. `scrollBy` does not attempt to scroll parent elements
which avoids the WebKit issue.
- I also updated the initial scroll to be instant rather than smoothly
scroll. If a segment is added to the DOM, I'd expect it to be added with
the correct scroll position (after the first render that is), so
animating on load seemed like a strange behavior. User interaction will
continue to use smooth scrolling though.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.5.2-dev.11697638908.1f04980a`
Issue number: resolves#28406
---------
<!-- 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/27898 we
updated the radio and checkbox labels to wrap to the next line instead
of truncate. However, we did not consider long words. As a result, long
words run outside of the container.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The radio and checkbox labels now break on words too in addition to
white space characters.
## 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>
Issue number: Internal
---------
## What is the current behavior?
The safe area padding (both left and right) swap sides when the app's
direction changes from LTR to RTL. The `--ion-safe-area-left` should
always apply to the left side of the device and the
`--ion-safe-area-right` should always apply to the right side of the
device.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the tab bar stylesheet to always set `padding-left` and
`padding-right`
- Adds an e2e test for the basic directory which adds screenshots in
both modes/directions for:
- the default tab bar
- a tab bar with safe area left applied
- a tab bar with safe area right applied
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: ionitron <hi@ionicframework.com>
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 would like to swap out usages of the `any`
type for stronger types.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added `ionBackButton` event types to the browser utilities
- Updated menuController to use the `doc` utility instead of `document`
so we can get proper types
- Moved the definitions for back button types out of `interface.d.ts`
and into `hardware-back-button`. `interface.d.ts` still exports these
back button interfaces.
- Updated all `BackButtonEvent` imports inside of `@ionic/core` to
import from the utility file instead of the public interface file.
## 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. -->
Note: This PR was separated from other type updates associated with the
FW-3832 work because I had to modify the implementation of a feature in
Ionic. While I don't expect there to be any functional differences, I
have opted to pull this work out into a separate branch and target a
feature branch to a) reduce the impact of any unintended bugs and b)
make it easier to do a `git bisect` if a bug is introduced.
Issue number: resolves#18487
---------
<!-- 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. -->
Web-based users do not get a scrollbar when:
- alert has a long list of inputs (this also happens on `ion-select`
with the alert interface)
- `ion-select` uses the action-sheet interface and has a long list of
options
This makes it difficult for users to navigate through the options by
forcing them to use their keyboards. Some users may also not be used to
using their keyboards for navigation. Additionally, this can lead to
potential confusion that there are no other options.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Web-based users get a scrollbar when:
- alert has a long list of inputs (this also happens on `ion-select`
with the alert interface)
- `ion-select` uses the action-sheet interface and has a long list of
options
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
The issue was filed for the alert interface but it's also happening on
the action-sheet interface.
Dev build: 7.5.1-dev.11697570585.1774584d
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. -->
Legacy radio has tests that use `Tab` key presses. These tend to flake
at unknown moments and were skipped until a fix can be implemented.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Unable to replicate the flakiness locally or on GitHub. However, it only
fails on Safari so the tests were re-enabled except for Safari.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This only happens on legacy. The legacy form controls will also be
removed in the future. Due to this, these tests will be removed anyways
at that time.
Issue number: resolves#28283
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
`getInputElement()` is used to access the native input. If the component
has yet to render, then the function will return `undefined`. This
happens mostly when using `ref` on React.
```tsx
<IonInput ref={async input => {
const nativeInput = await input.getInputElement();
// nativeInput is undefined
}} />
```
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `getInputElement()` will wait to return once the component is ready.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.5.1-dev.11697488622.175c9183`
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 would like to swap out usages of the any
type for stronger types.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
c529bc23f1
- `scrollToTop` doesn't return anything, so I added the `void` return
type
a96971ad28
- `animation.effect` is a type of
[AnimationEffect](https://developer.mozilla.org/en-US/docs/Web/API/Animation/effect).
One of the more common types of effects is a `KeyframeEffect`. However,
TypeScript doesn't know which specific type of AnimationEffect we are
using, so I cast `animation.effect` as KeyframeEffect where appropriate.
- I also added `!` to places where we know the effect and other
properties are always defined (since they run after the web animation
has been constructed)
- Added stronger types to the internal to/from/fromTo functions (the
public facing type improvements are in
https://github.com/ionic-team/ionic-framework/pull/28334)
fdaf550059
- `getRootNode` can return multiple types of objects, so I cast it to
the specific types that we work with in `isFocused`.
46a6efa510
- Added the "Animation" type and resolved related errors once we had
stronger types
a7cb9a5685
- Made heavier use of the `T` generic
- Once we know `node` is an Element (`nodeType === 1`) we manually cast
the element as `T`
6a9d1f095d
- The focus visible utility is an internal utility, but it was lacking
an interface, so I added one.
90b64c2de5
- Removed unneeded HTMLElement casting
- Added `!` since we can assume the selected elements are defined with
the refresher
- Added documentation as to why casting `referencEl.style` as `any` is
something we need to keep.
3a084caf83
- Avoided the Event naming collision by using globalThis
## 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. -->
Note: This PR contains only type changes. Changes the required updates
to the implementation of Ionic are pulled out into separate PRs and
target a minor release branch to minimize risk.
---------
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: resolves#28393
---------
<!-- 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. -->
Our animation library's value coercion is not reset before developer
`onFinish` callbacks fire. This can lead to developers getting incorrect
state when querying for `getDuration` or `getDirection`
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Internal value coercion is reset before developer `onFinish` callbacks
fire.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
I'm putting this in a minor release to minimize risk. This is not a
breaking change, but there may be developers relying on this broken
behavior to implement a workaround.
<!-- 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. -->
Note: This change is needed for the toast swipe to dismiss feature
(FW-2004)
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 calculating the fab's horizontal position, the safe area is taken
into account. However, which safe area side is applied changes depending
on whether the document's direction is LTR or RTL. This is incorrect as
the left safe area padding will always be on the left side regardless of
direction, and vice versa.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The left safe area is always applied to the fab's `left` position, and
vice versa.
## 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>
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
This project has several unused Sass variables still in the code base.
The team would like to remove these.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed unused Sass variables
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
The original scope of this ticket was for checkbox only, but many other
components had unused sass variables, so I decided to tackle everything
all at once.
Since these variables are not used anywhere:
1. The build should pass
2. There should be no screenshot diffs
Issue number: resolves#18683, resolves#15538, resolves#22341
---------
<!-- 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. -->
Menus in a split pane are hidden when a second split pane is
mounted/made visible. This is because the `onSplitPaneChanged` callback
does not take into account whether the it is a child of the split pane
that emitted `ionSplitPaneVisible`.
When split pane 2 is shown, that causes the menu is split pane 1 to
hide. When split pane 1 is shown, the menu inside of it _is_ shown.
However, since split pane 2 is then hidden that component also emits
`ionSplitPaneVisible`, causing the menu inside of split pane 1 to hide.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Menus are only hidden when its parent split pane changes visibility
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.5.1-dev.11697568647.1ac87d08`
---------
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
