fix(item): wrap elements and label contents when the font size increases or the elements do not fit (#28146)

1) Wraps the label text and other content in an item when there is not enough room for everything to fit, instead of truncating the label with an ellipsis. Does not apply to items containing legacy inputs.
2) Passes the legacy property up to item from checkbox, input, radio, range, select, textarea and toggle. Item adds classes for all of these and does not wrap its contents if that class exists. If a developer is using a legacy input without the legacy property on it then they will need to add the legacy property to prevent the wrapping.
3) If a developer does not want the text to wrap for labels in modern items, the `ion-text-nowrap` class can be added to the label.

core/src/components/toggle/test/legacy/basic/index.html

@@ -29,47 +29,61 @@
         <ion-list>
           <ion-item>
             <ion-label>Orange</ion-label>
-            <ion-toggle id="orange" slot="start" name="orange"></ion-toggle>
+            <ion-toggle legacy="true" id="orange" slot="start" name="orange"></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Apple</ion-label>
-            <ion-toggle slot="start" name="apple" checked></ion-toggle>
+            <ion-toggle legacy="true" slot="start" name="apple" checked></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Banana</ion-label>
-            <ion-toggle slot="start" name="banana" checked class="toggle-part"></ion-toggle>
+            <ion-toggle legacy="true" slot="start" name="banana" checked class="toggle-part"></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Cherry, disabled</ion-label>
-            <ion-toggle slot="start" color="danger" name="cherry" disabled></ion-toggle>
+            <ion-toggle legacy="true" slot="start" color="danger" name="cherry" disabled></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Grape, checked, disabled</ion-label>
-            <ion-toggle slot="start" id="grapeChecked" value="grape" name="grape" checked disabled></ion-toggle>
+            <ion-toggle
+              legacy="true"
+              slot="start"
+              id="grapeChecked"
+              value="grape"
+              name="grape"
+              checked
+              disabled
+            ></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
-            <ion-toggle slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
+            <ion-toggle legacy="true" slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Strawberry, (ionChange) checked="true"</ion-label>
-            <ion-toggle slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
+            <ion-toggle
+              legacy="true"
+              slot="start"
+              color="light"
+              (ionChange)="strawberryChange($event)"
+              checked="true"
+            ></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
-            <ion-toggle slot="end" color="danger" checked></ion-toggle>
+            <ion-toggle legacy="true" slot="end" color="danger" checked></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Checkbox right side</ion-label>
-            <ion-toggle slot="end" checked></ion-toggle>
+            <ion-toggle legacy="true" slot="end" checked></ion-toggle>
           </ion-item>
 
           <ion-item>
@@ -79,12 +93,17 @@
 
           <ion-item>
             <ion-label>Custom</ion-label>
-            <ion-toggle slot="start" style="--border-radius: 0px; --handle-border-radius: 0px" checked></ion-toggle>
+            <ion-toggle
+              legacy="true"
+              slot="start"
+              style="--border-radius: 0px; --handle-border-radius: 0px"
+              checked
+            ></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Stop Immediate Event Propagation</ion-label>
-            <ion-toggle slot="start" checked id="eventPropagation"></ion-toggle>
+            <ion-toggle legacy="true" slot="start" checked id="eventPropagation"></ion-toggle>
           </ion-item>
         </ion-list>
 

core/src/components/toggle/toggle.tsx

@@ -223,6 +223,8 @@ export class Toggle implements ComponentInterface {
     if (this.legacyFormController.hasLegacyControl()) {
       this.ionStyle.emit({
         'interactive-disabled': this.disabled,
+        // TODO(FW-2990): remove this
+        legacy: !!this.legacy,
       });
     }
   }