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: 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: resolves#27061
---------
<!-- 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. -->
Textarea does not accept custom HTML labels
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Textarea accepts custom HTML labels as an experimental feature. We
marked this as experimental because it makes use of "scoped slots" which
is an emulated version of Web Component slots. As a result, there may be
instances where the slot behavior does not exactly match the native slot
behavior.
Note to reviewers: This is a combination of previously reviewed PRs. The
implementation is complete, so feel free to bikeshed.
## 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. -->
Docs PR: https://github.com/ionic-team/ionic-docs/pull/3001
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#27061
---------
<!-- 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. -->
Input does not accept custom HTML labels
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Input accepts custom HTML labels as an experimental feature. We marked
this as experimental because it makes use of "scoped slots" which is an
emulated version of Web Component slots. As a result, there may be
instances where the slot behavior does not exactly match the native slot
behavior.
Note to reviewers: This is a combination of previously reviewed PRs. The
implementation is complete, so feel free to bikeshed.
## 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. -->
Docs PR: https://github.com/ionic-team/ionic-docs/pull/2997
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- 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. -->
Developers that are using Ionic v7 are experiencing an issue where
implementations that are intended to use the modern control syntax will
render with the legacy syntax and a warning will be displayed.
The issue is most easily reproduced by not assigning a label to the
control and then asynchronously assigning a label after a duration.
Angular example:
```html
<ion-item>
<ion-input [label]="label"></ion-input>
</ion-item>
```
```ts
@Component({ ... })
export class MyComponent {
@Input() label?: string; // initially unset
ngOnInit() {
setTimeout(() => this.label = 'Hello world', 500);
}
}
```
<!-- Issues are required for both bug fixes and features. -->
Issue URL: resolves#27085
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Form controls that do not have a decorative label or
`aria-label`/`aria-labelledby` assigned, will default render as modern
controls.
- Legacy form implementations that render an `<ion-label>` within the
item, will continue to render with the legacy template and a warning
will be displayed in the console.
- Modern form syntax supports dynamically set labels
## 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. -->
Legacy implementations that do not have a decorative label and do not
specify `aria-label` on the control, will be upgraded to the modern
syntax.
For example:
```html
<ion-item>
<ion-input></ion-input>
</ion-item>
```
Developers that do not want to update to the modern syntax yet should
add the `legacy="true"` attribute to their form control.
## 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.0.2-dev.11681157690.1060bc7f`
When migrating the range tests to modern syntax, I observed a visual
clipping issue. This is being addressed in:
https://github.com/ionic-team/ionic-framework/pull/27188. This PR simply
adds the legacy flag so that screenshots are the same as `main`.
resolves#25570, resolves#23213
BREAKING CHANGE:
The `--background` and `--background-checked` variables have been renamed to `--track-background` and `--track-background-checked`, respectively.
