fix(many): dynamic label support for modern form controls

[sean-perkins]

What is the current behavior?

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:

<ion-item>
  <ion-input [label]="label"></ion-input>
</ion-item>

@Component({ ... })
export class MyComponent {
  @Input() label?: string; // initially unset

  ngOnInit() {
    setTimeout(() => this.label = 'Hello world', 500);
  }
}

Issue URL: resolves #27085

What is the new behavior?

• 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
• No

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:

<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

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: #27188. This PR simply adds the legacy flag so that screenshots are the same as main.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[liamdebeasi]

There are quite a few tests using the legacy syntax that should be using the modern syntax. Is this intentional? My understanding of #27199 is this only impacts ranges used inside of ion-item, but these impacted ranges are not being used in an item.