Issue number: internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
There are a few tests that were disabled due to being flaky from
gestures.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
While fixing the tests, I found a bug that the scroll was never being
disabled on scroll. Additionally, we were not taking into account that a
custom scroll target could be used so it was never disabled either.
- Fixed the flaky tests.
- Content doesn't scroll when range is being dragged.
- Content can be either `ion-content` or a custom scroll target.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
[Preview for
`ion-content`](https://ionic-framework-git-fw-2873-ionic1.vercel.app/src/components/range/test/scroll)
[Preview for custom scroll
target](https://ionic-framework-git-fw-2873-ionic1.vercel.app/src/components/range/test/scroll-target)
How to test:
1. Open either of the previews
2. Render the screen with the device simulator from the browser
3. Verify that you can scroll the page
4. Drag the range but don't let go
5. Verify that you cannot scroll the page
6. Repeat steps 2-5 with the other preview
Issue number: resolves#29669
---------
## What is the current behavior?
Setting `value` to an empty string on `<ion-datetime>` renders a May
2021 calendar:
```html
<ion-datetime value=""></ion-datetime>
```
## What is the new behavior?
Show the month and time for today's date when value is an empty string.
This matches how a native `input` with `type="datetime-local"` works.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
This can be tested by removing my fix in `datetime.tsx` and running the
e2e test for Datetime:
```bash
npm run test.e2e src/components/datetime/test/basic/datetime.e2e.ts
```
The `should display today's date and time when value is an empty string`
test should fail.
Alternatively, you can add a datetime with `value=""` and see the
calendar before & after my fix.
---------
Co-authored-by: Tanner Reits <47483144+tanner-reits@users.noreply.github.com>
Issue number: resolves#29792
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When the user drags the range knob (most easily reproduced in fullscreen
mode) and the gesture emits a current x position of `0`, the range
incorrectly emits a value of `NaN`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `ion-range` does not emit `NaN` and instead emits the correct range
value for the knob
## Does this introduce a breaking change?
- [ ] Yes
- [ ] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
- Remove the default property value in favor of setting the default style in the CSS to match the other form controls.
- Updates the e2e test for `label` to remove the explicit width & add more examples with long labels and a default select without justify set.
- Change the radio's `display` property to `block` when the `justify` or `alignment` property is set.
- Set the default `justify-content` style to `space-between` so that a radio with `width: 100%` set without `justify` or `alignment` set will still have the same default
- Modifies the `label-placement` e2e test to remove the explicit width as setting the property will make them full-width
- Adds two examples to the `label-placement` e2e test of labels that do not have `justify` set but use `width: 100%` to ensure they are working as expected without it
- Adds one example to the `label-placement` e2e test of a long label that uses `justify` to ensure it still wraps properly
- Change the toggle's `display` property to `block` when the `justify` or `alignment` property is set.
- Set the default `justify-content` style to `space-between` so that a toggle with `width: 100%` set without `justify` or `alignment` set will still have the same default
- Set the default `align-items` style to `center` so that a toggle with `width: 100%` and `label-placement="stacked"` set without `justify` or `alignment` set will still have the same default
- Modifies the `label` e2e test to remove the explicit width as setting the property will make them full-width
- Adds two examples to the `label` e2e test of labels that do not have `justify` set but use `width: 100%` to ensure they are working as expected without it
- Adds one example to the `label` e2e test of a long label that uses `justify` to ensure it still wraps properly
- Change the checkbox's `display` property to `block` when the `justify` or `alignment` property is set.
- Set the default `justify-content` style to `space-between` so that a checkbox with `width: 100%` set without `justify` or `alignment` set will still have the same default
- Modifies the `label` e2e test to remove the explicit width as setting the property will make them full-width
- Adds two examples to the `label` e2e test of labels that do not have `justify` set but use `width: 100%` to ensure they are working as expected without it
## What is the current behavior?
The Playwright test for
`core/src/components/menu/test/safe-area/menu.e2e.ts` started to fail
after introducing the following patch to Stencil:
[#5926](https://github.com/ionic-team/stencil/pull/5926). After
debugging the situation it turns out that the test overwrites the first
style in the `<head />` tag which turns out to be a component style that
caused all screenshot test to fail.
## What is the new behavior?
Overwrite the existing style by adding a new style tag at the bottom of
the page.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
n/a
Issue number: N/A
---------
## What is the current behavior?
Setting a custom `role` on the `ion-content` element does not work.
## What is the new behavior?
- Inherit attributes for the content element which allows a custom
`role` property to be set
- Adds e2e tests for content, header, and footer verifying that the
proper roles are assigned
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
To test this PR:
1. Switch to the branch and navigate to the `core/` directory
1. Make sure to run `npx playwright install` if it has not been updated
recenly
1. Run `npm run test.e2e src/components/content/test/a11y/`
1. Verify that the tests pass
1. Remove my fix in `core/src/components/content/content.tsx` and run
the test again
1. Verify that the `should allow for custom role` tests fail
Issue number: N/A
---------
## What is the current behavior?
Item includes `ion-anchor` in the list of clickable components it
queries. This component was renamed to `ion-router-link` in
[v5](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v5.md#anchor).
## What is the new behavior?
Updates the reference to `ion-anchor` to `ion-router-link` in
`ion-item`.
## 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. -->
Ionic Framework has a set of custom lint assertions to avoid creating
flaky Playwright tests by forgetting to await a promise. However the
`click` method was not included in the original list of methods to
check.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Developers will receive a lint error when forgetting to await click
methods from Playwright
- Resolves existing tests where this lint issue was present
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: resolves#29712
---------
<!-- 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?
In every type of overlay, the auto incremented overlay id is overwriting
any id set in htmlAttributes.
## What is the new behavior?
The id in htmlAttributes now takes precedence.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Issue number: resolves#29704
---------
<!-- 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?
Setting the id of an alert via htmlAttributes doesn't work due to it
being overwritten by the overlay id.
## What is the new behavior?
Setting the id of an alert via htmlAttributes works.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
First time PR, long time fan. Please let me know if I missed any of the
contributing guidelines, happy to change anything!
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 test page has the wrong title text.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated the text to reflect the purpose of the page.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
N/A
Issue number: resolves#29640
---------
## What is the current behavior?
(Angular) If a list inside of a popover contains a disabled item and is
included in the following way:
```html
<ion-list>
<ion-item [button]="true">Option 1</ion-item>
<ion-item [button]="true" [disabled]="true">Option 2</ion-item>
<ion-item [button]="true">Option 3</ion-item>
</ion-list>
```
when you try to navigate using the arrow down keys, it will stop at the
disabled item instead of continuing over it.
Note that changing the item to the following will work:
```html
<ion-item [button]="true" disabled="true">Option 2</ion-item>
```
## What is the new behavior?
Reflect the `disabled` property in the item so that when items are
queried in the popover, the arrow down key skips over the disabled item.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
This can be tested in the Angular test app by following the
documentation here:
https://github.com/ionic-team/ionic-framework/blob/main/docs/angular/testing.md
Removing my fix in `core`, then running `npm run build` and re-syncing
the test app should reproduce the problem.
Issue number: resolves#18714
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When the `ion-content` has the fullscreen attribute, the `ion-refresher`
will be hidden while refreshing. This can be seen by dragging far enough
to trigger it to snap back and refresh.
The refresher ends up being hidden behind the background content
element.
https://github.com/ionic-team/ionic-framework/assets/13530427/27b5393b-dd31-44a5-b872-97709e3a0980
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Set the `--offset-top` to `0px` for the background content element.
This reflects the same behavior of when the content is not fullscreen.
By setting this to `0px`, the refresher is visible while refreshing.
- Added a private prop within refresher to keep track of whether
`ion-content` is `fullscreen` or not.
- Added test.
Originally, I was going to update the `pullMin` and `pullMax` as agreed
on from the investigation ticket. However, it ended up adding too much
space between the refresher and the content. This is the reason why I
decided to modify the background background instead. Otherwise, it
wouldn't mimic the behavior when content doesn't have the `fullscreen`
attribute.
Example of what the spacing looked like:
https://github.com/ionic-team/ionic-framework/assets/13530427/389cea62-48c1-4464-be47-44bc3b6c0315
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
[Preview](https://ionic-framework-git-rou-4950-ionic1.vercel.app/src/components/refresher/test/fullscreen)
How to test:
1. Navigate to the preview page
2. Use the browser's simulator to chose an iOS device (might need to
refresh the page)
3. Drag the screen down
4. Verify that the refreshing text is shown
5. Use the browser's simulator to chose an Android device (might need to
refresh the page)
6. Drag the screen down
7. Verify that the refreshing text is shown
Issue number: resolves#29479
---------
<!-- 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. -->
If an application includes a malformed URI, an Ionic Framework can
"crash" due to an uncaught exception in parsing the URI for the Ionic
config.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Handle the malformed URI fallback if the config cannot be determined
- Added unit tests for this case
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
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 tests for picker were failing because the focus was not set to the
appropriate element and because Firefox would focus on an element it
shouldn't be.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adjusted the `setFocus()`
- Skipped the `picker-opts` in the tab order
- Removed `skip()` from the tests
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
N/A
---------
Co-authored-by: Sean Perkins <sean.perkins@outsystems.com>
Co-authored-by: Brandy Carney <brandyscarney@gmail.com>
Code checks were passing even though these tests were failing because
the docker script was not exiting with the correct exit code. This PR
fixes the tests so that they pass, then PR
https://github.com/ionic-team/ionic-framework/pull/29425 can be merged
so CI will properly fail again when tests fail.
---------
Co-authored-by: Sean Perkins <sean.perkins@outsystems.com>
Issue number: internal
---------
## What is the current behavior?
Several screenshot images were not removed when their e2e test was.
## What is the new behavior?
I ran the following command in `ionic-framework/core` to find all
`*.png` files that did not have a parent `*.e2e.ts` file:
```bash
find ./src/components -iname '*.png' -exec bash -c 'cd "${1%/*}";
shopt -s nullglob; files=(../*.e2e.ts);
((${#files[@]} == 0)) && echo "$1"' _ {} \;
```
I have deleted all of these images.
Co-authored-by: Brandy Carney <brandy@ionic.io>
Issue number: resolves#29442
---------
<!-- 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 state does not stay consistent when the data used to render the
radios are updated.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The state updates after the component loads, this allows the value to
be set after the radio is rendered.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: 8.1.1-dev.11714760012.1eab947e
---------
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Remove a missed `!default` flag in the themes directory and update the
Sass variable guidelines docs to eliminate the `!default` flag from the
code examples, except for in the historic usage section which includes
examples from previous versions where the `!default` flag was used.
---------
Co-authored-by: Brandy Carney <brandy@ionic.io>
Issue number: resolves#29234
---------
<!-- 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 certain scenarios, such as in Angular where the property binding is
set a few frames after the element is rendered, the `ionStyle` event
from `ion-select` can be emitted before `ion-item` has registered an
event listener.
This results in situations like setting the `ion-select` as initially
disabled can cause the item to not treat the element as not interactable
(receives pointer events).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Emits the `ionStyle` event when the `ion-select` is rendered.
- `ion-item` consistently detects the state of `ion-select` and applies
the appropriate styles
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Forked reproduction and dev-build available here:
https://github.com/ionic-team/ionic-framework/issues/29234#issuecomment-2091866453
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?
The `ion-button` component is used in several tests to navigate or show
overlays. This causes screenshot diffs in unrelated tests any time the
UI of the `ion-button` is updated.
## What is the new behavior?
Removes the `ion-button` elements from unrelated tests.
Did not remove the `ion-button`s from the following tests:
- All `ion-button`s in an `ion-buttons` component
- An `ion-button` inside of a menu
- breadcrumbs/test/basic (uses a clear button in a list header, needs to
be moved)
- input/test/slot
- item/test/buttons
- item/test/colors
- item/test/dividers
- item/test/inputs
- item/test/media
- list-header/test/basic
- ripple-effect/test/basic
- router/test/basic
- router/test/guards
- router-outlet/test/basic
- select/test/slot
- textarea/test/slot
Updates the icon/basic test to use the right icon names by comparing
against the v3 names: https://ionicframework.com/docs/v3/ionicons/
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#29414
---------
<!-- 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 Angular when the segment buttons are dynamically rendered, the
segment will not set the active visual state for the selected segment
after the re-render.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- In Angular the segment will set the active item visually when the
items are dynamically changed
Previously this PR:
https://github.com/ionic-team/ionic-framework/pull/28837 aimed to
resolve https://github.com/ionic-team/ionic-framework/issues/28816. I
have confirmed that the modified approach in the dev-build fixes#29414
and #28816 and the previous change is no longer needed.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev-build: `8.0.2-dev.11714411675.10f48160`
