Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Migrates the test infrastructure to use `palettes` instead of `themes`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This **does not** change where the light/dark/high contrast styles live
or how they are consumed in the test infra. That work is done here:
https://github.com/ionic-team/ionic-framework/pull/29149
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: resolves#29139
---------
<!-- 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 implementing
https://github.com/ionic-team/ionic-framework/pull/28997 we did not
consider the case where a Toast could be presented. When presenting a
Toast after presenting a Modal the linked change causes the Modal to be
hidden from screen readers.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- If the top-most overlay is a Toast then the closest non-Toast overlay
is also not hidden from screen readers.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.7.5-dev.11710260658.1fc29a6c`
---------
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@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. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
the stencil team has been working on fixing multiple issues with slots
elements in the stencil code base. to make these changes backwards
compatible and communicate that they were volatile, we added two
configuration flags for these fixes that were prefixed with the word
"experimental".
now that the effort to provide these fixes has largely solidified, the
features behind these flags are slightly less volatile. while the
"experimental" aspect still technically holds true, we've requested
the Framework team to enable these flags in a v8 beta. the stencil
team expects these flags to be set to `true` by default in stencil
v5, which ought to help prepare for future migrations the ionic
framework has to undergo.
Previously, Stencil would allow content to project through to a
component even when a slot was not present. However, with the changes in
`extras.experimentalScopedSlotChanges`, this behavior was changed to
hide elements without a destination slot - matching the behavior of a
shadow encapsulated component.
As such, elements projected through the `ion-label` or `ion-buttons`
components would no longer be visible in rendered output.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
This commit adds an explicit `slot` tag to components in core leveraging
"scoped" encapsulation with no rendered content (i.e. elements with only
a `Host` tag and styles).
`subtree` was added to a mutation observer.
This fixes an issue with the `ion-input` component not re-rendering in
some cases when using the label slot functionality.
HTML element patches in Stencil that are enabled by the
`experimentalSlotFixes` flag result in DOM manipulations that won't
trigger the current mutation observer configuration and callback.
## 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
Would you like us to update the commit message to include the `BREAKING
CHANGE:` comment? Unsure of the actual impact on end users here.
Similarly, would you like us to update the commit message here from
`chore()` to something else?
<!-- 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: Tanner Reits <47483144+tanner-reits@users.noreply.github.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: Tanner Reits <tanner@ionic.io>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Issue number: resolves#29114
---------
<!-- 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 event types for `ion-nav` were not correctly applied to the angular
component wrapper.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `ionNavWillChange` and `ionNavDidChange` event types are added to
`ion-nav` component wrapper in Angular.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev-build: `7.7.5-dev.11709823131.1d3df428`
Testing:
- Open reproduction on original issue
- Observe: Type errors for missing event properties
- Install dev-build
- (May need to reload)
- Observe: Type errors are resolved
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. -->
N/A
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Code reproductions are now required for all new issue reports. The
description around a reproduction and how developers can create one has
been adjusted.
- We only support Ionic v7 to LTS at this point in time. Sending
developers to a readonly repository where they cannot file issues
doesn't add any value. I've updated the description and link to the
relevant support page and enterprise offering.
## 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. -->
Issue number: internal
---------
## What is the current behavior?
In Ionic Framework v7, we [simplified the form control
syntax](https://ionic.io/blog/ionic-7-is-here#simplified-form-control-syntax),
eliminating the requirement to place form controls inside of an
`ion-item`. We ensured backwards compatibility by introducing a `legacy`
property for the form controls and keeping, but deprecating, the
following CSS variables on item:
```css
--highlight-color-focused
--highlight-color-invalid
--highlight-color-valid
--highlight-height
```
While this was supported in v7, console warnings were logged to notify
developers that they needed to update to the modern syntax if they were
using form controls in an item for the best accessibility experience.
## What is the new behavior?
Removes the `--highlight-color-focused`, `--highlight-color-invalid`,
`--highlight-color-valid`, and `--highlight-height` variables from item.
## Does this introduce a breaking change?
- [x] Yes
- [ ] No
Steps taken to mitigate this breaking change:
1. Developers have had console warnings when using the legacy syntax
since the v7 release and the variables were marked as `deprecated`.
2. The removal of these CSS variables has been documented in the
Breaking Changes document with a link to the migration guides for the
affected form controls.
BREAKING CHANGE:
The following CSS variables have been removed from item:
`--highlight-height`, `--highlight-color-focused`,
`--highlight-color-valid`, and `--highlight-color-invalid`. These
variables were used on the bottom border highlight of an item when the
form control inside of that item was focused. The form control syntax
was [simplified in
v7](https://ionic.io/blog/ionic-7-is-here#simplified-form-control-syntax)
so that inputs, selects, and textareas would no longer be required to be
used inside of an item.
If you have not yet migrated to the modern form control syntax,
migration guides for each of the form controls that added a highlight to
item can be found below:
- [Input migration
documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax)
- [Select migration
documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax)
- [Textarea migration
documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax)
The highlight variables should then be moved from the item to the form
control:
```diff
- ion-item {
+ ion-input,
+ ion-textarea,
+ ion-select {
--highlight-color-focused: purple;
--highlight-color-valid: blue;
--highlight-color-invalid: orange;
--highlight-height: 6px;
}
```
> [!NOTE]
> The input and textarea components are scoped, which means they will
automatically scope their CSS by appending each of the styles with an
additional class at runtime. Overriding scoped selectors in CSS requires
a [higher
specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
selector. Targeting the `ion-input` or `ion-textarea` for customization
will not work; therefore we recommend adding a class and customizing it
that way.
---------
Co-authored-by: Sean Perkins <sean@ionic.io>
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. -->
`ion-menu` currently accepts any `string` to the `type` property, even
though only `overlay`, `push` and `reveal` are only supported.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds more explicit types to the `type` property on `ion-menu`
## 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. -->
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
In v7, using the legacy syntax, the height of the highlight on an item
could be adjusted using the `--highlight-height` variable. This variable
was not added to input and therefore would not work using the modern
syntax.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Adds the `--highlight-height` variable to `ion-input`, `ion-textarea`
and `ion-select` so that developers can customize this height in `md`
mode. Since the highlight element is not added for `ios` mode, this
variable won't do anything for `ios`. Note that this diverges from the
v7 behavior, where setting `--highlight-height` enabled the highlight
for `ios`. A design document outlining this has been proposed here:
https://github.com/ionic-team/ionic-framework-design-documents/pull/252
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
The cache for the `next` tag is not cleared on release. As a result, the
Ionic 8 playgrounds break since the entry point is cached. The cached
entry point references JS chunks that no longer exist.
BREAKING CHANGE:
- The `helper` slot has been removed. Developers should use the `helperText` property on `ion-input` and `ion-textarea`.
- The `error` slot has been removed. Developers should use the `errorText` property on `ion-input` and `ion-textarea`.
- Counter functionality has been removed including the `counter` and `counterFormatter` properties. Developers should use the properties of the same name on `ion-input` and `ion-textarea`.
- The `fill` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`.
- The `shape` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`.
Issue number: resolves#28487
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
There are two behaviors that need to be addressed.
1. The range value is updated when the gesture `onStart` event is fired.
This can lead to the values being accidentally updated when the user is
scrolling on the view.
The user might tap on the range to scroll on the view, but the range
value is updated instead.
2. The component prevents the view from scrolling while the user has
touched any part of the range.
The user might want to scroll and they happen to touch the range. This
can lead to the user feeling disoriented because they can't scroll on
the view anymore.
These behaviors do not follow the native behavior of mobile devices.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The range value is updated on touch end or when the knob is being
dragged.
- The view can be scrolled while the user is not dragging the knob.
- A new variable `isScrollingView` is used to determine if the user is
scrolling on the view regardless of whether the user is dragging the
knob or not. This determines what logic to apply.
- The `pressedKnob` variable is no longer being set in the `onStart`
event. It is now being set in the `onMove` and `onEnd` events. (the
reason behind this can be found within the newly added comments)
- The `initialContentScrollY` variable is no longer being set in the
`onStart` event. It is now being set in the `onMove` event. (the reason
behind this can be found within the newly added comments)
I did not change the behavior of the range when the user is dragging the
knob. The view should not scroll while the user is dragging the knob.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
The new behavior aligns with the native mobile devices.
Issue number: resolves Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
We are not ever explicitly setting `aria-checked`. For checked and
unchecked states (i.e. `true` and `false` for aria-checked), we don't
need to set `aria-checked` because an input with a type of 'checkbox'
has built-in semantics making `aria-checked` redundant.
However, when the checkbox is in an indeterminate state, `aria-checked`
should have a value of 'mixed'. We are not currently ever setting it to
'mixed'. See
[MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked#description)
for more details.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The checkbox's `aria-checked` has a value of 'true' when it is checked
- The checkbox's `aria-checked` has a value of 'false' when it is
unchecked
- The checkbox's `aria-checked` has a value of 'mixed' when it is
indeterminate
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
resolves#21982
BREAKING CHANGE:
- Item no longer automatically delegates focus to the first focusable element. While most developers should not need to make any changes to account for this update, usages of `ion-item` with interactive elements such as form controls (inputs, textareas, etc) should be evaluated to verify that interactions still work as expected.
Issue number: N/A (see below)
---------
<!-- 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. -->
Mike found an issue while testing the Ionic 8 beta where there's a
flicker when presenting a picker in a modal on iOS. [We've seen this
issue
before](de13633a18/core/src/utils/forms/notch-controller.ts (L135-L144)),
and the reason why it's happening is there's a quirk in WebKit where the
IntersectionObserver callback is fired _after_ an accelerated animation
completes given a particular IO configuration.
The end result is there's a delay before each picker column is scrolled
to the correct place.
In particular, the modal enter animation on iOS is an accelerated
animation, and we use an IO to control when the picker columns [should
scroll their active options into
view](60056643a9/core/src/components/picker-column/picker-column.tsx (L107)).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The root of the intersection observer is now the parent picker element
which avoids the WebKit quirk.
| `feature-8.0` | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/7478512b-a691-405e-aafa-e9e377fc47ac"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/5092e050-733a-4965-8f16-317d251af46a"></video>
|
## 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: `8.0.0-dev.11709226349.179192de`
Note: Given that this bug is due to a WebKit quirk and is
timing-related, I did not add a test.
The team discussed these utilities for some upcoming features work. This
PR reflects some of the things I talked about during the discussion for
future reference.
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Issue number: resolves#27606
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Certain attributes are not be inherited to the inner searchbar.
Developers need control over these attributes to provide important
context to users for things like language and text direction.
Additionally, being able to control things like autocapitalize,
maxlength, and minlength can help improve the user experience by a)
guiding what should be entered into an input and b) removing
autocapitalize where it's not appropriate.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added autocapitalize, maxlength, and minlength properties
- lang and dir are global attributes, so adding them as properties will
cause issues. However, developers can still set them as attributes and
they will be inherited to the native `input` element. We also watch them
so any changes to the attributes are also inherited to the native
`input`.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Note: We expanded the scope of this work to also include input and
textarea, and this work will be handled separately. However, the
original request was only for searchbar so that's why I associated this
PR with the linked issue.
Dev build: `7.7.3-dev.11709159644.114cd8b1`
