A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
fix(many): dynamic label support for modern form controls (#27156)
<!-- 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`. S
Sean Perkins committed
30b548b167883f0a657b0410d3bcf76dbb6895e0
Parent: 6ffbdbb
Committed by GitHub <noreply@github.com>
on 4/17/2023, 8:30:19 PM