refactor(toggle): remove legacy property and support for legacy syntax (

#29037)

BREAKING CHANGE:

The `legacy` property and support for the legacy syntax, which involved placing an `ion-toggle` inside of an `ion-item` with an `ion-label`, have been removed from toggle. For more information on migrating from the legacy toggle syntax, refer to the [Toggle documentation](https://ionicframework.com/docs/api/toggle#migrating-from-legacy-toggle-syntax).

BREAKING.md

@@ -26,6 +26,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Progress bar](#version-8x-progress-bar)
   - [Select](#version-8x-select)
   - [Textarea](#version-8x-textarea)
+  - [Toggle](#version-8x-toggle)
 
 <h2 id="version-8x-browser-platform-support">Browser and Platform Support</h2>
 
@@ -184,3 +185,7 @@ For more information on styling toast buttons, refer to the [Toast Theming docum
 <h4 id="version-8x-textarea">Textarea</h4>
 
 - The `legacy` property and support for the legacy syntax, which involved placing an `ion-textarea` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy textarea syntax, refer to the [Textarea documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax).
+
+<h4 id="version-8x-toggle">Toggle</h4>
+
+- The `legacy` property and support for the legacy syntax, which involved placing an `ion-toggle` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy toggle syntax, refer to the [Toggle documentation](https://ionicframework.com/docs/api/toggle#migrating-from-legacy-toggle-syntax).

core/api.txt

@@ -1514,7 +1514,6 @@ ion-toggle,prop,disabled,boolean,false,false,false
 ion-toggle,prop,enableOnOffLabels,boolean | undefined,config.get('toggleOnOffLabels'),false,false
 ion-toggle,prop,justify,"end" | "space-between" | "start",'space-between',false,false
 ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
-ion-toggle,prop,legacy,boolean | undefined,undefined,false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
 ion-toggle,prop,value,null | string | undefined,'on',false,false

core/src/components.d.ts

@@ -3223,10 +3223,6 @@ export namespace Components {
           * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
         "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
-        /**
-          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
-         */
-        "legacy"?: boolean;
         /**
           * The mode determines which platform styles to use.
          */
@@ -4605,7 +4601,6 @@ declare global {
         "ionChange": ToggleChangeEventDetail;
         "ionFocus": void;
         "ionBlur": void;
-        "ionStyle": StyleEventDetail;
     }
     interface HTMLIonToggleElement extends Components.IonToggle, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonToggleElementEventMap>(type: K, listener: (this: HTMLIonToggleElement, ev: IonToggleCustomEvent<HTMLIonToggleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -8032,10 +8027,6 @@ declare namespace LocalJSX {
           * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
         "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
-        /**
-          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
-         */
-        "legacy"?: boolean;
         /**
           * The mode determines which platform styles to use.
          */
@@ -8056,10 +8047,6 @@ declare namespace LocalJSX {
           * Emitted when the toggle has focus.
          */
         "onIonFocus"?: (event: IonToggleCustomEvent<void>) => void;
-        /**
-          * Emitted when the styles change.
-         */
-        "onIonStyle"?: (event: IonToggleCustomEvent<StyleEventDetail>) => void;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          */

core/src/components/item/test/disabled/index.html

@@ -39,10 +39,6 @@
             <ion-label>Disabled Item Anchor</ion-label>
           </ion-item>
 
-          <ion-item>
-            <ion-toggle disabled checked> Disabled Toggle </ion-toggle>
-          </ion-item>
-
           <ion-item>
             <ion-checkbox disabled checked> Disabled Checkbox </ion-checkbox>
           </ion-item>
@@ -85,7 +81,6 @@
 
           <ion-item>
             <ion-checkbox aria-label="Checkbox" slot="start"></ion-checkbox>
-            <ion-toggle disabled value="45">Checkbox + Toggle</ion-toggle>
           </ion-item>
 
           <ion-item>

core/src/components/item/test/legacy/disabled/index.html

@@ -38,12 +38,6 @@
           <ion-item disabled href="#">
             <ion-label>Disabled Item Anchor</ion-label>
           </ion-item>
-
-          <ion-item>
-            <ion-label>Disabled Toggle</ion-label>
-            <ion-toggle disabled checked slot="end" legacy="true"></ion-toggle>
-          </ion-item>
-
           <ion-item>
             <ion-label>Disabled Checkbox</ion-label>
             <ion-checkbox disabled checked slot="start" legacy="true"></ion-checkbox>
@@ -85,12 +79,6 @@
             <ion-range disabled value="45"></ion-range>
           </ion-item>
 
-          <ion-item>
-            <ion-checkbox slot="start" legacy="true"></ion-checkbox>
-            <ion-label>Checkbox + Toggle</ion-label>
-            <ion-toggle disabled value="45"></ion-toggle>
-          </ion-item>
-
           <ion-item>
             <ion-checkbox disabled slot="start" legacy="true"></ion-checkbox>
             <ion-label>Checkbox + Buttons</ion-label>